@charset "UTF-8";
/* =========================================================
   library.css — 臨床アーカイブ（教材販売）ページ専用スタイル
   ---------------------------------------------------------
   ・index.html（トップ）からのみ読み込む。他のページには影響しない
   ・すべて .lib-page 配下 / .lib- 接頭辞。
     styles.css / lp.css のクラスとは衝突しない
   ・読み込み順は styles.css → lp.css → library.css
     （レイアウト・ボタン・出現アニメーションは lp.css のものを使う）
   ========================================================= */

/* ---------------------------------------------------------
   1. 選ばれる理由（3枚のカード）
   --------------------------------------------------------- */
.lib-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.2vw, 24px);
}

.lib-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(26px, 3vw, 34px) clamp(22px, 2.6vw, 30px) clamp(30px, 3.4vw, 38px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              border-color .35s var(--ease);
}

.lib-feature:hover {
  transform: translateY(-3px);
  border-color: #cfe4e0;
  box-shadow: var(--shadow-md);
}

/* 通し番号。見出しの文字列には含めず、装飾として別に置く */
.lib-feature-n {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--teal);
  display: flex;
  align-items: center;
  gap: 9px;
}

.lib-feature-n::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.lib-feature-t {
  font-size: clamp(16px, 1.7vw, 18px);
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
  text-wrap: balance;
}

.lib-feature-d {
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------
   2. 商品カード
   --------------------------------------------------------- */
.lib-products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2.4vw, 26px);
  align-items: stretch;
}

.lib-product {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(28px, 3.2vw, 38px) clamp(24px, 2.8vw, 34px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
}

/* まとめ買い側。濃紺を敷いて主役をはっきりさせる */
.lib-product--pick {
  background: var(--navy);
  border-color: var(--navy);
  color: #eef2f7;
  box-shadow: var(--shadow-lg);
}

.lib-badge {
  align-self: flex-start;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 6px 13px;
  border-radius: 999px;
  background: #eef2f7;
  color: var(--ink-soft);
}

.lib-badge--pick {
  background: var(--teal);
  color: #fff;
}

.lib-product-t {
  font-size: clamp(17px, 1.9vw, 20px);
  font-weight: 700;
  line-height: 1.65;
  color: var(--ink);
  text-wrap: balance;
}

.lib-product--pick .lib-product-t { color: #fff; }

.lib-product-d {
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--ink-soft);
}

.lib-product--pick .lib-product-d { color: #c3ceda; }

/* 中身の内訳 */
.lib-includes {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--tint);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.lib-product--pick .lib-includes {
  background: rgba(255, 255, 255, .06);
  color: #d5dee8;
}

.lib-includes li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.lib-includes li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: .62em;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
}

.lib-product--pick .lib-includes li::before { background: #6ee0d1; }

/* 価格。ボタンの直前に置いて、金額とボタンを離さない */
.lib-price {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-family: "Inter", sans-serif;
  font-size: clamp(28px, 3.4vw, 36px);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.lib-product--pick .lib-price { color: #fff; }

.lib-price small {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}

.lib-product--pick .lib-price small { color: #b3c0cf; }

.lib-product .lp-btn { width: 100%; }

/* 購入リンクが未定のあいだ出すボタン。押せないことが見て分かる形にする */
.lib-btn-soon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 17px 28px;
  border-radius: 999px;
  border: 1.5px dashed var(--line);
  background: var(--tint);
  /* var(--muted) だと薄い背景の上で 4.50:1 とAAぎりぎりになるため、
     少し濃くして余裕を持たせている */
  color: #566374;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: not-allowed;
}

/* 濃紺の上に置くとき（まとめ買いカード / 法人セクション） */
.lib-product--pick .lib-btn-soon,
.lp-sec--dark .lib-btn-soon {
  border-color: rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .05);
  color: #b3c0cf;
}

.lib-note {
  font-size: 12.5px;
  line-height: 1.75;
  color: #566374;
  text-align: center;
}

.lib-product--pick .lib-note { color: #a9b7c7; }

/* ---------------------------------------------------------
   3. 法人向け（濃紺のセクションの中に置く白いカード）
   --------------------------------------------------------- */
.lib-b2b {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.lib-b2b-sub {
  font-size: clamp(16px, 1.9vw, 19px);
  font-weight: 700;
  line-height: 1.75;
  color: #6ee0d1;
  text-wrap: balance;
}

.lib-b2b-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 4px;
}

.lib-b2b-item {
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.7;
  color: #eef2f7;
}

.lib-b2b-cta {
  margin-top: 8px;
  padding: clamp(24px, 3vw, 32px);
  border-radius: 18px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}

.lib-b2b-cta p {
  font-size: 14.5px;
  line-height: 1.95;
  color: #d5dee8;
  max-width: 46em;
}

/* ---------------------------------------------------------
   4. 画面幅への対応
   --------------------------------------------------------- */
@media (max-width: 900px) {
  .lib-features,
  .lib-b2b-list {
    grid-template-columns: 1fr 1fr;
  }

  .lib-products {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .lib-features,
  .lib-b2b-list {
    grid-template-columns: 1fr;
  }

  .lib-feature,
  .lib-product {
    border-radius: 16px;
  }
}

/* B2B 節の補足文。旧 index.html のインラインスタイルをここへ移した */
.lib-b2b-note {
  margin: 0;
  font-size: 12.5px;
  color: #a9b7c7;
}

/* 定価と割引後。--lib-price は flex なので子は横並びになる */
.lib-price-was {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.lib-price-arrow {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
}

.lib-product--pick .lib-price-was,
.lib-product--pick .lib-price-arrow { color: #94a5b8; }

.lib-price-now { display: inline-flex; align-items: baseline; gap: 4px; }

.lib-save {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .01em;
  color: var(--teal);
}

.lib-product--pick .lib-save { color: #7fd8c8; }