/* ================================================
   HORIZON by ReFit Inc.
   Online Magazine - Health, Longevity & Prevention
   ================================================ */

/* --- Reset & Base --- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: #333;
  background-color: #fff;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover {
  opacity: 0.7;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  list-style: none;
}

/* --- Utility --- */
.comMain {
  padding-top: 80px; /* header height */
}

/* ================================================
   HEADER
   ================================================ */
.comHeader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
  height: 80px;
  transition: box-shadow 0.3s ease;
}

.comHeader--shadow {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.comHeader__inner {
  max-width: 1296px;
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.comHeader__logo a {
  display: flex;
  align-items: center;
}

.comHeader__logo a:hover {
  opacity: 1;
}

.comHeader__nav {
  margin-left: auto;
  margin-right: 32px;
}

.comHeader__navList {
  display: flex;
  align-items: center;
  gap: 0;
}

.comHeader__navItem {
  position: relative;
}

.comHeader__navLink {
  display: block;
  padding: 0 20px;
  font-family: "DIN Next LT W04 Mid", Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #333;
  line-height: 80px;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.comHeader__navLink:hover {
  color: #0055A4;
  opacity: 1;
}

.comHeader__navLink--subscribe {
  color: #0055A4;
  font-weight: 700;
}

.comHeader__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.comHeader__search {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  transition: opacity 0.2s;
}

.comHeader__search:hover {
  opacity: 0.6;
}

.comHeader__lang {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: "DIN Next LT W04 Mid", Arial, Helvetica, sans-serif;
  font-size: 12px;
  letter-spacing: 0.05em;
}

.comHeader__langLink {
  color: #999;
}

.comHeader__langLink--active {
  color: #333;
  font-weight: 700;
}

.comHeader__langSep {
  color: #ccc;
}

.comHeader__social {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 8px;
}

.comHeader__socialLink {
  display: flex;
  align-items: center;
}

.comHeader__socialLink:hover {
  opacity: 0.5;
}

/* Hamburger (mobile) */
.comHeader__hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 28px;
  height: 20px;
  position: relative;
  z-index: 1010;
}

.comHeader__hamburgerLine {
  display: block;
  width: 100%;
  height: 2px;
  background: #333;
  position: absolute;
  left: 0;
  transition: all 0.3s ease;
}

.comHeader__hamburgerLine:nth-child(1) { top: 0; }
.comHeader__hamburgerLine:nth-child(2) { top: 9px; }
.comHeader__hamburgerLine:nth-child(3) { top: 18px; }

.comHeader__hamburger--open .comHeader__hamburgerLine:nth-child(1) {
  top: 9px;
  transform: rotate(45deg);
}

.comHeader__hamburger--open .comHeader__hamburgerLine:nth-child(2) {
  opacity: 0;
}

.comHeader__hamburger--open .comHeader__hamburgerLine:nth-child(3) {
  top: 9px;
  transform: rotate(-45deg);
}

/* ================================================
   MOBILE NAV OVERLAY
   ================================================ */
.comMobileNav {
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  overflow-y: auto;
}

.comMobileNav--open {
  opacity: 1;
  visibility: visible;
}

.comMobileNav__inner {
  padding: 40px 24px;
}

.comMobileNav__list {
  margin-bottom: 32px;
}

.comMobileNav__list li {
  border-bottom: 1px solid #e6ecee;
}

.comMobileNav__link {
  display: block;
  padding: 16px 0;
  font-family: "DIN Next LT W04 Mid", Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #333;
}

.comMobileNav__lang {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  font-family: "DIN Next LT W04 Mid", Arial, Helvetica, sans-serif;
  font-size: 14px;
}

.comMobileNav__langLink {
  color: #999;
}

.comMobileNav__langLink--active {
  color: #333;
  font-weight: 700;
}

.comMobileNav__social {
  display: flex;
  align-items: center;
  gap: 20px;
}

.comMobileNav__social a {
  display: flex;
  align-items: center;
}

/* ================================================
   CATEGORY LABELS
   ================================================ */
.comCategory {
  display: inline-block;
  font-family: "DIN Next LT W04 Mid", Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border: 1px solid;
  line-height: 1.4;
  white-space: nowrap;
}

.comCategory--longevity {
  color: #2E7D5B;
  border-color: #2E7D5B;
}

.comCategory--prevention {
  color: #0055A4;
  border-color: #0055A4;
}

.comCategory:hover {
  opacity: 0.7;
}

/* ================================================
   TAGS
   ================================================ */
.comTag {
  display: inline-block;
  font-size: 12px;
  color: #757575;
  margin-right: 8px;
  line-height: 1.6;
  transition: color 0.2s;
}

.comTag:hover {
  color: #0055A4;
  opacity: 1;
}

/* ================================================
   FEATURED ARTICLE
   ================================================ */
.comFeatured {
  padding: 48px 0 32px;
}

.comFeatured__inner {
  max-width: 1296px;
  margin: 0 auto;
  padding: 0 24px;
}

.comFeatured__article {
  position: relative;
}

.comFeatured__category {
  margin-bottom: 16px;
}

.comFeatured__imageLink {
  display: block;
  overflow: hidden;
  border-radius: 0;
}

.comFeatured__image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 7;
}

.comFeatured__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.comFeatured__imageLink:hover .comFeatured__image img {
  transform: scale(1.03);
}

.comFeatured__body {
  padding-top: 24px;
}

.comFeatured__title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 12px;
  color: #333;
}

