@charset "euc-jp";

/* ----------------------------
   共通スタイル
---------------------------- */
.keyvisual {
  position: relative;
  z-index: 1;
  overflow: visible;
  min-height: 300px;
  margin-bottom: 0;
}

.keyvisual img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}

.u-text {
  position: relative;
  z-index: 10;
  background: #fff;
  text-align: left; /* 左寄せ */
}

.content.home {
  padding-top: 20px;
}

.section {
  margin-top: 0;
}

.heading-mt40 {
  font-size: 22px; 
  font-weight: 500;
  line-height: 1.3;
  margin-top: 40px;
  margin-bottom: 20px;
}

/* ----------------------------
   ボタンリスト全体
---------------------------- */
.btns--top {
  display: flex;
  justify-content: center; /* 中央寄せ */
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 15px; /* ボタン間の間隔 */
}

.btns--top li {
  margin: 0;
}

/* ----------------------------
   ボタン共通スタイル
---------------------------- */
.btns--top li a {
  display: inline-block;
  padding: 12px 30px;
  border: 2px solid #000; /* 黒枠 */
  border-radius: 0;       /* 完全直角 */
  background-color: #fff;
  color: #000;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  transition: all 0.3s ease;
  text-align: center; /* テキスト中央寄せ（必要なら left に変更可） */
}

/* ホバー時 */
.btns--top li a:hover {
  background-color: #000;
  color: #fff;
  border-color: #000;
}

/* ----------------------------
   個別ボタン（必要に応じて）
   例: FRAMA TOKYO Exclusives / View All Gift Box Collection
---------------------------- */
ul.btns--top li a.ga-top-frama_tokyo_exclusives_learn-more-btn,
ul.btns--top li a.ga-top-frama_gift_box_learn-more-btn {
  /* 上記共通スタイルで統一済み */
  /* 個別追加の必要なし */
}

/* ギフトブロック全体（テキスト＋画像） */
.giftbox-block {
  max-width: 1200px;       /* 最大横幅を設定（Care Collectionに合わせる） */
  margin: 0 auto;           /* 中央寄せ */
  padding: 0 20px;          /* 両サイドの余白を設定 */
  box-sizing: border-box;   /* paddingを含めて幅を計算 */
}

/* 画面幅が広い場合は余白を広げる */
@media screen and (min-width: 1200px) {
  .giftbox-block {
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* テキストブロック */
.giftbox-block .u-text {
  text-align: left;
  margin-bottom: 20px;
}

/* 画像ブロック */
.giftbox-block .image-box {
  display: flex;
  justify-content: flex-start; /* 左寄せ */
  flex-wrap: wrap;
  gap: 20px; /* 画像同士の間隔 */
}

.giftbox-block .image-box__item {
  flex: 1 1 calc(33.333% - 20px); /* 3カラムレイアウトの場合 */
  max-width: calc(33.333% - 20px);
}