/* ──────────────────────────────────────────────────────
   /ec/css/style.css
────────────────────────────────────────────────────── */




/* Base Styles */
body {
  font-family: sans-serif;
  background: #f9f9f9;
  margin: 0;
  padding: 2px;
}

h1, h2 {
  color: #333;
  border-bottom: 2px solid #ccc;
  padding-bottom: 5px;
}

/* カテゴリグリッド（元サイト用） */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.category-card {
  background: #fff;
  border: 1px solid #ffffff;
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  transition: box-shadow 0.3s;
}
.category-card:hover {
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* ランキングリスト（元サイト用） */
.ranking-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ranking-item {
  background: #fff;
  border: 1px solid #ccc;
  padding: 15px;
  margin-bottom: 20px;
  border-left: 5px solid #4CAF50;
  border-radius: 4px;
}
.ranking-item h3 {
  margin: 0 0 8px;
  font-size: 18px;
}
.ranking-item p {
  font-size: 14px;
  color: #555;
}

/* ボタン（汎用） */
button.add-to-cart {
  padding: 6px 10px;
  background: #4CAF50;
  border: none;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}
button.add-to-cart:hover {
  background: #45a049;
}

/* ヘッダー */
.site-header {
  background: #fff;
  border-bottom: 1px solid #ccc;
  padding: 10px 20px;
}
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.logo {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  text-decoration: none;
}
.main-nav a {
  margin-left: 15px;
  color: #333;
  text-decoration: none;
}
.main-nav a:hover {
  text-decoration: underline;
}
.search-form {
  margin-top: 10px;
  display: flex;
}
.search-form input[type="text"] {
  flex: 1;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
}
.search-form button {
  padding: 6px 12px;
  border: 1px solid #4CAF50;
  background: #4CAF50;
  color: #fff;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .header-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .main-nav {
    margin-top: 10px;
  }
  .search-form {
    flex-direction: column;
  }
  .search-form input[type="text"],
  .search-form button {
    width: 100%;
    box-sizing: border-box;
    margin: 4px 0;
  }
}

/* フッター */
.site-footer {
  background: #f2f2f2;
  padding: 20px;
  font-size: 14px;
  color: #333;
  text-align: center;
  border-top: 1px solid #ccc;
  margin-top: 40px;
}
.footer-nav {
  margin-bottom: 10px;
}
.footer-nav a,
.footer-policy a {
  color: #333;
  text-decoration: none;
  margin: 0 8px;
}
.footer-policy {
  margin-bottom: 5px;
  font-size: 13px;
  color: #777;
}
.footer-copy {
  font-size: 12px;
  color: #aaa;
}

/* ページレイアウト */
.page-container {
  display: flex;
  gap: 20px;
}
.main-content {
  flex: 3;
}
.sidebar {
  flex: 1;
  background: #f8f8f8;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
}
.sidebar-section {
  margin-bottom: 20px;
}
.sidebar-section h3 {
  margin-top: 0;
  font-size: 16px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 4px;
}

/* ──────────────────────────────────────────────────────
   BOXIL風UI / カテゴリ一覧・製品カード用スタイル
────────────────────────────────────────────────────── */
.l-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.c-breadcrumb {
  margin-bottom: 16px;
}
.c-breadcrumb__list {
  list-style: none;
  display: flex;
  font-size: 14px;
}
.c-breadcrumb__list li + li:before {
  content: '>';
  margin: 0 8px;
  color: #999;
}
.c-breadcrumb__list a {
  color: #555;
}
.c-breadcrumb__list a:hover {
  text-decoration: underline;
}

.c-ttl1 {
  font-size: 2rem;
  font-weight: bold;
  margin: 24px 0 16px;
  color: #333;
}

.p-lead {
  font-size: 1.1rem;
  color: #666;
  margin-bottom: 24px;
}

.p-top-cta {
  margin-bottom: 32px;
}
.c-btn--primary {
  background: #007bff;
  color: #fff;
  border: 1px solid #007bff;
}
.c-btn--primary:hover {
  background: #0069d9;
  border-color: #0062cc;
}
.c-btn--secondary {
  background: #6c757d;
  color: #fff;
  border: 1px solid #6c757d;
}
.c-btn--secondary:hover {
  background: #5a6268;
  border-color: #545b62;
}
.c-btn--outline {
  background: transparent;
  border: 1px solid #007bff;
  color: #007bff;
}
.c-btn--outline:hover {
  background: #007bff;
  color: #fff;
}

.p-page-mv {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.p-page-mv__count {
  font-size: 1rem;
  font-weight: bold;
}
.c-select {
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-left: 8px;
}

.l-grid2 {
  display: flex;
  gap: 24px;
}

.p-filter-panel {
  flex: 0 0 250px;
  background: #fff;
  padding: 16px;
  border: 1px solid #e9ecef;
  border-radius: 4px;
}




.p-company-card-list {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.p-company-card {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.p-company-card__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: inherit;
}
.p-company-card__img-wrap {
  width: 100%;
  padding-top: 56.25%;
  position: relative;
  overflow: hidden;
}
.p-company-card__img-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-company-card__body {
  flex: 1;
  padding: 16px;
}
.p-company-card__title {
  font-size: 1.125rem;
  margin-bottom: 8px;
}
.p-company-card__meta {
  font-size: 0.875rem;
  margin-bottom: 8px;
  color: #ff9900;
}
.p-company-card__text {
  font-size: 0.875rem;
  color: #666;
}
.p-company-card__cta {
  padding: 16px 24px;
  border-top: 1px solid #e9ecef;
  display: flex;
  align-items: center;
  justify-content: space-between; /* 左右均等配置 */
  gap: 12px;
}


.c-pagination {
  margin-top: 32px;
  text-align: center;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .l-grid2 {
    flex-direction: column;
  }
  .p-filter-panel {
    width: 100%;
    order: 2;
  }
  .p-company-card-list {
    order: 1;
  }
}

/* 横長カードレイアウト調整 */
.p-company-card-list {
  display: block; /* グリッドを解除して縦並びに */
  margin: 0;
  padding: 0;
}
.p-company-card {
  display: flex;
  align-items: flex-start;
  margin-bottom: 24px;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}
.p-company-card__link {
  display: flex;
  width: 100%;
}
.p-company-card__img-wrap {
  flex: 0 0 200px;      /* 画像横幅を固定 */
  padding-top: 0;       /* アスペクト比用パディングをリセット */
  height: 150px;        /* 高さを揃える */
  overflow: hidden;
}
.p-company-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-company-card__body {
  flex: 1;
  padding: 16px 24px;   /* 左右余白を広げてテキストを横長に */
}
.p-company-card__title {
  font-size: 1.25rem;
  margin-bottom: 8px;
}
.p-company-card__meta {
  margin-bottom: 12px;
}
.p-company-card__text {
  margin-bottom: 16px;
}
.p-company-card__cta {
  display: flex;
  gap: 12px;
  padding: 0 24px 16px;
  width: 100%;
}



/* ── ボタンスタイル（BOXIL風） ── */

/* まとめて資料を請求する */
.cta-orange-button {
  display: inline-block;
  padding: 12px 24px;
  background: #FF8C00;
  border: 1px solid #d67601;  /* BOXILオレンジに近い色 */
  color: #ffffff;              /* 同系色の太文字 */
  font-weight: bold;
  border-radius: 4px;
  text-decoration: none;
  text-align: center;
  font-size: 0.875rem;
  font-weight: bold;
}
.cta-orange-button:hover {
  opacity: 0.9;
  background: #ffffff;
  color: #d67601;
}





/* 比較表を作成する */
.btn-create-compare {
  display: inline-block;
  padding: 12px 24px;
  background: #edeef0;
  color: #2C3E50;    /* 濃いブルーの太文字 */
  font-weight: bold;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  text-align: center;
}
.btn-create-compare:hover {
  opacity: 0.9;
}



/* ── BOXILライク製品カード調整 ── */

/* カード全体 */
.p-company-card {
  background: #EEFFFF;             /* カード背景 */
  border: 1px solid #d0e6e6;
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 24px;
  display: block;                  /* 縦並び */
}

/* PRラベル */
.p-company-card__pr {
  display: inline-block;
  background: #A0D0C0;
  color: #fff;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 2px;
  margin-bottom: 8px;
}

/* ヘッダー：製品名リンク＋会社名 */
.p-company-card__header {
  margin-bottom: 12px;
}
.p-company-card__title {
  font-size: 1.25rem;
  margin: 0 0 4px;
}
.p-company-card__title a {
  color: #333;
  text-decoration: none;
}
.p-company-card__title a:hover {
  text-decoration: underline;
}
.p-company-card__company {
  font-size: 0.875rem;
  color: #666;
  margin: 0;
}

/* コンテンツ部：画像20%＋情報80% */
.p-company-card__content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.p-company-card__img-wrap {
  flex: 0 0 20%;
}
.p-company-card__img-wrap img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 2px;
}
.p-company-card__info {
  flex: 1;
}

/* レーティング＆口コミリンク */
.p-company-card__rating {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.p-company-card__stars {
  color: #ff9900;
  font-size: 1rem;
  margin-right: 8px;
}
.p-company-card__review-link {
  font-size: 0.875rem;
  color: #007bff;
  text-decoration: none;
}
.p-company-card__review-link:hover {
  text-decoration: underline;
}

/* 概要テキスト */
.p-company-card__desc {
  font-size: 0.875rem;
  color: #444;
  line-height: 1.4;
  margin: 0;
}

/* CTAボタン群 */
.p-company-card__footer {
  display: flex;
  gap: 12px;
  justify-content: flex-start;
  flex-wrap: wrap;
}


.btn-request-list-add {
  display: inline-block;
  padding: 12px 24px;
  background: #FF8C00;
  border: 1px solid #d67601;  /* BOXILオレンジに近い色 */
  color: #ffffff;              /* 同系色の太文字 */
  font-weight: bold;
  border-radius: 4px;
  text-decoration: none;
  text-align: center;
}
.btn-request-list-add:hover {
  background: #ffffff;
  color: #d67601;
}


.btn-request-list-add,
.btn-create-compare {
  font-size: 0.875rem;
  font-weight: bold;
}
.btn-request-list-add i,
.btn-create-compare i {
  margin-right: 4px;
}






/* ── ヘッダー共通／グローバルナビ ── */
.site-header {
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
}
.site-header__tagline {
  font-size: 0.875rem;
  text-align: center;
  padding: 4px 0;
  color: #666;
}
.site-header__main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px;
}
.site-header__left {
  display: flex;
  align-items: center;
}
.site-header__logo {
  height: 40px;
}
.site-header__logo-link {
  display: inline-block;
  margin-right: 24px;
}
.site-nav a {
  margin-right: 16px;
  color: #333;
  text-decoration: none;
  font-weight: bold;
}
.site-nav a:hover {
  text-decoration: underline;
}
.site-header__right {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* 「資料請求リスト」ボタン */
.btn-request-list {
  background: #2C3E50;
  color: #fff;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
}
.btn-request-list i {
  margin-right: 6px;
}
.btn-request-list:hover {
  opacity: 0.9;
}
/* 「会員登録/ログイン」ボタン */
.btn-register-login {
  color: #2C3E50;
  font-weight: bold;
  background: transparent;
  border: none;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.2;
}
.btn-register-login:hover {
  text-decoration: underline;
}


/* ── 全体背景を真っ白に ── */
body {
  background: #fff !important;
}

/* ── ヘッダーの余白を極限まで狭く ── */
.site-header {
  background: #fff;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid #e0e0e0;
}

/* タグライン＋ロゴ */
.site-header__top {
  text-align: center;
  padding: 4px 0;
}
.site-header__tagline {
  font-size: 0.75rem;
  color: #666;
  line-height: 1;
}
.site-header__logo-link {
  display: inline-block;
  margin-top: 4px;
}
.site-header__logo {
  height: 48px; /* グローバルナビと同じ高さに合わせる */
  vertical-align: middle;
}

/* グローバルナビ＋検索＋右ボタン */
.site-header__main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  height: 56px; /* ロゴ+タグラインの高さに合わせる */
}

/* 左側メニュー＋検索を均等配置 */
.site-nav-left {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  gap: 16px;
}
.site-nav-left a {
  color: #333;
  text-decoration: none;
  font-weight: bold;
  white-space: nowrap;
}
.site-nav-left a:hover {
  text-decoration: underline;
}
/* 検索フォーム */
.site-search {
  display: flex;
  flex: 1;
  max-width: 300px;
  margin-left: 16px;
}
.site-search input[type="text"] {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 20px 0 0 20px;
  font-size: 0.875rem;
}
.site-search button {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-left: none;
  border-radius: 0 20px 20px 0;
  background: #fff;
  cursor: pointer;
}
.site-search button i {
  color: #666;
}

/* 右側ボタン */
.site-nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
.btn-request-list {
  background: #2C3E50;
  color: #fff;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  height: 40px;
  display: flex;
  align-items: center;
}
.btn-request-list i {
  margin-right: 6px;
}
.btn-request-list:hover {
  opacity: 0.9;
}
.btn-register-login {
  color: #2C3E50;
  font-weight: bold;
  text-align: center;
  background: transparent;
  border: none;
  font-size: 0.875rem;
  line-height: 1.2;
  height: 40px;
  display: flex;
  align-items: center;
}
.btn-register-login:hover {
  text-decoration: underline;
}

/* パンくずリスト：グローバルナビ直下、余白をなくす */
.c-breadcrumb {
  margin: 0;
  padding: 0 16px 4px;
}
.c-breadcrumb__list {
  list-style: none;
  display: flex;
  font-size: 0.75rem;
  gap: 4px;
}
.c-breadcrumb__list li + li:before {
  content: '>';
  margin: 0 4px;
  color: #999;
}
.c-breadcrumb__list a {
  color: #555;
}
.c-breadcrumb__list a:hover {
  text-decoration: underline;
}

/* 全体背景を真っ白に */
body {
  background: #fff !important;
}

/* ヘッダー全体 */
.site-header {
  background: #fff;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #e0e0e0;
}

/* タグライン */
.site-header__tagline {
  font-size: 0.75rem;
  text-align: center;
  color: #666;
  padding: 4px 0;
}

/* メインナビ行 */
.site-header__main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 56px;           /* ロゴ＋タグラインに合わせる */
  padding: 0 16px;
}