.comFeatured__title a:hover {
  color: #0055A4;
  opacity: 1;
}

.comFeatured__desc {
  font-size: 15px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 16px;
  max-width: 800px;
}

.comFeatured__tags {
  margin-bottom: 12px;
}

.comFeatured__date {
  display: block;
  font-family: "DIN Next LT W04 Mid", Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #999;
  letter-spacing: 0.05em;
}

/* ================================================
   PAGINATION
   ================================================ */
.comPagination {
  padding: 24px 0 48px;
}

.comPagination__inner {
  max-width: 1296px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.comPagination__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-family: "DIN Next LT W04 Mid", Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #0055A4;
  border: 1px solid transparent;
  transition: all 0.2s;
}

.comPagination__item:hover {
  border-color: #0055A4;
  opacity: 1;
}

.comPagination__item--current {
  color: #fff;
  background: #0055A4;
  border-color: #0055A4;
}

.comPagination__next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: 4px;
}

.comPagination__next:hover {
  opacity: 0.6;
}

/* ================================================
   PICK UP TAGS
   ================================================ */
.comPickupTags {
  padding: 40px 0;
  background: #e6ecee;
}

.comPickupTags__inner {
  max-width: 1296px;
  margin: 0 auto;
  padding: 0 24px;
}

.comPickupTags__heading {
  font-family: "DIN Next LT W04 Mid", Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: #0055A4;
  margin-bottom: 20px;
}

.comPickupTags__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.comPickupTags__tag {
  display: inline-block;
  padding: 8px 20px;
  background: #fff;
  border: 1px solid #c5d3d9;
  border-radius: 30px;
  font-size: 13px;
  color: #0055A4;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: all 0.2s;
}

.comPickupTags__tag:hover {
  background: #0055A4;
  color: #fff;
  border-color: #0055A4;
  opacity: 1;
}

/* ================================================
   3-COLUMN ARTICLE GRID
   ================================================ */
.comBlogClm3 {
  padding: 56px 0 24px;
}

.comBlogClm3__inner {
  max-width: 1296px;
  margin: 0 auto;
  padding: 0 24px;
}

.comBlogClm3__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
}

.comBlogClm3__card {
  display: flex;
  flex-direction: column;
}

.comBlogClm3__imageLink {
  display: block;
  overflow: hidden;
}

.comBlogClm3__image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.comBlogClm3__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.comBlogClm3__imageLink:hover .comBlogClm3__image img {
  transform: scale(1.05);
}

.comBlogClm3__body {
  padding-top: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.comBlogClm3__category {
  margin-bottom: 10px;
}

.comBlogClm3__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 10px;
  color: #333;
  flex: 1;
}

.comBlogClm3__title a:hover {
  color: #0055A4;
  opacity: 1;
}

.comBlogClm3__tags {
  margin-bottom: 8px;
}

