@charset "UTF-8";

/* ─── リセット ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── カラー & タイポ（統一カラー：#16aae3ベース） ─── */
:root {
  --ink:       #1a202c;
  --ground:    #fafcfd;
  --warm:      #e6f4fa;
  --theme:     #16aae3;  /* ご指定の基本カラー */
  --theme-dk:  #0c82b1;
  --accent:    #e35016;
  --border:    #cbe4f0;
  --muted:     #4a5568;
  --fs-base:   15px;
  --lh-base:   1.8;
}

body {
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "メイリオ", sans-serif;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--ink);
  background: var(--ground);
}

/* ─── ユーティリティ ─── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.section { padding: 64px 0; }
.section + .section { border-top: 1px solid var(--border); }

.title_section { font-size: clamp(1.5rem, 3vw, 1.7rem); font-weight: 700; line-height: 1.4; letter-spacing: .04em; }
h2.title_section::before {
  display: none;
}

.new_itemlist h2::before {
  display: none !important;
}

h2 { font-size: clamp(1.15rem, 2.5vw, 1.55rem); font-weight: 700; letter-spacing: .05em; margin-bottom: 20px; }
h2::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 1em;
  background: var(--theme);
  vertical-align: middle;
  margin-right: 10px;
  border-radius: 2px;
}

p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

/* ─── ページヘッダー（H1 + ビジュアル） ─── */
.page-hero {
  background: var(--warm);
  border-bottom: 1px solid var(--border);
  padding: 48px 0 0;
}
.hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 48px;
}
.hero-badge {
  display: inline-block;
  background: var(--theme);
  color: #fff;
  font-size: .75rem;
  letter-spacing: .1em;
  padding: 3px 12px;
  border-radius: 2px;
  margin-bottom: 14px;
}
.hero-text h1 { margin-bottom: 18px; }
.hero-lead {
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.9;
}
.hero-img-placeholder {
    /* background: var(--border); */
    /* height: 280px; */
    border-radius: 4px 4px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* color: var(--muted); */
    font-size: .8rem;
    text-align: center;
    line-height: 1.6;
}

/* ─── 商品一覧プレースホルダー ─── */
.product-list-placeholder {
  background: var(--warm);
  border: 2px dashed var(--border);
  border-radius: 4px;
  padding: 48px 24px;
  text-align: center;
  color: var(--muted);
  font-size: .875rem;
}
.product-list-placeholder strong { display: block; font-size: 1rem; margin-bottom: 6px; }

/* ─── テーブル共通 ─── */
table {
  display: block;      /* tableをブロック要素にしてスクロールできるようにする */
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  font-size: .875rem;
  margin-top: 16px;
}

/* スクロール時に崩れないよう、中身をテーブルとして維持させる設定 */
thead, tbody, tr {
  display: table;
  width: 100%;
  min-width: 650px;    /* スマホ画面でも表が潰れない最低幅 */
  table-layout: fixed; /* 列の幅を均等に保つ */
}
th {
  background: var(--theme);
  color: #fff;
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
  letter-spacing: .04em;
}
td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
tr:nth-child(even) td { background: var(--warm); }
tr:last-child td { border-bottom: none; }
td a { color: var(--theme-dk); text-decoration: none; }
td a:hover { text-decoration: underline; }

/* ─── バナー風（ポリうちわ等で使用） ─── */
.banner-placeholder {
  background: linear-gradient(135deg, var(--theme), var(--theme-dk));
  color: #fff;
  padding: 20px;
  border-radius: 4px;
  text-align: center;
  font-weight: 700;
  margin-bottom: 20px;
}

/* ─── サイズセクション ─── */
.size-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 16px;
}
.size-card {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 20px 22px;
  background: #fff;
}
.size-card-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--theme-dk);
  margin-bottom: 4px;
}
.size-card-size {
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: 8px;
}
.size-card p { font-size: .875rem; line-height: 1.7; margin: 0;  }
.size-img-placeholder {
  background: var(--warm);
  border: 1px solid var(--border);
  border-radius: 4px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: .8rem;
  margin-bottom: 16px;
}

/* ─── 活用事例 ─── */
.use-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  margin-top: 12px;
}
.use-list li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 12px 16px;
  background: #fff;
  border-left: 3px solid var(--theme);
  font-size: .875rem;
  line-height: 1.6;
}

/* ─── FAQ（きれいに横並びする修正版） ─── */
.faq-list { margin-top: 8px; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 18px 0 10px;
  font-weight: 700;
}
.faq-q-icon {
  color: var(--theme);
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.2;
  flex-shrink: 0;
}
.faq-a {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 0 0 18px;
  font-size: .9rem;
  color: var(--ink);
}
.faq-a-icon {
  color: var(--accent);
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.2;
  flex-shrink: 0;
}
.faq-a-text {
  line-height: 1.7;
}
.faq-a a { color: var(--theme-dk); text-decoration: none; font-weight: 600; }
.faq-a a:hover { text-decoration: underline; }

/* ─── ボタン ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 50px;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .2s;
}
.btn:hover { opacity: .82; }
.btn-primary {
  background: var(--theme);
  color: #fff;
}
.btn-outline {
  border: 1.5px solid var(--theme);
  color: var(--theme-dk);
  background: transparent;
}

/* ─── 末尾CTA ─── */
.cta-section {
  background: var(--theme-dk);
  padding: 56px 0;
  text-align: center;
}
.cta-section h2 { color: #fff; margin-bottom: 8px; }
.cta-section h2::before { display: none; }
.cta-section p {
  color: rgba(255,255,255,.8);
  font-size: .9rem;
  margin-bottom: 28px;
}
.cta-section .btn-primary {
  background: #fff;
  color: var(--theme-dk);
  font-size: 1rem;
  padding: 16px 40px;
}

/* ─── レスポンシブ ─── */
@media (max-width: 640px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-img-placeholder { border-radius: 4px; height: 200px; }
  .size-grid { grid-template-columns: 1fr; }
  .use-list { grid-template-columns: 1fr; }
}

.text_link {
    color: var(--theme-dk);
}