/** base.tpl **/
	.ok-hero{
      min-height: 78vh;
      min-height: min(100vh, 820px);
      position: relative;
      display: grid;
      place-items: center;
      color: #fff;
      overflow: hidden;
    }
    :root{
      --ok-hero-bg: #22303a;
      --ok-hero-overlay-top: rgba(20,24,28,.35);
      --ok-hero-overlay-bottom: rgba(20,24,28,.18);
    }

    .ok-hero::before{
      content:"";
      position:absolute; inset:0;
      
: linear-gradient(180deg, var(--ok-hero-overlay-top), var(--ok-hero-overlay-bottom));
      z-index:1;
    }

    .ok-hero-media{
      position:absolute; inset:0;
      background: var(--ok-hero-bg) center/cover no-repeat;
      z-index:0;
      filter: saturate(1.05) contrast(1.05);
    }
    .ok-hero-content{ position:relative; z-index:2; }
    .ok-scroll-hint{
      position:absolute; left:50%; bottom:1.25rem; transform:translateX(-50%);
      z-index:2; opacity:.9;
    }
    .ok-section{ padding: 4rem 0; }
    .ok-section-title{ letter-spacing: .08em; }
    .ok-card-media{ aspect-ratio: 16/9; background:#222 center/cover no-repeat; border-radius: .75rem; }
    .ok-badge{ letter-spacing:.06em; }
    .ok-anchor{ scroll-margin-top: 88px; } /* 固定ヘッダー対策 */

    .ok-header-logo{
      height: 48px;      /* ここを基準に調整：32〜40pxが多い */
      width: auto;
      display: block;
    }
    @media (max-width: 576px){
      .ok-header-logo{ height: 36px; }
    }


/** works.tpl **/
  .ok-card-prefix {
    font-size: .75rem;
    color: #666;
    margin-bottom: .15rem;
  }

  .ok-card-title {
    line-height: 1.3;
  }

  .ok-clamp-2{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .ok-meta{
    font-size: .95rem;
  }
  .ok-badge{ letter-spacing:.05em; }
  .text-series-bg {
    background-color: #999999;
  }


  .ok-ip-url{
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .ok-ip-url a{
    font-size: 0.85rem;   /* 小さめ */
    color: #555;          /* 控えめ */
    text-decoration: none; /* 下線なし */
  }
  .ok-ip-url:hover {
    text-decoration: underline; /* ホバーだけ反応 */
  }

  .ok-media-list { text-align: left; }

  .ok-media-item {
    padding: .35rem 0;
    border-top: 1px solid rgba(0,0,0,.06);
  }
  .ok-media-item:first-child { border-top: 0; }

  .ok-media-title {
    font-size: .95rem;
    line-height: 1.35;
    color: #222;
  }

  .ok-media-meta,
  .ok-media-url {
    font-size: .80rem;     /* <小さく> */
    line-height: 1.25;
    color: #666;
    margin-top: .15rem;
  }

  .ok-media-url-link {
    color: inherit;         /* 文字色を通常テキストへ */
    text-decoration: none;  /* 装飾なし */
    word-break: break-all;  /* 長いURLでも崩れない */
  }

  .ok-media-url-link:hover {
    text-decoration: underline; /* hoverだけ薄く反応 */
  }

  /* アンカー(#id)で飛んだときにヘッダーに隠れにくくする */
  .ok-work-item{ scroll-margin-top: 120px; }