/* ==========================================================
 📦 box.css
 対応HTML：box.html（ボックスデザインページ）
 デザイン内容：情報・注意・装飾ボックス5種
 ----------------------------------------------------------
 ① ベーシック（左ライン）
 ② 点線ボーダー
 ③ 影付き
 ④ グラデーション背景
 ⑤ 二重線ボーダー
========================================================== */

/* ===== ① ベーシックボックス ===== */
.box {
  border-left: 5px solid #039BE5;
  background: #E3F2FD;
  padding: 15px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* ===== ② 点線ボーダー ===== */
.box-dashed {
  border: 2px dashed #0277BD;
  background: #E3F2FD;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* ===== ③ 影付きボックス ===== */
.box-shadow {
  background: #E1F5FE;
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
  margin-bottom: 20px;
}

/* ===== ④ グラデーション背景 ===== */
.box-gradient {
  background: linear-gradient(135deg,#81D4FA,#29B6F6);
  color: #fff;
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 20px;
}

/* ===== ⑤ 二重線ボーダー ===== */
.box-double {
  border: 3px double #0288D1;
  background: #fafafa;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}