/* 会社概要（/company/ ＝ 固定ページ6）— 加藤様の原稿の型 — 2026-10-02 blanc
 * 本文は DB（ページ6）、このCSSは inc/company-page.php が body 先頭で読む */

/* サイドバーとテンプレートの見出し・下線を外して全幅にする */
.main-grid-wrap:has(.jrc) { grid-template-columns: 1fr; max-width: 1200px; gap: 0; }
.main-grid-wrap:has(.jrc) > .side-parts { display: none; }
#subpage .main-content:has(.jrc) > h2.menu-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#subpage .main-content .jrc h2, #subpage .main-content .jrc h3 { margin: 0; padding: 0; border: 0; background: none; }
#subpage .main-content .jrc h2::before, #subpage .main-content .jrc h2::after,
#subpage .main-content .jrc h3::before, #subpage .main-content .jrc h3::after { content: none; display: none; }

.jrc {
  --c-navy: #0f2a55;
  --c-gold: #c9962b;
  --c-pale: #eef4fb;
  --c-line: #dfe6ef;
  --c-text: #2b3440;
  --c-serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  color: var(--c-text);
  font-size: 1.5rem;
  line-height: 1.85;
}
.jrc p { margin: 0; }
.jrc img { display: block; max-width: 100%; height: auto; }
.jrc ul, .jrc ol { margin: 0; padding: 0; list-style: none; }
.jrc-en { font-family: var(--c-serif); font-size: 1.1rem; letter-spacing: .3em; color: #5d6f8c; font-weight: normal; }
.jrc-num { font-family: var(--c-serif); font-size: 1.35em; }

/* 上部 */
.jrc-hero { position: relative; min-height: 36rem; display: flex; align-items: center; overflow: hidden; }
.jrc-hero__img { position: absolute; top: 0; right: 0; width: 68%; height: 100%; object-fit: cover; }
.jrc-hero::before { content: ""; position: absolute; inset: 0 0 0 0; z-index: 1;
  background: linear-gradient(90deg, #fff 0%, #fff 32%, rgba(255,255,255,.85) 42%, rgba(255,255,255,0) 62%); }
.jrc-hero__body { position: relative; z-index: 2; padding: 3rem 0 6rem 3.2rem; }
#subpage .main-content .jrc .jrc-hero__title { font-family: var(--c-serif); font-size: 5.2rem; line-height: 1.2; color: var(--c-navy); letter-spacing: .12em; margin: .6rem 0 1.6rem; }
#subpage .main-content .jrc .jrc-hero__title::after { content: "" !important; display: block !important; width: 4.4rem; height: 3px; background: var(--c-gold); margin-top: 1.6rem; }
.jrc-hero__lead { font-family: var(--c-serif); font-size: 2.6rem; color: var(--c-navy); margin-bottom: .6rem !important; }
.jrc-hero__text { font-family: var(--c-serif); font-size: 1.8rem; line-height: 1.75; color: var(--c-navy); }

/* 3つの強み */
.jrc-points { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin: -4.4rem 1.6rem 4rem !important; }
.jrc-points li { display: flex; align-items: center; gap: 1.6rem; background: #fff; border-radius: 6px; padding: 2rem 2rem; box-shadow: 0 4px 16px rgba(15,42,85,.10); }
.jrc-points li > img { width: 6rem; flex: none; }
.jrc-points li p { font-size: 1.35rem; line-height: 1.7; }
.jrc-points .jrc-points__title { font-family: var(--c-serif); font-size: 2rem; line-height: 1.35; color: var(--c-navy); font-weight: bold; margin-bottom: .6rem; }

/* 見出し（左に金の線） */
#subpage .main-content .jrc .jrc-head { display: flex; align-items: baseline; gap: 1.6rem; font-family: var(--c-serif); font-size: 2.6rem; color: var(--c-navy); margin-bottom: 1.8rem; padding-left: 6rem !important; background: linear-gradient(var(--c-gold), var(--c-gold)) left 55% / 4.4rem 2px no-repeat !important; }

/* 会社情報＋私たちについて */
.jrc-info { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.4rem; margin: 0 1.6rem 4rem; align-items: start; }
.jrc-info table { width: 100%; border-collapse: collapse; border: 1px solid var(--c-line); font-size: 1.45rem; }
.jrc-info th, .jrc-info td { border-bottom: 1px solid var(--c-line); padding: 1.3rem 1.6rem; text-align: left; vertical-align: top; }
.jrc-info th { width: 9.6rem; background: var(--c-pale); color: var(--c-navy); font-weight: bold; white-space: nowrap; }
.jrc-info td a { color: #1f56c3; }
.jrc-about { border-radius: 6px; overflow: hidden; background: var(--c-navy); color: #fff; }
.jrc-about img { width: 100%; }
.jrc-about__body { padding: 2.2rem 2.4rem 2.6rem; }
#subpage .main-content .jrc .jrc-about__title { font-family: var(--c-serif); font-size: 2.4rem; color: #fff; display: flex; align-items: baseline; gap: 1.6rem; margin-bottom: 1.4rem; }
.jrc-about__title .jrc-en { color: #c9d6ea; }
.jrc-about p { font-size: 1.4rem; line-height: 1.95; }

/* 主な取引先 */
.jrc-clients { background: var(--c-pale); padding: 3rem 1.6rem 3.2rem; margin-bottom: 4rem; }
.jrc-clients__head { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.jrc-clients__head p { font-size: 1.35rem; color: #45526a; }
.jrc-clients__list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.jrc-clients__list li { background: #fff; border-radius: 4px; display: flex; align-items: center; justify-content: center; min-height: 8.6rem; padding: .6rem; }
.jrc-clients__list li img { max-height: 7.4rem; width: auto; }
.jrc-clients__more { flex-direction: column; gap: .4rem; font-size: 1.35rem; color: var(--c-navy); }
.jrc-clients__more img { max-height: 3.6rem !important; }

/* 沿革 */
.jrc-history { margin: 0 1.6rem 4.4rem; }
.jrc-history__list { display: grid; grid-template-columns: repeat(7, 1fr); position: relative; padding-top: 2.6rem !important; }
.jrc-history__list::before { content: ""; position: absolute; top: .8rem; left: 7%; right: 7%; height: 2px; background: #9fb6d6; }
.jrc-history__list li { list-style: none !important; position: relative; text-align: center; font-size: 1.3rem; line-height: 1.6; }
#subpage .main-content .jrc .jrc-history__list li::before { content: ""; position: absolute; top: -2.6rem; left: 50%; width: 1.4rem; height: 1.4rem; margin-left: -.7rem; border: 3px solid #2e5a8f; border-radius: 50%; background: #fff; }
.jrc-history__list li.is-now { font-weight: bold; color: var(--c-navy); }
#subpage .main-content .jrc .jrc-history__list li.is-now::before { background: var(--c-navy); }
.jrc-history__year { display: block; font-family: var(--c-serif); font-size: 2.2rem; color: var(--c-gold); line-height: 1.5; margin-bottom: .2rem; }

/* お問い合わせの帯 */
.jrc-cta { position: relative; display: flex; justify-content: flex-end; min-height: 21rem; background: var(--c-navy); overflow: hidden; margin: 0 0 2rem; }
.jrc-cta__img { position: absolute; left: 0; top: 0; width: 46%; height: 100%; object-fit: cover; }
.jrc-cta::before { content: ""; position: absolute; left: 0; top: 0; width: 46%; height: 100%; z-index: 1; background: linear-gradient(90deg, rgba(15,42,85,0) 50%, var(--c-navy) 100%); }
.jrc-cta__body { position: relative; z-index: 2; width: 58%; padding: 3rem 3rem; color: #fff; text-align: center; }
.jrc-cta__title { font-family: var(--c-serif); font-size: 2.4rem; line-height: 1.5; margin-bottom: .6rem !important; }
.jrc-cta__btns { display: flex; justify-content: center; gap: 1.6rem; margin-top: 2rem !important; flex-wrap: wrap; }
.jrc .jrc-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 22rem; padding: 1.3rem 2.4rem; border-radius: 6px; font-size: 1.6rem; font-weight: bold; text-decoration: none; }
.jrc .jrc-btn::after { content: "\203A"; margin-left: 1.2rem; font-size: 2rem; line-height: 1; }
.jrc .jrc-btn--gold { background: var(--c-gold); color: #fff; }
.jrc .jrc-btn--line { border: 2px solid #fff; color: #fff; }

/* スマートフォン */
@media (max-width: 767px) {
  .jrc { font-size: 1.45rem; }
  .jrc-hero { min-height: 0; flex-direction: column; align-items: stretch; }
  .jrc-hero__img { position: static; width: 100%; height: auto; order: 2; }
  .jrc-hero::before { content: none; }
  .jrc-hero__body { padding: 2rem 1.6rem 2rem; }
  #subpage .main-content .jrc .jrc-hero__title { font-size: 3.6rem; }
  .jrc-hero__lead { font-size: 2.2rem; }
  .jrc-hero__text { font-size: 1.55rem; }
  .jrc-points { grid-template-columns: 1fr; margin: 1.6rem 1.2rem 3rem !important; gap: 1rem; }
  .jrc-info { grid-template-columns: 1fr; margin: 0 1.2rem 3rem; }
  .jrc-info th { width: 7.6rem; padding: 1.1rem 1rem; }
  .jrc-info td { padding: 1.1rem 1rem; word-break: break-all; }
  #subpage .main-content .jrc .jrc-head, #subpage .main-content .jrc .jrc-about__title { font-size: 2.2rem; flex-wrap: wrap; gap: .2rem 1.2rem; }
  #subpage .main-content .jrc .jrc-head { padding-left: 4.4rem !important; background-size: 3rem 2px !important; }
  .jrc-head .jrc-en, .jrc-about__title .jrc-en { font-size: 1rem; letter-spacing: .2em; }
  .jrc-clients { padding: 2.4rem 1.2rem; }
  .jrc-clients__list { grid-template-columns: repeat(2, 1fr); }
  .jrc-history { margin: 0 1.2rem 3rem; }
  .jrc-history__list { grid-template-columns: 1fr; padding: 0 0 0 2.6rem !important; gap: 1.4rem; }
  .jrc-history__list::before { top: .6rem; bottom: .6rem; left: .7rem; right: auto; width: 2px; height: auto; }
  .jrc-history__list li { text-align: left; }
  #subpage .main-content .jrc .jrc-history__list li::before { top: .6rem; left: -2.6rem; margin-left: 0; }
  .jrc-history__list li br { display: none; }
  .jrc-cta { flex-direction: column; }
  .jrc-cta__img { position: static; width: 100%; height: 14rem; }
  .jrc-cta::before { content: none; }
  .jrc-cta__body { width: 100%; padding: 2.4rem 1.6rem; }
  .jrc-cta__title { font-size: 2rem; }
  .jrc .jrc-btn { min-width: 0; width: 100%; }
}

.jrc-history__list li::marker { content: none; }