/* 左側：ロゴ＋ナビ */
.site-header__left {
  display: flex;
  align-items: center;
  gap: 24px;
}
.site-header__logo {
  height: 40px;
}
.site-header__logo-link {
  display: inline-block;
}

/* 左ナビリンク */
.site-nav-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.site-nav-left a {
  font-weight: bold;
  color: #333;
  text-decoration: none;
}
.site-nav-left a:hover {
  text-decoration: underline;
}

/* 検索フォーム */
.site-search {
  display: flex;
  align-items: center;
  max-width: 300px;
}
.site-search input[type="text"] {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 20px 0 0 20px;
}
.site-search button {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-left: none;
  border-radius: 0 20px 20px 0;
  background: #fff;
  cursor: pointer;
}
.site-search button i {
  color: #666;
}

/* 右側ボタン */
.site-nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.btn-request-list {
  background: #2C3E50;
  color: #fff;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  height: 40px;
  display: flex;
  align-items: center;
}
.btn-request-list i {
  margin-right: 6px;
}
.btn-request-list:hover {
  opacity: 0.9;
}
.btn-register-login {
  color: #2C3E50;
  font-weight: bold;
  background: transparent;
  border: none;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.2;
  height: 40px;
  display: flex;
  align-items: center;
}
.btn-register-login:hover {
  text-decoration: underline;
}

/* パンくずリスト：グローバルナビ直下に余白なし */
.c-breadcrumb {
  margin: 0;
  padding: 0 16px 4px;
}
.c-breadcrumb__list {
  list-style: none;
  display: flex;
  font-size: 0.75rem;
  gap: 4px;
}
.c-breadcrumb__list li + li:before {
  content: '>';
  margin: 0 4px;
  color: #999;
}
.c-breadcrumb__list a {
  color: #555;
  text-decoration: none;
}
.c-breadcrumb__list a:hover {
  text-decoration: underline;
}



/* ── ヘッダー全体をフレックスで一行に ── */
.site-header {
  background: #fff;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #e0e0e0;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  height: 72px; /* タグライン＋ロゴ行の高さに合わせる */
}

/* ── タグライン＋ロゴ ── */
.site-header__branding {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.site-header__tagline {
  font-size: 0.75rem;
  color: #666;
  margin-bottom: 4px;
}
.site-header__logo {
  height: 48px;
}

/* ── 中央ナビ ── */
.site-nav {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: space-between; /* ロゴと右アクションの間で均等配置 */
  max-width: 600px;
  margin: 0 24px;
}
.site-nav a {
  color: #333;
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a:hover {
  text-decoration: underline;
}

/* 検索フォーム */
.site-search {
  display: flex;
  flex: 1;
  margin-left: 16px;
}
.site-search input[type="text"] {
  flex: 1;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 20px 0 0 20px;
  font-size: 0.875rem;
}
.site-search button {
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-left: none;
  border-radius: 0 20px 20px 0;
  background: #fff;
  cursor: pointer;
}
.site-search button i {
  color: #666;
}

/* ── 右側アクション ── */
.site-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.btn-request-list {
  background: #2C3E50;
  color: #fff;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  height: 40px;
}
.btn-request-list i {
  margin-right: 6px;
}
.btn-register-login {
  color: #2C3E50;
  font-weight: bold;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.2;
  height: 40px;
  display: flex;
  align-items: center;
}
.btn-register-login:hover {
  text-decoration: underline;
}

/* ── パンくずリスト：余白を極限まで削減 ── */
.c-breadcrumb {
  margin: 0;
  padding: 0 16px 4px;
}
.c-breadcrumb__list {
  list-style: none;
  display: flex;
  font-size: 0.75rem;
  gap: 4px;
}
.c-breadcrumb__list li + li:before {
  content: '>';
  margin: 0 4px;
  color: #999;
}
.c-breadcrumb__list a {
  color: #555;
  text-decoration: none;
}
.c-breadcrumb__list a:hover {
  text-decoration: underline;
}


/* ── ヘッダー下のボーダー ── */
.site-header {
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
  margin: 0;
  padding: 0;
}

/* ヘッダー内コンテナ */
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  height: 72px; /* ブランド高さに合わせる */
}

/* ブランド（タグライン＋ロゴ） */
.site-header__branding {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.site-header__tagline {
  font-size: 0.75rem;
  color: #666;
  margin-bottom: 4px;
}
.site-header__logo {
  height: 48px;
}

/* 中央ナビ */
.site-nav {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: space-between; /* 左右余白を均等化 */
  max-width: 600px;
  margin: 0 24px;
}
.site-nav a {
  font-weight: bold;
  color: #333;
  text-decoration: none;
}
.site-nav a:hover {
  text-decoration: underline;
}
/* 検索フォーム */
.site-search {
  display: flex;
  flex: 1;
  margin-left: 16px;
}
.site-search input {
  flex: 1;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 20px 0 0 20px;
}
.site-search button {
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-left: none;
  border-radius: 0 20px 20px 0;
  background: #fff;
  cursor: pointer;
}

/* アクション */
.site-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.btn-request-list {
  background: #2C3E50;
  color: #fff;
  font-weight: bold;
  padding: 0px 16px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  height: 40px;
}
.btn-request-list i {
  margin-right: 6px;
}
.btn-register-login {
  color: #2C3E50;
  font-weight: bold;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.2;
  height: 40px;
  display: flex;
  align-items: center;
}
.btn-register-login:hover {
  text-decoration: underline;
}

/* パンくずラッパー */
.breadcrumb-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px 4px;
}
/* パンくず */
.c-breadcrumb {
  margin: 0;
  padding: 0;
}
.c-breadcrumb__list {
  list-style: none;
  display: flex;
  font-size: 0.75rem;
  gap: 4px;
}
.c-breadcrumb__list li + li:before {
  content: '>';
  margin: 0 4px;
  color: #999;
}
.c-breadcrumb__list a {
  color: #555;
  text-decoration: none;
}
.c-breadcrumb__list a:hover {
  text-decoration: underline;
}


/* ページヘッダー上部のバナー画像 */
.p-page-header-image {
  text-align: center;
  margin-bottom: 24px;
}
.p-page-header__image {
  max-width: 33%;  /* 画像幅を画面幅の1/3に制限 */
  height: auto;
  display: inline-block;
}

/* サイドバナーを枠内フィット */
.sidebar-banner img {
  width: 100%;       /* パネルの内側幅いっぱいに */
  height: auto;
  display: block;    /* インライン余白を消す */
  border-radius: 4px;/* パネルの丸みと合わせる */
}
/* 件数＆ソートのラベル */
.p-page-mv__right {
  display: flex;
  align-items: center;
  gap: 8px; /* ラベルとセレクトの間隔 */
}
.p-page-mv__label {
  font-size: 0.875rem;
  color: #333;
}



/* 右側アクション群全体 */
.site-actions-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;           /* リンクとボタンの間隔 */
}

