/* ==========================================================================
   サイト共通の枠（ヘッダーの N・FOLLOW の一覧）v1.9.4
   - 左上の N：N の形ぴったりに切った画像（assets/images/hundred-n-mark.png）。
     以前の画像は 2000px 四方の中に N が小さく入っていて、スマホで N が 11px ほどにしか見えなかった（本人指摘 2026-10-19）
   - FOLLOW：持ち主（HUNDRED.inc／DJ ACADEMY／TRID3NT）ごとに分けた一覧（inc/site-follow.php）
   motion.css の .site-header__logo-icon（!important の上書きが重なっている）は使わず、新しいクラスで持つ
   ========================================================================== */

/* --- 左上の N --- */
.site-header__logo-link {
    min-height: 44px;
}
.site-header__mark {
    display: block;
    width: auto;
    height: 34px;
    max-width: none;
    transition: filter 0.3s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-header__logo-link:hover .site-header__mark {
    filter: drop-shadow(0 0 12px rgba(110, 231, 255, 0.7));
    transform: scale(1.08) rotate(-2deg);
}
@media (max-width: 767px) {
    .site-header__mark { height: 28px; }
}

/* --- FOLLOW の一覧 --- */
.hj-follow {
    display: grid;
    gap: 14px;
    /* 置き場所（メニューの枠など）の字間・大文字の指定を引き継がない（重なって読めなかった） */
    letter-spacing: 0.02em;
    text-transform: none;
}
.hj-follow__group { min-width: 0; }
.hj-follow__owner {
    margin: 0 0 4px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--hundred-text);
    opacity: 0.9;
}
.hj-follow__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.hj-follow__link {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    color: var(--hundred-muted);
    text-decoration: none;
    transition: color 0.25s ease;
}
.hj-follow__service {
    min-width: 5.2em;
    color: var(--hundred-text);
    opacity: 0.86;
}
.hj-follow__handle {
    font-size: 11px;
    overflow-wrap: anywhere;
}
.hj-follow__arrow {
    font-size: 10px;
    color: var(--hundred-accent);
    opacity: 0;
    transform: translate(-3px, 2px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.hj-follow__link:hover,
.hj-follow__link:focus-visible { color: var(--hundred-accent); }
.hj-follow__link:hover .hj-follow__service,
.hj-follow__link:focus-visible .hj-follow__service { color: var(--hundred-accent); opacity: 1; }
.hj-follow__link:hover .hj-follow__arrow,
.hj-follow__link:focus-visible .hj-follow__arrow { opacity: 1; transform: none; }

/* 全画面メニュー：3 列の枠の 1 つに入るので、持ち主ごとに縦に積む */
.hj-follow--menu {
    gap: 14px;
}

/* 会社概要・お問い合わせの表の中：持ち主ごとに横に並べる */
.hj-follow--page {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px 28px;
    font-size: 13px;
}
.hj-follow--page .hj-follow__handle { font-size: 12px; }
.hj-follow--page .hj-follow__arrow { opacity: 0.7; transform: none; }

/* スマホではタップしやすいよう行の高さを足し、矢印は常に見せる */
@media (hover: none) {
    .hj-follow__links { gap: 6px; }
    .hj-follow__arrow { opacity: 0.7; transform: none; }
}