@charset "utf-8";

/* ==================================================
ビスコテックススクエアトップ編集エリア用

   Scope: ONLY inside .ec-top-redarea
   （赤枠エリア専用：他のヘッダー/フッター等へ影響しません）
================================================== */
/* ==================================================
   Scope: ONLY inside .ec-top-redarea
================================================== */
.ec-top-redarea {
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;

  /* 各エリア同士の上下間隔（調整可） */
  --space: 2rem;

  /* ブランド画像（上段）の比率：横長 */
  --brand-thumb-ratio: 2 / 1;

  /* 2列バナー比率 */
  --two-col-ratio: 16 / 9;

  max-width: 72rem;
  margin-inline: auto;

  /* 2列開始位置を詰める */
  padding: 0 1rem 1.75rem;
}

/* ==================================================
   2列バナー（PC:2列 / SP:1列）
================================================== */
.ec-top-redarea .ec-top-redarea__twoCol {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;

  margin-top: 0;
  padding-top: 0;

  margin-bottom: var(--space);
}

.ec-top-redarea .ec-top-redarea__banner {
  display: block;
  overflow: hidden;
  background: #f3f3f3;
  text-decoration: none;
  border-radius: 0;
}

.ec-top-redarea .ec-top-redarea__banner--half {
  aspect-ratio: var(--two-col-ratio);
}

.ec-top-redarea .ec-top-redarea__pic {
  display: block;
  width: 100%;
  height: 100%;
}

.ec-top-redarea .ec-top-redarea__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ==================================================
   ブランドタイル（画像＋ロゴ分離）
   PC:3列 / SP:2列→→→   PC:4列 / SP:2列
================================================== */
.ec-top-redarea .ec-top-redarea__brandGrid {
  display: grid;
  /*grid-template-columns: repeat(3, 1fr);*/
  grid-template-columns: repeat(4, 1fr);

  /* タイル間隔：少し狭め */
  gap: 0.9rem 0.75rem;

  margin-bottom: var(--space);
}

.ec-top-redarea .ec-top-redarea__brandCard {
  display: grid;
  grid-template-rows: auto auto; /* 画像 → ロゴ帯 */
  text-decoration: none;
  color: inherit;
  border-radius: 0;
}

/* 画像（上段） */
.ec-top-redarea .ec-top-redarea__thumb {
  aspect-ratio: var(--brand-thumb-ratio);
  overflow: hidden;
  background: #f3f3f3;
}

.ec-top-redarea .ec-top-redarea__thumbImg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ロゴ帯（下段）：画像に近づける（コンパクト） */
.ec-top-redarea .ec-top-redarea__logoBand {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 0;

  /* ★「中（基本）」に合わせたロゴ帯 */
  min-height: 2.6rem;
  padding: 0.35rem 0.4rem;
}

/* --------------------------------------------------
   ロゴサイズ：大・中・小
   ★中（md）を基本（デフォルト）にする
-------------------------------------------------- */

/* 中（基本） */
.ec-top-redarea .ec-top-redarea__logoImg {
  display: block;
  width: auto;
  height: auto;

  max-height: 1.3rem;  /* ★中をデフォルト */
  max-width: 82%;
}

/* 小（sm）：より小さくしたいブランド */
.ec-top-redarea .ec-top-redarea__brandCard.is-logo-sm .ec-top-redarea__logoImg {
  max-height: 0.9rem;
  max-width: 80%;
}

/* 大（lg）：常に大きくしたいブランド（2つ） */
.ec-top-redarea .ec-top-redarea__brandCard.is-logo-large .ec-top-redarea__logoImg {
  max-height: 2.25rem;
  max-width: 85%;
}

/* 大ロゴだけ、帯も少し厚くして収まりを良くする */
.ec-top-redarea .ec-top-redarea__brandCard.is-logo-large .ec-top-redarea__logoBand {
  min-height: 2.9rem;
  padding: 0.4rem 0.4rem;
}

/* hover（任意） */
.ec-top-redarea .ec-top-redarea__brandCard:hover .ec-top-redarea__thumbImg {
  transform: scale(1.02);
  transition: transform 180ms ease;
}

