@charset "UTF-8";

.blog-renew-header,
.blog-renew-menu,
.blog-renew,
.blog-renew-footer,
.blog-related {
  --blog-text-primary: #000;
  --blog-text-secondary: #303437;
  --blog-text-tertiary: #6c7072;
  --blog-text-on-primary: #fff;
  --blog-text-sns: #404446;
  --blog-text-sns-sub: #979c9e;
  --blog-surface-faint: #161717;
  --blog-surface-muted: #f2f4f5;
  --blog-blue: #0066ff;
  --blog-sky: #00bbff;
  --blog-radius-4: 4px;
  --blog-radius-8: 8px;
  --blog-radius-pill: 999px;
  --blog-gradient: linear-gradient(24deg, #00bbff 0%, #0066ff 100%);
  --blog-wordmark: "Roboto Condensed", "Arial Narrow", sans-serif;
}

/* スクロールロックはハンバーガーメニューが存在する幅だけ。
   1280 以上はメニューも開閉ボタンも消えるため、ロックが残ると解除手段がなくなる。 */
@media (max-width: 1279px) {
  body.blog-renew-menu-open {
    overflow: hidden;
  }
}

.blog-renew,
.blog-renew-header,
.blog-renew-footer,
.blog-renew-menu,
.blog-related {
  color: var(--blog-surface-faint);
  letter-spacing: 0;
}

.blog-renew a,
.blog-renew-header a,
.blog-renew-menu a,
.blog-renew-footer a,
.blog-related a {
  color: inherit;
  text-decoration: none;
}

.blog-renew *,
.blog-renew-header *,
.blog-renew-menu *,
.blog-renew-footer *,
.blog-related * {
  box-sizing: border-box;
}

.blog-renew img,
.blog-renew-header img,
.blog-renew-menu img,
.blog-renew-footer img,
.blog-renew-sidebar img,
.blog-related img {
  max-width: 100%;
  height: auto;
}

.blog-renew-header__wordmark,
.blog-renew-footer__wordmark {
  font-family: var(--blog-wordmark);
  font-style: italic;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

/* Header */
.blog-renew-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #fff;
  height: 68px;
}

.blog-renew-header__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 1440px;
  margin: 0 auto;
  padding: 16px 8px 0 20px;
  min-height: 68px;
}

.blog-renew-header a.blog-renew-header__wordmark {
  font-size: 44px;
  line-height: 52px;
  color: var(--blog-blue);
}

.blog-renew-header__pc {
  display: none !important;
  align-items: center;
  gap: 12px;
}

.blog-bravesoft-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 147px;
  height: 40px;
  border-radius: var(--blog-radius-pill);
  background: var(--blog-gradient);
  color: var(--blog-text-on-primary) !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 14px;
  white-space: nowrap;
}

.blog-bravesoft-link:hover,
.blog-banner-contact:hover,
.blog-banner-brand:hover,
.blog-renew-sns__item:hover,
.blog-renew-footer__nav a:hover,
.blog-renew-footer a.blog-renew-footer__wordmark:hover,
.blog-renew-footer__logo:hover {
  opacity: 0.6;
}

.blog-renew-header__menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: var(--blog-radius-pill);
}

.blog-renew-header__menu-btn img {
  display: block;
  width: 24px;
  height: 24px;
}

.blog-renew-header__close-icon {
  display: none;
}

.blog-renew-header__menu-btn[aria-expanded="true"] .blog-renew-header__menu-icon {
  display: none;
}

.blog-renew-header__menu-btn[aria-expanded="true"] .blog-renew-header__close-icon {
  display: block;
}

body.blog-renew-menu-open .blog-renew-header {
  background: var(--blog-blue);
}

body.blog-renew-menu-open .blog-renew-header a.blog-renew-header__wordmark {
  color: var(--blog-text-on-primary);
}

.blog-renew-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--blog-radius-8);
  padding: 8px;
  background: #fff;
}

.blog-renew-search__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.blog-renew-search__icon img {
  display: block;
  width: 20px;
  height: 20px;
}

.blog-renew-search input {
  border: 0;
  outline: none;
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 21px;
  color: var(--blog-text-secondary);
  background: transparent;
}

