/* ============================================================
   CSS Variables
   ============================================================ */
:root {
    --color-primary:   #0068ce;
    --color-link:      #0877d7;
    --color-secondary: #f0f4f9;
    --color-accent:    #e85a1b;
    --color-text:      #333333;
    --color-text-nav:  #4d4d4d;
    --color-text-sub:  #666666;
    --color-border:    #e0e0e0;
    --color-white:     #ffffff;
    --color-bg:        #f8f9fa;

    --font-base:      'Noto Sans JP', sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.8;

    --max-width: 1200px;
    --gutter:    24px;

    --bp-sp: 768px;

    --border-radius-full: 9999px;

    --color-light-blue: #DCF0FF;
}

/* ============================================================
   Reset / Base
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-base);
    font-size: 1rem;
    line-height: var(--line-height-base);
    color: var(--color-text);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.l-main {
    flex: 1;
    min-height: 60vh;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-link);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

ul, ol {
    list-style: none;
}

address {
    font-style: normal;
}

/* ============================================================
   Accessibility
   ============================================================ */
.u-skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    padding: 8px 16px;
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: 700;
    z-index: 9999;
    text-decoration: none;
}

.u-skip-link:focus {
    top: 0;
}

.u-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* フォーカス表示 */
:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* モーション軽減 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   Layout
   ============================================================ */
.l-wrapper {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* ============================================================
   共通コンポーネント: ボタン
   ============================================================ */
/* Figma: min-h-[48px] min-w-[96px] px-[16px] py-[12px] rounded-full font-size-16 bold */
.c-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 48px;
    min-width: 96px;
    padding: 12px 16px;
    border-radius: var(--border-radius-full);
    font-family: var(--font-base);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.32px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid transparent;
    transition: opacity 0.2s;
}

.c-btn:hover {
    opacity: 0.85;
    text-decoration: none;
}

/* Figma: bg-[#0068ce] border-[#0068ce] text-white */
.c-btn--primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

/* Figma: bg-white border-[#0068ce] text-[#0068ce] */
.c-btn--outline {
    background-color: var(--color-white);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* フッターお問い合わせボタン: Figma bg-white text-[#0068ce] */
.c-btn--white {
    background-color: var(--color-white);
    border-color: transparent;
    color: var(--color-primary);
    font-weight: 700;
}

/* ============================================================
   共通コンポーネント: パンくずリスト
   ============================================================ */
.c-breadcrumb {
    padding: 16px 0;
}

.c-breadcrumb__list {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.c-breadcrumb__item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 1rem;
    color: var(--color-text);
}

.c-breadcrumb__item::before {
    content: '';
}

.c-breadcrumb__item + .c-breadcrumb__item::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 2l4 4-4 4' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 4px;
}

.c-breadcrumb__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-link);
    text-decoration: underline;
    font-size: 1rem;
}

.c-breadcrumb__link:hover {
    text-decoration: none;
}

.c-breadcrumb__home-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.c-breadcrumb__item--current {
    color: var(--color-text);
}

/* ============================================================
   Header
   ============================================================ */
.l-header {
    background-color: var(--color-white);
    box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
    position: sticky;
    top: 0;
    z-index: 100;
}

/* 全幅・左右24pxの余白 */
.l-header__inner {
    padding-right: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 90px;
}

/* ロゴ: Figma items-end（右寄せ） */
.l-header__logo a {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-decoration: none;
}

.l-header__logo a:hover {
    opacity: 0.8;
    text-decoration: none;
}

/* ロゴ画像（サイト名テキストから差し替え） */
.l-header__logo-img {
    display: block;
    width: auto;
    height: 82px;
}

/* グローバルナビ項目内の改行（狭幅時のみ表示。既定は非表示＝1行） */
.l-gnav__br {
    display: none;
}

/* Figma: gap-[24px] items-center */
.l-header__menu {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 17px 0;
}