/* 資料掲載ご希望リンク */
.site-actions-intro a {
  color: #999;
  font-size: 0.75rem;
  text-decoration: none;
}
.site-actions-intro a:hover {
  text-decoration: underline;
}

/* 既存 .site-actions はそのまま ↓ */
.site-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* site-header__inner の高さいっぱいに収める */
.site-actions-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;  /* 上下センター */
  height: 100%;             /* 親の高さを継承 */
  gap: 4px;
}
/* site-actions-wrapper の高さいっぱいに収めるため、site-actions も継承 */
.site-actions {
  display: flex;
  align-items: center; /* ボタンを上下中央に */
  height: 100%;        /* 親の高さをそのまま使う */
  gap: 12px;
}


/* 会社情報セクション */
.p-product-company-info {
  margin-top: 48px;
}
.p-product-company-info h2 {
  font-size: 1.25rem;
  margin-bottom: 16px;
  color: #333;
}
.p-company-wrapper {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
/* 「会社情報」ロゴ枠を1.25倍に拡大 */
.p-company-logo {
  flex: 0 0 250px;  /* もともと200pxを1.25倍 */
}
.p-company-logo img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* 情報リスト */
.p-company-info {
  flex: 1;
}
.p-company-row {
  display: flex;
  margin-bottom: 12px;
}
.p-company-row dt {
  flex: 0 0 100px;
  font-weight: bold;
  color: #555;
}
.p-company-row dd {
  flex: 1;
  margin: 0;
  color: #333;
  border-bottom: 1px dashed #ccc;
  padding-bottom: 4px;
}
.p-company-row:last-child dd {
  border-bottom: none;
}

.p-product-subtitle {
  font-size: 0.875rem;
  color: #666;
  margin: 4px 0;
}
.badge-official {
  display: inline-block;
  background: #eee;
  color: #333;
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 2px;
  margin-left: 8px;
}
.p-product-lead {
  font-size: 0.875rem;
  color: #555;
  margin-top: 8px;
}


/* 概要サマリー（3カラム） */
.p-product-summary {
  display: flex;
  gap: 16px;            /* ボックス間の余白 */
  margin: 24px 0;       /* 上下の余白 */
}
.p-summary-box {
  flex: 1;              /* 均等幅 */
  background: #FFF8E4;  /* BOXIL 風の薄いオレンジ背景 */
  border: 1px solid #F9E0A3;
  border-radius: 4px;
  padding: 16px;
  box-sizing: border-box;
}
.p-summary-box h2 {
  margin-top: 0;
  font-size: 1rem;
  color: #333;
}
.p-summary-box ul {
  margin: 8px 0;
  padding-left: 1.2em;
}
.p-summary-box ul li {
  margin-bottom: 4px;
}
.p-summary-box p {
  margin: 8px 0;
}
.p-summary-link {
  display: inline-block;
  margin-top: 12px;
  color: #007C84;
  font-weight: bold;
  text-decoration: none;
}
.p-summary-link:hover {
  text-decoration: underline;
}
/* 製品トップ全体をロゴ＋情報/CTA の２カラム */
.p-product-header {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* ロゴ幅は全体の約1/3 */
.p-product-header__logo {
  flex: 0 0 33%;
}
.p-product-header__logo img {
  width: 100%;
  height: auto;
  display: block;
}

/* 右側：情報＋CTA を左右２分割 */
.p-product-header__info {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* 左：情報エリア */
.p-product-header__info-left {
  flex: 1;
}

/* 右：CTAエリア */
.p-product-header__info-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

/* CTAボタンのサイズ揃え */
.p-product-header__info-right .cta-orange-button,
.p-product-header__info-right .btn-create-compare {
  width: 200px;
}


/* 製品画像を全幅で上に */
.p-product-header__image {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 24px;
}

/* 情報＋CTA の２カラムラッパー */
.p-product-header__info-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 32px;
}

/* 左：情報エリア */
.p-product-header__info-left {
  flex: 1;
}

/* 右：CTAエリア */
.p-product-header__info-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

/* CTAボタン固定幅 */
.p-product-header__info-right .cta-orange-button,
.p-product-header__info-right .btn-create-compare {
  width: 200px;
}

/* 製品トップ：ロゴ画像を小さく左寄せ */
.p-product-header__image {
  width: 30%;        /* コンテナ幅の約30%程度に */
  max-width: 240px;  /* 上限を240pxに */
  height: auto;
  display: block;
  margin: 0 24px 24px 0; /* 右と下に適度な余白 */
}
/* 情報＋CTA ラッパーの左マージンを広めに */
.p-product-header__info-wrapper {
  margin-left: 28px;  /* これまでの余白より少し大きめ */
}

/* 左：情報エリアを flex:1 に */
.p-product-header__info-left {
  flex: 1;
}

/* 右：CTAエリアを情報エリアの2倍の幅に */
.p-product-header__info-right {
  flex: 2;
}



/* CTAボタンを1.5倍サイズに拡大 */
.p-product-header__info-right .cta-orange-button,
.p-product-header__info-right .btn-create-compare {
  /* paddingを1.5倍 */
  padding: 12px 24px;
  /* 幅を1.5倍 (200px→300px) */
  width: 300px;
  /* 高さを1.5倍 (40px→60px) */
  height: 60px;
  /* テキスト中央寄せのためにdisplayをflexに */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* フォントサイズも少し大きめにしてバランスを取るなら… */
  /* font-size: 1rem; */
}

/* CTAボタン内文字を1.5倍に */
.p-product-header__info-right .cta-orange-button,
.p-product-header__info-right .btn-create-compare {
  font-size: 1.5em;  /* 元の文字サイズの1.5倍 */
}


/* style.css の末尾に追加 */
/* 料金プラン編集を３カラムに */
.p-plans-edit {
  display: flex;
  gap: 16px;
  margin-bottom: 32px;
}
.p-plan-edit {
  flex: 1;
  background: #fafafa;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}
.p-plan-edit label {
  display: block;
  margin-top: 8px;
  font-weight: bold;
}
.p-plan-edit input,
.p-plan-edit textarea {
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
}

/* style.css の末尾に追加 */
/* 画面/UI 編集を横並びに */
.p-ui-edit {
  display: flex;
  gap: 16px;
  margin-bottom: 32px;
}
.p-ui-item-edit {
  flex: 1;
  background: #fafafa;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}
.p-ui-item-edit label {
  display: block;
  margin-top: 8px;
  font-weight: bold;
}
.p-ui-item-edit input[type="file"],
.p-ui-item-edit input[type="text"],
.p-ui-item-edit textarea {
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
}
/* コンテナは左寄せ */
.ui-gallery {
  width: 100%;
  margin: 40px 0;   /* 上下40px、左右0 */
}

/* 中身だけ最大幅800pxで中央寄せ */
.ui-gallery .ui-main,
.ui-gallery .ui-thumbs {
  max-width: 800px;
  margin: 0 auto;  /* 左右自動マージンで中央寄せ */
}

/* 既存スタイルはそのまま */
.ui-main-img-wrapper { position: relative; }
#ui-main-img { width: 100%; border: 1px solid #ccc; border-radius: 4px; }
.ui-zoom-btn {
  position: absolute; top: 10px; right: 10px;
  background: rgba(255,255,255,0.8); border: none; font-size: 1.5em;
  cursor: pointer; border-radius: 50%;
}
.ui-main h3 { margin: 12px 0 6px; }
.ui-main p  { margin: 0 0 20px; color: #555; }
.ui-thumbs { display: flex; gap: 10px; overflow-x: auto; padding-top: 20px; }
.ui-thumbs img { width: 100px; height: auto; cursor: pointer; opacity: 0.6; border: 2px solid transparent; border-radius: 4px; }
.ui-thumbs img.active { opacity: 1; border-color: #007bff; }

/* --- サムネイルコンテナ --- */
.ui-thumbs {
  display: flex;
  justify-content: center;    /* 中央揃え */
  align-items: center;
  gap: 10px;                  /* サムネイル間の余白 */
  overflow-x: auto;           /* 横スクロール可能 */
  padding: 10px 0;
  height: 160px;              /* 縦幅を1.6倍に */
  box-sizing: border-box;
}

/* --- サムネイル画像 --- */
.ui-thumbs .ui-thumb {
  flex: 0 0 auto;
  width: 100px;
  height: 100px;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.6;
  border: 2px solid transparent;
  border-radius: 4px;
  transition: opacity 0.3s, border-color 0.3s;
}
.ui-thumbs .ui-thumb.active {
  opacity: 1;
  border-color: #2C3E50;       /* 強調色 */
}

/* --- ナビゲーション矢印（prev/next） --- */
.ui-thumbs .carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: rgba(255,255,255,0.8);
  border: none;
  font-size: 24px;
  color: #2C3E50;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.ui-thumbs .carousel-nav.prev { left: 10px; }
.ui-thumbs .carousel-nav.next { right: 10px; }

/* --- ドットインジケーター --- */
.ui-thumbs .carousel-dots {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.ui-thumbs .carousel-dot {
  width: 10px;
  height: 10px;
  background: #ccc;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s;
}
.ui-thumbs .carousel-dot.active {
  background: #2C3E50;         /* 強調色 */
}

/* サムネイルコンテナに薄いグレー背景を設定 */
.ui-thumbs {
  background-color: #f5f5f5;  /* 薄いグレー */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  padding: 10px 0;
  height: 160px;
  box-sizing: border-box;
}

.ui-thumbs {
  position: relative;
  background-color: #f5f5f5;   /* 薄いグレー背景 */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  padding: 10px 40px;         /* 両端にボタン分の余白を確保 */
  height: 160px;
  box-sizing: border-box;
}

/* サムネイル画像 */
.ui-thumbs .ui-thumb {
  flex: 0 0 auto;
  width: 100px;
  height: 100px;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.6;
  border: 2px solid transparent;
  border-radius: 4px;
  transition: opacity 0.3s, border-color 0.3s;
}
.ui-thumbs .ui-thumb.active {
  opacity: 1;
  border-color: #2C3E50;
}

/* 左右ナビボタン */
.thumb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: rgba(0,0,0,0.1);
  border: none;
  font-size: 20px;
  color: #2C3E50;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.thumb-nav.prev { left: 10px; }
.thumb-nav.next { right: 10px; }

/* メイン画像にカーソルをポインターに */
#ui-main-img {
  cursor: pointer;
}
/* ２カラムラッパー */
.p-detail-two-column {
  display: flex;
  gap: 20px;          /* カラム間の余白 */
  margin-top: 40px;
}

/* 左カラム：2/3 */
.p-detail-main {
  flex: 2;            /* 全体を3としたとき、2の幅を占める */
}

/* 右カラム：1/3 */
.p-detail-sidebar {
  flex: 1;            /* 全体のうち1の幅を占める */
}

/* レスポンシブ：狭い画面では縦並びに */
@media screen and (max-width: 768px) {
  .p-detail-two-column {
    flex-direction: column;
  }
  .p-detail-sidebar {
    margin-top: 20px;
  }
}


/* 右カラムを追従させる */
.p-detail-sidebar {
  position: sticky;
  top: 20px;      /* 画面上部からの余白 */
  align-self: flex-start; /* Flex コンテナ内で上寄せ */
}

/* ULを囲むラッパー：隙間1px＋超薄いグレー背景 */
.sidebar-related-wrapper {
  background-color: #fafafa; /* かなり薄いグレー */
  padding: 1px;
  border-radius: 4px;
  margin-bottom: 20px;      /* リスト下の余白 */
}

/* バナーエリア */
.p-product-header {
  position: relative;
  margin-bottom: 40px;
}
.p-product-banner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* 製品ロゴをバナーからはみ出して重ねる */
.p-product-logo {
  position: absolute;
  top: 100%;             /* バナー下端に */
  left: 24px;            /* バナー左端からの余白 */
  transform: translateY(-65%); /* バナーから50%はみ出す */
  width: 120px;          /* ロゴ幅 */
  height: 120px;         /* ロゴ高さ */
  object-fit: contain;
  background-color: #fff; /* 透明ロゴにも白背景を付与 */
  padding: 8px;          /* 白背景の余白 */
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  z-index: 1;
}

/* おすすめポイントの見出しとアイコンをオレンジに */
.p-recommend-heading {
  color: #FF8C00;
  font-weight: bold;
  margin-bottom: 8px;
}

.p-recommend-heading i.fa-lightbulb {
  color: inherit;   /* 見出しと同じ色を継承 */
  margin-right: 8px;
}
/* 料金プラン全体 */
.p-plans {
  margin: 40px 0;
}
.p-plans__list {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* 各プランカード */
.p-plan-item {
  flex: 1;
  min-width: 200px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ヘッダー：プラン名、背景オレンジ・白文字太字 */
.p-plan-item__header {
  background-color: #2C3E50;
  padding: 12px;
  text-align: center;
}
.p-plan-item__header h3 {
  color: #fff;
  margin: 0;
  font-weight: bold;
  font-size: 1.1em;
}

/* 月額表示 */
.p-plan-item__price {
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
  color: #FF8C00;
  padding: 16px 12px;
}

/* 詳細リスト */
.p-plan-item__details {
  list-style: none;
  margin: 0;
  padding: 0 12px;
  flex: 1;
}
.p-plan-item__details li {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  font-size: 0.9em;
  color: #555;
}
.p-plan-item__details li:last-child {
  border-bottom: none;
}

/* 備考（スクロール可） */
.p-plan-item__notes {
  max-height: 100px;
  overflow-y: auto;
  padding: 12px;
  border-top: 1px solid #eee;
  font-size: 0.85em;
  color: #666;
}
/* ヘッダー共通 */
.site-header {
  background: #fff;
  border-bottom: 1px solid #eee;
}
.site-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-logo a {
  font-size: 1.25em;
  font-weight: bold;
  color: #2C3E50;
  text-decoration: none;
}

/* ナビゲーション */
.site-nav {
  position: relative;
}
.nav-toggle {
  font-size: 1.5em;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-list {
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-list li a {
  text-decoration: none;
  color: #333;
  padding: 8px 0;
}

/* モバイル（幅768px以下） */
@media (max-width: 768px) {
  .nav-list {
    display: none;
    position: absolute;
    top: 100%;
    right: 16px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    flex-direction: column;
    width: 200px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  .nav-list.open {
    display: flex;
  }
  .nav-list li + li {
    border-top: 1px solid #eee;
  }
  .nav-list li a {
    padding: 12px 16px;
  }
}

@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }

  /* テーブルの横スクロール回避 */
  .product-plan-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  .product-plan-table table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
  }

  /* おすすめポイント */
  .recommend-points li {
    line-height: 1.5;
    margin-bottom: 12px;
    font-size: 14px;
  }

  /* UI画像スライダーの横幅調整 */
  .ui-carousel img,
  .ui-carousel {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* 会社情報セクション */
  .company-logo {
    max-width: 120px;
    margin: 0 auto 20px auto;
    display: block;
  }

  /* 各セクションの余白調整 */
  section,
  .block,
  .table-responsive {
    padding: 10px;
    margin-bottom: 20px;
  }
}

@media screen and (max-width: 768px) {
  .cta-button,
  .compare-button {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 10px auto;
    padding: 14px;
    font-size: 16px;
    text-align: center;
    white-space: normal; /* 改行を許可 */
  }
}
@media screen and (max-width: 768px) {
  .p-product-header__info-wrapper {
    display: block; /* 2カラムを縦並びに */
  }

  .p-product-header__info-left,
  .p-product-header__info-right {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: 16px;
  }

  .p-product-header__info-right {
    text-align: center;
  }

  .p-product-header__info-right a {
    display: inline-block;
    width: 90%;
    max-width: 300px;
    margin: 8px auto;
    font-size: 16px;
    padding: 12px;
    white-space: normal;
  }
}
@media screen and (max-width: 768px) {
  .p-company-wrapper {
    display: block;
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .p-company-logo {
    text-align: center;
    margin-bottom: 20px;
  }

  .p-company-logo img {
    max-width: 150px;
    height: auto;
  }

  .p-company-info {
    width: 100%;
  }

  .p-company-row {
    display: flex;
    flex-wrap: wrap;
    padding: 8px 0;
    border-bottom: 1px solid #ccc;
  }

  .p-company-row dt {
    width: 40%;
    font-weight: bold;
    font-size: 14px;
    box-sizing: border-box;
    padding-right: 8px;
  }

  .p-company-row dd {
    width: 60%;
    margin: 0;
    font-size: 14px;
    word-break: break-word;
  }
}


/* ===== ヘッダー右上（アクション）修正 ===== */
@media screen and (max-width: 768px) {
  .site-header__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px;
    box-sizing: border-box;
  }

  .site-header__actions a {
    display: inline-block;
    font-size: 14px;
    white-space: normal;
    word-break: break-word;
    max-width: 100%;
  }
}


/* ===== フッター固定バー修正 ===== */
@media screen and (max-width: 768px) {
  .cart-inner {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 12px;
    gap: 10px;
    box-sizing: border-box;
  }

  #cartBar span {
    text-align: center;
    font-size: 14px;
    word-break: break-word;
    white-space: normal;
  }

  #cartBar .btn {
    width: 100%;
    max-width: 100%;
    font-size: 16px;
    padding: 12px;
    box-sizing: border-box;
    text-align: center;
  }

  #cartBar .btn + .btn {
    margin-top: 6px;
  }
}

/* === 固定リクエストバー === */
#cartBar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: #222;
  color: #fff;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.4);
  z-index: 10000;
  font-size: 0.9rem;
}

.cart-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 16px;
  gap: 12px;
  box-sizing: border-box;
}

.cart-inner span {
  flex: 1 1 100%;
  text-align: center;
  word-break: break-word;
  white-space: normal;
}

#cartBar .btn {
  padding: 10px 16px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: normal;
  box-sizing: border-box;
  display: inline-block;
  text-align: center;
}

#cartBar .primary {
  background: #2C3E50;
  color: #fff;
}

#cartBar .green {
  background: #00b894;
  color: #fff;
}

#cartBar .gray {
  background: #555;
  color: #fff;
}

