body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
  background: url("../img/bg_kurashi_b.jpg") top center no-repeat; /* ← パソコン用背景画像 */
  background-size: cover;
  background-attachment: fixed; /* ← 背景を固定する */
  position: relative;
}

/* スマホ用（幅768px以下）では背景画像を切り替える */
@media screen and (max-width: 768px) {
  body {
    background: url("../img/bg_kurashi_s.jpg") top center no-repeat; /* ← スマホ用背景画像 */
    background-size: cover;
	background-attachment: fixed; /* ← 背景を固定する */
  }
}

.about {
  --background-color: rgba(255, 255, 255, 0);
  width: 100%;
  min-height: 100vh;
  padding: 120px 0;
}


.column-title.box-style {
  background-color: #a9a9a9;
  padding: 10px 15px;
  border-left: 5px solid #dc143c;
  font-size: 1.2em;
　display: inline-block; /* ← 文字の長さと合わせる */
}

.underlined {
  border-bottom: 2px solid #ffffff;
  display: inline-block;
  padding-bottom: 2px;
  text-underline-offset: 4px;
}


.gift-box {
  border: 1px solid #ddd;            /* 枠線 */
  border-radius: 10px;               /* 角を10px丸める */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* ほんのり影をつける（立体感） */
  padding: 15px;                    /* 内側の余白 */
  margin-bottom: 10px;              /* 下にスペースを空ける */
  background-color: transparent;            /* 背景色 */
  height: 100%;                     /* 高さを親要素に合わせる
}

.gift-img {
  border: 4px solid #f0f0f0; /* 写真に枠線 */
  border-radius: 8px;        /* 写真の角を丸く */
  padding: 4px;              /* 額縁のようなスペース */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 写真に軽い影 */
  margin-bottom: 10px;
}

.gift-divider {
  border: none;
  height: 1px;
  background-color: #ccc;
  margin: 15px 0;
}