.scarf-button {
  position: relative;
  display: block;
  width: 350px;
  height: 36px;
  border: 1px solid #1a2bd4;
  border-radius: 999px;
  background-color: #fff;
  text-decoration: none;
  overflow: hidden;
  box-sizing: border-box;
  cursor: pointer;
}

.marquee-wrapper {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.marquee-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  gap: 25px;
  padding-right: 25px;
  animation: scroll-left 15s linear infinite;
  will-change: transform;
  /* 追加すると描画も安定します */
}

@keyframes scroll-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(var(--marquee-distance));
  }
}

.marquee-item {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
}

.color-chip {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
}

.bg-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1a2bd4;
  background-size: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
  pointer-events: none;
}

.hover-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 1px;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2;
  pointer-events: none;
}

.icon-copy {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1px solid white;
  margin-left: 8px;
  position: relative;
}

.icon-copy::before {
  content: '';
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  border-top: 1px solid white;
  border-right: 1px solid white;
}

.scarf-button:hover .marquee-wrapper {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.scarf-button:hover .bg-pattern,
.scarf-button:hover .hover-text {
  opacity: 1;
}

/* Model01: 栗島 (Red Text / Beige BG) */
.model_01_btn .scarf-button {
  color: #ea2110;
  border: 1px solid #ea2110;
  background-color: #e3c6a5;
}

.model_01_btn .marquee-item {
  color: #ea2110;
}

.model_01_btn .color-chip {
  background-color: #ea2110;
}

.model_01_btn .bg-pattern {
  background-image: url('../img/btn_bg_model_01.webp');
}

/* Model02: 臼田 (Blue Text / Light Blue BG) */
.model_02_btn .scarf-button {
  color: #0a00fa;
  border: 1px solid #0a00fa;
  background-color: #ebecff;
}

.model_02_btn .marquee-item {
  color: #0a00fa;
}

.model_02_btn .color-chip {
  background-color: #0a00fa;
}

.model_02_btn .bg-pattern {
  background-image: url('../img/btn_bg_model_02.webp');
}

/* Model03: 上杉 (White Text / Black BG) */
.model_03_btn .scarf-button {
  color: #ffffff;
  border: 1px solid #ffffff;
  /* または border: none; デザインによりますが画像では境界が見えるため白枠 */
  background-color: #222222;
}

.model_03_btn .marquee-item {
  color: #ffffff;
}

.model_03_btn .color-chip {
  background-color: #ffffff;
}

.model_03_btn .bg-pattern {
  background-image: url('../img/btn_bg_model_03.webp');
}

/* Model04: 佐藤 (Yellow Text / Black BG) */
.model_04_btn .scarf-button {
  color: #ffc800;
  /* マスタードイエロー/ゴールド */
  border: 1px solid #ffc800;
  background-color: #1a1a1a;
}

.model_04_btn .marquee-item {
  color: #ffc800;
}

.model_04_btn .color-chip {
  background-color: #ffc800;
}

.model_04_btn .bg-pattern {
  background-image: url('../img/btn_bg_model_04.webp');
}

/* Model05: 太田 (White Text / Red BG) */
.model_05_btn .scarf-button {
  color: #ffffff;
  border: 1px solid #ffffff;
  /* 赤背景に白文字・白枠 */
  background-color: #b71c1c;
  /* 深い赤 */
}

.model_05_btn .marquee-item {
  color: #ffffff;
}

.model_05_btn .color-chip {
  background-color: #ffffff;
}

.model_05_btn .bg-pattern {
  background-image: url('../img/btn_bg_model_05.webp');
}

/* Model06: 笠松 (Orange-Red Text / Pink-Beige BG) */
.model_06_btn .scarf-button {
  color: #e04030;
  border: 1px solid #e04030;
  background-color: #dcc0b1;
  /* ローズベージュ系 */
}

.model_06_btn .marquee-item {
  color: #e04030;
}

.model_06_btn .color-chip {
  background-color: #e04030;
}

.model_06_btn .bg-pattern {
  background-image: url('../img/btn_bg_model_06.webp');
}

/* Model07: 大橋 (Orange-Red Text / Peach-Beige BG) */
.model_07_btn .scarf-button {
  color: #e04030;
  /* Model06と同系色または同じ */
  border: 1px solid #e04030;
  background-color: #e6c8ad;
  /* ピーチベージュ系 */
}

.model_07_btn .marquee-item {
  color: #e04030;
}

.model_07_btn .color-chip {
  background-color: #e04030;
}

.model_07_btn .bg-pattern {
  background-image: url('../img/btn_bg_model_07.webp');
}

/* Model08: みゆ (Brown Text / Grey-Beige BG) */
.model_08_btn .scarf-button {
  color: #8c7755;
  /* ブラウン/カーキ系 */
  border: 1px solid #8c7755;
  background-color: #e3dac7;
  /* グレージュ系 */
}

.model_08_btn .marquee-item {
  color: #8c7755;
}

.model_08_btn .color-chip {
  background-color: #8c7755;
}

.model_08_btn .bg-pattern {
  background-image: url('../img/btn_bg_model_08.webp');
}

@media (max-width: 960px) {
  .scarf-button {
    width: 100%;
    margin-left: max(10px, 1.388888889vw);
    margin-right: max(10px, 1.388888889vw);
  }

  .marquee-item {
    font-weight: 500;
  }
}

/* フッター内のリンクスタイル */
footer a {
  position: relative;
  display: inline-block;
  /* transformを安定させるため */
  text-decoration: none;
  padding-bottom: 2px;
  cursor: pointer;
}

/* 白いアンダーライン（擬似要素） */
footer a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  /* 線の太さ */
  background-color: #000;
  /* 線の色：白 */

  /* アニメーション設定 */
  transition: transform 0.4s ease;

  /* 【デフォルト状態：戻る時の動き】 */
  transform: scaleX(1);
  /* 幅100% */
  transform-origin: left;
  /* 左基準で伸びる（左から右へ出現） */
}

/* ホバー時の挙動 */
footer a:hover::after {
  /* 【ホバー状態：消える時の動き】 */
  transform: scaleX(0);
  /* 幅0% */
  transform-origin: right;
  /* 右基準で縮む（左から右へ消失） */
}