.blog-renew-search input::placeholder {
  color: var(--blog-text-secondary);
}

.blog-renew-search:focus-within {
  border-color: var(--blog-blue);
}

.blog-renew-search--menu:focus-within {
  border-color: var(--blog-text-on-primary);
}

.blog-renew-search--pc {
  width: 340px;
}

.blog-renew-menu {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow: auto;
  background: var(--blog-blue);
  color: var(--blog-text-on-primary);
  padding: 88px 20px 48px;
}

.blog-renew-menu__cats,
.blog-renew-sidebar__cats {
  display: flex;
  flex-direction: column;
}

.blog-renew-sidebar__cats {
  gap: 8px;
}

a.blog-category {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
  color: var(--blog-text-tertiary);
}

.blog-category__bar {
  width: 4px;
  height: 32px;
  border-radius: var(--blog-radius-pill);
  background: var(--blog-blue);
  opacity: 0;
  flex-shrink: 0;
}

a.blog-category.is-current .blog-category__bar {
  opacity: 1;
}

a.blog-category.is-current,
a.blog-category:hover {
  color: var(--blog-text-secondary);
}

.blog-renew-menu a.blog-category {
  height: 72px;
  min-height: 72px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 20px;
  line-height: 30px;
  color: rgba(255, 255, 255, 0.7);
}

.blog-renew-menu a.blog-category .blog-category__bar {
  background: transparent;
}

.blog-renew-menu a.blog-category.is-current {
  color: var(--blog-text-on-primary);
}

.blog-renew-menu a.blog-category.is-current .blog-category__bar {
  background: var(--blog-text-on-primary);
  opacity: 1;
}

.blog-renew-menu a.blog-category:hover {
  color: var(--blog-text-on-primary);
}

.blog-renew-search--menu {
  margin: 24px auto 0;
  width: 100%;
  max-width: 400px;
}

.blog-banner-contact,
.blog-banner-brand {
  display: block;
  overflow: hidden;
}

.blog-banner-contact {
  width: 100%;
  max-width: 200px;
  border-radius: var(--blog-radius-8);
}

.blog-banner-contact > img,
.blog-banner-brand img {
  display: block;
  width: 100%;
  height: auto;
}

.blog-banner-contact--menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: none;
  margin-top: 24px;
  padding: 0;
  overflow: visible;
  border-radius: 0;
}

.blog-banner-contact--menu p {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  color: var(--blog-text-on-primary);
  text-align: center;
}

.blog-banner-contact--menu .blog-banner-contact__cta {
  display: flex;
  width: 100%;
  max-width: 400px;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  padding: 12px 24px;
  border-radius: var(--blog-radius-pill);
  background: var(--blog-surface-faint);
  color: var(--blog-text-on-primary) !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
}

.blog-banner-contact--menu .blog-banner-contact__logo {
  display: block;
  width: 99px;
  height: auto;
}

.blog-banner-brand {
  margin-top: 48px;
  border-radius: var(--blog-radius-8);
}

.blog-renew-sns {
  display: flex;
  gap: 20px;
  margin-top: 24px;
  align-items: center;
}

.blog-renew-sns__item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.blog-renew-sns__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.blog-renew-sns__icon img {
  display: block;
  width: 20px;
  height: 20px;
}

.blog-renew-sns__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.blog-renew-sns__title {
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
  color: var(--blog-text-sns);
}

.blog-renew-sns__sub {
  font-size: 10px;
  font-weight: 400;
  line-height: 10px;
  color: var(--blog-text-sns-sub);
}

.blog-renew-sns--col {
  flex-direction: column;
  align-items: flex-start;
}

