.area-introduction{
padding:0 0 8px;
background-position: bottom;
}
.area-rewards{
padding:0 0 8px;
background-position: bottom;
}
.aera-benefits{
background-color:#fff;
}
.area-service {
background-color:#f1f1f1;
padding:12px 0 64px;
}
#benefits-tab {
background-color:#f1f1f1;
}
#benefits-tab .asw-tab__menu-item{
background-color:#f1f1f1;
}
.icon-tg {
background-color:transparent;
}
#introduction .introduction-point .asw-layout-grid__item{
padding-left:1%;
padding-right:1%;
}
#service #benefits-tab .asw-layout-grid__item{
padding-left:1%;
padding-right:1%;
padding-bottom:2%;
}
#service #benefits-tab .asw-layout-grid__item .asw-tag-card__txt{
padding:0 5% !important;
}
.area-member {
padding:64px 0 0;
}
#service .asw-flag {
  display: flex;            /* 横並びにする */
  flex-wrap: wrap;          /* はみ出たら折り返す */
  gap: 8px;                 /* アイテム間の余白 */
  list-style: none;         /* デフォルトの丸ポチを消す */
  padding: 0;
  margin: 5% 0 0;
  justify-content: center;  /* 中央揃え（必要なら） */
}

#service .asw-flag__item {
  flex: 0 1 auto;           /* アイテムの幅を自動調整 */
  padding: 0;
  margin: 0;
}

#service .asw-flag__item img {
  display: block;
  max-width: 100%;          /* 親に合わせて縮小 */
  height: auto;             /* アスペクト比維持 */
}


/* ================================
   Grid 化（PC=4列 / SP=2列）
   ※ data-属性を利用して切替
=================================== */

/* デフォルトはSP想定（2列） */
.introduction-list > .asw-layout-grid__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px; /* 余白はお好みで */
}

/* タブレット（例: 768px〜） */
@media (min-width: 768px) {
  .introduction-list[data-tab-column="4"] > .asw-layout-grid__inner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* PC（例: 1024px〜） */
@media (min-width: 1024px) {
  .introduction-list[data-pc-column="4"] > .asw-layout-grid__inner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ====== 基本：必ずGridにする（SP=2列） ====== */
.introduction-list > .asw-layout-grid__inner {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;

  /* 既存flex系の影響を無効化 */
  align-items: stretch !important;
  align-content: start !important;   /* space-between等を殺す */
  justify-items: stretch !important;
  justify-content: start !important;

  height: auto !important;           /* 固定高の無効化 */
}

/* タブレット以上は4列（プロジェクト基準で調整OK） */
@media (min-width: 768px) {
  .introduction-list[data-tab-column="4"] > .asw-layout-grid__inner,
  .introduction-list[data-pc-column="4"]  > .asw-layout-grid__inner {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* ====== グリッドアイテムのリセット ====== */
.introduction-list .asw-layout-grid__item {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  align-self: stretch !important; /* 各セルで等高 */
  /* 既存のfloat/width/position等の影響を消す */
  float: none !important;
  width: auto !important;
}

/* ====== ラッパを通してカードをセルいっぱいに ====== */
.introduction-list .aem-Grid,
.introduction-list .ANA-0060,
.introduction-list .ANA-3008 {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.introduction-list .asw-card {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;   /* カード本体をセル一杯に */
  min-height: 100% !important;
  /* 体裁（任意） */
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  overflow: hidden;
}

/* 画像まわりの安定（任意・推奨） */
.introduction-list .asw-tag-card__image-wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.introduction-list .asw-tag-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 角フラグを画像上に重ねる場合 */
.introduction-list .asw-flag {
  position: absolute;
  inset: 8px auto auto 8px;
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 写真の“下”に並べるのをデフォルトに戻す */
.introduction-list .asw-flag {
  position: static !important;   /* 絶対配置を解除 */
  margin: 8px 12px 0 !important;
  display: flex;
  gap: 6px;
  list-style: none;
  padding: 0;
}

/* “画像に重ねたいカードだけ” 付ける専用クラス */
.introduction-list .asw-flag--overlay {
  position: absolute !important;
  inset: 8px auto auto 8px !important; /* 左上 */
  margin: 0 !important;
}

/* overlay時の基準（入れておいてOK。通常表示に悪影響なし） */
.introduction-list .asw-tag-card__image-wrapper {
  position: relative;
}
/* ===== Grid: SP=2, TAB=2, PC=4 ===== */
.introduction-point > .asw-layout-grid__inner {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* SP/TABは2列 */
  gap: 16px !important;
  align-content: start !important;   /* 余白配分の暴れ止め */
  justify-content: start !important;
  height: auto !important;
}
@media (min-width: 1024px) {
  .introduction-point[data-pc-column="4"] > .asw-layout-grid__inner {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* ===== Grid items 等高ストレッチ ===== */
.introduction-point .asw-layout-grid__item {
  align-self: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  width: auto !important;
  box-sizing: border-box;
}

/* ===== 中間ラッパを“透過”or100%でカードをセルいっぱいに ===== */
/* AEMの入れ子が深いので、高さを伝播させる */
.introduction-point .aem-Grid,
.introduction-point .ANA-3001 {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 実カード（.asw-decoration.introduction-item）を等高要素に */
.introduction-point .introduction-item {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 100% !important;
  background: #fff;                 /* 体裁は任意 */
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  overflow: hidden;
  padding-top:12px !important;
  padding-bottom:12px !important;
}

/* ===== 画像エリアを安定化（高さ差の元を断つ） ===== */
.introduction-point figure { margin: 0; }
.introduction-point .asw-image {
  overflow: hidden;
}
.introduction-point .asw-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== テキスト側は可変、余白だけ整える ===== */
.introduction-point .asw-text {
  flex: 1 1 auto;                   /* テキスト量に応じて伸縮 */
}