/* ======================================
   Base
====================================== */
:root{
    --ink:#222222;
    --muted:#666666;
    --bg:#FFFFFF;
    --accent:#F29600;
    --status-open:#E95513;
    --status-closed:#666666;
    --container:1180px;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family:"Noto Sans JP", system-ui, -apple-system, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    color:var(--ink);
    background:#f7f7f7;
  }
  
  .page{display:flex; flex-direction:column; min-height:100%;}
  .section{padding-top:48px;}
  .container {
    width:100%; 
    max-width:var(--container); 
    margin-inline:auto; 
    padding-inline:16px;
  }
  
  /* Typography */
  .heading-xl{
    font-size:32px; line-height:32px; font-weight:700; color:var(--ink); margin:0 0 24px;
  }
  .heading-lg{
    font-size:24px; line-height:24px; font-weight:700; color:var(--ink); margin:0 0 24px;
  }
  .card__title{
    font-size:20px; line-height:30px; font-weight:700; margin:0;
  }
  
  /* Chips / tags */
  .tags{display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0;}
  .tag{
    padding:8px;
    outline:1px solid var(--accent);
    outline-offset:-1px;
    color:var(--accent);
    font-size:14px;
    font-weight:500;
    line-height:14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  
  /* Meta rows */
  .meta-row{display:flex; gap:8px; align-items:flex-start;}
  .meta-label{width:80px; color:var(--muted); font-size:16px; font-weight:500; line-height:24px;}
  .meta-value{color:var(--ink); font-size:16px; font-weight:700; line-height:24px;}
  
  /* Feature cards (top) */
  .cards-row { 
    display:grid; 
    grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); 
    gap:32px;
  }

  .card{
    position:relative;
    background:var(--bg);
    box-shadow:0 4px 12px rgba(0,0,0,.1);
    border-radius:4px;
  }

  .card--feature { 
    display:flex; 
    align-items:flex-start; 
    gap:16px; 
    width: 1024px;
    max-width: 1024px;
  }

  .card--feature .card__media{
    flex:1 0 0; 
    height:283.5px; 
    background:#D9D9D9; 
    border-top-left-radius:4px; 
    border-bottom-left-radius:4px;
    aspect-ratio: 504.00 / 283.50;
  }

  .card--feature .card__body{
    flex:1 1 0; 
    padding:24px; 
    display:flex; 
    flex-direction:column; 
    gap:8px;
  }



  .card__cta{margin-top:auto; display:flex; justify-content:flex-end;}
  .card__cta img{display:block; width:40px; height:40px}
  
  /* Ribbons */
  .ribbon{
    position:absolute; left:0; top:0;
    padding:6px 8px;
    color:#fff; font-size:16px; font-weight:500; line-height:16px;
    border-top-left-radius:4px; border-bottom-right-radius:4px;
  }
  .ribbon--open{background:var(--status-open);}
  .ribbon--closed{background:var(--status-closed);}
  
  /* Grid cards (list) */
  .grid-cards{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
    gap:40px;
    margin-bottom: 40px;
  }
  
  .card--grid {
    display:flex; 
    flex-direction:column; 
    gap:16px;
    margin-bottom: 24px;
  }
  .card--grid .card__image{
    width:100%; height:206.25px; background:#D9D9D9; object-fit:cover; border-top-left-radius:4px; border-top-right-radius:4px;
  }
  .card--grid .card__content{
    display:flex; flex-direction:column; gap:8px; padding:0 16px 16px;
  }
  .card--grid .card__foot{display:flex; justify-content:flex-end; align-items:center;}
  .card--ghost{opacity:0; pointer-events:none;}

  .card { position: relative; }
.card__link { position: absolute; inset: 0; z-index: 1; }
  

  /* 横スライダー化（推奨：クラスを足す方式） */
  .cards-row--slider{
    /* 子を横一列に並べる“レール” */
    display: flex;
    gap: 32px;                        /* カード間の余白 */
    overflow-x: auto;                 /* 横スクロール */
    padding-bottom: 6px;              /* スクロールバー分の余白 */
    scroll-snap-type: x proximity;    /* スクロールスナップ */
    -webkit-overflow-scrolling: touch;
  }
  
  /* 各カードをスナップ対象に */
  .cards-row--slider > .card--feature{
    scroll-snap-align: start;
    min-width: 1024px;
    max-width: 1024px;  /* 既存幅と合わせて固定 */
  }
  
  @supports not (mask-image: linear-gradient(black, black)) {
    .cards-row--slider::after{
      content:"";
      position: sticky; right: 0; top: 0; bottom: 0;
      width: 40px; pointer-events: none;
      background: linear-gradient(90deg, rgba(255,255,255,0), #f7f7f7 70%);
    }
  }
  
  


  /* 背景画像を差し替える場合はここだけ変更 */
  .kv-seminar {
    --bg-image: url("/wp-content/themes/mitsukaru-corp/assets/images/company-consulting/lp-header2.png");
  }
  
  /* コンテナ */
  .kv-seminar {
    height: 200px;
    padding: 12px 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
  
    /* 背景：グラデーション + 画像 + フォールバック色 */
    background:
      linear-gradient(90deg, rgba(26, 50, 97, 0.30) 22%, rgba(26, 50, 97, 0) 100%),
      var(--bg-image),
      #D9D9D9;
    background-repeat: no-repeat, no-repeat, repeat;
    background-size: cover, cover, auto;
    background-position: center, center calc(50% + 120px), left top;
  }
  
  /* オレンジのラベルボックス */
  .kv-seminar__label {
    max-width: 1180px;
    padding: 8px;
    background: #E95513;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  
  /* “Seminar” */
  .kv-seminar__eyebrow {
    color: #fff;
    font-size: 22px;
    font-family: "Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic ProN",
                 "ヒラギノ角ゴ ProN W3", "Noto Sans JP", system-ui, -apple-system,
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 300;
    line-height: 22px;
  }
  
  /* 「セミナー」 */
  .kv-seminar__title {
    margin: 0;
    color: #fff;
    font-size: 24px;
    font-family: "Noto Sans JP", system-ui, -apple-system,
                 "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3",
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 400;
    line-height: 24px;
  }

  @media (max-width: 768px){
    .container {
      width: auto;
    }

    .grid-cards { 
      gap:24px; 
    }

    .card--ghost { 
      display:none !important; 
    }

    .kv-seminar {
      height: 320px;
      background-position: center;
      padding: 24px 16px;
      flex-direction: column;
      justify-content: flex-end;
      align-items: flex-start;
      gap: 8px;
      align-self: stretch;
    }

    .section {
      padding-top: 40px;
    }

    .cards-row--slider {
      display: flex;
      flex-direction: column;
      gap: 32px;
      margin-bottom: 24px;
      position: relative;
      border-radius: 4px;
    }

    .cards-row--slider > .card--feature {
      min-width: auto;
      width: auto;
    }

    .card--feature {
      flex-direction: column;
      align-items: normal;
    }
  }