body{
  margin:0;
  font-family:"Noto Sans JP",sans-serif;
  background:#f4f6fb;
  color:#222;
  font-size:18px;
}

header{
  display:flex;
  justify-content:space-between;
  padding:18px;
  background:#fff;
  box-shadow:0 5px 15px rgba(0,0,0,0.08);
  position:relative;  /* ←これ必須 */
  z-index:1000;
}

/* ロゴリンク */

.logo{
  line-height:1.2;
}

.logo a{
  color:#222222;             /* 黒 */
  text-decoration:none;   /* 下線なし */
  font-size:1.4rem;
  font-weight:bold;
}

/* 念のため hover でも変えない */
.logo a:hover{
  color:#222222;
  text-decoration:none;
}

/* サブコピー */
.sub-logo{
  font-size:0.9rem;       /* 小さめ */
  color:#888;             /* グレー */
  margin-top:2px;
}

.header-btns a{
  margin-left:10px;
  padding:10px 16px;
  background:#2c7be5;
  color:#fff;
  text-decoration:none;
  border-radius:10px;
}

main{
  max-width:900px;
  margin:auto;
  padding:20px;
}

h1{
  font-size:1.6rem;
  margin-bottom:20px;
}

.box{
  background:#fff;
  padding:20px;
  border-radius:16px;
  box-shadow:0 5px 15px rgba(0,0,0,0.08);
}

.line-btn{
  display:block;
  margin:30px auto;
  width:90%;
  max-width:400px;
  text-align:center;
  padding:18px;
  background:#06c755;
  color:#fff;
  text-decoration:none;
  border-radius:50px;
  font-size:1.1rem;
}

.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.card{
  background:#fff;
  border-radius:16px;
  padding:18px 10px;
  text-align:center;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
  cursor:pointer;
  transition:0.2s;
}

.card:hover{
  transform:translateY(-3px);
}

/* タイトル */
.title{
  font-size:0.95rem;
  font-weight:bold;
  margin-top:6px;
}

/* サブ */
.sub{
  font-size:0.75rem;
  color:#888;
  margin-top:2px;
}

/* アイコン */

