/*
  全体
*/
body {

  margin: 0;

  padding: 0;

  background:
    #f3f5f7;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color:
    #333;

}

/*
  レイアウト
*/
.container {

  max-width:
    640px;

  margin:
    0 auto;

  padding:
    24px 16px 80px;

}

/*
  タイトル
*/
h1 {

  margin-top:
    12px;

  margin-bottom:
    20px;

  font-size:
    32px;

  line-height:
    1.4;

  text-align:
    center;

  color:
    #37474f;

}

/*
  アプリサブタイトル
*/
.app-subtitle {

  margin-top:
    -12px;

  margin-bottom:
    16px;

  font-size:
    13px;

  text-align:
    center;

  color:
    #78909c;

}

/*
  説明文
*/
.notice {

  margin-bottom:
    28px;

  padding:
    18px;

  background:
    #ffffff;

  border-radius:
    16px;

  line-height:
    1.9;

  font-size:
    15px;

  box-shadow:
    0 2px 8px rgba(0,0,0,0.05);

}

/*
  カード
*/
.card {

  background:
    #ffffff;

  border-radius:
    20px;

  padding:
    24px;

  box-shadow:
    0 4px 12px rgba(0,0,0,0.06);

}

/*
  質問タイトル
*/
.question {

  font-size:
    24px;

  font-weight:
    bold;

  line-height:
    1.6;

  margin-bottom:
    24px;

  color:
    #37474f;

}

/*
  ボタン
*/
.button {

  width:
    100%;

  border:
    none;

  border-radius:
    16px;

  padding:
    18px;

  margin-bottom:
    16px;

  color:
    white;

  font-size:
    16px;

  font-weight:
    bold;

  cursor:
    pointer;

  transition:
    0.2s;

}

/*
  ボタン hover
*/
.button:hover {

  opacity:
    0.9;

  transform:
    translateY(-1px);

}

/*
  戻るボタン
*/
.back-button {

  background:
    #b0bec5;

  color:
    #263238;

  margin-top:
    12px;

}

/*
  プルダウン
*/
.select {

  width:
    100%;

  padding:
    14px;

  margin-bottom:
    16px;

  border:
    1px solid #cfd8dc;

  border-radius:
    12px;

  font-size:
    16px;

  background:
    white;

  box-sizing:
    border-box;

}

/*
  地域検索ボックス
*/
.area-search {

  width:
    100%;

  padding:
    14px;

  margin-bottom:
    8px;

  border:
    1px solid #cfd8dc;

  border-radius:
    12px;

  font-size:
    16px;

  background:
    white;

  box-sizing:
    border-box;

  color:
    #37474f;

}

/*
  地域リスト
*/
.area-list {

  max-height:
    240px;

  overflow-y:
    auto;

  border:
    1px solid #cfd8dc;

  border-radius:
    12px;

  margin-bottom:
    16px;

  background:
    white;

}

/*
  地域リスト 各項目
*/
.area-item {

  padding:
    14px 16px;

  font-size:
    16px;

  cursor:
    pointer;

  border-bottom:
    1px solid #eceff1;

  color:
    #37474f;

}

.area-item:last-child {

  border-bottom:
    none;

}

.area-item:hover {

  background:
    #f5f7f8;

}

.area-item:active {

  background:
    #eceff1;

}

/*
  リンク
*/
a {

  color:
    #1565c0;

  text-decoration:
    none;

  line-height:
    1.8;

}

a:hover {

  text-decoration:
    underline;

}

/*
  フッター注意書き
*/
.footer-note {

  margin-top:
    48px;

  padding:
    20px;

  font-size:
    12px;

  line-height:
    1.9;

  color:
    #666;

  text-align:
    center;

}

/*
  電話ボタン（無効状態）
*/
.button:disabled {

  opacity:
    0.6;

}

/*
  ハンバーガーメニュー ボタン
*/
.menu-toggle {

  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 1001;

  width: 44px;
  height: 44px;

  border: none;
  border-radius: 12px;

  background: #ffffff;
  color: #37474f;

  font-size: 22px;
  line-height: 1;

  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  cursor: pointer;

}

.menu-toggle.hidden {
  display: none;
}

/*
  ハンバーガーメニュー 背景オーバーレイ
*/
.menu-overlay {

  display: none;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  background: rgba(0,0,0,0.4);
  z-index: 999;

}

.menu-overlay.open {
  display: block;
}

/*
  ハンバーガーメニュー ドロワー本体
*/
.menu-drawer {

  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;

  width: 80%;
  max-width: 320px;

  background: #ffffff;

  box-shadow: 2px 0 16px rgba(0,0,0,0.15);

  transform: translateX(-100%);
  transition: transform 0.25s ease;

  z-index: 1000;

  padding: 20px;
  box-sizing: border-box;

  overflow-y: auto;

}

.menu-drawer.open {
  transform: translateX(0);
}

.menu-drawer-header {

  display: flex;
  justify-content: space-between;
  align-items: center;

  font-size: 16px;
  font-weight: bold;
  color: #37474f;

  margin-bottom: 20px;
  padding-bottom: 12px;

  border-bottom: 1px solid #eceff1;

}

.menu-close {

  border: none;
  background: none;

  font-size: 22px;
  line-height: 1;
  color: #78909c;

  cursor: pointer;

}

.menu-section {

  margin-bottom: 24px;

  font-size: 14px;
  line-height: 1.8;
  color: #455a64;

}

.menu-section h2 {

  font-size: 14px;
  font-weight: bold;
  color: #37474f;
  margin: 0 0 8px;

}

.menu-version {

  font-size: 12px;
  color: #90a4ae;

}

/*
  プライバシーポリシー本文（index.html内オーバーレイ・privacy.html単独表示 共通）
*/
.privacy-body { text-align: left; line-height: 1.9; margin-top: 1.5em; }
.privacy-body h2 {
  font-size: 16px;
  font-weight: bold;
  margin-top: 2em;
  margin-bottom: 0.5em;
  padding-left: 10px;
  border-left: 3px solid #546e7a;
  color: #37474f;
}
.privacy-body p { margin-bottom: 0.8em; }
.privacy-body ul { padding-left: 1.4em; margin-bottom: 0.8em; }
.privacy-body li { margin-bottom: 0.3em; }
.privacy-body a { color: #1565c0; }
.privacy-meta { font-size: 13px; color: #888; margin-top: 2.5em; padding-top: 1.5em; border-top: 1px solid #eceff1; }

/*
  スマホ対応
*/
@media (max-width: 480px) {

  h1 {

    font-size:
      26px;

  }

  .question {

    font-size:
      21px;

  }

  .button {

    font-size:
      15px;

    padding:
      16px;

  }

}