/*ロゴ画像*/
#ad-logo img {
	display: block;
	width: 150px;	/*ロゴの幅*/
}
#ad-logo {
	margin: 0;padding: 0;
	padding-left: 3vw;	/*ロゴの左側に空ける余白*/
}

	/*画面幅700px以上の追加指定*/
	@media screen and (min-width:700px) {

	/*ロゴ画像*/
	#ad-logo img {
		width: 200px;	/*ロゴの幅*/
	}

	}/*追加指定ここまで*/

/* =========================
   パンくずリンク
   ========================= */
.breadcrumb {
  font-size: 0.95rem;
  margin: 1rem 0 0rem 9vw; /* ← 2vw → 4vw に増やして右へ寄せる */
  color: #6b7280;
}
.breadcrumb a {
  color: #6b7280;
  text-decoration: none;
}
.breadcrumb a:hover {
  text-decoration: underline;
}
.breadcrumb span {
  margin: 0 0.4em;
}


/* =========================
   advertisement専用 H2見出し位置調整
   ========================= */
.advertisement-section h2.c {
  margin-top: 0.3rem;   /* 上の余白を縮める */
  margin-bottom: 1.0rem; /* 下の余白も少し縮めてカードに近づける */
  justify-content: flex-start;   /* 左寄せ基準 */
  align-items: flex-start;       /* 中央寄せを解除して左寄せ */
  margin-left: 2vw;              /* 左端から9vw移動 */
}

/* =========================
   Scene Cards Layout（3カラム固定）
   ========================= */
.advertisement-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr)); /* 3カラム固定 */
  gap: 16px;
  padding: 0 12px;
  align-items: start;
  grid-auto-flow: row dense;   /* ← これで段ずれを詰める */
}


/* 画面幅1100px以下 → 2カラム */
@media (max-width: 1100px) {
  .advertisement-cards {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 16px;
  }
}

/* 画面幅640px以下 → 1カラム */
@media (max-width: 640px) {
  .advertisement-cards {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 0 8px;
  }
}

/* カード本体 */

.card-link { display: block; height: 100%; color: inherit; text-decoration: none; }

/* =========================
   Scene Cards Layout（カード1に適用）
   ========================= */
.advertisement-section {
  background: #fff;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* カード本体（新命名） */
.advertisement-card {
  position: relative;
  background: #fff;
  border-radius: 10px;
  transition: transform .2s ease, box-shadow .2s ease;
  border: 1.5px solid #e5e7eb;   /* ← カード枠線は残す */
  border-radius: 8px;
  padding: 0px;
}
.advertisement-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

/* 画像 */
.advertisement-card-media {
  aspect-ratio: 16/9;
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  background: #fafafa;
}
.advertisement-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* タイトル（下の枠と左端合わせ） */
.advertisement-card-title {
  margin: .8rem 0 0;
  padding: 0 .9rem;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* スペック縦並び（価格ボックス相当） */
.advertisement-specs { margin-top: .75rem; padding: 0 .9rem; }
/* スペックボックス */
.spec-box {
  border: none;          /* ← 枠削除 */
  border-radius: 8px;
  padding: .75rem .9rem;
  background: #fff;
}

.spec-box + .spec-box { margin-top: .6rem; }

.spec-label {
  font-size: .85rem;
  color: #333;
  margin-bottom: .25rem;
}
.spec-value {
  font-size: 1.1rem;
  font-weight: 700;
}


/* =========================
   Scene CTA buttons (adjusted slim style)
   ========================= */
.advertisement-cta {
  margin: 20px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 0 12px;
}

/* 矢印をテキスト右側に自然に配置 */
.advertisement-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em; /* テキストと矢印の間隔 */
  height: 60px;
  padding: 0 20px;
  border-radius: 999px;
  background: #ffd400;
  color: #111;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  box-shadow: 0 1px 0 #e5c200, 0 3px 8px rgba(0,0,0,.08);
  border: 1px solid #ffe16a;
  line-height: 1;
  transition: all .25s ease;  /* hover時の反転に滑らかさを追加 */
}

.advertisement-cta-btn .arrow {
  font-weight: 900;
  display: inline-block; /* inline-flexから変更して揃えやすく */
}

/* hoverで背景と文字色を反転 */
.advertisement-cta-btn:hover {
  background: #111;   /* 背景を黒 */
  color: #ffd400;     /* 文字を黄 */
  border-color: #111; /* 枠線も黒で統一 */
  box-shadow: 0 1px 0 #000, 0 5px 10px rgba(0,0,0,.12);
}


/* CTA内の矢印（グローバル .arrow と競合しない専用クラス） */
.advertisement-cta-btn .cta-arrow{
  display: inline-flex;
  align-items: center;
  margin-left: .5em;
  font-weight: 900;
  line-height: 1;
}

/* スマホ時は縦積み */
@media (max-width: 640px) {
  .advertisement-cta {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 0 8px;
  }
}