/* top-2026.css : 新 TOP（index.html）専用。.kc-top- の class だけで書く。値は Figma 仕様書（PC 1400 / SP 390）どおり */
/* PC: 1400px 以上は px 固定、768〜1399px は calc(px / 1400 * 100vw)。SP: 767px 以下は calc(px / 390 * 100vw) */

.kc-top-visually-hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ===== FV ===== */
.kc-top-fv {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.kc-top-fv__inner {
  position: relative;
  margin: 0 auto;
  height: 100%;
}

.kc-top-fv__title {
  position: absolute;
  margin: 0;
}

.kc-top-fv__title-img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

.kc-top-fv__icon {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
  animation: kc-top-float 5s ease-in-out infinite;
}

.kc-top-fv__icon--e {
  animation-delay: 0s;
}

.kc-top-fv__icon--h {
  animation-delay: 0.2s;
}

.kc-top-fv__icon--g {
  animation-delay: 0.3s;
}

.kc-top-fv__icon--c {
  animation-delay: 0.4s;
}

.kc-top-fv__icon--f {
  animation-delay: 0.5s;
}

.kc-top-fv__town {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  background-repeat: no-repeat;
  background-size: cover;
}

@keyframes kc-top-float {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, -15px);
  }
  100% {
    transform: translate(0, 0);
  }
}

/* ===== カード一覧 ===== */
.kc-top-cards {
  position: relative;
  display: flow-root;
  background: #ffdb4f;
  color: #5b3d42;
}

.kc-top-tabs {
  position: relative;
  display: flex;
}

.kc-top-tab {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border-style: solid;
  border-color: #5b3d42;
  background: #fff;
  color: #5b3d42;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  cursor: pointer;
}

.kc-top-tab.is-active {
  background: #5b3d42;
  color: #fff;
}

.kc-top-cards__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kc-top-card {
  background: #fff;
  transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
  will-change: transform, filter;
}

.kc-top-card[hidden] {
  display: none;
}

.kc-top-card__link {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  color: #5b3d42;
  text-decoration: none;
  border-radius: inherit;
}

.kc-top-card__thumb {
  margin: 0;
  width: 100%;
  aspect-ratio: 278 / 156;
  overflow: hidden;
}

.kc-top-card__thumb img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s ease-in-out;
}

.kc-top-card__thumb--top img {
  object-position: center top;
}

