/* グッドデザイン賞バナー（2026-10-19 追加）。PC は style.css の pclampVw と同じ clamp(N×2/3 px, N/1180×100vw, N px)、SP は 390px 基準 vw */

.gd-banner {
  position: absolute;
  z-index: 3;
}

.gd-banner {
  display: block;
  box-sizing: border-box;
  border: 2px solid #5b3d42;
  background: #fff;
  color: #5b3d42;
  font-family: "Noto Sans JP", sans-serif;
  text-decoration: none;
  transition: opacity 0.3s;
}

.gd-banner__label {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: #5b3d42;
  color: #fff;
  font-weight: 700;
  line-height: 1;
}

.gd-banner__body {
  display: block;
  box-sizing: border-box;
}

.gd-banner__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  background: #fff;
}

.gd-banner__logo img {
  display: block;
  max-width: none;
  height: auto;
}

.gd-banner__more {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: #5b3d42;
  font-weight: 400;
  line-height: 1.5;
}

.gd-banner__more::after {
  content: "";
  display: block;
  flex: none;
  box-sizing: border-box;
  border-top: 1px solid #5b3d42;
  border-right: 1px solid #5b3d42;
  transform: rotate(45deg);
}

/* PC（768px 以上） */
.gd-banner {
  top: clamp(314px, calc(471 / 1180 * 100vw), 471px);
  right: clamp(26.67px, calc(40 / 1180 * 100vw), 40px);
  width: clamp(180px, calc(270 / 1180 * 100vw), 270px);
  border-radius: clamp(5.33px, calc(8 / 1180 * 100vw), 8px);
}

.gd-banner__label {
  padding: clamp(2.67px, calc(4 / 1180 * 100vw), 4px) 0 clamp(5.33px, calc(8 / 1180 * 100vw), 8px);
  border-radius: clamp(2.67px, calc(4 / 1180 * 100vw), 4px) clamp(2.67px, calc(4 / 1180 * 100vw), 4px) 0 0;
  font-size: clamp(12px, calc(18 / 1180 * 100vw), 18px);
}

.gd-banner__body {
  padding: clamp(2px, calc(3 / 1180 * 100vw), 3px) clamp(5.33px, calc(8 / 1180 * 100vw), 8px);
}

.gd-banner__logo {
  height: clamp(42.67px, calc(64 / 1180 * 100vw), 64px);
}

.gd-banner__logo img {
  width: clamp(142px, calc(213 / 1180 * 100vw), 213px);
}

.gd-banner__more {
  padding-bottom: clamp(5.33px, calc(8 / 1180 * 100vw), 8px);
  font-size: clamp(8px, calc(12 / 1180 * 100vw), 12px);
}

.gd-banner__more::after {
  width: clamp(3.77px, calc(5.66 / 1180 * 100vw), 5.66px);
  height: clamp(3.77px, calc(5.66 / 1180 * 100vw), 5.66px);
  margin-left: clamp(2.11px, calc(3.17 / 1180 * 100vw), 3.17px);
  margin-right: clamp(0.78px, calc(1.17 / 1180 * 100vw), 1.17px);
}

@media (max-width: 767px) {
  .gd-banner {
    top: calc(138.6667vw - 98 / 390 * 100vw);
    right: calc(5.3333vw - 12 / 390 * 100vw);
    width: calc(202 / 390 * 100vw);
    border-radius: calc(8 / 390 * 100vw);
  }

  .gd-banner__label {
    padding: calc(4 / 390 * 100vw) 0 calc(8 / 390 * 100vw);
    border-radius: calc(4 / 390 * 100vw) calc(4 / 390 * 100vw) 0 0;
    font-size: calc(16 / 390 * 100vw);
  }

  .gd-banner__body {
    padding: calc(3 / 390 * 100vw) calc(8 / 390 * 100vw);
  }

  .gd-banner__logo {
    height: calc(46 / 390 * 100vw);
  }

  .gd-banner__logo img {
    width: calc(153 / 390 * 100vw);
  }

  .gd-banner__more {
    padding-bottom: calc(8 / 390 * 100vw);
    font-size: calc(12 / 390 * 100vw);
  }

  .gd-banner__more::after {
    width: calc(5.66 / 390 * 100vw);
    height: calc(5.66 / 390 * 100vw);
    margin-left: calc(3.17 / 390 * 100vw);
    margin-right: calc(1.17 / 390 * 100vw);
  }
}

@media (hover: hover) {
  .gd-banner:hover {
    opacity: 0.7;
  }
}