/* ============================================================
   2026-06-19 jun sakamoto / Imagine LP 専用スタイル
   - 既存 free-apps.css / style.css をベースに上書き
   - SP最適(モバイルファースト思想)
   ============================================================ */

/* セクション共通 */
section[class^="imagine-"] {
  padding: 4em 0;
}
@media (max-width: 768px) {
  section[class^="imagine-"] { padding: 2.5em 0; }
}

.section-title {
  font-size: 1.6em;
  font-weight: 700;
  margin-bottom: 1.5em;
  color: #2c3e50;
  border-left: 5px solid #4a90e2;
  padding-left: 0.6em;
}
@media (max-width: 768px) {
  .section-title { font-size: 1.3em; }
}

/* ============================================================ Hero ============================================================ */
.imagine-hero {
  background: linear-gradient(135deg, #0f1a23 0%, #1a3445 100%);
  color: #fff;
  padding: 5em 0 4em !important;
}
@media (max-width: 768px) {
  .imagine-hero { padding: 3em 0 2.5em !important; }
}

.imagine-hero .heading-meta {
  color: #7cdbe6;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-size: 0.85em;
  display: block;
  margin-bottom: 0.4em;
}

.imagine-title {
  font-family: "Quicksand", sans-serif;
  font-size: 4em;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.2em;
  line-height: 1;
}
@media (max-width: 768px) {
  .imagine-title { font-size: 2.8em; }
}

.imagine-tagline {
  font-size: 1.3em;
  color: #7cdbe6;
  margin-bottom: 1em;
  font-weight: 500;
}
@media (max-width: 768px) {
  .imagine-tagline { font-size: 1.1em; }
}

.imagine-lead {
  font-size: 1.05em;
  line-height: 1.8;
  color: #d4dbe1;
  margin-bottom: 2em;
}
.imagine-lead strong { color: #fff; }

.imagine-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8em;
  margin-bottom: 1.2em;
}
.imagine-cta .btn {
  border-radius: 6px;
  padding: 0.9em 1.4em;
  font-weight: 600;
  font-size: 0.95em;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.imagine-cta .btn-primary {
  background: #4a90e2;
  border-color: #4a90e2;
  color: #fff;
}
.imagine-cta .btn-primary:hover {
  background: #357abd;
  border-color: #357abd;
}
.imagine-cta .btn-secondary {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
}
.imagine-cta .btn-secondary:hover {
  background: rgba(255,255,255,0.18);
}
.imagine-cta .btn small { opacity: 0.75; font-weight: 400; }

.imagine-meta-line {
  font-size: 0.85em;
  color: #8ea1b0;
  margin-top: 1em;
}

.imagine-hero-icon {
  text-align: center;
}
.imagine-hero-icon img {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.3));
}
@media (max-width: 991px) {
  .imagine-hero-icon { margin-top: 2em; }
  .imagine-hero-icon img { max-width: 200px; }
}