/* グローバルナビ
   メニュー割当時:   <ul class="l-gnav__list"><li>...
   フォールバック時: <div class="l-gnav__list"><ul><li>...
   どちらの構造でも横並びになるよう両方に flex を適用 */
.l-gnav__list,
.l-gnav__list > ul {
    display: flex;
    gap: 24px;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Figma: font-size 18px, bold, color #4d4d4d, letter-spacing 0.36px */
.l-gnav__list a {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text-nav);
    line-height: 1.6;
    letter-spacing: 0.36px;
    text-decoration: none;
    white-space: nowrap;
}

.l-gnav__list a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

/* ヘッダーアクション */
.l-header__actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-shrink: 0;
}

/* ログインボタン: Figma w-[146px] px-[24px] */
.c-btn--login {
    width: 146px;
    padding: 12px 24px;
}

/* ハンバーガーボタン（SP用） */
.l-header__hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
    background: none;
    border: none;
}

.l-header__hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-text);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ハンバーガー → ✕ アニメーション */
.l-header__hamburger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.l-header__hamburger.is-open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.l-header__hamburger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* SP専用追加ナビ（PC では非表示） */
.l-header__sp-nav {
    display: none;
}

/* ============================================================
   Footer
   ============================================================ */
.l-footer {
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 50px 0 30px;
}

.l-footer__inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    padding-bottom: 32px;
}

/* ブランド（左） */
.l-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

/* ロゴ画像（サイト名テキストから差し替え） */
.l-footer__logo-link {
    display: block;
    text-decoration: none;
}

.l-footer__logo-link:hover {
    opacity: 0.8;
}

.l-footer__logo-img {
    display: block;
    width: auto;
    height: 100px;
}

/* 右側（ナビ + ボタン） */
.l-footer__right {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex: 1;
}

/* お問い合わせボタンはナビと同じ行に横並び・縮小させない */
.l-footer__right .c-btn--white {
    flex-shrink: 0;
}

/* フッターナビ
   .l-footer__nav-list 直下が ul（フォールバック）でも横並びにする */
.l-footer__nav-list,
.l-footer__nav-list > ul {
    display: flex;
    flex-wrap: wrap;
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.l-footer__nav-list li {
    display: flex;
}

.l-footer__nav-list a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-white);
    font-size: 1rem;
    line-height: 1.7;
    letter-spacing: 0.02em;
    padding: 12px 0;
    margin-right: 24px;
    text-decoration: none;
}

.l-footer__nav-list a::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 3l6 5-6 5' stroke='%23fff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    flex-shrink: 0;
}

.l-footer__nav-list a:hover {
    text-decoration: underline;
}

/* フッターボトム */
.l-footer__bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.l-footer__address {
    font-size: 1rem;
    line-height: 1.7;
    letter-spacing: 0.02em;
    color: var(--color-white);
}

.l-footer__copy {
    font-size: 0.875rem; /* 14px */
    line-height: 1.3;
    color: var(--color-white);
    white-space: nowrap;
}

/* ============================================================
   ページ共通レイアウト（page.php）
   ============================================================ */
.p-page__main {
    max-width: 1080px;
    margin: 0 auto;
    padding: 48px var(--gutter) 100px;
}

/* ページ見出しエリア */
.p-page__header {
    display: flex;
    flex-direction: column;
    padding-bottom: 16px;
    margin-bottom: 64px;
}

.p-page__en-title {
    font-size: 1.125rem; /* 18px */
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.6;
    letter-spacing: 0.02em;
}

.p-page__title {
    font-size: 2rem; /* 32px */
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.5;
    letter-spacing: 0.01em;
}

/* コンテンツ本文 */
.p-page__content {
    display: flex;
    flex-direction: column;
}

/* h2 見出し: Figma flex gap-[12px] + bar element(6px×24px, mt:5px) */
.p-page__content h2 {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 1.5rem; /* 24px */
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.5;
    letter-spacing: 0.48px;
    margin-bottom: 24px; /* Figma: gap-[24px] between h2 and body */
}