/* ==================================================
   CTAボタン（幅いっぱいにしない）
================================================== */
.ec-top-redarea .ec-top-redarea__cta {
  display: flex;
  justify-content: center;
  margin-bottom: calc(var(--space) * 1.6);	
}

.ec-top-redarea .ec-top-redarea__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  width: auto;
  min-width: 16rem;
  padding: 0.9rem 1.8rem;

  background: #1f2a60;
  color: #fff;
  text-decoration: none;
  /*font-weight: 600;*/
	font-weight: normal;
  letter-spacing: 0.02em;

  border-radius: 0;
}

.ec-top-redarea .ec-top-redarea__btn:hover {
  opacity: 0.92;
}

.ec-top-redarea .ec-top-redarea__btnIcon {
  line-height: 1;
  font-size: 1.05em;
}

/* ==================================================
   1列バナー（PCと同じ画像をSPでも使用）
================================================== */
.ec-top-redarea .ec-top-redarea__full {
  margin-bottom: 0;
}

.ec-top-redarea .ec-top-redarea__banner--full {
  display: block;
  overflow: hidden;
  background: #f3f3f3;
  border-radius: 0;

  aspect-ratio: 21 / 6; /* 必要なら調整 */
}

/* ==================================================
   Responsive (SP)
================================================== */
@media (max-width: 768px) {
  .ec-top-redarea {
    padding: 0 0.75rem 1.25rem;
    --space: 1.75rem;
  }

  /* 2列 → 1列 */
  .ec-top-redarea .ec-top-redarea__twoCol {
    grid-template-columns: 1fr;
    gap: 0.65rem;
	  
	  margin-top: -25px;
  }

  /* ブランド：3列 → 2列 */
  .ec-top-redarea .ec-top-redarea__brandGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem 0.6rem;
  }

  /* SPではロゴ帯を少しだけ詰める */
  .ec-top-redarea .ec-top-redarea__logoBand {
    min-height: 2.4rem;
    padding: 0.3rem 0.35rem;
  }

  /* 中（基本）：SPはほんの少し小さめでもOK */
  .ec-top-redarea .ec-top-redarea__logoImg {
    max-height: 1.2rem;
    max-width: 88%;
  }

  /* 小（sm） */
  .ec-top-redarea .ec-top-redarea__brandCard.is-logo-sm .ec-top-redarea__logoImg {
    max-height: 0.85rem;
    max-width: 88%;
  }

  /* 大（lg）：SPでも大きく（必要に応じて微調整） */
  .ec-top-redarea .ec-top-redarea__brandCard.is-logo-large .ec-top-redarea__logoBand {
    min-height: 2.8rem;
    padding: 0.35rem 0.4rem;
  }
  .ec-top-redarea .ec-top-redarea__brandCard.is-logo-large .ec-top-redarea__logoImg {
    max-height: 2.0rem;
    max-width: 90%;
  }

  /* ボタン：SPでも幅いっぱいにしない */
  .ec-top-redarea .ec-top-redarea__btn {
    min-width: 15rem;
    padding: 0.9rem 1.6rem;
  }
}

/* =====================================
   1列バナー：左右が切れないようにする
   ＋ バナー間に余白を作る
===================================== */

/* 1列バナーの枠を画像比率（1000×250 = 4:1）に合わせる */
.ec-top-redarea .ec-top-redarea__banner--full {
  aspect-ratio: 4 / 1;
}

/* 画像は切らずに全体表示 */
.ec-top-redarea .ec-top-redarea__banner--full img {
  object-fit: contain;        /* ← 左右が切れない */
  background: #fff;           /* 余白が出た時の背景（白でOK） */
}

/* 1列バナー同士の間隔を作る */
.ec-top-redarea .ec-top-redarea__full {
  margin-bottom: 1rem;        /* お好みで 0.75〜1.5rem */
}

/* 最後の1列バナーだけは少し詰めたい場合（任意） */
.ec-top-redarea .ec-top-redarea__full:last-child {
  margin-bottom: 0.5rem;
}