.kc-top-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.kc-top-card__company {
  margin: 0;
  border-radius: 999px;
  background: var(--kc-top-pill);
  color: #fff;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

.kc-top-card__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.kc-top-card__title {
  margin: 0;
  font-weight: 700;
  line-height: 1.3;
}

.kc-top-card__theme {
  margin: 0;
  font-weight: 400;
  line-height: 1.5;
  text-align: justify;
}

.kc-top-card__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kc-top-card__tag {
  background: #ffdb4f;
  font-weight: 700;
  line-height: 1;
}

/* ページ送り */
.kc-top-pager {
  display: flex;
  justify-content: center;
}

.kc-top-pager__list {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kc-top-pager__item {
  display: flex;
  margin: 0;
}

.kc-top-pager__link,
.kc-top-pager__blank {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff;
  color: #5b3d42;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.kc-top-pager__link.is-current {
  background: #5b3d42;
  color: #fff;
}

.kc-top-pager__blank {
  background: transparent;
}

.kc-top-pager__prev,
.kc-top-pager__next {
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.kc-top-pager__prev::before,
.kc-top-pager__next::before {
  content: "";
  position: absolute;
  top: 50%;
  box-sizing: border-box;
  border-style: solid;
  border-color: #5b3d42;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.kc-top-pager__prev::before {
  left: 100%;
  border-width: 2px 0 0 2px;
}

.kc-top-pager__next::before {
  left: 0;
  border-width: 0 2px 2px 0;
}

.kc-top-pager__prev::after,
.kc-top-pager__next::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -8px;
  right: -8px;
}

.kc-top-cards__note {
  margin: 0 auto;
  text-align: center;
  font-weight: 400;
  line-height: 1;
}

.kc-top-cards__town {
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}

.kc-top-tab:focus-visible,
.kc-top-card__link:focus-visible,
.kc-top-pager__link:focus-visible {
  outline: 2px solid #5b3d42;
  outline-offset: 2px;
}

/* ===== リード文 ===== */
.kc-top-lead {
  position: relative;
  z-index: 1;
  overflow-x: clip;
  background: #fff;
  color: #5b3d42;
  text-align: center;
}

.kc-top-lead__inner {
  position: relative;
  margin: 0 auto;
}

.kc-top-lead__copy {
  margin: 0 auto;
}

.kc-top-lead__heading {
  margin: 0;
  font-weight: 700;
  line-height: 1.6;
}

.kc-top-lead__text {
  margin: 0;
  font-weight: 400;
  line-height: 1.8;
}

.kc-top-lead__marker {
  background: linear-gradient(transparent 70%, #ffdb4f 70%, #ffdb4f 94%, transparent 94%);
  box-decoration-break: clone;
}

.kc-top-lead__illust {
  position: absolute;
  display: block;
  max-width: none;
}

.kc-top-lead__illust--cloud-c3 {
  transform: scaleX(-1);
}

/* ===== グッドデザイン賞バナー（共通） ===== */
.gd-banner {
  position: absolute;
  z-index: 1;
}

.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 以上） ===== */
@media (min-width: 768px) {
  .kc-top-br--sp {
    display: none;
  }

  .kc-top-fv {
    height: min(314px, calc(314 / 1400 * 100vw));
  }

  .kc-top-fv__inner {
    width: min(1400px, calc(1400 / 1400 * 100vw));
  }

  .kc-top-fv__title {
    top: min(56px, calc(56 / 1400 * 100vw));
    left: min(356px, calc(356 / 1400 * 100vw));
    width: min(688px, calc(688 / 1400 * 100vw));
  }

  .kc-top-fv__icon--e {
    top: min(22px, calc(22 / 1400 * 100vw));
    left: min(1078px, calc(1078 / 1400 * 100vw));
    width: min(34px, calc(34 / 1400 * 100vw));
  }

  .kc-top-fv__icon--h {
    top: min(36px, calc(36 / 1400 * 100vw));
    left: min(151px, calc(151 / 1400 * 100vw));
    width: min(62px, calc(62 / 1400 * 100vw));
  }

  .kc-top-fv__icon--g {
    top: min(52px, calc(52 / 1400 * 100vw));
    left: min(1307px, calc(1307 / 1400 * 100vw));
    width: min(30px, calc(30 / 1400 * 100vw));
  }

  .kc-top-fv__icon--c {
    top: min(125px, calc(125 / 1400 * 100vw));
    left: min(86px, calc(86 / 1400 * 100vw));
    width: min(34px, calc(34 / 1400 * 100vw));
  }

  .kc-top-fv__icon--f {
    top: min(126px, calc(126 / 1400 * 100vw));
    left: min(1148px, calc(1148 / 1400 * 100vw));
    width: min(60px, calc(60 / 1400 * 100vw));
  }

  .kc-top-fv__town {
    height: min(90px, calc(90 / 1400 * 100vw));
    background-image: url(/miraiseed/fansite/kigyou_collabo/assets/img/bg-mv_re_pc.svg);
    background-position: center bottom;
  }

  .kc-top-cards__tabs {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    margin: max(-16px, calc(-16 / 1400 * 100vw)) auto 0;
    padding: min(8px, calc(8 / 1400 * 100vw)) min(16px, calc(16 / 1400 * 100vw));
    width: min(1272px, calc(1272 / 1400 * 100vw));
    border-radius: min(24px, calc(24 / 1400 * 100vw));
    background: #ffdb4f;
  }

  .kc-top-tabs {
    gap: min(8px, calc(8 / 1400 * 100vw));
  }

  .kc-top-tabs::after {
    content: "";
    position: absolute;
    right: max(-8px, calc(-8 / 1400 * 100vw));
    bottom: 0;
    left: max(-8px, calc(-8 / 1400 * 100vw));
    height: min(2px, calc(2 / 1400 * 100vw));
    background: #5b3d42;
    pointer-events: none;
  }

  .kc-top-tab {
    flex: 0 0 min(148px, calc(148 / 1400 * 100vw));
    height: min(64px, calc(64 / 1400 * 100vw));
    border-width: min(2px, calc(2 / 1400 * 100vw));
    border-radius: min(16px, calc(16 / 1400 * 100vw)) min(16px, calc(16 / 1400 * 100vw)) 0 0;
    font-size: min(20px, calc(20 / 1400 * 100vw));
  }

  .kc-top-cards__list {
    grid-template-columns: repeat(4, min(302px, calc(302 / 1400 * 100vw)));
    gap: min(16px, calc(16 / 1400 * 100vw));
    justify-content: center;
    margin-top: min(32px, calc(32 / 1400 * 100vw));
  }

  .kc-top-card {
    border-radius: min(46px, calc(46 / 1400 * 100vw));
  }

  .kc-top-card__link {
    gap: min(14px, calc(14 / 1400 * 100vw));
    padding: min(12px, calc(12 / 1400 * 100vw)) min(12px, calc(12 / 1400 * 100vw)) min(24px, calc(24 / 1400 * 100vw));
  }

  .kc-top-card__thumb {
    border-radius: min(35px, calc(35 / 1400 * 100vw)) min(35px, calc(35 / 1400 * 100vw)) 0 0;
  }

  .kc-top-card__body {
    gap: min(14px, calc(14 / 1400 * 100vw));
  }

  .kc-top-card__company {
    padding: min(5px, calc(5 / 1400 * 100vw)) min(12px, calc(12 / 1400 * 100vw));
    font-size: min(15px, calc(15 / 1400 * 100vw));
  }

  .kc-top-card__text {
    gap: min(12px, calc(12 / 1400 * 100vw));
    padding: 0 min(12px, calc(12 / 1400 * 100vw));
  }

  .kc-top-card__title {
    font-size: min(20px, calc(20 / 1400 * 100vw));
  }

  .kc-top-card__theme {
    font-size: min(16px, calc(16 / 1400 * 100vw));
  }

  .kc-top-card__tags {
    gap: min(8px, calc(8 / 1400 * 100vw));
    margin-top: min(2px, calc(2 / 1400 * 100vw));
    padding: 0 min(12px, calc(12 / 1400 * 100vw));
  }

  .kc-top-card__tag {
    padding: min(7px, calc(7 / 1400 * 100vw)) min(10px, calc(10 / 1400 * 100vw));
    border-radius: min(10px, calc(10 / 1400 * 100vw)) min(10px, calc(10 / 1400 * 100vw)) 0 min(10px, calc(10 / 1400 * 100vw));
    font-size: min(13px, calc(13 / 1400 * 100vw));
  }

  .kc-top-pager {
    margin-top: min(40px, calc(40 / 1400 * 100vw));
  }

  .kc-top-pager__list {
    gap: min(12px, calc(12 / 1400 * 100vw));
  }

  .kc-top-pager__link,
  .kc-top-pager__blank {
    width: min(32px, calc(32 / 1400 * 100vw));
    height: min(32px, calc(32 / 1400 * 100vw));
    padding: min(7px, calc(7 / 1400 * 100vw)) 0 min(9px, calc(9 / 1400 * 100vw));
    font-size: min(16px, calc(16 / 1400 * 100vw));
  }

  .kc-top-pager__prev,
  .kc-top-pager__next {
    width: min(7px, calc(7 / 1400 * 100vw));
    padding: 0;
  }

  .kc-top-pager__prev {
    margin-right: min(18px, calc(18 / 1400 * 100vw));
  }

  .kc-top-pager__next {
    margin-left: min(18px, calc(18 / 1400 * 100vw));
  }

  .kc-top-pager__prev::before,
  .kc-top-pager__next::before {
    width: min(9.9px, calc(9.9 / 1400 * 100vw));
    height: min(9.9px, calc(9.9 / 1400 * 100vw));
  }

  .kc-top-cards__note {
    margin-top: min(24px, calc(24 / 1400 * 100vw));
    font-size: min(12px, calc(12 / 1400 * 100vw));
  }

  .kc-top-cards__town {
    margin-top: min(40px, calc(40 / 1400 * 100vw));
    height: min(140px, calc(140 / 1400 * 100vw));
    background-image: url(/miraiseed/fansite/kigyou_collabo/assets/img/bg_mv-cards_re_pc.svg);
  }

  .kc-top-lead__inner {
    box-sizing: border-box;
    padding: min(96px, calc(96 / 1400 * 100vw)) 0;
    width: min(1400px, calc(1400 / 1400 * 100vw));
  }

  .kc-top-lead__copy {
    width: min(699px, calc(699 / 1400 * 100vw));
  }

  .kc-top-lead__heading {
    font-size: min(24px, calc(24 / 1400 * 100vw));
  }

  .kc-top-lead__text {
    margin-top: min(24px, calc(24 / 1400 * 100vw));
    font-size: min(18px, calc(18 / 1400 * 100vw));
  }

  .kc-top-lead__illust--cloud-b {
    top: min(43px, calc(43 / 1400 * 100vw));
    left: min(1061px, calc(1061 / 1400 * 100vw));
    width: min(62px, calc(62 / 1400 * 100vw));
  }

  .kc-top-lead__illust--balloon {
    top: min(138px, calc(138 / 1400 * 100vw));
    left: min(241px, calc(241 / 1400 * 100vw));
    width: min(36px, calc(36 / 1400 * 100vw));
  }

  .kc-top-lead__illust--cloud-c2 {
    top: min(74px, calc(74 / 1400 * 100vw));
    left: min(177px, calc(177 / 1400 * 100vw));
    width: min(34px, calc(34 / 1400 * 100vw));
  }

  .kc-top-lead__illust--cloud-c3 {
    top: min(129px, calc(129 / 1400 * 100vw));
    left: min(1130px, calc(1130 / 1400 * 100vw));
    width: min(34px, calc(34 / 1400 * 100vw));
  }

  .kc-top-lead__illust--bike {
    top: min(270px, calc(270 / 1400 * 100vw));
    left: min(116px, calc(116 / 1400 * 100vw));
    width: min(108.3px, calc(108.3 / 1400 * 100vw));
    height: min(128.5px, calc(128.5 / 1400 * 100vw));
    object-fit: cover;
    object-position: right;
  }

  .kc-top-lead__illust--idea {
    top: min(161px, calc(161 / 1400 * 100vw));
    left: min(1227px, calc(1227 / 1400 * 100vw));
    width: min(83.28px, calc(83.28 / 1400 * 100vw));
  }

  .kc-top-lead__illust--person {
    top: min(260px, calc(260 / 1400 * 100vw));
    left: min(1205px, calc(1205 / 1400 * 100vw));
    width: min(49.48px, calc(49.48 / 1400 * 100vw));
    height: min(130.16px, calc(130.16 / 1400 * 100vw));
    object-fit: contain;
  }

  .kc-top-page .other-block .block-inner {
    padding-top: min(56px, calc(56 / 1400 * 100vw));
    padding-right: min(20px, calc(20 / 1400 * 100vw));
    padding-bottom: min(84px, calc(84 / 1400 * 100vw));
    padding-left: min(20px, calc(20 / 1400 * 100vw));
    max-width: min(1088px, calc(1088 / 1400 * 100vw));
  }

  .kc-top-page .other-block .other-contents .other-contents__title {
    margin-bottom: min(50px, calc(50 / 1400 * 100vw));
    width: min(471px, calc(471 / 1400 * 100vw));
  }

  .kc-top-page .other-block .other-contents .banner-description {
    font-size: min(20px, calc(20 / 1400 * 100vw));
    margin-bottom: min(5px, calc(5 / 1400 * 100vw));
  }

  .kc-top-page .other-block .other-contents .banner-top,
  .kc-top-page .other-block .other-contents .banner-list {
    max-width: min(1050px, calc(1050 / 1400 * 100vw));
  }

  .kc-top-page .other-block .other-contents .banner-top {
    margin-bottom: min(42px, calc(42 / 1400 * 100vw));
  }

  .kc-top-page .other-block .other-contents .banner-top .main-banner {
    border-width: min(2px, calc(2 / 1400 * 100vw));
    border-radius: min(5px, calc(5 / 1400 * 100vw));
  }

  .kc-top-page .other-block .other-contents .banner-top .main-banner img {
    border-radius: min(5px, calc(5 / 1400 * 100vw));
  }

  .kc-top-page .other-block .other-contents .banner-list {
    gap: min(32px, calc(32 / 1400 * 100vw));
  }

  .kc-top-page .other-block .other-contents .banner-image,
  .kc-top-page .other-block .other-contents .banner-list__link {
    border-radius: min(5px, calc(5 / 1400 * 100vw));
    box-shadow: min(4px, calc(4 / 1400 * 100vw)) min(4px, calc(4 / 1400 * 100vw)) 0 0 rgb(91, 61, 66);
  }

  .kc-top-page .other-block .other-contents .banner-image img,
  .kc-top-page .other-block .other-contents .banner-list__link img {
    border-radius: min(5px, calc(5 / 1400 * 100vw));
    border-width: min(2px, calc(2 / 1400 * 100vw));
  }

  .gd-banner {
    top: min(144px, calc(144 / 1400 * 100vw));
    right: min(40px, calc(40 / 1400 * 100vw));
    width: min(270px, calc(270 / 1400 * 100vw));
    border-radius: min(8px, calc(8 / 1400 * 100vw));
  }

  .gd-banner__label {
    padding: min(4px, calc(4 / 1400 * 100vw)) 0 min(8px, calc(8 / 1400 * 100vw));
    border-radius: min(4px, calc(4 / 1400 * 100vw)) min(4px, calc(4 / 1400 * 100vw)) 0 0;
    font-size: min(18px, calc(18 / 1400 * 100vw));
  }

  .gd-banner__body {
    padding: min(3px, calc(3 / 1400 * 100vw)) min(8px, calc(8 / 1400 * 100vw));
  }

  .gd-banner__logo {
    height: min(64px, calc(64 / 1400 * 100vw));
  }

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

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

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

/* ===== SP（767px 以下） ===== */
@media (max-width: 767px) {
  .kc-top-br--pc {
    display: none;
  }

  .kc-top-fv {
    height: calc(276 / 390 * 100vw);
  }

  .kc-top-fv__title {
    top: calc(40 / 390 * 100vw);
    left: calc(55 / 390 * 100vw);
    width: calc(280 / 390 * 100vw);
  }

  .kc-top-fv__icon--c {
    top: calc(128 / 390 * 100vw);
    left: calc(-10 / 390 * 100vw);
    width: calc(32 / 390 * 100vw);
  }

  .kc-top-fv__icon--e {
    top: calc(127 / 390 * 100vw);
    left: calc(342 / 390 * 100vw);
    width: calc(28 / 390 * 100vw);
  }

  .kc-top-fv__icon--f {
    top: calc(152 / 390 * 100vw);
    left: calc(299 / 390 * 100vw);
    width: calc(32 / 390 * 100vw);
  }

  .kc-top-fv__icon--g {
    top: calc(21 / 390 * 100vw);
    left: calc(350 / 390 * 100vw);
    width: calc(30 / 390 * 100vw);
  }

  .kc-top-fv__icon--h {
    top: calc(19 / 390 * 100vw);
    left: calc(12 / 390 * 100vw);
    width: calc(48 / 390 * 100vw);
  }

  .kc-top-fv__town {
    bottom: calc(-2 / 390 * 100vw);
    height: calc(90 / 390 * 100vw);
    background-image: url(/miraiseed/fansite/kigyou_collabo/assets/img/bg-mv_re_sp.svg);
    background-position: left bottom;
  }

  .kc-top-cards {
    padding-top: calc(26 / 390 * 100vw);
  }

  .kc-top-cards__tabs {
    margin-bottom: calc(26 / 390 * 100vw);
  }

  .kc-top-tabs {
    display: grid;
    grid-template-columns: repeat(4, calc(76 / 390 * 100vw));
    gap: calc(10 / 390 * 100vw) calc(12 / 390 * 100vw);
    justify-content: center;
  }

  .kc-top-tab {
    height: calc(48 / 390 * 100vw);
    border-width: calc(2 / 390 * 100vw);
    border-radius: calc(8 / 390 * 100vw);
    font-size: calc(16 / 390 * 100vw);
  }

  .kc-top-cards__list {
    grid-template-columns: calc(340 / 390 * 100vw);
    gap: calc(16 / 390 * 100vw);
    justify-content: center;
  }

  .kc-top-card {
    border-radius: calc(46 / 390 * 100vw);
  }

  .kc-top-card__link {
    gap: calc(14 / 390 * 100vw);
    padding: calc(12 / 390 * 100vw) calc(12 / 390 * 100vw) calc(24 / 390 * 100vw);
    min-height: 400px;
  }

  .kc-top-card__thumb {
    border-radius: calc(35 / 390 * 100vw) calc(35 / 390 * 100vw) 0 0;
  }

  .kc-top-card__body {
    gap: calc(14 / 390 * 100vw);
  }

  .kc-top-card__company {
    padding: calc(5 / 390 * 100vw) calc(12 / 390 * 100vw);
    font-size: calc(15 / 390 * 100vw);
  }

  .kc-top-card__text {
    gap: calc(12 / 390 * 100vw);
    padding: 0 calc(12 / 390 * 100vw);
  }

  .kc-top-card__title {
    font-size: calc(20 / 390 * 100vw);
  }

  .kc-top-card__theme {
    font-size: calc(16 / 390 * 100vw);
  }

  .kc-top-card__tags {
    gap: calc(8 / 390 * 100vw);
    margin-top: calc(2 / 390 * 100vw);
    padding: 0 calc(12 / 390 * 100vw);
  }

  .kc-top-card__tag {
    padding: calc(7 / 390 * 100vw) calc(10 / 390 * 100vw);
    border-radius: calc(10 / 390 * 100vw) calc(10 / 390 * 100vw) 0 calc(10 / 390 * 100vw);
    font-size: calc(13 / 390 * 100vw);
  }

  .kc-top-pager {
    margin-top: calc(26 / 390 * 100vw);
  }

  .kc-top-pager__list {
    gap: calc(8 / 390 * 100vw);
  }

  .kc-top-pager__link,
  .kc-top-pager__blank {
    width: calc(32 / 390 * 100vw);
    height: calc(32 / 390 * 100vw);
    padding: calc(7 / 390 * 100vw) 0 calc(9 / 390 * 100vw);
    font-size: calc(16 / 390 * 100vw);
  }

  .kc-top-pager__prev,
  .kc-top-pager__next {
    width: calc(7 / 390 * 100vw);
    padding: 0;
  }

  .kc-top-pager__prev {
    margin-right: calc(16 / 390 * 100vw);
  }

  .kc-top-pager__next {
    margin-left: calc(16 / 390 * 100vw);
  }

  .kc-top-pager__prev::before,
  .kc-top-pager__next::before {
    width: calc(9.9 / 390 * 100vw);
    height: calc(9.9 / 390 * 100vw);
  }

  .kc-top-cards__note {
    margin-top: calc(24 / 390 * 100vw);
    padding: 0 calc(24 / 390 * 100vw);
    font-size: calc(12 / 390 * 100vw);
  }

  .kc-top-cards__town {
    margin-top: calc(26 / 390 * 100vw);
    height: calc(100 / 390 * 100vw);
    background-image: url(/miraiseed/fansite/kigyou_collabo/assets/img/bg_mv-cards_re_sp.svg);
  }

  .kc-top-lead__inner {
    box-sizing: border-box;
    padding: calc(32 / 390 * 100vw) 0 calc(46 / 390 * 100vw);
  }

  .kc-top-lead__copy {
    width: calc(340 / 390 * 100vw);
  }

  .kc-top-lead__heading {
    font-size: calc(18 / 390 * 100vw);
  }

  .kc-top-lead__text {
    margin-top: calc(24 / 390 * 100vw);
    font-size: calc(15 / 390 * 100vw);
  }

  .kc-top-lead__illust--cloud-b,
  .kc-top-lead__illust--balloon,
  .kc-top-lead__illust--cloud-c2,
  .kc-top-lead__illust--cloud-c3,
  .kc-top-lead__illust--idea {
    display: none;
  }

  .kc-top-lead__illust--bike {
    top: calc(280 / 390 * 100vw);
    left: calc(-1 / 390 * 100vw);
    width: calc(80 / 390 * 100vw);
    height: calc(136 / 390 * 100vw);
    object-fit: cover;
    object-position: right;
  }

  .kc-top-lead__illust--person {
    top: calc(280 / 390 * 100vw);
    left: calc(309 / 390 * 100vw);
    width: calc(80 / 390 * 100vw);
    height: calc(136 / 390 * 100vw);
    object-fit: contain;
  }

  .kc-top-page .other-block .block-inner {
    padding-top: calc(24 / 390 * 100vw);
    padding-right: calc(20.8 / 390 * 100vw);
    padding-bottom: calc(67.6 / 390 * 100vw);
    padding-left: calc(20.8 / 390 * 100vw);
  }

  .kc-top-page .other-block .other-contents .other-contents__title {
    width: calc(200 / 390 * 100vw);
    margin-bottom: calc(41.6 / 390 * 100vw);
  }

  .kc-top-page .other-block .other-contents .banner-description {
    font-size: calc(15.6 / 390 * 100vw);
  }

  .kc-top-page .other-block .other-contents .banner-top,
  .kc-top-page .other-block .other-contents .banner-list {
    max-width: calc(1200 / 390 * 100vw);
  }

  .kc-top-page .other-block .other-contents .banner-top {
    margin-bottom: calc(45.76 / 390 * 100vw);
  }

  .kc-top-page .other-block .other-contents .banner-top .main-banner {
    border-width: calc(2.08 / 390 * 100vw);
    border-radius: calc(6.24 / 390 * 100vw);
  }

  .kc-top-page .other-block .other-contents .banner-top .main-banner img {
    border-radius: calc(6.24 / 390 * 100vw);
  }

  .kc-top-page .other-block .other-contents .banner-list {
    gap: calc(46.8 / 390 * 100vw);
  }

  .kc-top-page .other-block .other-contents .banner-image,
  .kc-top-page .other-block .other-contents .banner-list__link {
    border-radius: calc(6.24 / 390 * 100vw);
    box-shadow: calc(4.16 / 390 * 100vw) calc(4.16 / 390 * 100vw) 0 0 rgb(91, 61, 66);
  }

  .kc-top-page .other-block .other-contents .banner-image img,
  .kc-top-page .other-block .other-contents .banner-list__link img {
    border-radius: calc(6.24 / 390 * 100vw);
    border-width: calc(2.08 / 390 * 100vw);
  }

  .gd-banner {
    top: calc(155 / 390 * 100vw);
    right: calc(8 / 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 (prefers-reduced-motion: reduce) {
  .kc-top-fv__icon {
    animation: none;
  }

  .kc-top-card,
  .kc-top-card__thumb img {
    transition: none;
  }
}

@media (hover: hover) {
  .kc-top-card:hover {
    filter: drop-shadow(7px 7px 5px rgba(0, 0, 0, 0.2));
    transform: rotate(5deg);
  }

  .kc-top-card:hover .kc-top-card__thumb img {
    transform: scale(1.08);
  }

  .gd-banner:hover {
    opacity: 0.7;
  }
}

@media (hover: hover) and (max-width: 767px) {
  .kc-top-card:hover .kc-top-card__thumb img {
    transform: none;
  }
}