/* カラーバー: Figma mask-size-[6px_24px] pt-[5px] */
.p-page__content h2::before {
    content: '';
    display: block;
    width: 6px;
    min-width: 6px;
    height: 24px;
    margin-top: 5px;
    background-color: var(--color-link);
    flex-shrink: 0;
}

/* セクション間: Figma gap-[32px] — p/ol/ul の直後に来る h2 に適用 */
.p-page__content p + h2,
.p-page__content ol + h2,
.p-page__content ul + h2 {
    margin-top: 32px;
}

/* リスト: base CSS の list-style:none を上書き */
.p-page__content ol {
    list-style: decimal;
    padding-left: 24px;
    margin: 0;
}

.p-page__content ul {
    list-style: disc;
    padding-left: 24px;
    margin: 0;
}

.p-page__content ol ol {
    list-style: lower-alpha;
    padding-left: 24px;
}

.p-page__content li {
    font-size: 1rem;
    line-height: 1.75;
    color: #000;
    letter-spacing: 0.32px;
}

/* h3 見出し: Figma bg-[#DCF0FF] px-[16px] py-[8px] 18px bold leading-[1.6] */
.p-page__content h3 {
    font-size: 1.125rem; /* 18px */
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.6;
    letter-spacing: 0.36px;
    background-color: var(--color-light-blue);
    padding: 8px 16px;
    margin: 24px 0 16px;
}

/* 本文テキスト: Figma 16px regular #000 leading-[1.75] tracking-[0.32px] */
.p-page__content p {
    font-size: 1rem;
    line-height: 1.75;
    color: #000;
    letter-spacing: 0.32px;
    margin: 0;
}

/* 本文内リンク: Figma color-[#0877d7] underline 16px */
.p-page__content a {
    color: var(--color-link);
    text-decoration: underline;
}

/* 本文内ボタン: Figma bg-[#0877d7] rounded-full min-h-[56px] min-w-[136px] p-[16px] 16px bold white */
.p-page__content .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-link);
    color: var(--color-white);
    border-radius: var(--border-radius-full);
    min-height: 56px;
    min-width: 136px;
    padding: 16px;
    font-size: 1rem; /* 16px */
    font-weight: 700;
    letter-spacing: 0.32px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

.p-page__content .wp-block-button__link:hover {
    opacity: 0.85;
    text-decoration: none;
}

/* ============================================================
   Responsive（SP: max-width 768px）
   ============================================================ */
/* 狭幅デスクトップ／タブレット（横並びナビが窮屈になる帯）: ナビを縮小し長い項目を改行 */
@media (max-width: 1130px) and (min-width: 769px) {
    .l-gnav__list a {
        font-size: 1rem;
        line-height: 1.5;
        display: block;
    }

    /* 「とちぎDX推進プラットフォーム」/「デジのわ」とは で改行 */
    .l-gnav__br {
        display: inline;
    }
}

/* さらに狭い帯: ナビをより縮小しロゴも縮める */
@media (max-width: 950px) and (min-width: 769px) {
    .l-gnav__list a {
        font-size: 0.8rem;
    }

    .l-header__logo-img {
        height: 50px;
    }
}

