/* ─── SP styles (max-width: 767px) ─── */
/* Loaded via <link media="(max-width: 767px)"> — no @media wrapper needed */

/* ─── Variables ─── */
:root {
  --header-height-lg: 56px;
}

/* ─── Container ─── */
.container {
  padding-right: 20px;
  padding-left: 20px;
}

/* ─── Header ─── */
.l-header__wrapper { padding: 0 16px; }
.l-header__gnav    { display: none; }
.l-header__contact { display: none; }
/* gnav非表示でflex-growが消えるため、ハンバーガーを右端へ寄せる */
.l-header__hamburger { margin-left: auto; }

/* ─── Hero ─── */
/* スマホでは画像をトリミングせず、本来の縦横比で全体を収める */
.top-hero {
  height: auto;
  padding-top: var(--header-height-lg);
}
.top-hero__img {
  height: auto;
  object-fit: contain;
}

/* ─── Typography ─── */
.c-title__primary .\:en { font-size: 2rem; }
.c-title__secondary     { font-size: 1.25rem; }

/* ─── About ─── */
.top-about {
  padding-top: 60px;
  padding-bottom: 60px;
  overflow: visible;
}

/* グリッドを通常ブロックに変換 */
.top-about__grid {
  display: block;
}

.top-about__heading {
  display: flex;
  flex-direction: column;
  padding-right: 0;
}
.top-about__heading__title {
  padding-top: 0;
}
.top-about__heading__img {
  width: 100%;
  margin-top: 24px;
  overflow: hidden;
  border-radius: 8px;
}
/* スマホでは縦長トリミングをやめ、画像本来の横長比率で全体を表示（見切れ防止） */
.top-about__heading__img img {
  aspect-ratio: 3 / 2;
}

.top-about__content {
  padding-left: 0;
  margin-top: 40px;
}
/* デスクトップで付与した左右整列用の上余白はモバイル(単一カラム)では不要 */
.top-about .top-about__content,
.page-body .top-about__content { padding-top: 0; }

/* モバイルでは画像プレースホルダーを非表示 */
.top-about__content__img {
  display: none;
}

/* ─── Company info (About us) ─── */
.company-info__row {
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 16px 0;
}
.company-info__label {
  font-size: .8125rem;
}
.company-info__data {
  font-size: .9375rem;
}

/* ─── Service ─── */
.top-service {
  padding-top: 60px;
  overflow: hidden;
}

/* グリッドを通常ブロックに変換 */
.top-service__grid {
  display: block;
}

.top-service__heading {
  width: 100%;
}
.top-service__main {
  padding-left: 0;
  margin-top: 30px;
}
.top-service__lead {
  font-size: 1.25rem;
}
.top-service__points {
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 40px;
}
.top-service__points__item {
  padding: 28px 24px;
}
.top-service__points__num {
  font-size: 2rem;
  margin-bottom: 14px;
}
.top-service__biz {
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 40px;
}
.top-service__biz__item {
  padding: 32px 24px;
}
.top-service__biz__tit {
  font-size: 1.25rem;
}
.top-service__biz--compact .top-service__biz__link {
  padding: 28px 24px;
}
.top-service__biz--compact .top-service__biz__more {
  margin-top: 20px;
}

/* ─── Cases ─── */
.top-cases {
  padding-top: 60px;
}
.top-cases__grid {
  flex-direction: column;
  gap: 32px;
}
.top-cases__heading {
  flex: none;
  width: 100%;
}
.top-cases__heading__inner {
  position: relative;
  top: auto;
}
.top-cases__articles {
  gap: 40px;
  flex-grow: 0;
}
.c-card__cases {
  flex-direction: column;
  gap: 0;
}
.c-card__cases__l {
  flex: none;
  width: 100%;
}
.c-card__cases__image {
  padding-top: 56%;
  border-radius: 6px;
}
.c-card__cases__r {
  padding-top: 20px;
  padding-bottom: 0;
  flex-grow: 0;
}

/* ─── Recruit ─── */
.top-recruit {
  padding-top: 60px;
}
.top-recruit__list {
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 36px;
}
.top-recruit__link {
  padding: 24px;
}
.top-recruit__type {
  margin-bottom: 16px;
}
.top-recruit__more {
  padding-top: 20px;
}

/* ─── News ─── */
.top-news {
  padding-top: 60px;
  padding-bottom: 30px;
}
.top-news__grid {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.top-news__heading,
.top-news .c-news__wrap,
.top-news .c-button__wrap {
  grid-area: auto;
}

/* ─── Contact Aside ─── */
.l-aside__contact {
  display: flex !important;
  flex-direction: column !important;
  padding: 32px 20px;
  gap: 0;
}
.l-aside__contact__l {
  flex: none;
  width: 100%;
  min-height: unset;
  height: 200px;
  border-radius: 10px;
}
.l-aside__contact__r {
  padding: 28px 0 0;
}
.l-aside__contact__heading {
  margin-bottom: 20px;
}
.l-aside__contact .c-button__wrap {
  margin-top: 28px !important;
}

/* ─── Footer ─── */
.l-footer__btm {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 0;
}

/* ─── Page hero (各内部ページ) ─── */
.page-hero {
  padding-top: calc(var(--header-height-lg) + 40px) !important;
  padding-bottom: 36px !important;
}
.page-hero__title {
  font-size: clamp(2rem, 9vw, 2.75rem) !important;
}

/* ─── Page body (各内部ページ) ─── */
.page-body {
  padding: 50px 0 70px !important;
}