/* ============================================================ 特徴 ============================================================ */
.imagine-features { background: #f6f9fc; }

.feature-card {
  background: #fff;
  border-radius: 8px;
  padding: 1.8em 1.4em;
  text-align: center;
  height: 100%;
  margin-bottom: 1.5em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: transform 0.2s, box-shadow 0.2s;
}
.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
.feature-icon {
  font-size: 2.4em;
  margin-bottom: 0.4em;
  line-height: 1;
}
.feature-card h4 {
  font-size: 1.05em;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 0.6em;
}
.feature-card p {
  font-size: 0.9em;
  color: #5a6c7a;
  line-height: 1.7;
  margin: 0;
}

/* ============================================================ スクショ ============================================================ */
.screenshot-figure {
  margin-bottom: 1.5em;
  text-align: center;
}
.screenshot-figure img {
  max-width: 100%;
  height: auto;
  border: 1px solid #d8e0e8;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.screenshot-figure figcaption {
  margin-top: 0.8em;
  font-size: 0.85em;
  color: #6b7c8a;
}

/* ============================================================ 使い方ステップ ============================================================ */
.imagine-howto { background: #f6f9fc; }

.howto-steps {
  display: flex;
  flex-direction: column;
  gap: 1.2em;
}
.howto-step {
  display: flex;
  align-items: flex-start;
  background: #fff;
  border-radius: 8px;
  padding: 1.4em 1.6em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  gap: 1.2em;
}
.step-num {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #4a90e2;
  color: #fff;
  font-weight: 700;
  font-size: 1.4em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-body { flex: 1; }
.step-body h4 {
  font-size: 1.05em;
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 0.4em;
}
.step-body p {
  font-size: 0.95em;
  color: #5a6c7a;
  line-height: 1.7;
  margin: 0;
}

/* ============================================================ クオリティ表 ============================================================ */
.quality-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.quality-table thead { background: #2c3e50; color: #fff; }
.quality-table th, .quality-table td {
  padding: 0.9em 1em;
  text-align: left;
  border-bottom: 1px solid #e0e7ed;
  font-size: 0.92em;
}
.quality-table tbody tr:last-child td { border-bottom: none; }
.quality-table tbody tr.quality-recommended {
  background: #fffbe8;
}
.quality-table small { color: #8a94a0; }
.badge-rec {
  background: #ff9800;
  color: #fff;
  font-size: 0.7em;
  padding: 0.15em 0.5em;
  border-radius: 3px;
  font-weight: 600;
  vertical-align: middle;
  margin-left: 0.3em;
}
.quality-note {
  margin-top: 1.2em;
  padding: 1em 1.2em;
  background: #fffbe8;
  border-left: 4px solid #ff9800;
  border-radius: 4px;
  font-size: 0.92em;
  color: #5a4a30;
}

@media (max-width: 768px) {
  .quality-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ============================================================ 詳細機能 ============================================================ */
.imagine-details { background: #f6f9fc; }

.detail-block {
  background: #fff;
  border-radius: 8px;
  padding: 1.6em 1.6em;
  height: 100%;
  margin-bottom: 1.5em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.detail-block h4 {
  font-size: 1.1em;
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 0.8em;
}
.detail-block ul {
  margin: 0;
  padding-left: 1.3em;
  color: #5a6c7a;
  font-size: 0.93em;
  line-height: 1.8;
}
.detail-block ul li { margin-bottom: 0.3em; }
.detail-block ul li strong { color: #2c3e50; }

/* ============================================================ QA ============================================================ */
.qa-list { max-width: 800px; margin: 0 auto; }
.qa-item {
  background: #fff;
  border-radius: 6px;
  margin-bottom: 0.6em;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  overflow: hidden;
}
.qa-item summary {
  padding: 1em 1.3em;
  cursor: pointer;
  font-weight: 600;
  color: #2c3e50;
  list-style: none;
  position: relative;
  padding-right: 2.5em;
}
.qa-item summary::-webkit-details-marker { display: none; }
.qa-item summary::after {
  content: "+";
  position: absolute;
  right: 1.2em;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3em;
  color: #4a90e2;
  font-weight: 300;
  transition: transform 0.2s;
}
.qa-item[open] summary::after { content: "−"; }
.qa-item p {
  padding: 0 1.3em 1.2em;
  color: #5a6c7a;
  line-height: 1.8;
  margin: 0;
  font-size: 0.95em;
}
.qa-item p strong { color: #2c3e50; }

/* ============================================================ DLカード ============================================================ */
.imagine-download { background: #f6f9fc; }

.dl-card {
  background: #fff;
  border-radius: 8px;
  padding: 1.8em 1.8em;
  text-align: center;
  margin-bottom: 1.5em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border: 2px solid transparent;
  transition: border-color 0.2s;
}
.dl-card:hover { border-color: #4a90e2; }
.dl-card h4 {
  font-size: 1.2em;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 0.4em;
}
.dl-meta {
  color: #8a94a0;
  font-size: 0.85em;
  margin-bottom: 1em;
  font-family: "Quicksand", monospace;
}
.dl-card p {
  color: #5a6c7a;
  font-size: 0.92em;
  line-height: 1.7;
  margin-bottom: 1.2em;
}
.dl-card .btn {
  width: 100%;
  padding: 0.9em 1.2em;
  border-radius: 4px;
}
.dl-note {
  margin-top: 1.5em;
  padding: 1em 1.2em;
  background: #e8f4fb;
  border-radius: 4px;
  font-size: 0.92em;
  color: #2c4960;
}

/* ============================================================ 免責 ============================================================ */
.disclaimer-box {
  background: #fef9e8;
  border-left: 4px solid #ff9800;
  padding: 1.4em 1.8em;
  border-radius: 4px;
}
.disclaimer-box h4 {
  font-size: 1.05em;
  font-weight: 700;
  color: #5a4a30;
  margin: 0 0 0.8em;
}
.disclaimer-box ul {
  margin: 0;
  padding-left: 1.3em;
  color: #5a4a30;
  font-size: 0.92em;
  line-height: 1.8;
}
.disclaimer-box ul li { margin-bottom: 0.4em; }
.disclaimer-box strong { color: #2c2010; }

/* ============================================================ Hero タイポ調整(古いブラウザ向け) ============================================================ */
@supports not (display: flex) {
  .imagine-cta { display: block; }
  .imagine-cta .btn { display: inline-block; margin-right: 0.6em; margin-bottom: 0.6em; }
  .howto-step { display: block; }
  .step-num { margin: 0 auto 1em; }
}