.card:nth-child(1) .icon{ color:#4caf50; }
.card:nth-child(2) .icon{ color:#2196f3; }
.card:nth-child(3) .icon{ color:#ff9800; }

/* ヘッダー配置 */
.header-icons{
  display:flex;
  gap:14px;
}

/* ボタン */
.icon-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  color:#333;
}

/* アイコン */
.icon{
  font-size:24px;
  color:#2c7be5;
}

/* 電話だけ赤 */
.icon-btn.tel .icon{
  color:#e53935;
}

.icon-btn:active{
  transform:scale(0.95);
}

/* 色分け（視認性UP） */
.bg-blue{ background:#2196f3; }
.bg-gray{ background:#607d8b; }
.bg-green{ background:#06c755; } /* LINE */
.bg-red{ background:#e53935; }

/* テキスト */
/* 電話色 */
.icon.tel{
  color:#e53935;
}

/* ラベル */
.label{
  font-size:0.7rem;
  margin-top:2px;
  color:#555;
}

/* 計算UI */
.calc-select{
  width:100%;
  padding:12px;
  font-size:1rem;
  border-radius:10px;
  border:1px solid #ccc;
  margin-top:5px;
}

/* 結果 */
.result{
  font-size:1.4rem;
  font-weight:bold;
  color:#2c7be5;
}

.result.sub{
  color:#e53935;
  font-size:1.3rem;
}

/* マップ最適化 */
.map-wrap{
  position:relative;
  width:100%;
  height:0;
  padding-bottom:70%; /* ←高さ調整（重要） */
  margin-top:10px;
  border-radius:12px;
  overflow:hidden;
}

.map-wrap iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:0;
}

/* グリッド */
.login-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
  margin-top:20px;
}

/* カード */
.login-card{
  background:#fff;
  border-radius:16px;
  padding:20px;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
  text-align:center;
}

/* タイトル */
.login-card h2{
  font-size:1.2rem;
  margin-bottom:5px;
}

/* サブ */
.login-card .sub{
  font-size:0.85rem;
  color:#777;
  margin-bottom:15px;
}

/* 入力 */
.login-card input{
  width:100%;
  padding:12px;
  margin-bottom:10px;
  border-radius:8px;
  border:1px solid #ccc;
  font-size:1rem;
}

/* ボタン */
.login-card button{
  width:100%;
  padding:12px;
  border:none;
  border-radius:8px;
  font-size:1rem;
  color:#fff;
  cursor:pointer;
}

/* 色分け */
.login-card.user button{ background:#2c7be5; }
.login-card.cm button{ background:#00a8a8; }
.login-card.doctor button{ background:#6c757d; }

/* タップ感 */
.login-card button:active{
  transform:scale(0.98);
}

/* ログイン案内 */
.login-box{
  max-width:420px;
  margin:30px auto;
  padding:0 15px;
  text-align:center;
}

.login-text{
  font-size:0.9rem;
  color:#666;
  margin-bottom:20px;
}

/* ボタン */
.login-btn{
  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;           /* ←必須 */
  margin:15px 0;
  padding:18px;

  border-radius:12px;
  color:#fff;
  text-decoration:none;

  font-size:1.1rem;
  font-weight:bold;

  box-sizing:border-box;  /* ←これも重要 */
}

/* アイコン揃え */
.login-btn i{
  width:1.5em;
  text-align:center;
}

/* 色分け */
.login-btn.user{ background:#2c7be5; }
.login-btn.cm{ background:#00a8a8; }
.login-btn.doctor{ background:#6c757d; }

.login-btn:active{
  transform:scale(0.97);
}


/* ===== ヘッダー ===== */
.site-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 15px;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,0.05);
  position:sticky;
  top:0;
  z-index:1000;
}

.logo a{
  text-decoration:none;
  color:#000;
  font-weight:bold;
}

/* アイコン */
.header-icons{
  display:flex;
  gap:15px;
}

.icon-btn{
  font-size:22px;
  cursor:pointer;
}

.tel{
  color:#e53935;
}

/* ===== スライドメニュー（最終） ===== */

.side-menu{
  position:fixed;

  top:0;
  right:0;

  width:320px;
  height:100%;

  background:#fff;

  z-index:9999;

  padding:20px;

  box-shadow:-4px 0 10px rgba(0,0,0,0.1);

  /* ★ここ重要 */
  transform:translateX(100%);  /* 完全に右へ逃がす */

  transition:0.3s;
}

/* 開いたとき */
.side-menu.open{
  transform:translateX(0);
}

/* メニュー項目 */
.side-menu a{
  display:block;
  padding:16px;
  border-bottom:1px solid #eee;
  font-size:1.1rem;
}

.menu-btn i{
  font-size:22px;
  color:#333;
}

.overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;

  background:rgba(0,0,0,0.4);

  opacity:0;
  visibility:hidden;

  transition:0.3s;

  z-index:9998; /* メニューの下 */
}

.overlay.show{
  opacity:1;
  visibility:visible;
}

/* メニュー上部 */
.menu-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:1.2rem;
  font-weight:bold;
  margin-bottom:10px;
}

/* 閉じるボタン */
.menu-close{
  background:none;
  border:none;
  font-size:24px;
  cursor:pointer;
}

/* メニュー全体 */
.side-menu a{
  display:flex;
  align-items:center;
  gap:12px;

  padding:18px 16px;   /* ← タップしやすい */
  border-bottom:1px solid #eee;

  font-size:1.05rem;
  color:#333;
  text-decoration:none;
}

/* ===== 共通 ===== */
.icon i,
.side-menu i{
  width:22px;
}

/* ===== サイズ分け ===== */
.icon i{
  font-size:26px;
}

.side-menu i{
  font-size:18px;
}

/* 色分け */
.icon-home   { color:#2c7be5; } /* 青 */
.icon-info   { color:#17a2b8; } /* 水色 */
.icon-howto  { color:#6f42c1; } /* 紫 */
.icon-price  { color:#28a745; } /* 緑 */
.icon-service{ color:#fd7e14; } /* オレンジ */
.icon-kyoto  { color:#e83e8c; } /* ピンク */
.icon-shiga  { color:#20c997; } /* ミント */
.icon-nail   { color:#ff9800; } /* 爪系 */
.icon-taxi   { color:#ffc107; } /* 黄色 */
.icon-staff  { color:#6c757d; } /* グレー */
.icon-login  { color:#1784f0; } /* 濃グレー */
.icon-contact{ color:#e53935; } /* 赤（問い合わせ強調） */
.icon-medical{ color:#1784f0; }
/* タップ時 */
.side-menu a:active{
  background:#f0f4ff;
}

.side-menu a:hover i{
  transform:scale(1.2);
  transition:0.2s;
}

/* ===== チャットUI専用 ===== */

.chat{
  max-width:600px;
  margin:auto;
  padding:30px 20px;
}

.msg{
  margin-bottom:20px;
  padding:14px;
  border-radius:12px;
  font-size:16px;
}

.bot{
  background:#f1f1f1;
}

.user{
  background:#2c7be5;
  color:#fff;
  text-align:right;
}

/* 選択ボタン */
.select-btn{
  display:block;
  width:100%;
  padding:14px;
  margin:10px 0;
  border-radius:10px;
  border:1px solid #ddd;
  background:#fff;
  font-size:16px;
}

/* OKボタン */
.ok-btn{
  display:block;
  width:100%;
  padding:14px;
  margin-top:10px;
  border-radius:10px;
  border:none;
  background:#2c7be5;
  color:#fff;
}

/* 閉じる専用 */
.close-btn{
  display:inline-block;
  width:auto;
  padding:14px 24px;
  border-radius:30px;
  border:none;
  background:#2c7be5;
  color:#fff;
  font-size:16px;
}

.finish .close-btn{
  display:inline-block;
  width:auto !important;
  padding:14px 24px;
  border-radius:30px;
  background:#2c7be5;
  color:#fff;
  border:none;
  font-size:16px;
}

.big-q{
  font-size:26px !important;
  font-weight:bold;
  line-height:1.6;
}