/* ===========================
   CMsupport ページ専用スタイル
   ※ 共通の style.css（変数・ナビ・フッター）を前提に読み込む
=========================== */

/* ---- ヒーロー ---- */
.cm-hero {
  padding: 156px 24px 72px;
  text-align: center;
  background: var(--light);
}
.cm-hero-eyebrow {
  font-family: var(--font-en);
  font-size: .78rem;
  letter-spacing: .32em;
  color: var(--accent);
  text-transform: uppercase;
  display: block;
  margin-bottom: 1rem;
}
.cm-hero-title {
  font-family: var(--font-en);
  font-size: clamp(2.2rem, 5.5vw, 3.4rem);
  font-weight: 300;
  color: var(--black);
  letter-spacing: .06em;
  margin-bottom: 1rem;
}
.cm-hero-desc {
  max-width: 620px;
  margin: 0 auto;
  font-size: .92rem;
  color: var(--dark-gray);
  line-height: 1.95;
  letter-spacing: .02em;
}
.cm-hero-line {
  width: 44px;
  height: 1px;
  background: var(--accent);
  margin: 1.75rem auto 0;
  opacity: .7;
}

/* ---- 解説動画 ---- */
.cm-video-section {
  padding: 0 24px 64px;
  background: var(--light);
  text-align: center;
}
.cm-video-lead {
  font-size: .85rem;
  color: var(--dark-gray);
  letter-spacing: .04em;
  margin-bottom: 1.4rem;
}
.cm-video-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  max-width: 720px;
  margin: 0 auto;
}
.cm-video-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.6rem;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-jp);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .04em;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.cm-video-btn::before {
  content: "▶";
  font-size: .65rem;
  color: var(--accent);
}
.cm-video-btn:hover { background: var(--dark-gray); transform: translateY(-2px); }
.cm-video-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 600px) {
  .cm-video-buttons { flex-direction: column; }
  .cm-video-btn { width: 100%; }
}

/* ---- 解説動画モーダル ---- */
.video-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(26, 25, 22, .82);
  opacity: 0;
  transition: opacity .25s ease;
}
.video-modal-overlay.is-open { display: flex; }
.video-modal-overlay.is-visible { opacity: 1; }

.video-modal-dialog {
  position: relative;
  width: min(92vw, calc((100vh - 96px) * 16 / 9), 960px);
}

.video-modal-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.video-modal-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .25s ease;
}
.video-modal-close:hover { background: rgba(0, 0, 0, .8); }
.video-modal-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 600px) {
  .video-modal-overlay { padding: 12px; }
  .video-modal-dialog { width: min(96vw, calc((100vh - 48px) * 16 / 9)); }
}

/* ---- ツール一覧セクション ---- */
.cm-tools-section {
  padding: 80px 24px 100px;
  background: var(--white);
}
.cm-tools-grid {
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}
@media (max-width: 1100px) {
  .cm-tools-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .cm-tools-grid { grid-template-columns: 1fr; }
}

.cm-tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--off-white);
  border: 1px solid var(--mid);
  border-radius: 8px;
  padding: 2.2rem 2rem 2rem;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.cm-tool-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: var(--accent);
}
.cm-tool-badge {
  position: absolute;
  top: -12px;
  left: 2rem;
  font-family: var(--font-jp);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .08em;
  padding: 4px 14px;
  border-radius: 20px;
  white-space: nowrap;
}
.cm-tool-badge.demo { background: #ededeb; color: #4a4845; border: 1px solid var(--mid); }
.cm-tool-badge.new  { background: var(--accent); color: #fff; }

.cm-tool-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1.2rem;
  flex-shrink: 0;
}

.cm-tool-title {
  font-family: var(--font-en);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--black);
  letter-spacing: .04em;
  margin-bottom: .3rem;
}
.cm-tool-tagline {
  font-size: .78rem;
  color: var(--accent);
  letter-spacing: .06em;
  margin-bottom: 1rem;
}
.cm-tool-desc {
  font-size: .85rem;
  color: var(--dark-gray);
  line-height: 1.85;
  margin-bottom: 1.1rem;
  flex: 1;
}
.cm-tool-note {
  font-size: .78rem;
  color: var(--dark-gray);
  opacity: .85;
  line-height: 1.75;
  margin: -.6rem 0 1.1rem;
}
.cm-tool-points {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem;
  font-size: .78rem;
  color: var(--dark-gray);
  line-height: 2;
}
.cm-tool-points li::before {
  content: "— ";
  color: var(--accent);
}
.cm-tool-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 1.4rem;
}
.cm-tool-tags span {
  font-size: .7rem;
  padding: 3px 10px;
  background: var(--light);
  color: var(--dark-gray);
  border-radius: 3px;
}
.cm-tool-tags span.tag-buy {
  background: var(--accent);
  color: var(--white);
  font-weight: 500;
}
.cm-tool-cta-group {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-top: auto;
}
.cm-tool-buy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .9rem 1.4rem;
  background: var(--accent);
  color: var(--white);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .06em;
  border-radius: 4px;
  text-decoration: none;
  transition: background var(--transition), transform var(--transition);
}
.cm-tool-buy-btn:hover { background: #b3903f; transform: translateY(-2px); }
.cm-tool-select {
  width: 100%;
  padding: .75rem 1rem;
  background: var(--white);
  color: var(--dark-gray);
  font-size: .85rem;
  font-weight: 500;
  border: 1px solid var(--light);
  border-radius: 4px;
  cursor: pointer;
}
.cm-tool-support-note {
  font-size: .72rem;
  color: var(--dark-gray);
  margin: -.3rem 0 0;
}
.cm-tool-cta-group .cm-tool-link { margin-top: 0; }
.cm-tool-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.4rem;
  background: var(--black);
  color: var(--white);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .06em;
  border-radius: 4px;
  text-decoration: none;
  transition: background var(--transition);
  margin-top: auto;
}
.cm-tool-link:hover { background: var(--dark-gray); }

/* ---- 使い方のつながり説明 ---- */
.cm-flow {
  max-width: 980px;
  margin: 3.5rem auto 0;
  padding-top: 2.5rem;
  border-top: 1px solid var(--mid);
  text-align: center;
}
.cm-flow-title {
  font-family: var(--font-en);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--gray);
  text-transform: uppercase;
  margin-bottom: 1.6rem;
}
.cm-flow-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .6rem;
}
.cm-flow-step {
  background: var(--light);
  border: 1px solid var(--mid);
  border-radius: 4px;
  padding: .7rem 1.2rem;
  font-size: .78rem;
  color: var(--dark-gray);
  letter-spacing: .02em;
}
.cm-flow-arrow {
  color: var(--accent);
  font-size: .95rem;
}

/* ---- 注記 ---- */
.cm-note {
  max-width: 720px;
  margin: 2.5rem auto 0;
  text-align: center;
  font-size: .74rem;
  color: var(--gray);
  line-height: 1.9;
  letter-spacing: .02em;
}

/* ---- レスポンシブ ---- */
@media (max-width: 600px) {
  .cm-hero { padding: 132px 20px 56px; }
  .cm-hero-br { display: none; }
  .cm-tool-card { padding: 2rem 1.4rem 1.6rem; }
  .cm-tool-badge { left: 1.4rem; }
  .cm-flow-arrow { display: none; }
  .cm-flow-step { width: 100%; text-align: center; }
}