/* ============================================================
   エルタノ公式サイト 共通スタイル
   モックアップ（エルタノ.html）のデザインを踏襲。
   レイアウトは各要素のインラインstyleで指定し、CSSは
   ホバー・フォーカス・画面切替・ドロワー・アニメのみ担当。
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }
button, input, select, textarea { font-family: inherit; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #ffffff; color: #1f2937;
  -webkit-text-size-adjust: 100%;
  min-height: 100vh; display: flex; flex-direction: column;
}

/* ------- アニメーション ------- */
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ------- 画面切替（単一ページ・ナビで表示を切替） ------- */
.screen { display: none; }
.screen.active { display: block; animation: fadeUp .5s ease both; }

/* ------- ナビゲーション ------- */
.nav-desktop { display: none; }
.nav-mobile-btn { display: inline-flex; }
@media (min-width: 880px) {
  .nav-desktop { display: flex; }
  .nav-mobile-btn { display: none; }
}
.navlink {
  padding: 8px; font-size: 13px; font-weight: 500; color: #4b5563;
  background: none; border: none; border-bottom: 2px solid transparent;
  cursor: pointer; white-space: nowrap; text-decoration: none;
}
.navlink:link, .navlink:visited { color: #4b5563; }
.navlink:hover { color: #15803d; }
.navlink.active { color: #15803d; font-weight: 700; border-bottom-color: #15803d; }

.navlink-m {
  display: block; width: 100%; text-align: left; padding: 13px 14px;
  font-size: 16px; font-weight: 500; color: #374151; background: transparent;
  border: none; border-radius: 12px; cursor: pointer; text-decoration: none;
}
.navlink-m:link, .navlink-m:visited { color: #374151; }
.navlink-m:hover { background: #ecfdf5; }
.navlink-m.active { color: #15803d; font-weight: 700; background: #ecfdf5; }

/* ------- モバイルドロワー ------- */
#drawer { display: none; border-top: 1px solid #e5e7eb; background: #fff; padding: 8px 14px 16px; }
#drawer.open { display: block; }

/* ------- ホバー（モックアップの style-hover を再現） ------- */
.lift { transition: transform .2s, box-shadow .2s; }
@media (hover: hover) {
  .lift:hover { transform: translateY(-6px); box-shadow: 0 18px 38px rgba(5,150,105,0.12); }
  .lift-soft:hover { transform: translateY(-6px); box-shadow: 0 18px 38px rgba(0,0,0,0.08); }
  .btn-white:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(0,0,0,0.28); }
  .btn-green:hover { background: #047857 !important; transform: translateY(-3px); }
  .btn-pill-amber:hover { background: #fde68a !important; }
  .btn-ghost:hover { background: rgba(255,255,255,0.24) !important; transform: translateY(-2px); }
  .footlink:hover { color: #ffffff !important; }
}

/* ------- フォーム フォーカス ------- */
.field:focus { border-color: #059669 !important; box-shadow: 0 0 0 3px rgba(5,150,105,0.15); }

/* ------- FAQ（details/summary アコーディオン） ------- */
.faq { border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; }
.faq > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 22px; background: #fff; font-size: 16px; font-weight: 700; color: #1f2937;
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary .chev { display: inline-flex; flex: none; transition: transform .2s; }
.faq[open] > summary .chev { transform: rotate(180deg); }
.faq .faq-a { padding: 0 22px 20px; color: #4b5563; font-size: 15px; line-height: 1.85; }

/* タップターゲット */
button, a, summary, input, textarea { min-height: 0; }