/** base.tpl **/
	.ok-hero{
      min-height: 78vh;
      min-height: min(100vh, 820px);
      position: relative;
      display: grid;
      place-items: center;
      color: #fff;
      overflow: hidden;
    }
    .ok-hero::before{
      content:"";
      position:absolute; inset:0;
      background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
      z-index:1;
    }
    .ok-hero-media{
      position:absolute; inset:0;
      background: #111 center/cover no-repeat; /* 背景画像のplaceholder */
      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;
    }
	.text-series-bg{
		background-color: #6c757d;
		color: #fff;
	}
    @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; }

  .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; }