.comBlogClm3__date {
  display: block;
  font-family: "DIN Next LT W04 Mid", Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #999;
  letter-spacing: 0.05em;
  margin-top: auto;
}

/* ================================================
   NEWSLETTER CTA
   ================================================ */
.comNewsletter {
  padding: 56px 0 64px;
}

.comNewsletter__inner {
  max-width: 1296px;
  margin: 0 auto;
  padding: 0 24px;
}

.comNewsletter__box {
  background: #f0f6f8;
  padding: 48px 40px;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.comNewsletter__title {
  font-family: "DIN Next LT W04 Mid", Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #0055A4;
  margin-bottom: 12px;
}

.comNewsletter__desc {
  font-size: 14px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 24px;
}

.comNewsletter__form {
  margin-bottom: 12px;
}

.comNewsletter__formGroup {
  display: flex;
  gap: 0;
  max-width: 480px;
  margin: 0 auto;
}

.comNewsletter__input {
  flex: 1;
  padding: 12px 16px;
  font-size: 14px;
  font-family: "Noto Sans JP", sans-serif;
  border: 1px solid #c5d3d9;
  border-right: none;
  outline: none;
  transition: border-color 0.2s;
}

.comNewsletter__input:focus {
  border-color: #0055A4;
}

.comNewsletter__input::placeholder {
  color: #999;
}

.comNewsletter__button {
  padding: 12px 24px;
  font-family: "DIN Next LT W04 Mid", Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #fff;
  background: #0055A4;
  border: 1px solid #0055A4;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}

.comNewsletter__button:hover {
  background: #003d7a;
  border-color: #003d7a;
}

.comNewsletter__note {
  font-size: 12px;
  color: #999;
}

/* ================================================
   FOOTER SITEMAP
   ================================================ */
.comSitemap {
  background: #e6ecee;
  padding: 56px 0;
}

.comSitemap__inner {
  max-width: 1296px;
  margin: 0 auto;
  padding: 0 24px;
}

.comSitemap__columns {
  display: flex;
  gap: 80px;
}

.comSitemap__heading {
  margin-bottom: 16px;
}

.comSitemap__heading a {
  font-family: "DIN Next LT W04 Mid", Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #333;
}

.comSitemap__heading a:hover {
  color: #0055A4;
  opacity: 1;
}

.comSitemap__list li {
  margin-bottom: 8px;
}

.comSitemap__link {
  font-family: "DIN Next LT W04 Mid", Arial, Helvetica, sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #757575;
}

.comSitemap__link:hover {
  color: #0055A4;
  opacity: 1;
}

/* ================================================
   FOOTER BOTTOM
   ================================================ */
.comFooterBottom {
  background: #fff;
  padding: 40px 0 32px;
  border-top: 1px solid #e0e0e0;
}

.comFooterBottom__inner {
  max-width: 1296px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.comFooterBottom__logo a {
  display: flex;
  align-items: center;
}

.comFooterBottom__logo a:hover {
  opacity: 0.7;
}

.comFooterBottom__toTop {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid #c5d3d9;
  border-radius: 30px;
  padding: 8px 24px;
  cursor: pointer;
  font-family: "DIN Next LT W04 Mid", Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #0055A4;
  letter-spacing: 0.08em;
  transition: all 0.2s;
}

.comFooterBottom__toTop:hover {
  background: #0055A4;
  color: #fff;
  border-color: #0055A4;
}

.comFooterBottom__toTop:hover svg {
  stroke: #fff;
}

.comFooterBottom__links {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}

.comFooterBottom__link {
  font-family: "DIN Next LT W04 Mid", Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #757575;
}

.comFooterBottom__link:hover {
  color: #0055A4;
  opacity: 1;
}

.comFooterBottom__social {
  display: flex;
  align-items: center;
  gap: 16px;
}

.comFooterBottom__socialLabel {
  font-family: "DIN Next LT W04 Mid", Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #757575;
  margin-right: 4px;
}

.comFooterBottom__socialLink {
  display: flex;
  align-items: center;
}

.comFooterBottom__socialLink:hover {
  opacity: 0.5;
}

.comFooterBottom__copyright {
  font-family: "DIN Next LT W04 Mid", Arial, Helvetica, sans-serif;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #999;
  text-align: center;
}

/* ================================================
   RESPONSIVE - TABLET (max-width: 991px)
   ================================================ */
@media screen and (max-width: 991px) {

  .comHeader__nav,
  .comHeader__social,
  .comHeader__lang {
    display: none;
  }

  .comHeader__hamburger {
    display: block;
  }

  .comHeader__actions {
    gap: 12px;
  }

  .comHeader__search {
    order: -1;
  }

  /* Featured */
  .comFeatured__image {
    aspect-ratio: 16 / 9;
  }

  .comFeatured__title {
    font-size: 22px;
  }

  /* Grid -> 2 columns */
  .comBlogClm3__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
  }

  /* Sitemap */
  .comSitemap__columns {
    gap: 40px;
    flex-wrap: wrap;
  }

  .comSitemap__column {
    min-width: 140px;
  }
}

/* ================================================
   RESPONSIVE - MOBILE (max-width: 480px)
   ================================================ */
@media screen and (max-width: 480px) {

  .comHeader {
    height: 60px;
  }

  .comHeader__inner {
    padding: 0 16px;
  }

  .comHeader__logo svg {
    width: 110px;
    height: 22px;
  }

  .comMobileNav {
    top: 60px;
  }

  .comMain {
    padding-top: 60px;
  }

  /* Featured */
  .comFeatured {
    padding: 24px 0 20px;
  }

  .comFeatured__inner {
    padding: 0 16px;
  }

  .comFeatured__image {
    aspect-ratio: 16 / 10;
  }

  .comFeatured__title {
    font-size: 18px;
  }

  .comFeatured__desc {
    font-size: 14px;
  }

  /* Grid -> 1 column */
  .comBlogClm3__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .comBlogClm3__inner {
    padding: 0 16px;
  }

  .comBlogClm3__title {
    font-size: 15px;
  }

  /* Pagination */
  .comPagination {
    padding: 16px 0 32px;
  }

  /* Tags */
  .comPickupTags__inner {
    padding: 0 16px;
  }

  .comPickupTags__tag {
    padding: 6px 14px;
    font-size: 12px;
  }

  /* Newsletter */
  .comNewsletter {
    padding: 32px 0 40px;
  }

  .comNewsletter__inner {
    padding: 0 16px;
  }

  .comNewsletter__box {
    padding: 32px 20px;
  }

  .comNewsletter__formGroup {
    flex-direction: column;
    gap: 8px;
  }

  .comNewsletter__input {
    border-right: 1px solid #c5d3d9;
  }

  /* Sitemap */
  .comSitemap {
    padding: 32px 0;
  }

  .comSitemap__inner {
    padding: 0 16px;
  }

  .comSitemap__columns {
    flex-direction: column;
    gap: 24px;
  }

  /* Footer bottom */
  .comFooterBottom__inner {
    padding: 0 16px;
  }

  .comFooterBottom__links {
    gap: 16px;
  }

  .comFooterBottom__social {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ================================================
   HEALTH & SOCIETY CATEGORY
   ================================================ */
.comCategory--healthSociety {
  color: #8B6914;
  border-color: #8B6914;
}

/* ================================================
   ARTICLE PAGE
   ================================================ */
.comArticle {
  padding: 48px 0 64px;
}

.comArticle__inner {
  max-width: 1296px;
  margin: 0 auto;
  padding: 0 24px;
}

.comArticle__category {
  margin-bottom: 16px;
}

.comArticle__title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  color: #333;
  margin-bottom: 16px;
}

.comArticle__date {
  display: block;
  font-family: "DIN Next LT W04 Mid", Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #999;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.comArticle__tags {
  margin-bottom: 32px;
}

.comArticle__hero {
  margin-bottom: 40px;
}

.comArticle__hero img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}

.comArticle__content {
  max-width: 800px;
}

.comArticle__content p {
  font-size: 15px;
  line-height: 2;
  color: #333;
  margin-bottom: 24px;
}

.comArticle__content h2 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  color: #333;
  margin-top: 48px;
  margin-bottom: 20px;
  padding-bottom: 8px;
  border-bottom: 2px solid #0055A4;
}

.comArticle__content h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: #333;
  margin-top: 32px;
  margin-bottom: 16px;
}

