@charset "UTF-8";

/* ==========================================================================
   pages/sub.css
   下層ページ共通：fixedヘッダ分のpadding、SEOバー(ステージング用)、CTA帯など
   ========================================================================== */
@layer pages {

  /* fixedヘッダ分の余白：下層ページはbody.page-subを付けて運用 */
  body.page-sub {
    padding-top: var(--header-h);
  }
  @media (max-width: 1024px) {
    body.page-sub { padding-top: var(--header-h-sp); }
  }

  /* ==========================================================================
     SEO 情報バー（ステージング/レビュー時のみ）
     ========================================================================== */
  .seo-bar {
    background: #fffde6;
    border-bottom: 1px solid #e8e0a0;
    color: #665a10;
  }
  .seo-bar__inner {
    max-width: var(--container-max);
    margin-inline: auto;
    padding: 14px var(--container-pad);
    font-size: var(--fs-caption);
  }
  .seo-bar__title {
    font-weight: var(--fw-semibold);
    margin-bottom: 6px;
    font-size: var(--fs-small);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .seo-bar__title::before {
    content: 'SEO';
    background: #665a10;
    color: var(--c-text-invert);
    padding: 2px 6px;
    border-radius: 2px;
    font-size: var(--fs-eyebrow);
    font-family: var(--ff-num);
    letter-spacing: 0.1em;
  }
  .seo-bar table {
    width: 100%;
    border-collapse: collapse;
  }
  .seo-bar th {
    text-align: left;
    padding: 3px 8px 3px 0;
    color: #998a20;
    font-weight: var(--fw-medium);
    white-space: nowrap;
    vertical-align: top;
    width: 110px;
  }
  .seo-bar td {
    padding: 3px 0;
    word-break: break-all;
  }
  .seo-bar__kw {
    display: inline-block;
    background: #f5f0c8;
    padding: 1px 6px;
    border-radius: 2px;
    margin: 1px 4px 1px 0;
    font-size: var(--fs-caption);
  }
  .seo-bar__kw .vol {
    color: #aa9a40;
    font-size: var(--fs-eyebrow);
    margin-left: 4px;
    font-family: var(--ff-num);
  }

  /* ==========================================================================
     製品カテゴリページ
     ========================================================================== */
  /* メディア（画像＋テキスト）レイアウト */
  .p-media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
    align-items: center;
  }
  .p-media--top { align-items: start; }
  .p-media--rev { direction: rtl; }
  .p-media--rev > * { direction: ltr; }
  .p-media__img .p-product__media {
    aspect-ratio: 4 / 3;
    background: var(--c-bg-alt);
    border-radius: var(--r-md);
  }
  .p-media__body p {
    line-height: var(--lh-loose);
    color: var(--c-text-muted);
  }
  @media (max-width: 768px) {
    .p-media { grid-template-columns: 1fr; }
    .p-media--rev { direction: ltr; }
  }

  /* 特長カードボックス */
  .c-box {
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    padding: var(--sp-5);
    overflow: hidden;
  }
  .c-box__title {
    font-size: var(--fs-h4);
    color: var(--c-brand-700);
    margin: 0 0 var(--sp-2);
  }
  .c-box__text {
    font-size: var(--fs-body);
    color: var(--c-text-muted);
    line-height: var(--lh-loose);
    margin: 0;
  }

  .p-products-intro {
    max-width: 760px;
    margin-inline: auto;
    text-align: center;
  }
  .p-products-intro p {
    line-height: var(--lh-loose);
    color: var(--c-text-muted);
  }

  /* 1136px幅の製品イントロ（各カテゴリ・ラインナップページ共通） */
  .p-intro-wide {
    max-width: 1136px;
    margin-inline: auto;
    text-align: center;
  }
  @media (max-width: 768px) {
    .p-intro-wide { text-align: left; }
  }

  /* ピックアップ製品 */
  .p-pickup-note {
    background: var(--c-bg-alt);
    color: var(--c-text-subtle);
    font-size: var(--fs-caption);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-sm);
    margin-bottom: var(--sp-5);
    text-align: center;
  }

  /* VRツアー */
  .p-vr {
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    overflow: hidden;
  }
  .p-vr__thumb {
    aspect-ratio: 16 / 7;
    background: var(--c-bg-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text-subtle);
    position: relative;
  }
  .p-vr__thumb iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .p-vr__body {
    padding: var(--sp-6);
  }
  .p-vr__title {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-h3);
  }
  .p-vr__text {
    color: var(--c-text-muted);
    margin-bottom: var(--sp-4);
  }
  .p-vr__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
  }
  /* 事例紹介カード */
  .c-case {
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    overflow: hidden;
  }
  .c-case__header {
    background: var(--c-brand-700);
    padding: var(--sp-5) var(--sp-7);
    display: flex;
    align-items: center;
    gap: var(--sp-4);
  }
  .c-case__header .c-case__title { margin-right: auto; }
  .c-case__header .c-case__tags .c-tag {
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
  }
  .c-case__num {
    font-size: var(--fs-caption);
    color: rgba(var(--c-on-dark), .6);
    letter-spacing: .1em;
    white-space: nowrap;
  }
  .c-case__title {
    font-size: var(--fs-h3);
    color: var(--c-text-invert);
    margin: 0;
    font-weight: var(--fw-bold);
  }
  .c-case__body {
    padding: var(--sp-6) var(--sp-7);
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
  }
  .c-case__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .c-case__media-col{
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }
  .c-case__media{
    border-radius: var(--r-md);
    overflow: hidden;
    aspect-ratio: 3 / 2;
  }
  .c-case__media img{ width:100%; height:100%; object-fit:cover; display:block; }
  .c-case__content {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--sp-6);
    align-items: start;
  }
  .c-case__voice {
    background: var(--c-bg-alt);
    border-radius: var(--r-md);
    padding: var(--sp-5);
    position: relative;
  }
  .c-case__voice p {
    color: var(--c-text-muted);
    line-height: var(--lh-loose);
    margin: 0;
  }
  .c-case__result {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }
  .c-case__result-title {
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    color: var(--c-brand-700);
    margin: 0;
    padding-bottom: var(--sp-2);
    border-bottom: 2px solid var(--c-brand-100);
  }
  .c-case__result-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }
  .c-case__result-list li {
    padding-left: var(--sp-5);
    position: relative;
    color: var(--c-text-muted);
    line-height: var(--lh-base);
  }
  .c-case__result-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .5em;
    width: 8px;
    height: 8px;
    background: var(--c-brand-500);
    border-radius: 50%;
  }
  @media (max-width: 768px) {
    .c-case__header { flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding: var(--sp-4) var(--sp-5); }
    .c-case__header .c-case__num { margin-right: auto; order: -1; }
    .c-case__header .c-case__tags { order: 0; }
    .c-case__header .c-case__title { order: 1; flex-basis: 100%; margin-right: 0; }
    .c-case__header .c-case__tags .c-tag { font-size: var(--fs-caption); padding: 0.1em 0.6em; }
    .c-case__body { padding: var(--sp-5); }
    .c-case__content { grid-template-columns: 1fr; }
  }

  /* カタログDL */
  .p-catalog {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--sp-6);
    align-items: start;
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    padding: var(--sp-6);
  }
  .p-catalog__cover {
    aspect-ratio: 1 / 1.4;
    background: var(--c-bg-alt);
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text-subtle);
    font-size: var(--fs-caption);
  }
  .p-catalog__body { display: flex; flex-direction: column; gap: var(--sp-3); }
  .p-catalog__title { font-size: var(--fs-h3); margin: 0; }
  .p-catalog__meta { font-size: var(--fs-caption); color: var(--c-text-subtle); }
  @media (max-width: 640px) {
    .p-catalog { grid-template-columns: 130px 1fr; gap: var(--sp-4); padding: var(--sp-4); }
  }

  /* ==========================================================================
     製品詳細ページ
     ========================================================================== */
  .p-product {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-7);
    align-items: start;
  }
  @media (max-width: 880px) {
    .p-product { grid-template-columns: 1fr; gap: var(--sp-5); }
  }
  .p-product__media {
    aspect-ratio: 4 / 3;
    background: var(--c-bg-alt);
    border-radius: var(--r-md);
    overflow: hidden;
  }
  .p-product__media img { width: 100%; height: 100%; object-fit: cover; }
  .p-product__body { display: flex; flex-direction: column; gap: var(--sp-4); }
  .p-product__cat {
    font-size: var(--fs-caption);
    color: var(--c-brand-800);
    font-weight: var(--fw-medium);
  }
  .p-product__name {
    font-size: clamp(1.5rem, 1.5vw + 0.8rem, 2rem);
    margin: 0;
  }
  .p-product__lead {
    color: var(--c-text-muted);
    line-height: var(--lh-loose);
  }
  .p-product__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
  }

  /* ==========================================================================
     事業紹介ページ
     ========================================================================== */
  .p-business-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-7);
    align-items: center;
    margin-bottom: var(--sp-8);
  }
  .p-business-card:nth-child(even) .p-business-card__media { order: 2; }
  .p-business-card__media {
    aspect-ratio: 4 / 3;
    background: var(--c-bg-alt);
    border-radius: var(--r-md);
    overflow: hidden;
  }
  .p-business-card__media img { width: 100%; height: 100%; object-fit: cover; }
  .p-business-card__title { margin: 0 0 var(--sp-3); }
  .p-business-card__text { color: var(--c-text-muted); margin-bottom: var(--sp-5); }
  .p-business-card__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
  @media (max-width: 880px) {
    .p-business-card { grid-template-columns: 1fr; gap: var(--sp-4); margin-bottom: var(--sp-7); }
    .p-business-card:nth-child(even) .p-business-card__media { order: 0; }
  }

  /* ==========================================================================
     NEMYについてページ
     ========================================================================== */
  .p-vision-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
  }
  @media (max-width: 768px) {
    .p-vision-grid { grid-template-columns: 1fr; }
  }
  .p-vision-item {
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    padding: var(--sp-6);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }
  .p-vision-item__num {
    font-family: var(--ff-num);
    font-size: 2.5rem;
    line-height: 1;
    color: var(--c-brand-800);
    font-weight: var(--fw-light);
  }
  .p-vision-item__title {
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    margin: 0;
  }
  .p-vision-item__text {
    font-size: var(--fs-small);
    color: var(--c-text-muted);
  }

  .p-message {
    background: var(--c-bg-alt);
    border-radius: var(--r-md);
    padding: clamp(2rem, 4vw, 3.5rem);
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--sp-6);
    align-items: center;
  }
  .p-message__photo {
    aspect-ratio: 3 / 4;
    background: var(--c-bg);
    border-radius: var(--r-md);
    overflow: hidden;
  }
  .p-message__quote {
    font-size: var(--fs-h3);
    line-height: 1.7;
    color: var(--c-text);
    font-weight: var(--fw-medium);
    margin: 0 0 var(--sp-5);
  }
  .p-message__author { font-size: var(--fs-caption); color: var(--c-text-muted); }
  @media (max-width: 768px) {
    .p-message { grid-template-columns: 1fr; }
    .p-message__quote { font-size: var(--fs-h4); }
  }

  /* ==========================================================================
     お知らせ一覧
     ========================================================================== */
  .p-news-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--c-line);
    margin-bottom: var(--sp-6);
  }
  .p-news-tab {
    padding: var(--sp-4) var(--sp-5);
    font-weight: var(--fw-medium);
    color: var(--c-text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--dur), border-color var(--dur);
    text-decoration: none;
  }
  .p-news-tab:hover { color: var(--c-brand-800); opacity: 1; }
  .p-news-tab.is-active {
    color: var(--c-brand-800);
    border-bottom-color: var(--c-brand-800);
  }

  /* ==========================================================================
     記事ページ
     ========================================================================== */
  .p-article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--sp-7);
    align-items: start;
  }
  @media (max-width: 960px) {
    .p-article { grid-template-columns: 1fr; }
  }
  .p-article__main { min-width: 0; }
  .p-article__header { margin-bottom: var(--sp-6); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--c-line); }
  .p-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
    margin-bottom: var(--sp-4);
    font-size: var(--fs-caption);
  }
  .p-article__date {
    font-family: var(--ff-num);
    color: var(--c-text-muted);
  }
  .p-article__title {
    font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
    line-height: 1.5;
    margin: 0;
  }
  .p-article__hero {
    aspect-ratio: 16 / 9;
    background: var(--c-bg-alt);
    border-radius: var(--r-md);
    overflow: hidden;
    margin-bottom: var(--sp-6);
  }
  .p-article__hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* 枠(16:9)いっぱいに。マガジン等の縦横比違いで下に余白が出るのを防ぐ */
    display: block;
  }
  .p-article__body {
    font-size: var(--fs-body);
    line-height: var(--lh-loose);
  }
  .p-article__body h2 {
    margin: var(--sp-7) 0 var(--sp-4);
  }
  .p-article__body h3 {
    margin: var(--sp-6) 0 var(--sp-3);
  }
  .p-article__body p { margin-bottom: var(--sp-4); }
  .p-article__body img { border-radius: var(--r-sm); margin: var(--sp-4) 0; }

  .p-article__share {
    display: flex;
    gap: var(--sp-3);
    align-items: center;
    margin-top: var(--sp-7);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--c-line);
  }
  .p-article__share-label { font-size: var(--fs-caption); color: var(--c-text-muted); }
  .p-article__share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--c-bg-alt);
    color: var(--c-text-muted);
    font-size: var(--fs-small);
    transition: background var(--dur), color var(--dur);
  }
  .p-article__share-btn:hover {
    background: var(--c-brand-800);
    color: var(--c-text-invert);
    opacity: 1;
  }

  .p-article__nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
    margin-top: var(--sp-6);
  }
  .p-article__nav a {
    display: block;
    padding: var(--sp-4);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    font-size: var(--fs-small);
    transition: border-color var(--dur), background var(--dur);
  }
  .p-article__nav a:hover {
    border-color: var(--c-brand-800);
    background: var(--c-brand-50);
    opacity: 1;
  }
  .p-article__nav-label {
    display: block;
    color: var(--c-text-subtle);
    font-size: var(--fs-caption);
    margin-bottom: 4px;
  }

  .p-article__sidebar { display: flex; flex-direction: column; gap: var(--sp-6); }
  .p-article__widget {
    padding: var(--sp-4);
    background: var(--c-bg-alt);
    border-radius: var(--r-md);
  }
  .p-article__widget-title {
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    margin: 0 0 var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--c-line);
  }
  .p-article__widget ul {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .p-article__widget li {
    font-size: var(--fs-caption);
    line-height: 1.5;
  }
  .p-article__widget li a {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: var(--sp-3);
    align-items: center;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s;
  }
  .p-article__widget li a:hover { opacity: 0.7; }
  .p-article__widget-thumb {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--c-line-soft);
  }
  .p-article__widget-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* PCのみ：サイドバータイトルを3行までに省略（…）。SPは現状維持のためクランプしない */
  @media (min-width: 769px) {
    .p-article__widget-text {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      overflow: hidden;
    }
  }

  /* ==========================================================================
     お問い合わせページ
     ========================================================================== */
  .p-contact-channels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
    margin-bottom: var(--sp-7);
  }
  @media (max-width: 768px) {
    .p-contact-channels { grid-template-columns: 1fr; }
  }
  .p-contact-channel {
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    padding: var(--sp-6);
    text-align: center;
  }
  .p-contact-channel__label {
    font-size: var(--fs-caption);
    color: var(--c-text-muted);
    margin-bottom: var(--sp-3);
  }
  .p-contact-channel__tel {
    font-family: var(--ff-num);
    font-size: clamp(1.75rem, 2vw + 1rem, 2.25rem);
    font-weight: var(--fw-semibold);
    color: var(--c-brand-800);
    line-height: 1;
    margin-bottom: var(--sp-3);
  }
  .p-contact-channel__hours {
    font-size: var(--fs-caption);
    color: var(--c-text-subtle);
  }

  /* ==========================================================================
     ワイヤー目次（ステージング用）
     ========================================================================== */
  .p-wf-back {
    text-align: center;
    padding: var(--sp-4);
    font-size: var(--fs-caption);
    background: #fffde6;
    border-bottom: 1px solid #e8e0a0;
  }
  .p-wf-back a { color: #665a10; }

  /* 物流ページ サービス内容：p-media間の余白を64pxに */
  .l-stack > .p-media + .p-media { margin-top: var(--sp-8); }

  /* === 追加: c-box に画像を載せる === */
  /* 架台の種類：防振方式の種類（3列グリッド）と同じ約360px幅のカードを2枚並べる */
  .l-grid--fixed360{
    grid-template-columns: repeat(2, minmax(0, 360px));
    justify-content: center;
  }
  @media (max-width: 768px){
    .l-grid--fixed360{ grid-template-columns: minmax(0, 360px); }
  }

  /* 特長カード内のSVGナンバー（タイトルと横並び） */
  .c-box__head{
    display:flex;
    align-items:center;
    gap:var(--sp-3);
    margin-bottom:var(--sp-2);
  }
  .c-box__num{ display:block; flex:none; }
  .c-box__head .c-box__title{ margin:0; }

  /* 取付金具・関連製品テーブル：左#e4e7ec・右白の指定 */
  .c-spec--fittings th{ background:#f3f3f3; }
  .c-spec--fittings td{ background:#ffffff; }

  /* l-stack（製品リスト縦積み）の直後に置かれた場合は上に32pxの間隔を取る */
  .l-stack + .p-lineup-link-cell{ margin-top: var(--sp-6); }

  /* 製品一覧グリッド内のラインアップ一覧リンク配置 */
  .p-lineup-link-cell{
    display:flex;
    align-items:flex-end;
    justify-content:flex-end;
    padding:0 16px 16px 0;
  }
  @media (max-width: 768px){
    .p-lineup-link-cell{
      grid-column: 1 / -1;   /* SPは2列ぶち抜き */
      justify-content:center;
      padding:var(--sp-3) 0 0;
    }
  }

  /* 矢印付きテキストリンク（TOPのabout_linkと同仕様） */
  .p-arrow-link{
    display:inline-flex;
    align-items:center;
    gap:16px;
    text-decoration:none;
    color:#333;
    padding-bottom:10px;
    border-bottom:1px solid #656565;
    position:relative;
    transition:color 0.3s, border-color 0.3s;
  }
  .p-arrow-link::after{
    content:'';
    position:absolute;
    bottom:-1px;
    left:0;
    width:100%;
    height:1px;
    background:var(--c-brand-800);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform 0.35s var(--ease);
  }
  .p-arrow-link:hover{ color:var(--c-brand-800); opacity:1; }
  .p-arrow-link:hover::after{ transform:scaleX(1); }
  .p-arrow-link__text{
    font-size:1rem;
    font-weight:var(--fw-medium);
    letter-spacing:0.05em;
    white-space:nowrap;
    transition:transform 0.3s var(--ease);
  }
  .p-arrow-link:hover .p-arrow-link__text{ transform:translateX(6px); }
  .p-arrow-link::before{
    content:'\2192';
    display:inline-block;
    font-size:1.1em;
    color:#333;
    transition:color 0.3s, transform 0.3s;
    order:1;
  }
  .p-arrow-link:hover::before{ color:var(--c-brand-800); transform:translateX(4px); }

  /* 製品選定お困りごとカード */
  .c-box--okomari{ text-align:center; }
  .c-box--okomari .c-box__icon{ display:block; margin:0 auto var(--sp-4); }
  @media (max-width: 768px){
    .c-box--okomari{
      display:flex;
      align-items:center;
      gap:var(--sp-4);
      text-align:left;
      padding-block:var(--sp-4);
    }
    .c-box--okomari .c-box__icon{ margin:0; flex:none; }
    .c-box--okomari .c-box__text br{ display:none; } /* SPは改行せず1行で流す */
  }

  .c-box__media{ margin:calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-4); }
  .c-box__media img{ display:block; border-radius:var(--r-sm) var(--r-sm) 0 0; }

  /* 架台の種類（products-mount）：カード内レイアウト
     SP＝テキスト上／画像下、PC＝テキスト左／画像だけ右 */
  .c-box--split{
    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:
      "title"
      "text"
      "media";
  }
  .c-box--split .c-box__title{ grid-area:title; }
  .c-box--split .c-box__text{ grid-area:text; }
  .c-box--split .c-box__media{ grid-area:media; margin:var(--sp-4) 0 0; }
  .c-box--split .c-box__media img{ border-radius:var(--r-sm); }
  @media (min-width:641px){
    .c-box--split{
      grid-template-columns:1fr minmax(0, 40%);
      grid-template-areas:
        "title media"
        "text  media";
      column-gap:var(--sp-5);
      align-items:start;
    }
    .c-box--split .c-box__media{ margin:0; align-self:center; }
  }

  /* === 追加: 投稿一覧カード（アイキャッチ＋No Image）=== */
  .p-postlist{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:var(--sp-5); list-style:none; margin:0; padding:0; }
  .p-postcard{ position:relative; }
  .p-postcard__link{ display:flex; flex-direction:column; height:100%; background:var(--c-bg); border:1px solid var(--c-line); border-radius:var(--r-md); overflow:hidden; text-decoration:none; color:inherit; transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
  .p-postcard__link:hover{ box-shadow:var(--sh-md); transform:translateY(-2px); border-color:var(--c-brand-200); }
  .p-postcard__media{ position:relative; aspect-ratio:1200/630; background:var(--c-bg-alt); overflow:hidden; }
  .p-postcard__media img{ width:100%; height:100%; object-fit:cover; display:block; }
  .p-postcard__body{ display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-4); flex:1; }
  .p-postcard__meta{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
  .p-postcard__date{ font-family:var(--ff-num); font-size:var(--fs-caption); color:var(--c-text-muted); letter-spacing:var(--tr-body); }
  .p-postcard__title{ font-size:var(--fs-body); font-weight:var(--fw-medium); line-height:var(--lh-heading); color:var(--c-text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

  /* === 追加: 最新投稿ブロック（TOP下部・記事下 兼用）=== */
  .p-latest{ display:grid; gap:var(--sp-6); }
  @media (min-width:768px){ .p-latest--2col{ grid-template-columns:1fr 1fr; } }
  .p-latest__head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3); margin-bottom:var(--sp-4); border-bottom:2px solid var(--c-brand-800); padding-bottom:var(--sp-2); }
  .p-latest__title{ font-size:var(--fs-h3); font-weight:var(--fw-bold); color:var(--c-text); }
  .p-latest__more{ font-size:var(--fs-caption); color:var(--c-brand-800); text-decoration:none; white-space:nowrap; }
  .p-latest__more:hover{ text-decoration:underline; }
  .p-latest__list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-4); }
  .p-latest__list--grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }

  /* === 追加: 閲覧数ランキング TOP10 === */
  .p-ranking{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-3); counter-reset:rank; }
  .p-ranking__item{ counter-increment:rank; }
  .p-ranking__link{ display:grid; grid-template-columns:auto 72px 1fr; align-items:center; gap:var(--sp-3); text-decoration:none; color:inherit; padding:var(--sp-2); border-radius:var(--r-md); transition:background var(--dur) var(--ease); }
  .p-ranking__link:hover{ background:var(--c-brand-50); }
  .p-ranking__rank{ width:30px; height:30px; display:grid; place-items:center; border-radius:var(--r-pill); font-family:var(--ff-num); font-weight:var(--fw-bold); font-size:var(--fs-caption); background:var(--c-bg-alt); color:var(--c-text-muted); }
  .p-ranking__rank::before{ content:counter(rank); }
  .p-ranking__item:nth-child(1) .p-ranking__rank{ background:#d4af37; color:var(--c-text-invert); }
  .p-ranking__item:nth-child(2) .p-ranking__rank{ background:#a8b3bd; color:var(--c-text-invert); }
  .p-ranking__item:nth-child(3) .p-ranking__rank{ background:#c08457; color:var(--c-text-invert); }
  .p-ranking__thumb{ aspect-ratio:1200/630; border-radius:var(--r-sm); overflow:hidden; background:var(--c-bg-alt); }
  .p-ranking__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .p-ranking__title{ font-size:var(--fs-small); line-height:var(--lh-heading); color:var(--c-text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .p-ranking__views{ font-family:var(--ff-num); font-size:var(--fs-eyebrow); color:var(--c-text-subtle); margin-top:2px; }

  /* === 追加: セクション見出し（英日）=== */
  .p-sec-head{ text-align:center; margin-bottom:var(--sp-6); }
  .p-sec-head__en{ display:block; font-family:var(--ff-num); font-size:var(--fs-caption); font-weight:var(--fw-semibold); letter-spacing:var(--tr-eyebrow); color:var(--c-brand-700); text-transform:uppercase; margin-bottom:var(--sp-2); }
  .p-sec-head__ja{ font-size:var(--fs-h2); font-weight:var(--fw-bold); color:var(--c-text); }

  /* === 追加: ヒーロー直下の画像帯（幅は.l-containerに合わせる） === */
  .p-hero-media{ max-width:var(--container-max); margin:var(--sp-7) auto 0; padding:0 var(--container-pad); }
  .p-hero-media img{ width:100%; height:clamp(220px,34vw,420px); object-fit:cover; border-radius:var(--r-lg); display:block; box-shadow:var(--sh-md); }

  /* 画像ギャラリー（設置例など） */
  .p-figure{ margin:0; border-radius:var(--r-md); overflow:hidden; background:var(--c-bg-alt); box-shadow:var(--sh-sm); }
  .p-figure img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }

}