/* =======================================================
 * header-primer.css
 * 商標入門ガイド（/primer/ 配下）専用ヘッダー
 * ======================================================= */

/* PC 表示 */
@media only screen and (min-width: 896px) {
    /* フラグメントナビゲーションで sticky ヘッダー分のオフセットを確保。
       scroll-padding-top はスクロールコンテナ側で効くため、
       ブラウザ native の hash スクロールも含め全てのスクロール操作に適用される。 */
    html {
        scroll-padding-top: 100px;
    }

    /* 上部ダークバー: 非 sticky。ページと一緒にスクロールアウトする。
       これによりメインヘッダーが viewport 上端に到達するまで両レイヤーが
       同じボックスとして同期スクロールする */
    .pc-primer-header__topbar {
        background: #222;
        color: #fff;
        padding: 10px 0;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .pc-primer-header__topbar-inner {
        max-width: 1304px;
        margin: 0 auto;
        padding: 0 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .pc-primer-header__topbar-title {
        margin: 0;
        font-size: 12px;
        line-height: 1.5;
        letter-spacing: 0.12em;
        color: #fff;
        white-space: nowrap;
    }

    .pc-primer-header__topbar-actions {
        display: flex;
        align-items: center;
        gap: 32px;
    }

    .pc-primer-header__topbar-faq {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        line-height: 1.5;
        letter-spacing: 0.12em;
        color: #fff;
        text-decoration: none;
    }

    .pc-primer-header__topbar-faq:hover {
        color: #fff;
        opacity: 0.8;
        text-decoration: none;
    }

    .pc-primer-header__topbar-faq-icon {
        font-size: 14px;
    }

    .pc-primer-header__topbar-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 4px 16px;
        background: #fff;
        color: #222;
        font-size: 12px;
        line-height: 1.5;
        letter-spacing: 0.12em;
        border: 1px solid #fff;
        border-radius: 16px;
        text-decoration: none;
        white-space: nowrap;
    }

    .pc-primer-header__topbar-cta:hover {
        color: #222;
        opacity: 0.85;
        text-decoration: none;
    }

    /* メインヘッダー: 自身を sticky 化し、上端到達後に viewport 上端に固定 */
    .pc-primer-header__main {
        position: sticky;
        top: 0;
        z-index: 999;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.29);
        padding: 0;
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .pc-primer-header__main-inner {
        max-width: 1304px;
        margin: 0 auto;
        padding: 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .pc-primer-header__logo {
        display: inline-block;
    }

    .pc-primer-header__logo img {
        display: block;
        width: 169px;
        height: 27px;
    }

    .pc-primer-header__nav {
        display: flex;
        align-items: center;
        gap: 32px;
    }

    .pc-primer-header__nav-link {
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 0.12em;
        color: #222;
        text-decoration: none;
        white-space: nowrap;
        transition: opacity 0.2s;
    }

    .pc-primer-header__nav-link:hover {
        color: #222;
        opacity: 0.7;
        text-decoration: none;
    }

    /* 電話エリア */
    .pc-primer-header__tel {
        display: flex;
        align-items: flex-start;
        gap: 4px;
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .pc-primer-header__tel-icon {
        display: block;
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        margin-top: 2px;
    }

    .pc-primer-header__tel-body {
        display: flex;
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
    }

    .pc-primer-header__tel-number {
        font-size: 22px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.12em;
        color: #E6713D;
        text-decoration: none;
        white-space: nowrap;
    }

    .pc-primer-header__tel-number:hover {
        color: #E6713D;
        opacity: 0.85;
        text-decoration: none;
    }

    .pc-primer-header__tel-hours {
        font-size: 12px;
        line-height: 1;
        letter-spacing: 0.12em;
        color: #222;
        white-space: nowrap;
    }

}

/* SP 表示: primer 専用ヘッダー */
@media only screen and (max-width: 895px) {
    .pc-primer-header__topbar,
    .pc-primer-header__main {
        display: none;
    }

    /* sticky ヘッダー (56px) の分、アンカースクロールにオフセットを確保 */
    html {
        scroll-padding-top: 56px;
    }

    /* navigation-bar の width: 100vw がスクロールバー分の横オーバーフローを引き起こすため上書き */
    .navigation-bar {
        width: 100%;
    }

    /* slick が JS で width を 100vw 相当にセットして横オーバーフローするのを抑制 */
    .slick-wrapper {
        max-width: 100%;
        overflow: hidden;
    }

    /* drawer toggle (checkbox は視覚的に隠す)
       label クリックでフォーカスが入った際に
       ブラウザがチェックボックスを scrollIntoView しようとして
       ページ先頭まで勝手にスクロールされるのを防ぐため、
       常にビューポート左上に固定しておく。 */
    .sp-primer-drawer__input {
        position: fixed;
        top: 0;
        left: 0;
        opacity: 0;
        pointer-events: none;
        width: 0;
        height: 0;
    }

    /* sticky ヘッダーバー */
    .sp-primer-header {
        position: sticky;
        top: 0;
        left: 0;
        z-index: 1001;
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.29);
        height: 56px;
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .sp-primer-header__brand {
        flex: 1;
        display: flex;
        /* ロゴ(22px) と 和文タイトル(14px) の下端を揃える。56px ヘッダー内で
           ロゴ自体が垂直中央に来るよう上下 17px = (56 - 22) / 2 の padding を取る */
        align-items: flex-end;
        gap: 8px;
        padding: 17px 16px;
        text-decoration: none;
        min-width: 0;
    }

    .sp-primer-header__brand:hover {
        text-decoration: none;
    }

    .sp-primer-header__logo {
        display: block;
        width: 138px;
        height: 22px;
        flex-shrink: 0;
    }

    .sp-primer-header__title {
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.12em;
        color: #231815;
        white-space: nowrap;
    }

    .sp-primer-header__hamburger {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        margin: 0;
        background: #222;
        cursor: pointer;
        flex-shrink: 0;
    }

    .sp-primer-header__hamburger-icon {
        color: #fff;
        font-size: 24px;
    }

    .sp-primer-header__hamburger-icon--close {
        display: none;
    }

    .sp-primer-drawer__input:checked ~ .sp-primer-header {
        box-shadow: none;
    }

    .sp-primer-drawer__input:checked ~ .sp-primer-header .sp-primer-header__hamburger-icon--menu {
        display: none;
    }

    .sp-primer-drawer__input:checked ~ .sp-primer-header .sp-primer-header__hamburger-icon--close {
        display: inline-block;
    }

    /* 背景オーバーレイ: ドロワーと同じ 0.2s フェード */
    .sp-primer-drawer__overlay {
        position: fixed;
        inset: 56px 0 0 0;
        background: rgba(34, 34, 34, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0s linear 0.2s;
        z-index: 1000;
        cursor: pointer;
    }

    .sp-primer-drawer__input:checked ~ .sp-primer-drawer__overlay {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.2s ease, visibility 0s linear 0s;
    }

    /* ドロワー本体: cotobox.test の menu-fade と同じ opacity 0.2s フェードイン */
    .sp-primer-drawer {
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        max-height: calc(100vh - 56px);
        overflow-y: auto;
        background: #fff;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0s linear 0.2s;
        z-index: 1000;
        -webkit-overflow-scrolling: touch;
        font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    }

    .sp-primer-drawer__input:checked ~ .sp-primer-drawer {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.2s ease, visibility 0s linear 0s;
    }

    .sp-primer-drawer__nav {
        display: flex;
        flex-direction: column;
    }

    .sp-primer-drawer__link {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        background: #F4F4F4;
        border-bottom: 1px solid #E9E9E9;
        font-size: 16px;
        line-height: 1.5;
        letter-spacing: 0.12em;
        color: #222;
        text-decoration: none;
    }

    .sp-primer-drawer__link:hover,
    .sp-primer-drawer__link:focus {
        color: #222;
        text-decoration: none;
    }

    /* 連絡先 + CTA */
    .sp-primer-drawer__contact {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        padding: 24px;
        background: #fff;
    }

    .sp-primer-drawer__contact-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        width: 100%;
    }

    .sp-primer-drawer__contact-label {
        margin: 0;
        font-size: 14px;
        line-height: 1.5;
        letter-spacing: 0.12em;
        color: #222;
    }

    .sp-primer-drawer__contact-tel {
        display: flex;
        align-items: center;
        gap: 4px;
        text-decoration: none;
    }

    .sp-primer-drawer__contact-tel:hover,
    .sp-primer-drawer__contact-tel:focus {
        text-decoration: none;
        opacity: 0.85;
    }

    .sp-primer-drawer__contact-tel-icon {
        display: block;
        width: 28px;
        height: 28px;
        flex-shrink: 0;
    }

    .sp-primer-drawer__contact-tel-number {
        font-size: 28px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.12em;
        color: #E6713D;
        white-space: nowrap;
    }

    .sp-primer-drawer__contact-hours {
        margin: 0;
        font-size: 12px;
        line-height: 1;
        letter-spacing: 0.12em;
        color: #222;
    }

    .sp-primer-drawer__cta {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 12px 24px;
        background: #fff;
        border: 1px solid #E6713D;
        border-radius: 24px;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.5;
        letter-spacing: 0.12em;
        color: #E6713D;
        text-decoration: none;
        white-space: nowrap;
    }

    .sp-primer-drawer__cta:hover,
    .sp-primer-drawer__cta:focus {
        color: #E6713D;
        text-decoration: none;
        opacity: 0.85;
    }

    /* drawer 展開中は背面スクロール抑制 */
    body:has(.sp-primer-drawer__input:checked) {
        overflow: hidden;
    }
}