.blog-renew-sns--circle {
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

.blog-renew-sns--circle .blog-renew-sns__item {
  background: #eef2fa;
  border-radius: var(--blog-radius-pill);
  padding: 8px;
}

.blog-renew-sns--circle .blog-renew-sns__icon {
  width: 20px;
  height: 20px;
}

.blog-renew-sns--footer {
  margin-top: 0;
}

.blog-renew-sns--footer .blog-renew-sns__title,
.blog-renew-sns--footer .blog-renew-sns__sub {
  color: var(--blog-text-on-primary);
}

.blog-renew-sns--footer .blog-renew-sns__icon img {
  filter: brightness(0) invert(1);
}

.blog-renew {
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px 20px 80px;
}

.blog-renew__shell {
  display: block;
}

.blog-renew__featured {
  margin-bottom: 40px;
}

.blog-renew-sidebar {
  display: none;
}

.blog-renew__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px 24px;
}

.blog-thumb {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: var(--blog-radius-8);
  background: transparent;
}

/* デザイン原案（動きなし・即時グレー）。デザイナー確認用に残す。
.blog-thumb:hover {
  padding: 12px;
  margin: -12px;
  background: #f2f4f5;
}
*/

.blog-thumb__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 1 件目の大カード。SP では通常カードと同じ見た目に落とし、769 以上で大カード化する。 */
.blog-thumb-top {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: var(--blog-radius-8);
  background: transparent;
}

/* デザイン原案（動きなし・即時グレー）。デザイナー確認用に残す。
.blog-thumb-top:hover {
  padding: 12px;
  margin: -12px;
  background: #f2f4f5;
}
*/

/* カード hover：TOP の「ニュース」と同じ動き（浮き上がり + パネルのフェード外側拡張）。
   パネル色のみ、ブログ既存のグレー #f2f4f5 を踏襲。
   パネルは z-index 0、カード中身は z-index 1 で常に上に来る。 */
.blog-thumb::before,
.blog-thumb-top::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 16px;
  background: var(--blog-surface-muted);
  box-shadow: 0 17px 7px rgba(0, 0, 0, 0.01), 0 10px 6px rgba(0, 0, 0, 0.02),
    0 4px 4px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.04);
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .blog-thumb,
  .blog-thumb-top,
  .blog-thumb::before,
  .blog-thumb-top::before {
    transition: transform 500ms cubic-bezier(0.3, 0.3, 0, 1),
      inset 500ms cubic-bezier(0.3, 0.3, 0, 1),
      opacity 500ms cubic-bezier(0.3, 0.3, 0, 1);
  }

  .blog-thumb:hover,
  .blog-thumb-top:hover {
    transform: translateY(-12px);
  }

  .blog-thumb:hover::before,
  .blog-thumb-top:hover::before {
    inset: -14px -16px;
    opacity: 1;
  }
}

.blog-thumb__image,
.blog-thumb-top__image {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: var(--blog-radius-8);
  aspect-ratio: 1.91 / 1;
  background: var(--blog-surface-muted);
}

.blog-thumb__image::after,
.blog-thumb-top__image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

.blog-thumb__image img,
.blog-thumb-top__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.blog-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.blog-badge {
  display: inline-flex;
  align-items: center;
  background: var(--blog-surface-faint);
  color: var(--blog-text-on-primary);
  border-radius: var(--blog-radius-4);
  padding: 2px 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 10px;
  white-space: nowrap;
}

.blog-card-meta time {
  display: inline-flex;
  align-items: center;
  height: 14px;
  color: var(--blog-text-tertiary);
  font-size: 13px;
  font-weight: 400;
  line-height: 14px;
  white-space: nowrap;
}

.blog-thumb h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: var(--blog-text-primary);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.blog-thumb-top__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.blog-thumb-top__heading {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.blog-thumb-top h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: var(--blog-text-primary);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.blog-thumb-top__excerpt {
  display: none;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--blog-text-secondary);
  overflow: hidden;
}

.blog-renew-pager {
  margin-top: 48px;
}

.blog-renew-pager .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.blog-renew-pager a,
.blog-renew-pager span.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 39px;
  min-height: 32px;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--blog-radius-pill);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  font-size: 12px;
  font-weight: 700;
  line-height: 12px;
  color: var(--blog-text-tertiary);
  background: transparent;
}

.blog-renew-pager a:hover {
  opacity: 0.6;
}

.blog-renew-pager span.page-numbers.current {
  background: var(--blog-surface-faint);
  color: var(--blog-text-on-primary);
  box-shadow: none;
  opacity: 1;
}