#cartBar .btn:hover {
  opacity: 0.85;
  text-decoration: none;
}

#cartBar .disabled {
  background: #888;
  /*
  pointer-events: none;
  */
}


/* === フッター === */
.site-footer {
  background: #2C3E50;
  color: #fff;
  padding: 40px 0 20px;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  font-size: 0.9rem;
}

.footer-block {
  flex: 1 1 240px;
  min-width: 200px;
}

.footer-heading {
  font-size: 1rem;
  margin-bottom: 8px;
  color: #ffffff;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin: 4px 0;
}

.footer-links a {
  color: #fff;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

.btn-publish {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 18px;
  background: #ff6b00;
  color: #fff;
  border-radius: 4px;
  font-weight: 700;
  text-decoration: none;
}

.btn-publish:hover {
  opacity: 0.85;
}

/* ========================================================================
   全体リセット・共通 ---------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: sans-serif;
  background: #fff;
  overflow-x: hidden;
}

/* ========================================================================
   ヘッダー基本スタイル (PC & タブレット 共通、変更なし)
   ======================================================================== */
.site-header {
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  height: 72px;
  position: relative;
}
.site-header__branding {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.site-header__tagline {
  font-size: 0.75rem;
  color: #666;
  margin-bottom: 4px;
}
.site-header__logo,
.site-header__logo-link img {
  height: 48px;
}

/* ──────────────────────────────────────────────────────
   Navigation (PC & Tablet ≥768px)
   ────────────────────────────────────────────────────── */
@media screen and (min-width: 768px) {
  /* グローバルナビ＋検索＋右アクションはそのまま横並び */
  .site-nav {
    display: flex !important;
    align-items: center;
    gap: 24px;
  }
  .nav-list {
    display: flex !important;
    list-style: none;
    gap: 24px;
  }
  .nav-list li.mobile-only {
    display: none !important;  /* モバイル専用項目は隠す */
  }
  .site-actions-wrapper {
    display: flex !important;
  }
  /* ハンバーガーボタンは出さない */
  .nav-toggle {
    display: none !important;
  }
}

/* ========================================================================
   PHONES ONLY (≤767px): 🍔 + ドロップダウンナビ
   ======================================================================== */
@media screen and (max-width: 767px) {

  /* 右側 PC アクションは隠す */
  .site-nav,
  .site-actions-wrapper {
    display: none !important;
  }

  /* ☰ トグルボタン（ヘッダー内で縦中央） */
  .nav-toggle {
    display: block !important;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    font-size: 28px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 2000;
  }

  /* ドロップダウンメニュー */
  .nav-list {
    display: none !important;
    position: absolute;
    top: 100%;      /* ヘッダー直下 */
    left: 0;
    width: 100%;    /* 画面幅いっぱい */
    background: #fff;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    z-index: 1999;
  }
  .nav-list.open {
    display: flex !important;
  }

  /* モバイル専用リンクだけ表示 */
  .nav-list li.mobile-only {
    display: block !important;
    padding: 8px 0;
    border-top: 1px solid #eee;
  }
  .nav-list li.desktop-only {
    display: none !important;
  }
}


/* 横幅1161px以下は2カラムレイアウト：左に縦並びのリンク、右に検索フォーム */
@media screen and (max-width: 1161px) {
  .site-nav .nav-list {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "category search"
      "ranking search" !important;
    gap: 8px !important;
  }
  .site-nav .nav-list li:nth-child(1) { grid-area: category !important; }
  .site-nav .nav-list li:nth-child(2) { grid-area: ranking !important; }
  .site-nav .nav-list li:nth-child(3) { grid-area: search !important; }
}

/* 横幅995px以下では検索フォームを非表示 */
@media screen and (max-width: 1007px) {
  .site-nav .site-search { display: none !important; }
}


/* ──────────── 固定バーをビューポート幅いっぱいに広げる ──────────── */
#cartBar {
  position: fixed;
  bottom: 0;
  left: 50%;
  /*
  transform: translateX(-50%);
  */
  width: 100vw !important;
  box-sizing: border-box;
  z-index: 999;
}

/* ──────────── 内部コンテナをフッターに合わせて中央寄せ ──────────── */
#cartBar .cart-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 0;
  box-sizing: border-box;
}
/* ────────── cartBar 用クラスをIDで強くスコープして競合を回避 ────────── */
#cartBar .btn.primary {
  /* ここにカートバー内の青ボタン固有スタイルを記述 */
  background: #2C3E50 !important;
  color: #fff !important;
}