.comArticle__figure {
  margin: 32px 0;
}

.comArticle__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.comArticle__figure figcaption {
  font-size: 12px;
  color: #999;
  margin-top: 8px;
  line-height: 1.6;
}

.comArticle__content ul,
.comArticle__content ol {
  margin-bottom: 24px;
  padding-left: 24px;
}

.comArticle__content li {
  font-size: 14px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 8px;
  list-style: disc;
}

.comArticle__sources {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid #e0e0e0;
}

.comArticle__sources h2 {
  font-size: 16px;
  border-bottom: none;
  margin-top: 0;
}

.comArticle__sources li {
  font-size: 13px;
  color: #757575;
  line-height: 1.8;
  margin-bottom: 4px;
  list-style: decimal;
}

.comArticle__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "DIN Next LT W04 Mid", Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #0055A4;
  letter-spacing: 0.05em;
  margin-top: 48px;
  padding: 8px 0;
  transition: opacity 0.2s;
}

.comArticle__back:hover {
  opacity: 0.7;
}

@media screen and (max-width: 991px) {
  .comArticle__title {
    font-size: 26px;
  }
}

@media screen and (max-width: 480px) {
  .comArticle {
    padding: 24px 0 40px;
  }

  .comArticle__inner {
    padding: 0 16px;
  }

  .comArticle__title {
    font-size: 22px;
  }

  .comArticle__hero img {
    aspect-ratio: 16 / 10;
  }

  .comArticle__content h2 {
    font-size: 18px;
    margin-top: 32px;
  }
}

