@charset "utf-8";
/* エギの選び方（A ページ）専用
 * /aoriika-egi-erabi/ で使う。表と製品カードが中心。
 * 既存の keystone2024.css / import.css の上に載せる差分だけを書く。
 * クラス接頭辞は ee-（egi-erabi）。他ページの sk-（仕掛け図）とは混ぜない。
 *
 * ⚠ このサイトは base.css で html { font-size: 62.5% }、つまり **1rem = 10px**。
 *   本文（p）は 1.6rem = 16px。16px 基準のつもりで 1rem と書くと 10px になる。
 */

.ee-hero {
  background: linear-gradient(180deg, #1E3A5F 0%, #0F172A 100%);
  color: #fff;
  padding: 60px 24px;
  text-align: center;
}
.ee-hero__ttl {
  font-size: clamp(2.8rem, 4.6vw, 5.2rem);
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 16px;
  color: #fff;
}
.ee-hero__sub {
  font-size: clamp(1.5rem, 1.9vw, 2.2rem);
  line-height: 1.8;
  margin: 0;
  color: #dbe4f0;
}

.ee-body { max-width: 980px; margin: 0 auto; padding: 0 20px; }

.ee-lead {
  font-size: 1.8rem;
  line-height: 2.1;
  margin: 44px 0 34px;
}

.ee-toc {
  border: 1px solid #d7dde5;
  border-radius: 10px;
  padding: 22px 26px;
  margin: 0 0 52px;
  background: #f7f9fb;
}
.ee-toc__ttl { font-size: 1.6rem; font-weight: 700; margin: 0 0 10px; line-height: 1.6; }
.ee-toc__list { list-style: none; margin: 0; padding: 0; }
.ee-toc__list li { margin: 8px 0; font-size: 1.55rem; line-height: 1.7; }
.ee-toc__list a { text-decoration: underline; color: #2b3850; }

.ee-sec { margin: 0 0 60px; scroll-margin-top: 20px; }
.ee-sec h2 {
  font-size: clamp(2.0rem, 2.7vw, 2.9rem);
  line-height: 1.5;
  font-weight: 700;
  border-left: 6px solid #FF6B35;
  padding-left: 16px;
  margin: 0 0 22px;
}
.ee-sec h3 {
  font-size: clamp(1.7rem, 2.1vw, 2.1rem);
  font-weight: 700;
  margin: 32px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e6eb;
}
.ee-sec p { font-size: 1.6rem; line-height: 2.1; margin: 0 0 18px; }
.ee-sec ul { margin: 0 0 20px; padding-left: 1.8em; }
.ee-sec li { font-size: 1.6rem; line-height: 2.1; margin: 0 0 10px; }

/* 表は横スクロールさせる（狭い画面で本文まで横に伸ばさない） */
.ee-tablewrap { overflow-x: auto; margin: 0 0 24px; -webkit-overflow-scrolling: touch; }
.ee-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 600px;
  font-size: 1.5rem;
}
.ee-table th, .ee-table td {
  border: 1px solid #dde3ea;
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  line-height: 1.8;
}
.ee-table thead th { background: #1E3A5F; color: #fff; font-weight: 700; white-space: nowrap; }
.ee-table tbody tr:nth-child(even) { background: #f7f9fb; }
.ee-table td.num { white-space: nowrap; }
.ee-table .ee-strong { font-weight: 700; }
.ee-table a { text-decoration: underline; }

.ee-note {
  background: #fff6f1;
  border-left: 4px solid #FF6B35;
  padding: 18px 22px;
  margin: 0 0 26px;
  font-size: 1.55rem;
  line-height: 2.05;
}
.ee-sec .ee-note { font-size: 1.55rem; }

/* 製品カード */
.ee-cards {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}
.ee-cards li { margin: 0; }
.ee-card {
  border: 1px solid #dde3ea;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.ee-card a { display: block; color: inherit; text-decoration: none; }
.ee-card img { width: 100%; height: 155px; object-fit: cover; display: block; }
.ee-card__body { padding: 14px 16px 18px; }
.ee-card__name { font-size: 1.6rem; font-weight: 700; margin: 0 0 8px; line-height: 1.6; }
.ee-card__spec { font-size: 1.35rem; color: #5a6472; margin: 0; line-height: 1.8; }

.ee-faq { margin: 0 0 28px; }
.ee-faq__q {
  font-size: 1.7rem;
  font-weight: 700;
  margin: 26px 0 10px;
  padding-left: 30px;
  position: relative;
  line-height: 1.8;
}
.ee-faq__q::before {
  content: "Q";
  position: absolute; left: 0; top: 0;
  color: #FF6B35; font-weight: 700; font-size: 1.8rem;
}
.ee-faq__a {
  font-size: 1.6rem;
  padding-left: 30px;
  position: relative;
  line-height: 2.1;
  margin: 0;
}
.ee-faq__a::before {
  content: "A";
  position: absolute; left: 0; top: 0;
  color: #1E3A5F; font-weight: 700; font-size: 1.8rem;
}

@media (max-width: 767px) {
  .ee-hero { padding: 40px 18px; }
  .ee-body { padding: 0 16px; }
  .ee-toc { padding: 18px 20px; }
  .ee-card img { height: 140px; }
  .ee-lead { font-size: 1.7rem; }
}

/* 本文の合間に置く小さめの写真 */
.ee-fig { margin: 4px 0 26px; max-width: 380px; }
.ee-fig--wide { max-width: 620px; }
.ee-fig img { width: 100%; height: auto; display: block; border-radius: 8px; }
.ee-fig figcaption {
  font-size: 1.3rem; color: #5a6472; line-height: 1.8; margin-top: 8px;
}
@media (max-width: 767px) {
  .ee-fig, .ee-fig--wide { max-width: 100%; }
}