#cartBar .btn.green {
  /* カートバー内の緑ボタン固有スタイル */
  background: #00b894 !important;
  color: #fff !important;
}

#cartBar .btn.gray {
  /* カートバー内のグレーボタン固有スタイル */
  background: #555 !important;
  color: #fff !important;
}

/* 必要なら .cart-inner, #cartBar など他のルールも同様に “#cartBar …” で始めてください */
/* ────────── カートバーの高さ分だけフッター下に余白を追加 ────────── */
.site-footer {
  /*
  margin-bottom: 80px !important; カートバーの高さに合わせて調整してください
  */
  position: relative !important;  /* 必要に応じて重なり順を制御 */
  z-index: 100 !important;        /* カートバー(z-index:99など)より大きければ、上に重なる */
}



/* レイアウト・セクション共通 */
.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 40px;
}

main > .section {
  margin-bottom: 56px;
}

/* セクションタイトル */
.section-title {
  font-size: 1.6rem;
  margin-bottom: 20px;
  border-left: 6px solid #2C3E50;
  padding-left: 10px;
}

/* 親・子カテゴリ */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}

.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 46px;
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.2s;
}

.category-card:hover {
  background: #eef6ff;
  transform: translateY(-2px);
}

/* アイコンとテキスト色 */
.category-card .category-icon,
.category-card .category-name {
  color: #2C3E50;
}

.category-card .category-icon {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}

/* 子カテゴリ切り替え */
.child-grid {
  display: none;
  animation: fade 0.25s;
}

.child-title {
  font-size: 1.2rem;
  margin: 0 0 24px;
  text-align: center;
  font-weight: 700;
}

.back-btn {
  background: none;
  border: none;
  color: #2C3E50;
  font-size: 0.9rem;
  cursor: pointer;
  margin-bottom: 16px;
}

/* ランキング・カード */
.ranking-list {
  counter-reset: rank;
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 520px;
}

.ranking-list li {
  counter-increment: rank;
  padding: 10px 0;
  font-size: 0.97rem;
}

.ranking-list li::before {
  content: counter(rank) "位";
  margin-right: 8px;
  font-weight: 700;
  color: #2C3E50;
}

.product-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}

.product-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 18px;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.product-card h3 {
  font-size: 1rem;
  margin: 0 0 10px;
  flex: 0;
}

.product-card p {
  font-size: 0.9rem;
  flex: 1;
  margin-bottom: 14px;
  line-height: 1.5;
}

.btn-small {
  align-self: flex-start;
  padding: 8px 14px;
  background: #2C3E50;
  color: #fff;
  border-radius: 4px;
  font-size: 0.85rem;
  text-decoration: none;
}

.btn-small:hover {
  background: #005ce1;
}

/* レスポンシブ */
@media (max-width: 980px) {
  .container {
    grid-template-columns: 1fr;
  }
}

/* 子カテゴリ表示アニメーション */
@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}




.category-icon,
.category-name {
  color: #2C3E50;
}
/* カテゴリ名の文字サイズ調整 */
.category-card .category-name {
  font-size: 0.85rem;  /* お好みで 0.8rem～0.9rem に調整 */
}
/* カテゴリカード：アイコン＋テキストを横並びに */
.category-card {
  /* flex-direction を縦 → 横に戻す */
  flex-direction: row;
}

/* アイコンの下マージンをリセットして、右マージンを追加 */
.category-card .category-icon {
  margin-bottom: 0;
  margin-right: 0.5rem;
}
.category-card {
  /* 横並びを維持しつつ、左寄せ */
  flex-direction: row;
  justify-content: flex-start;
  align-items: center; /* 垂直方向中央揃え */
  padding-left: 0.75rem; /* 左に余白が欲しい場合 */
}

.category-card .category-icon {
  margin-right: 0.5rem;  /* アイコンとテキストの間隔 */
  margin-bottom: 0;      /* 縦余白リセット */
}



/* ── First View ── */
.hero-firstview {
  width: 100%;
  margin-bottom: 3rem;
}

/* 背景画像＋赤帯＋タイトル部分 */

.hero-eyecatch__inner {
  text-align: center;
}

.hero-eyecatch__title {
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1.5;
  color: #000;
  margin: .75rem 0;
}