/* ================================================
   COLUMN CATEGORY
   ================================================ */
.comCategory--column {
  color: #1B2A4E;
  border-color: #1B2A4E;
}

/* ================================================
   AUTHOR PROFILE BOX
   ================================================ */
.comArticle__author {
  margin-top: 48px;
  padding: 32px;
  border-top: 2px solid #0055A4;
  background: #f8fafb;
}

.comArticle__authorName {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  margin-bottom: 4px;
  line-height: 1.6;
}

.comArticle__authorRole {
  font-size: 13px;
  font-weight: 500;
  color: #0055A4;
  margin-bottom: 12px;
  line-height: 1.6;
}

.comArticle__authorBio {
  font-size: 14px;
  color: #555;
  line-height: 1.9;
}

/* ================================================
   ARTICLE-END CTA (Newsletter)
   ================================================ */
.comArticleCta {
  margin-top: 48px;
  padding: 32px;
  background: #f0f6f8;
  text-align: center;
}

.comArticleCta__title {
  font-family: "DIN Next LT W04 Mid", Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #0055A4;
  margin-bottom: 8px;
}

.comArticleCta__desc {
  font-size: 13px;
  color: #555;
  margin-bottom: 16px;
  line-height: 1.7;
}

.comArticleCta__form {
  margin-bottom: 8px;
}

.comArticleCta__formGroup {
  display: flex;
  gap: 0;
  max-width: 400px;
  margin: 0 auto;
}

.comArticleCta__input {
  flex: 1;
  padding: 10px 14px;
  font-size: 13px;
  font-family: "Noto Sans JP", sans-serif;
  border: 1px solid #c5d3d9;
  border-right: none;
  outline: none;
}

.comArticleCta__input:focus {
  border-color: #0055A4;
}

.comArticleCta__button {
  padding: 10px 20px;
  font-family: "DIN Next LT W04 Mid", Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #fff;
  background: #0055A4;
  border: 1px solid #0055A4;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}

.comArticleCta__button:hover {
  background: #003d7a;
  border-color: #003d7a;
}

.comArticleCta__note {
  font-size: 11px;
  color: #999;
}

@media screen and (max-width: 480px) {
  .comArticleCta__formGroup {
    flex-direction: column;
    gap: 8px;
  }

  .comArticleCta__input {
    border-right: 1px solid #c5d3d9;
  }

  .comArticle__author {
    padding: 24px 16px;
  }
}

/* ================================================
   READING PROGRESS BAR
   ================================================ */
.comProgressBar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: #0055A4;
  z-index: 1100;
  transition: width 0.1s linear;
}

