/* ウェルビーイング100 研究所ボタン (.list-sns の外に置く a.link-labo) */
.link-labo {
  position: absolute;
  display: block;
  box-sizing: content-box; /* 枠線の外側に画像サイズ(286x36)を確保 */
  width: 286px;
  height: 36px;
  background: url(../img/labo/button_labo.webp) center / 286px 36px no-repeat;
  border: 1px solid var(--main-gray-gray200, #e1dfd9);
  text-indent: -9999px;
  overflow: hidden;
  border-radius: 100vmax;
}

/* SP: SNS の上
   基準は #nav-drawer。.list-sns は bottom:125px / left:30px / 高さ31px の位置 */
#header-sp #nav-drawer .link-labo {
  left: 30px;
  bottom: calc(125px + 31px + 32px);
}

/* PC: SNS の左
   基準は .header-title。.list-sns は top:0 / right:0 で、幅は
   アイコン29px×3 + li の margin-left 22.5px×3 + すき間22.5px。 */
@media (min-width: 670px) {
  #header-pc .header-title .link-labo {
    top: -4px;
    right: calc(29px * 3 + 22.5px * 3 + 22.5px);
  }
}

/* ホバー可能なデバイスのみ: 枠線を黒に */
@media (any-hover: hover) {
  .link-labo:hover {
    border-color: #000000;
  }
}

/* ウェルビーイング100 研究所バナー (.banner-labo) */
.banner-labo {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 30px;
}

@media (min-width: 670px) {
  .banner-labo.-main {
    top: -30px;
    position: relative;
  }
}