/* 検索ブロック */
.hero-search {
  background: #ECECEC;
}
.hero-search__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.hero-search__headline {
  font-size: 1.375rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: .5rem;
  color: #000;
}
.badge-new {
  background-color: #E60012;
  color: #fff;
  padding: 0 .5rem;
  border-radius: 4px;
  font-size: 1.1875rem;
  line-height: 1;
}
.hero-search__form {
  position: relative;
  width: 100%;
  max-width: 600px;
}
.hero-search__form input {
  width: 100%;
  padding: .75rem 2.5rem .75rem 1rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
}
.hero-search__form button {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  background: #E60012;
  color: #fff;
  border: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.hero-search__keywords {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  color: #000;
}
.hero-search__keywords span {
  font-weight: bold;
}
.hero-search__keywords a {
  display: inline-block;
  padding: .25rem .5rem;
  border: 1px solid #000;
  border-radius: 4px;
  text-decoration: none;
  color: #000;
}


/* ── おすすめキーワード ── */
.hero-search__keywords {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #2C3E50;
}

.hero-search__keywords span {
  font-weight: bold;
  margin-right: 0.5rem;
}

.hero-search__keywords a {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border: 1px solid #2C3E50;
  border-radius: 4px;
  text-decoration: none;
  color: #2C3E50;
  transition: background-color 0.2s, color 0.2s;
}

.hero-search__keywords a:hover {
  background-color: #2C3E50;
  color: #fff;
}







/* ── First View ── */
.hero-firstview {
  margin-bottom: 3rem;
}



/* キャッチコピー */
.hero-eyecatch__title {
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.2;
}
.hero-eyecatch__title .highlight {
  color: #E60012;
}

/* サブコピー */
.hero-eyecatch__sub {
  margin-top: 12px;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  opacity: 0.9;
}

/* 検索ブロック */
.hero-search {
  position: relative;
  margin-top: 20px; /* 背景と重ねる */
  z-index: 2;
}
.hero-search__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* NEWバッジ＋見出し */
.hero-search__headline {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: #2C3E50;
}
.hero-search__headline .badge-new {
  background-color: #E60012;
  color: #fff;
  padding: 0 .5rem;
  border-radius: 4px;
  font-size: 1rem;
  line-height: 1;
}

/* 検索フォーム：カード風＋シャドウ */
.hero-search__form {
  width: 100%;
  display: flex;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.hero-search__form input {
  flex: 1;
  padding: 14px 16px;
  border: none;
  font-size: 1rem;
}
.hero-search__form button {
  width: 56px;
  background: #E60012;
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* おすすめキーワード */
.hero-search__keywords {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #2C3E50;
}
.hero-search__keywords span {
  font-weight: 600;
}
.hero-search__keywords a {
  padding: .25rem .75rem;
  border: 1px solid #2C3E50;
  border-radius: 4px;
  text-decoration: none;
  color: #2C3E50;
  transition: background-color .2s, color .2s;
}
.hero-search__keywords a:hover {
  background-color: #2C3E50;
  color: #fff;
}

/* レスポンシブ微調整 */
@media (max-width: 640px) {
  .hero-eyecatch__title {
    font-size: 2rem;
  }
  .hero-search__form {
    flex-direction: column;
  }
  .hero-search__form button {
    width: 100%;
    border-radius: 0 0 8px 8px;
  }
}


/* ====== Hero Eyecatch タイトル ====== */
.hero-eyecatch__title {
  text-align: center;
  line-height: 1.2;
}
.hero-eyecatch__line1,
.eyecatch-text-find {
  display: block;
}

/* 「あなたの」「が」「きっと見つかる」の色 */
.eyecatch-text-normal,
.eyecatch-text-find {
  color: #2C3E50;
}

/* 強調部分 “ほしい” の色 */
.eyecatch-highlight {
  color: #E60012;
}

/* ── 赤帯リボン（完全置換用） ── */
.hero-eyecatch__ribbon {
  position: relative;
  display: inline-block;
  margin: 1rem auto 0;
  padding: 0.5em 1.5em;
  background-color: #E60012;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  line-height: 1;
}

/* 両端の三角形 */
.hero-eyecatch__ribbon::before,
.hero-eyecatch__ribbon::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border: 0.75em solid transparent;
}

.hero-eyecatch__ribbon::before {
  left: -1.5em;
  border-right-color: #E60012;
}

.hero-eyecatch__ribbon::after {
  right: -1.5em;
  border-left-color: #E60012;
}

/* レスポンシブ微調整 */
@media (max-width: 640px) {
  .hero-eyecatch__ribbon {
    font-size: 0.9rem;
    padding: 0.4em 1.2em;
  }
}


.hero-eyecatch {
  /* 上下に 2rem のマージンを設定 */
  margin: 2rem 0;
}
.section {
  margin-top: 1rem; /* 約16pxの余白が入ります。お好みで0.5rem（8px）～2rem（32px）などに調整を */
}
.section-title {
  margin-top: 1rem;  /* ルートフォントサイズ基準で約16px */
}



/* ===== コンテナ設定 ===== */
.e-cnct {
  max-width: 880px;
  margin: 40px auto 60px auto;
  padding: 0 18px; /* スマホ横余白 */
  box-sizing: border-box;
  width: 100%;
}

/* .e-cnct 内の section と section-title のみに余白を追加 */
.e-cnct .section {
  margin-top: 1rem; /* 必要に応じて調整 */
}

.e-cnct .section-title {
  margin-top: 1rem;
}

/* モバイル時に余白を少し詰める */
@media (max-width: 600px) {
  .e-cnct {
    margin: 24px 0 32px 0;
    padding: 0 8px;
    max-width: 100vw;
  }

  .e-cnct .section,
  .e-cnct .section-title {
    margin-top: 0.75rem;
  }
}

/* ===== 見出し ===== */
.e-cnct h1,
.e-cnct h2,
.e-cnct h3,
.e-cnct h4,
.e-cnct h5,
.e-cnct h6 {
  border: none !important;    /* 見出しの下線や枠線を消す */
  color: #333 !important;     /* 見出しカラー */
  margin-top: 2.2em;          /* 前にしっかり余白を空ける */
  margin-bottom: 0.6em;       /* 下も少し余白 */
  font-weight: 600;
}

.e-cnct h1 { font-size: 2rem; }
.e-cnct h2 { font-size: 1.2rem; }
.e-cnct h3 { font-size: 1.05rem; }
.e-cnct h4 { font-size: 1rem; }
.e-cnct h5 { font-size: 0.95rem; }
.e-cnct h6 { font-size: 0.95rem; }

/* ページ冒頭の見出しだけ余白を小さく */
.e-cnct h1:first-child,
.e-cnct h2:first-child,
.e-cnct h3:first-child {
  margin-top: 0.7em;
}

/* ===== リンク ===== */
.e-cnct a {
  color: #333 !important;
  text-decoration: none;
  border-bottom: 1px dotted #333;
  transition: border-bottom-color 0.2s;
}

.e-cnct a:hover,
.e-cnct a:focus {
  border-bottom: 1px solid #333;
  text-decoration: none;
  color: #111;
}





/* === ニュース詳細／プライバシー／クッキーポリシー領域に限定したスタイル === */

/* --- ボックス・セクション --- */
.newsDetail_body_box,
.e-cnct {
  max-width: 980px;
  margin: 40px auto 60px;
  background: #fff;
  padding: 32px 24px;
  box-shadow: 0 6px 24px rgba(40,60,70,.06);
  border-radius: 16px;
  font-family: 'Noto Sans JP', 'Helvetica Neue', Arial, 'メイリオ', sans-serif;
  color: #333;
  line-height: 1.8;
}
.newsDetail_section {
  margin-bottom: 40px;
}

/* --- 見出し・タイトル --- */
.newsDetail_heading-h2,
.e-cnct h2,
.e-cnct h3,
.e-cnct h4,
.ot-sdk-cookie-policy-group {
  color: #333;
  font-weight: 600;
  border: none;
  padding: 0;
}
.newsDetail_heading-h2 {
  font-size: 1.2rem;
  margin: 32px 0 18px;
}
.ot-sdk-cookie-policy-group {
  font-size: 1.05rem;
  margin: 28px 0 10px;
}
.e-cnct h2 { font-size: 1.4em; margin: 2.5em 0 0.6em; }
.e-cnct h3 { font-size: 1.15em; margin: 2em 0 0.6em; }
.e-cnct h4 { font-size: 1em; margin: 1.4em 0 0.6em; }

/* --- グループ内テキスト --- */
.ot-sdk-cookie-policy-group-desc,
.m-accordionList_bodyInner,
.m-dataList_data {
  color: #444;
}
.ot-sdk-cookie-policy-group-desc {
  font-size: 1rem;
  margin-bottom: 12px;
}

/* === データリストDL表示（scoped） === */
.newsDetail_body_box .m-dataList_item,
.e-cnct .m-dataList_item {
  display: flex;
  margin-bottom: 8px;
}
.newsDetail_body_box .m-dataList_title,
.e-cnct .m-dataList_title {
  width: 180px;
  min-width: 110px;
  font-weight: 600;
  color: #555;
  font-size: 0.98rem;
}
.newsDetail_body_box .m-dataList_data,
.e-cnct .m-dataList_data {
  flex: 1;
  font-size: 0.98rem;
}

/* === テーブル（scoped to these containers） === */
.newsDetail_body_box table,
.e-cnct table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 30px;
  font-size: 0.96rem;
  background: #fff;
}
.newsDetail_body_box table th,
.newsDetail_body_box table td,
.e-cnct table th,
.e-cnct table td {
  border: 1px solid #e3e6e8;
  padding: 8px 10px;
  text-align: left;
}
.newsDetail_body_box table th,
.e-cnct table th {
  background: #f7f8fa;
  font-weight: 600;
  color: #222;
}
.newsDetail_body_box caption,
.e-cnct caption {
  font-size: 0.9em;
  color: #888;
  margin-bottom: 6px;
}

/* === アコーディオンリスト（scoped） === */
.newsDetail_body_box .m-accordionList_item,
.e-cnct .m-accordionList_item {
  border-bottom: 1px solid #e0e3ea;
}
.newsDetail_body_box .m-accordionList_header,
.e-cnct .m-accordionList_header {
  padding: 12px 0 12px 6px;
  font-size: 1.03rem;
  background: none;
  border: none;
  cursor: pointer;
}
.newsDetail_body_box .m-accordionList_header a,
.e-cnct .m-accordionList_header a {
  color: #444;
  text-decoration: none;
  display: block;
}
.newsDetail_body_box .m-accordionList_body,
.e-cnct .m-accordionList_body {
  background: #fafbfc;
  padding: 12px 16px 10px 20px;
  font-size: 0.98rem;
}

/* === リンク（点線・色、scoped） === */
.newsDetail_body_box a,
.e-cnct a,
.newsDetail_body_box .m-iconLink-link,
.e-cnct .m-iconLink-link {
  color: #333;
  text-decoration: underline dotted 2px;
  text-underline-offset: 2.5px;
  transition: color .2s;
}
.newsDetail_body_box a:hover,
.e-cnct a:hover,
.newsDetail_body_box .m-iconLink-link:hover,
.e-cnct .m-iconLink-link:hover {
  color: #0072bc;
  text-decoration: underline solid 2px;
}

/* === ボタン・設定ボタン（scoped） === */
.newsDetail_body_box #ot-sdk-btn,
.e-cnct #ot-sdk-btn,
.newsDetail_body_box .ot-sdk-show-settings,
.e-cnct .ot-sdk-show-settings {
  display: inline-block;
  background: #fff;
  color: #333;
  border: 1.5px solid #bbb;
  border-radius: 6px;
  padding: 7px 24px;
  font-size: 1rem;
  font-weight: 500;
  margin-top: 15px;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.newsDetail_body_box #ot-sdk-btn:hover,
.e-cnct #ot-sdk-btn:hover,
.newsDetail_body_box .ot-sdk-show-settings:hover,
.e-cnct .ot-sdk-show-settings:hover {
  background: #f2f6fa;
  border-color: #0072bc;
}

/* === 汎用ユーティリティはそのまま（footerには影響なし） === */
.u-font-medium { font-weight: 500; font-size: 1.01em; }
.u-my-2em { margin: 2em 0 !important; }

/* === レスポンシブ対応も同様にscoped === */
@media (max-width: 750px) {
  .newsDetail_body_box,
  .e-cnct {
    padding: 16px 3vw;
    border-radius: 7px;
  }
  .newsDetail_heading-h2 { margin: 22px 0 12px; font-size: 1.02rem; }
  .ot-sdk-cookie-policy-group { margin: 18px 0 7px; font-size: 0.99rem; }
  .newsDetail_body_box .m-dataList_title,
  .newsDetail_body_box .m-dataList_data,
  .e-cnct .m-dataList_title,
  .e-cnct .m-dataList_data { font-size: 0.95rem; }
  .newsDetail_body_box table th,
  .newsDetail_body_box table td,
  .e-cnct table th,
  .e-cnct table td { font-size: 0.93rem; padding: 7px 6px; }
  .newsDetail_body_box .m-accordionList_body,
  .e-cnct .m-accordionList_body { padding: 10px 5vw 7px 4vw; }
}



/* ===== コンテナ設定 ===== */
.e-cnct {
  max-width: 880px;
  margin: 40px auto 60px auto;
  padding: 0 18px; /* スマホ横余白 */
  box-sizing: border-box;
  width: 100%;
}

/* .e-cnct 内の section と section-title のみに余白を追加 */
.e-cnct .section {
  margin-top: 1rem; /* 必要に応じて調整 */
}

.e-cnct .section-title {
  margin-top: 1rem;
}

/* モバイル時に余白を少し詰める */
@media (max-width: 600px) {
  .e-cnct {
    margin: 24px 0 32px 0;
    padding: 0 8px;
    max-width: 100vw;
  }

  .e-cnct .section,
  .e-cnct .section-title {
    margin-top: 0.75rem;
  }
}

/* ===== 見出し ===== */
.e-cnct h1,
.e-cnct h2,
.e-cnct h3,
.e-cnct h4,
.e-cnct h5,
.e-cnct h6 {
  border: none !important;    /* 見出しの下線や枠線を消す */
  color: #333 !important;     /* 見出しカラー */
  margin-top: 2.2em;          /* 前にしっかり余白を空ける */
  margin-bottom: 0.6em;       /* 下も少し余白 */
  font-weight: 600;
}

.e-cnct h1 { font-size: 2rem; }
.e-cnct h2 { font-size: 1.2rem; }
.e-cnct h3 { font-size: 1.05rem; }
.e-cnct h4 { font-size: 1rem; }
.e-cnct h5 { font-size: 0.95rem; }
.e-cnct h6 { font-size: 0.95rem; }

/* ページ冒頭の見出しだけ余白を小さく */
.e-cnct h1:first-child,
.e-cnct h2:first-child,
.e-cnct h3:first-child {
  margin-top: 0.7em;
}

/* ===== リンク ===== */
.e-cnct a {
  color: #333 !important;
  text-decoration: none;
  border-bottom: 1px dotted #333;
  transition: border-bottom-color 0.2s;
}

.e-cnct a:hover,
.e-cnct a:focus {
  border-bottom: 1px solid #333;
  text-decoration: none;
  color: #111;
}

















/* サイドバー会員登録ボックス */
.sidebar-register-box {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  padding: 18px 18px 12px 18px;
  margin-bottom: 24px;
  text-align: center;
  border: 1px solid #eee;
}

.sidebar-register-box .register-illust {
  margin-bottom: 10px;
}

.sidebar-register-box .register-title {
  font-size: 1.1rem;
  margin-bottom: 10px;
  font-weight: 500;
  line-height: 1.4;
}

.sidebar-register-box .register-title-red {
  color: #d70023;
  font-weight: 700;
}

.sidebar-register-box .btn-register {
  display: block;
  background: linear-gradient(90deg,#ff4747 0,#ff7f36 100%);
  color: #fff;
  border-radius: 7px;
  font-weight: 700;
  font-size: 1.08rem;
  margin-bottom: 10px;
  padding: 12px 0;
  text-decoration: none;
  box-shadow: 0 1px 4px rgba(220,0,0,0.08);
  transition: background 0.2s;
}

.sidebar-register-box .btn-register:hover {
  background: #d70023;
}

.sidebar-register-box .label-free {
  background: #fff;
  color: #d70023;
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 0.90em;
  margin-left: 8px;
  font-weight: 700;
  border: 1px solid #fff;
}

.sidebar-register-box .btn-login {
  display: block;
  background: #232323;
  color: #fff;
  border-radius: 7px;
  font-weight: 700;
  font-size: 1.08rem;
  padding: 12px 0;
  text-decoration: none;
  transition: background 0.2s;
}

.sidebar-register-box .btn-login:hover {
  background: #444;
}



/* ▼ 共通レイアウト（PC／タブレット） */
.p-plans__list {
  display: flex;
  flex-wrap: wrap;          /* 3 枚並べて余ったら折り返し */
  gap: 16px;                /* アイテム間の余白 */
}

.p-plan-item {
  flex: 1 1 calc(33.333% - 16px); /* 3 カラム */
  box-sizing: border-box;
}

/* ▼ モバイル幅だけ 1 カラムに変更 */
@media (max-width: 600px) {  /* ブレークポイントはお好みで */
  .p-plan-item {
    flex: 1 1 100%;          /* 幅 100%＝1 カラム */
  }
}

/* ---------- PC／タブレット：横３カラム ---------- */
.p-product-summary {
  display: flex;
  flex-wrap: wrap;          /* 必要なら折り返し */
  gap: 16px;                /* ボックス間余白 */
}

.p-summary-box {
  flex: 1 1 calc(33.333% - 16px);  /* ３分割レイアウト */
  box-sizing: border-box;
}

/* ---------- モバイル：１カラム ---------- */
@media (max-width: 600px) {
  .p-product-summary {
    flex-direction: column; /* 縦に並べる */
  }

  .p-summary-box {
    flex: 1 1 100%;         /* 幅100％ */
  }
}




.cart-table{
  width:100%; border-collapse:collapse; margin:16px 0; font-size:14px;
}
.cart-table th, .cart-table td{
  border:1px solid #ccc; padding:8px; text-align:left;
}
.btn-remove{
  padding:6px 12px; background:#e74c3c; color:#fff;
  border:none; border-radius:4px; cursor:pointer;
}
.btn-request-all{
  padding:10px 28px; background:#2C3E50; color:#fff;
  border:none; border-radius:4px; font-size:1.1rem; cursor:pointer;
}


/* ===== cart ページ専用 ===== */
.cart-page{                         /* header.php 内の .page-wrap と同じ階層 */
  display:flex;
  gap:40px;                         /* 左右の余白 */
}

.cart-main{
  flex:1 1 0;
  min-width:0;                      /* テーブルがはみ出さないように */
}

.cart-side{
  flex:0 0 300px;                   /* 幅固定・中身は空 */
}

/* ------ テーブル & ボタン ------ */
.cart-table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:24px;
}
.cart-table th,
.cart-table td{
  border-bottom:1px solid #ddd;
  padding:8px 10px;
}
.cart-table th.action-col{ width:140px; }

.btn-cart-remove{
  background:#c0392b;
  color:#fff;
  border:none;
  border-radius:4px;
  padding:6px 12px;
  font-size:0.9em;
  cursor:pointer;
}
.btn-cart-remove i{ margin-right:4px; }

.cart-submit-wrap{ text-align:right; }

.btn-cart-submit{
  background:#2C3E50;
  color:#fff;
  border:none;
  border-radius:4px;
  padding:10px 24px;
  font-size:1rem;
  cursor:pointer;
}

.cart-empty{
  font-size:1rem;
  color:#555;
  margin-top:12px;
}

/* --- レスポンシブ（600px 未満で縦並び） --- */
@media (max-width: 600px){
  .cart-page{
    flex-direction:column;
  }
  .cart-side{
    display:none;
  }
}

/* ---- cart page layout tweak ---- */
.cart-side{
  flex:0 0 280px;   /* トップページ右カラムと同寸 */
}

.p-product-overview{margin:40px 0;}
.p-product-overview h2{font-size:1.4rem;margin-bottom:12px;}
.overview-summary{line-height:1.8;font-size:1rem;}
.overview-details summary{
  cursor:pointer;
  color:var(--blue);
  font-weight:600;
  margin-top:16px;
  list-style:none;
}
.overview-details summary::-webkit-details-marker{display:none;} /* Chrome */
.overview-detail-body{margin-top:8px;line-height:1.8;}

/* ===== 製品概要ブロック ===== */
.p-product-overview {
  margin: 40px 0;
}
.p-product-overview h2 {
  font-size: 1.4rem;
  margin-bottom: 12px;
}
.overview-summary {
  line-height: 1.8;
  font-size: 1rem;
  margin-bottom: 20px; /* ✅ アコーディオン前に余白追加 */
}

/* ===== accordion-004 テンプレート ===== */
.accordion-004 {
  width: 100%;              /* ✅ 横幅を100%に */
  margin-bottom: 12px;      /* やや余裕を持たせる */
  border: 2px solid #354557;
  border-radius: 5px;
}
.accordion-004 summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 1em 1.2em;        /* ✅ 左右paddingを狭めて余白を詰める */
  color: #333;
  font-weight: 600;
  cursor: pointer;
}
.accordion-004 summary::-webkit-details-marker {
  display: none;
}
.accordion-004 summary::after {
  transform: translateY(-25%) rotate(45deg);
  width: 7px;
  height: 7px;
  margin-left: 6px;          /* ✅ 右側アイコンとの余白も少しだけ狭める */
  border-bottom: 3px solid #333333b3;
  border-right: 3px solid #333333b3;
  content: '';
  transition: transform .3s;
}
.accordion-004[open] summary::after {
  transform: rotate(225deg);
}
.accordion-004 p {
  transform: translateY(-10px);
  opacity: 0;
  margin: 0;
  padding: .3em 1.5em 1.5em;  /* ✅ 内側paddingも左右やや縮めて調整 */
  color: #333;
  transition: transform .5s, opacity .5s;
  line-height: 1.8;
}
.accordion-004[open] p {
  transform: none;
  opacity: 1;
}

/* ===== 見出しの余白（h2～h5） ===== */
h2, h3, h4, h5 {
  margin-top: 1em;
  margin-bottom: 0.5em;
  line-height: 1.4;  /* 0.7 → 読みにくくなるので一般的な1.4へ修正 */
}

/* デスクトップ時のサイズ */
h2 { font-size: 1.6rem; }  /* 約25.6px */
h3 { font-size: 1.3rem; }  /* 約20.8px */
h4 { font-size: 1.1rem; }  /* 約17.6px */
h5 { font-size: 1rem; font-weight: normal; }

/* スマホ向け調整（最大幅 768px 以下） */
@media (max-width: 768px) {
  h2 { font-size: 1.4rem; }  /* 約22.4px */
  h3 { font-size: 1.15rem; } /* 約18.4px */
  h4 { font-size: 1rem; }    /* 約16px */
  h5 { font-size: 0.95rem; } /* 約15.2px */
}

h1 {
  font-size: 2rem;        /* PC：32px相当 */
  font-weight: bold;
  line-height: 1.4;
  margin: 1em 0 0.5em;
}

@media (max-width: 768px) {
  h1 {
    font-size: 1.5rem;    /* スマホ：24px相当 */
  }
}

/* 会社名リンクの色と装飾を固定 */
.company-link {
  color: #333;           /* 文字色は #333 のまま */
  text-decoration: none; /* 下線なし */
}
.company-link:hover {
  text-decoration: none; /* ホバー時も下線を出さない */
}

/* h2 と同じ見た目用クラス */
.p-summary-box .p-summary-title {
  font-size: 1.1rem;         /* h2 と同じフォントサイズ */
  font-weight: bold;         /* 見出しらしく太字 */
  margin: 0 0 0.75em;        /* 上余白0／下余白0.75em */
  line-height: 1.3;          /* h2 と同じ行間 */
  color: #FF8C00;
}

/* h2 と同じサイズ・余白・太字を明示しておく */
.footer-heading{
  font-size: 1.25rem;      /* ＝約 h2 相当。サイトの基準に合わせて変更 */
  font-weight: 700;        /* h2 のデフォルトは bold */
  margin: 0 0 0.75em 0;    /* h2 の上下マージンを再現 */
}


/* 画面・レイアウトに影響を与えない視覚的非表示 */
.sr-only{
  position:absolute !important;
  width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* 動的タイトルを h3 と同じビジュアルに */
.ui-main-heading{
  font-size: 1.25rem;   /* サイトの h3 基準に合わせて調整 */
  font-weight: 700;
  margin: 0.6em 0 0.4em;
}

/* ====================== 404 page only ====================== */
.error404-wrapper{
  max-width:680px;          /* 幅を中央に収める */
  margin:80px auto 120px;   /* 上下余白 + 中央寄せ */
  padding:0 24px;
  text-align:center;
}

.error404-title{
  font-size:3rem;
  font-weight:700;
  color:#d32f2f;
  margin-bottom:.5em;
}

.error404-lead,
.error404-help{
  font-size:1rem;
  line-height:1.8;
  margin-bottom:1.2em;
}

.error404-search{
  display:flex;
  gap:8px;
  max-width:420px;
  margin:0 auto;
}

.error404-search input{
  flex:1;
  padding:8px;
  border:1px solid #ccc;
  border-radius:4px;
}

.error404-search button{
  padding:8px 16px;
  border:none;
  border-radius:4px;
  background:#2196f3;
  color:#fff;
  cursor:pointer;
}
/* ==================== /404 page only ==================== */


/* ── モバイルだけ：入力→ボタンを縦並び／同じ幅にする ── */
@media (max-width: 768px) {
  .hero-search__form {
    display: block;            /* いったん縦方向に */
  }

  .hero-search__form input[type="text"] {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  /* 既存の absolute 配置などをリセットして下に置く */
  .hero-search__form button {
    position: static;          /* ← これで重なりを解消 */
    right: auto;
    left: auto;
    top: auto;
    transform: none;
    display: block;
    width: 100%;               /* 入力と同じ幅 */
    box-sizing: border-box;
    margin-top: 10px;          /* 入力との間隔 */
    height: 44px;              /* お好みで */
    border-radius: 8px;        /* お好みで */
  }
}

/* ── PCは従来通り横並び（必要なら） ── */
@media (min-width: 769px) {
  .hero-search__form {
    display: flex;
    gap: 8px;
  }
  .hero-search__form input[type="text"] { flex: 1; }
  .hero-search__form button { width: auto; }
}


/* PC表示用：検索フォーム横並び */
@media screen and (min-width: 769px) {
  .hero-search__form {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .hero-search__form input[type="text"] {
    flex: 1;
    border-radius: 4px 0 0 4px; /* 左だけ角丸 */
  }
  .hero-search__form button {
    width: 50px; /* 適度な幅（必要に応じて調整） */
    min-width: 50px;
    border-radius: 0 4px 4px 0; /* 右だけ角丸 */
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/* 固定ヘッダー分の余白をスクロール位置に反映させる */
#categorySection { scroll-margin-top: 80px; } /* 80px はヘッダーの高さに合わせて調整 */



/* 既存 .p-product-logo と同じ枠に収まるように調整してください */
.p-product-logo {
  width: 128px; height: 128px; object-fit: contain;
  position: absolute; left: 24px; bottom: -24px;
  background: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.p-product-logo-fallback {
  width: 128px; height: 128px;
  position: absolute; left: 24px; bottom: -24px;
  background: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.08);
  display: flex; align-items: center; justify-content: center;
  padding: 8px; text-align: center;
}

.p-product-logo-fallback__text {
  color: #2C3E50;          /* ご指定カラー */
  font-weight: 700;
  line-height: 1.2;
  font-size: 16px;         /* 文字がはみ出るときは適宜縮小 */
  word-break: break-word;  /* 長いサービス名に対応 */
}

/* 枠内で画像 or テキストを中央揃えにする */
.p-company-card__img-wrap {
  margin: 0;
  /* 既存の幅・高さ指定があればそのまま活かされます */
}

/* 共通コンテナ：枠の内側いっぱいを使う */
.p-company-card__img-wrap .card-thumb{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  /* 高さは親（wrap）のルールに従います。親が自動高なら自動で伸縮します。 */
}

/* ロゴ画像：枠の「最大幅」にフィット（縦横比は維持） */
.p-company-card__img-wrap .card-thumb__img{
  max-width: 100%;
  max-height: 100%;
  height: auto;
  display: block;
  object-fit: contain; /* 親に高さがある場合もはみ出さない */
}

/* テキスト代替（画像なし/読込失敗時） */
.p-company-card__img-wrap .card-thumb__fallback{
  width: 100%;
  height: 100%;
  display: flex;               /* PHPのdisplay切替＋onerrorで表示 */
  align-items: center;
  justify-content: center;
  padding: 8px;
  text-align: center;
}

.p-company-card__img-wrap .card-thumb__text{
  color: #2C3E50;              /* ご指定カラー */
  font-weight: 700;
  line-height: 1.2;
  font-size: 16.5px;
  word-break: break-word;
}