/* ================================================
   FADE-IN ON SCROLL
   ================================================ */
.comFadeIn {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.comFadeIn--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ================================================
   TABLE OF CONTENTS
   ================================================ */
.comToc {
  background: #f8fafb;
  border-left: 3px solid #0055A4;
  padding: 24px 28px;
  margin-bottom: 40px;
}

.comToc__title {
  font-family: "DIN Next LT W04 Mid", Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #0055A4;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.comToc__list {
  padding-left: 0;
}

.comToc__list li {
  list-style: none;
  margin-bottom: 8px;
}

.comToc__list a {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  transition: color 0.2s;
}

.comToc__list a:hover {
  color: #0055A4;
  opacity: 1;
}

/* ================================================
   READING TIME
   ================================================ */
.comArticle__readTime {
  display: inline-block;
  font-family: "DIN Next LT W04 Mid", Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #999;
  letter-spacing: 0.05em;
  margin-left: 16px;
}

/* ================================================
   SNS SHARE BUTTONS
   ================================================ */
.comShare {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid #e0e0e0;
}

.comShare__title {
  font-family: "DIN Next LT W04 Mid", Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #999;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.comShare__list {
  display: flex;
  gap: 12px;
}

.comShare__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #c5d3d9;
  border-radius: 50%;
  transition: all 0.2s;
}

.comShare__link:hover {
  opacity: 1;
}

.comShare__link--x:hover {
  background: #000;
  border-color: #000;
}

.comShare__link--x:hover svg { fill: #fff; }

.comShare__link--line:hover {
  background: #06C755;
  border-color: #06C755;
}

.comShare__link--line:hover svg { fill: #fff; }

.comShare__link--hatena:hover {
  background: #00A4DE;
  border-color: #00A4DE;
}

.comShare__link--hatena:hover svg { fill: #fff; }

/* ================================================
   RELATED ARTICLES
   ================================================ */
.comRelated {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid #e0e0e0;
}

.comRelated__title {
  font-family: "DIN Next LT W04 Mid", Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #0055A4;
  margin-bottom: 24px;
  text-transform: uppercase;
}

.comRelated__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.comRelated__card {
  display: flex;
  flex-direction: column;
}

.comRelated__imageLink {
  display: block;
  overflow: hidden;
}

.comRelated__image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.comRelated__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.comRelated__imageLink:hover .comRelated__image img {
  transform: scale(1.05);
}

.comRelated__body {
  padding-top: 12px;
}

.comRelated__cardTitle {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: #333;
}

.comRelated__cardTitle a:hover {
  color: #0055A4;
  opacity: 1;
}

.comRelated__date {
  display: block;
  font-family: "DIN Next LT W04 Mid", Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #999;
  margin-top: 6px;
}

@media screen and (max-width: 480px) {
  .comRelated__grid {
    grid-template-columns: 1fr;
  }

  .comToc {
    padding: 20px;
  }

  .comShare__list {
    gap: 8px;
  }
}

/* ================================================
   CATEGORY PAGE HEADER
   ================================================ */
.comCategoryHeader {
  padding: 48px 0 32px;
}

.comCategoryHeader__inner {
  max-width: 1296px;
  margin: 0 auto;
  padding: 0 24px;
}

.comCategoryHeader__title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
  color: #333;
  margin: 12px 0;
}

.comCategoryHeader__desc {
  font-size: 15px;
  color: #555;
  line-height: 1.8;
  max-width: 700px;
}

@media screen and (max-width: 480px) {
  .comCategoryHeader {
    padding: 24px 0 20px;
  }

  .comCategoryHeader__inner {
    padding: 0 16px;
  }

  .comCategoryHeader__title {
    font-size: 22px;
  }
}

/* ================================================
   TAG FILTER BAR
   ================================================ */
.comFilterBar {
  padding: 16px 0;
  background: #f8fafb;
  border-bottom: 1px solid #e0e0e0;
}

.comFilterBar__inner {
  max-width: 1296px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.comFilterBar__label {
  font-size: 13px;
  color: #757575;
}

.comFilterBar__tag {
  display: inline-block;
  padding: 4px 16px;
  background: #0055A4;
  color: #fff;
  font-family: "DIN Next LT W04 Mid", Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 20px;
}

.comFilterBar__clear {
  font-size: 13px;
  color: #0055A4;
  margin-left: auto;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

.comFilterBar__clear:hover {
  border-bottom-color: #0055A4;
  opacity: 1;
}

/* Hidden cards when filtering */
.comBlogClm3__card--hidden {
  display: none !important;
}

.comFeatured--hidden {
  display: none !important;
}

/* Active state for PICK UP TAGS */
.comPickupTags__tag--active {
  background: #0055A4;
  color: #fff;
  border-color: #0055A4;
}

/* No results message */
.comFilterEmpty {
  text-align: center;
  padding: 48px 24px;
  color: #757575;
  font-size: 15px;
  line-height: 1.8;
}

.comFilterEmpty__title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
}

/* ================================================
   SEARCH OVERLAY
   ================================================ */
.comSearchOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.97);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  overflow-y: auto;
}

.comSearchOverlay--open {
  opacity: 1;
  visibility: visible;
}

.comSearchOverlay__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 120px 24px 40px;
}

