@import url("../../cmsPage/pc.css");

/* ============================================================
 body color
============================================================ */

/* 背景色の変更 */
body {
  background-color: #f3f5f9;
}

/* ============================================================
 KV上Brainsleep x makuakeロゴ
============================================================ */
.logo-over-hero-box {
  background: url("/img/partner/brainsleep/bg_logo_over_kv.png") center top
    no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  padding: 16px 0 20px;
}

.logo-over-hero-logo {
  width: 1000px;
}

/* ============================================================
 HERO
============================================================ */
#vue-partner-page .hero {
  background: #fff url("/img/partner/brainsleep/bg_kv_v5.png") center top
    no-repeat;
  background-size: 100% 100%;
  position: relative;
  padding: 0;
}

#vue-partner-page .hero-kv {
  width: 100%;
  max-width: 1440px;
}

/* ============================================================
 wrapper
============================================================ */
.wrapper {
  margin-bottom: 150px;
}

/* ============================================================
 KV下リード文
============================================================ */
.lead-section {
  background: #fff none;
  font-size: 21px;
  letter-spacing: -0.01em;
  line-height: calc(36.4 / 22);
  margin: 80px auto 30px;
  padding: 32px 40px 52px;
  text-align: center;
  width: 1000px;
}

/* ============================================================
 プロジェクトリスト・注目のプロジェクト
============================================================ */
#vue-partner-page .project-subject-second,
#vue-partner-page .featured-project-subject-second {
  font-size: 21px;
}

/* ============================================================
 プロジェクトへの参加企業・ブランド
============================================================ */

.brainsleep-section {
  margin: 90px auto;
  line-height: calc(32 / 18);
  text-align: center;
  width: 1000px;
}

.participating-brands-section-title {
  border-bottom: 4px solid #000;
  display: inline-block;
  font-size: 30px;
  margin: 0 0 22px;
  text-align: center;
}

.participating-brands-list {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 35px;
  text-align: left;
}

.participating-brands-list-item {
  width: 310px;
}

.participating-brands-list-item-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  width: 100%;
}

.participating-brands-list-item-logo-optimisauna {
  width: 280px;
}

.participating-brands-list-item-logo-journal-standard {
  width: 180px;
}

.participating-brands-list-item-logo-powpow,
.participating-brands-list-item-logo-muscle-deli {
  width: 196px;
}

.participating-brands-list-item-logo-sakasho-sugawara {
  width: 246px;
}

.participating-brands-list-item-logo-muscle-simple-home {
  width: 150px;
}

.participating-brands-list-item-lead {
  border-radius: 20px;
  background: #a0c0d9 none;
  font-size: 18px;
  font-weight: bold;
  margin: 0 13px 12px;
  text-align: center;
  padding: 3px 0;
}

.participating-brands-list-item-txt {
  font-size: 15px;
  line-height: calc(26 / 15);
}

.participating-brands-annotation {
  font-size: 13px;
  margin: 30px 0 0;
  text-align: right;
}

/* ============================================================
 Brainsleepについて
============================================================ */
.about-brainsleep-logo {
  display: block;
  margin: 0 auto 26px;
  width: 240px;
}

.about-brainsleep-title {
  font-size: 21px;
  line-height: calc(32 / 18);
  margin: 0 0 44px;
}

.about-brainsleep-txt {
  font-size: 14px;
}

/* ============================================================
 「ブレインスリープ」のプロジェクトの新着を受け取ろう
============================================================ */
.tag {
  border-top-color: #17d2ff;
}

.tag-btn,
.tag-btn-on {
  background-color: #17d2ff;
}

.tag-btn {
  border-color: #17d2ff;
  color: #fff;
}

.tag-btn-icon-add {
  fill: #fff;
}