/* ============================================================
   css/top.css
   TOPページ(index.php:ランディング＋生年月日入力フォーム)専用のスタイル。
   common.css を読み込んだ後に読み込む前提。
   meishiki/index.php 側は css/meishiki.css を使うため、
   このファイルを編集してもmeishiki側の表示には影響しません。
   ============================================================ */

/* ---------- サイト説明文(トップページ冒頭) ---------- */
#siteIntro{
  padding:20px;
}

#siteIntro h1{
  font-size:30px;
  font-weight:400;
  margin:10px 0;
  line-height:1.2;
  color: var(--text);
}
#siteIntro p{
  font-size:13.5px;
  color: var(--text-secondary);
  margin:0 0 10px;
  line-height:1.5;
}
#siteIntro p.lead{
  color: var(--text);
}
#siteIntro p:last-of-type{ margin-bottom:0; }
#siteFeatures h2{
  font-size:18px;
  font-weight:normal;
  margin:0 0 8px;
  color: var(--text);
}
#siteFeatures h2::before{ content:"◆ "; color: var(--accent-dark); }
#siteFeatures ul{
  margin:0;
  padding-left:1.4em;
  color: var(--text-secondary);
  font-size:14px;
}

/* ---------- メインコンテンツ(枠組み。TOP/meishikiで共通の考え方だが、
   事故防止のためファイルは分けてそれぞれに同じ定義を持たせている) ---------- */
.main-content{
  padding: 28px 32px 80px;
  max-width: 900px;
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  gap:24px;
}

/* ---------- LPセクション(AIで占うなら/使い方など) ---------- */
.whyNecessary{
  padding: 20px 22px;
}
.whyNecessary h2{
  font-size:26px;
  font-weight:400;
  line-height:1.2;
}
.whyNecessary h3{
  font-size:16px;
  font-weight:600;
  color: var(--text);
  margin:16px 0 6px;
}
.whyNecessary p{
  font-size:13.5px;
  color: var(--text-secondary);
  line-height:1.6;
  margin:0 0 10px;
}
.whyNecessary ol{
  margin:0;
  padding-left:1.4em;
  color: var(--text-secondary);
  font-size:14px;
  line-height:1.9;
}

/* ---------- FAQ ---------- */
.faq-item{
  margin-bottom:16px;
}
.faq-item:last-child{ margin-bottom:0; }
.faq-item h3{
  font-size:14.5px;
  font-weight:600;
  color: var(--text);
  margin:0 0 4px;
}
.faq-item p{
  font-size:13.5px;
  color: var(--text-secondary);
  margin:0;
  line-height:1.6;
}

/* ---------- カード(生年月日入力フォーム・FAQ枠) ---------- */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.card-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px;
}
.card-header h2{
  font-size:20px; font-weight:400; margin:0;
  display:flex; align-items:center; gap:8px;
}
.card-header .hint{ font-size:12px; color: var(--text-tertiary); font-weight:400; }

/* ---------- トースト通知(コピー等の操作フィードバック用の共通部品) ---------- */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background: var(--text); color:#fff;
  padding:9px 18px; border-radius:6px; font-size:13px;
  opacity:0; pointer-events:none;
  transition: opacity .2s, transform .2s;
  z-index:200;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- 生年月日入力フォーム ---------- */
.date-control{
  display:flex; align-items:center; gap:8px; margin-bottom:16px;
}
.ymd-select{
  border:1px solid var(--border); border-radius:6px;
  padding:7px 26px 7px 10px; font-size:14px; color: var(--text);
  background: var(--surface);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%236B6B6B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.ymd-suffix{ font-size:13px; color: var(--text-secondary); }

.btn-calc{
  display:block;
  width:100%;
  margin-top:14px;
  background: var(--accent-btn);
  border:none;
  color:#fff;
  border-radius: 30px;
  padding:13px 20px;
  font-size:16px;
  font-weight:400;
  letter-spacing:.02em;
  transition: background .15s;
}
.btn-calc:hover{ background: var(--accent-btn-hover); }
@media (min-width:600px){
  .btn-calc{ width:auto; min-width:160px; }
}

/* =====================================================
   レスポンシブ(スマホ)
   共通のトップバー/サイドバー/アプリ枠は common.css 側で
   制御している。ここではTOPページまわりの調整のみ行う。
   ===================================================== */
@media (max-width: 900px){
  .main-content{ padding: 78px 16px 100px; max-width:100%; }
}