.comSearchOverlay__close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: none;
  border: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.comSearchOverlay__close:hover {
  opacity: 0.5;
}

.comSearchOverlay__inputWrap {
  position: relative;
  margin-bottom: 32px;
}

.comSearchOverlay__input {
  width: 100%;
  padding: 16px 48px 16px 0;
  font-size: 24px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  color: #333;
  border: none;
  border-bottom: 2px solid #0055A4;
  background: transparent;
  outline: none;
}

.comSearchOverlay__input::placeholder {
  color: #bbb;
}

.comSearchOverlay__icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.comSearchOverlay__results {
  list-style: none;
}

.comSearchOverlay__resultItem {
  border-bottom: 1px solid #e6ecee;
}

.comSearchOverlay__resultLink {
  display: block;
  padding: 20px 0;
  transition: background 0.2s;
}

.comSearchOverlay__resultLink:hover {
  opacity: 1;
}

.comSearchOverlay__resultLink:hover .comSearchOverlay__resultTitle {
  color: #0055A4;
}

.comSearchOverlay__resultCategory {
  font-family: "DIN Next LT W04 Mid", Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #0055A4;
  margin-bottom: 4px;
}

.comSearchOverlay__resultTitle {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  line-height: 1.5;
  margin-bottom: 4px;
  transition: color 0.2s;
}

.comSearchOverlay__resultDate {
  font-family: "DIN Next LT W04 Mid", Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #999;
}

.comSearchOverlay__noResult {
  text-align: center;
  padding: 40px 0;
  color: #999;
  font-size: 14px;
}

@media screen and (max-width: 480px) {
  .comSearchOverlay__inner {
    padding: 80px 16px 24px;
  }

  .comSearchOverlay__input {
    font-size: 18px;
  }

  .comFilterBar__inner {
    padding: 0 16px;
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ================================================
   REFIT SERVICE CTA (Article Pages)
   ================================================ */
.comRefitCta {
  margin-top: 48px;
  padding: 32px;
  background: linear-gradient(135deg, #f0f6f8 0%, #e6f0f5 100%);
  border-left: 4px solid #0055A4;
}

.comRefitCta__eyebrow {
  font-family: "DIN Next LT W04 Mid", Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #0055A4;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.comRefitCta__title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  line-height: 1.5;
  margin-bottom: 8px;
}

.comRefitCta__desc {
  font-size: 14px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 20px;
}

.comRefitCta__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "DIN Next LT W04 Mid", Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #fff;
  background: #0055A4;
  padding: 10px 28px;
  transition: background 0.2s;
}

.comRefitCta__link:hover {
  background: #003d7a;
  opacity: 1;
  color: #fff;
}

.comRefitCta__link svg {
  transition: transform 0.2s;
}

.comRefitCta__link:hover svg {
  transform: translateX(4px);
}

@media screen and (max-width: 480px) {
  .comRefitCta {
    padding: 24px 16px;
  }

  .comRefitCta__title {
    font-size: 16px;
  }
}