@media (max-width: 768px) {
    :root {
        --gutter: 16px;
    }

    /* ========== ヘッダー ========== */
    /* Figma: h-[68px] px-[16px] */
    .l-header__inner {
        height: 68px;
        min-height: 0; /* PCの min-height:90px を打ち消し、SPは68pxを維持 */
        padding-right: 16px;
    }

    .l-header__logo-img {
        height: 55px;
    }

    /* オーバーレイ（JS生成） */
    .l-header__overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 98;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
        cursor: pointer;
    }

    .l-header__overlay.is-active {
        opacity: 1;
        visibility: visible;
    }

    /* メニュー（ハンバーガー展開時） */
    .l-header__menu {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        position: fixed;
        top: 68px;
        left: 0;
        right: 0;
        background: var(--color-white);
        border-top: 1px solid var(--color-border);
        padding: 24px var(--gutter);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 99;
        /* 閉じた状態 */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
    }

    .l-header__menu.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .l-gnav__list,
    .l-gnav__list > ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .l-header__actions {
        width: 100%;
        flex-direction: column;
    }

    .l-header__actions .c-btn {
        width: 100%;
        justify-content: center;
    }

    .l-header__hamburger {
        display: flex;
    }

    /* SP専用追加ナビ */
    .l-header__sp-nav {
        display: block;
        width: 100%;
    }

    .l-header__sp-nav-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .l-header__sp-nav-list a {
        font-size: 1.125rem;
        font-weight: 700;
        color: var(--color-text-nav);
        line-height: 1.6;
        letter-spacing: 0.36px;
        text-decoration: none;
        display: block;
    }

    .l-header__sp-nav-list a:hover {
        color: var(--color-primary);
        text-decoration: none;
    }

    /* ========== フッター ========== */
    /* Figma: pt-[40px] pb-[20px] */
    .l-footer {
        padding: 40px 0 20px;
    }

    /* Figma: flex-col gap-[16px] items-center */
    .l-footer__inner {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        padding-bottom: 32px;
    }

    /* Figma: items-end（テキスト右寄せを維持） */
    .l-footer__brand {
        align-items: flex-end;
    }

    /* フッターロゴ（SPでもPCと同じ高さ） */
    .l-footer__logo-img {
        height: 100px;
    }

    /* Figma: flex-col items-center */
    .l-footer__right {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    /* Figma: ナビ縦並び・中央寄せ */
    .l-footer__nav-list,
    .l-footer__nav-list > ul {
        flex-direction: column;
        align-items: center;
    }

    .l-footer__nav-list a {
        margin-right: 0;
        justify-content: center;
    }

    /* Figma: お問い合わせボタン 全幅 */
    .l-footer__right .c-btn--white {
        width: 100%;
        justify-content: center;
    }

    /* Figma: flex-col items-center gap-[16px] */
    .l-footer__bottom {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    /* Figma: 住所 中央寄せ */
    .l-footer__address {
        text-align: center;
    }

    /* ========== ページ共通 ========== */
    /* Figma: pt-[32px] */
    .p-page__main {
        padding-top: 32px;
    }

    /* Figma: gap-[48px]（ページヘッダー→コンテンツ） */
    .p-page__header {
        margin-bottom: 48px;
    }

    /* Figma: 英語サブタイトル 16px bold lh-1.7 */
    .p-page__en-title {
        font-size: 1rem;
        line-height: 1.7;
        letter-spacing: 0.32px;
    }

    /* Figma: ページタイトル 28px */
    .p-page__title {
        font-size: 1.75rem;
        letter-spacing: 0.28px;
    }

    /* Figma: h2→本文 gap-[16px]（PCは24px） */
    .p-page__content h2 {
        margin-bottom: 16px;
    }

    /* SP: ボタン幅をコンテンツ幅いっぱいに */
    .p-page__content .wp-block-button__link {
        width: 100%;
    }
}

/* ============================================================
   Snow Monkey Forms — hidden param
   ============================================================ */
.smf-item.smf-hidden-param {
    display: none !important;
}

/* ============================================================
   404 ページ
   ============================================================ */
.p-404 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px var(--gutter);
    min-height: 50vh;
    gap: 24px;
}

.p-404__code {
    font-size: 8rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-primary);
    letter-spacing: -0.02em;
}

.p-404__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
}

.p-404__desc {
    font-size: 1rem;
    color: var(--color-text-sub);
    max-width: 480px;
}

@media (max-width: 768px) {
    .p-404__code { font-size: 5rem; }
    .p-404__title { font-size: 1.25rem; }
}