.blog-renew-pager .prev,
.blog-renew-pager .next {
  min-width: 56px;
}

.blog-renew-pager span.prev,
.blog-renew-pager span.next {
  display: none;
}

.blog-renew-footer {
  background: var(--blog-blue);
  color: var(--blog-text-on-primary);
  padding: 40px 20px;
}

.blog-renew-footer__inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.blog-renew-footer__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
}

.blog-renew-footer__brand {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  gap: 24px;
  width: 100%;
}

.blog-renew-footer__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.blog-renew-footer__intro .blog-renew-sns--circle {
  margin-top: 0;
  width: 100%;
}

.blog-renew-footer__nav.blog-renew-footer__nav--category {
  display: none;
}

.blog-renew-footer__links {
  display: flex;
  gap: 0;
  width: 100%;
}

.blog-renew-footer__links > * {
  flex: 1 1 0;
  min-width: 0;
}

.blog-renew-footer a.blog-renew-footer__wordmark {
  font-size: 32px;
  color: var(--blog-text-on-primary);
}

.blog-renew-footer__lead {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 23px;
  text-align: center;
}

.blog-renew-footer__logo {
  display: block;
  width: 120px;
}

.blog-renew-footer__logo img {
  display: block;
  width: 120px;
  height: auto;
}

.blog-renew-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 13px;
  font-weight: 400;
  line-height: 13px;
  white-space: nowrap;
}

.blog-renew-footer__nav-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 14px;
}

.blog-renew-footer__copy {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
  text-align: center;
  color: var(--blog-text-on-primary);
}

@media (min-width: 769px) {
  .blog-renew {
    padding: 40px 40px 96px;
  }

  .blog-thumb-top {
    gap: 24px;
  }

  .blog-thumb-top h2 {
    font-size: 22px;
    line-height: 30px;
  }

  .blog-renew__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blog-renew-footer {
    padding: 60px 40px 40px;
  }
}

@media (min-width: 1280px) {
  .blog-renew-header__pc {
    display: flex !important;
    gap: 20px;
  }

  .blog-renew-header__menu-btn,
  .blog-renew-menu {
    display: none !important;
  }

  .blog-renew-header {
    height: 88px;
  }

  .blog-renew-header__inner {
    align-items: center;
    padding: 32px 80px 4px;
    min-height: 88px;
    height: 88px;
  }

  .blog-renew {
    padding: 40px 80px 96px;
  }

  .blog-renew-footer {
    padding: 60px 80px 40px;
  }

  .blog-renew__shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px;
    gap: 56px;
    align-items: start;
  }

  .blog-renew-sidebar {
    display: flex;
    flex-direction: column;
    gap: 40px;
    position: sticky;
    top: 104px;
  }

  .blog-renew__side {
    align-self: stretch;
  }

  .blog-renew-sidebar .blog-renew-sns {
    margin-top: 0;
  }

  .blog-renew__featured {
    margin-bottom: 56px;
  }

  .blog-renew__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .blog-thumb-top {
    flex-direction: row;
    align-items: stretch;
    gap: 24px;
  }

  .blog-thumb-top__image {
    flex: 1 1 50%;
    min-width: 0;
  }

  .blog-thumb-top__body {
    flex: 1 1 50%;
  }

  .blog-thumb-top__excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    overflow: hidden;
  }

  .blog-renew-footer__top {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
    gap: 0;
    max-width: 960px;
    margin-inline: auto;
  }

  .blog-renew-footer__brand {
    width: 260px;
    max-width: 260px;
    align-items: flex-start;
    text-align: left;
  }

  .blog-renew-footer__intro {
    align-items: flex-start;
  }

  .blog-renew-footer__intro .blog-renew-sns--circle {
    display: none;
  }

  .blog-renew-footer__lead {
    text-align: left;
  }

  .blog-renew-footer__nav.blog-renew-footer__nav--category {
    display: flex;
  }

  .blog-renew-footer__links {
    display: contents;
  }

  .blog-renew-footer__links > * {
    flex: 0 0 auto;
    min-width: 0;
  }
}