/* ==========================================================================
   layout.css - ヘッダー・フッター・ページ全体のレイアウト
   ========================================================================== */

/* ---------- Header ---------- */
.l-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
}
@media (max-width: 992px) {
    .l-header {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.125);
    }
}

/* トップページのみ: headerをフローから外して.l-mainの裏に重ね、初期表示は透明にする
   (position: fixedにすることで.l-mainが本来のheader分の高さを予約せず、ウィンドウ最上部から開始する) */
.l-header--transparent {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: transparent;
}
/* スマホ表示では透過させず、通常のヘッダー(白背景・sticky)に戻す */
@media (max-width: 992px) {
    .l-header--transparent {
        position: sticky;
        left: auto;
        width: auto;
        background: #fff;
    }
}

.l-header__inner {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: repeat(2, auto);
    grid-column-gap: 12px;
    grid-row-gap: 8px;
    align-items: center;
    justify-content: space-between;
    min-height: var(--header-height);
    max-width: 100%;
    margin-inline: auto;
    padding: 12px 24px 16px;
}
@media (max-width: 992px) {
    .l-header__inner {
        grid-template-rows: auto;
        padding: 10px 20px;
    }
}

/* ---------- Header top (ユーティリティメニュー): .l-header__inner内で全幅の1行として表示 ---------- */
.l-header__logo {
    grid-area: 1 / 1 / 3 / 2;
}
@media (max-width: 992px) {
    .l-header__logo {
        grid-area: 1 / 1 / 2 / 2;
    }
}
.l-header-top {
    grid-area: 1 / 2 / 2 / 3;
    width: auto;
}
.l-header__nav {
    grid-area: 2 / 2 / 3 / 3;
}
.l-header__nav .menu-item {
    font-size: clamp( 14px, calc( -2px + 1.25vw ), 16px );
}

.l-header-top__inner {
    max-width: 100%;
    display: flex;
    justify-content: flex-end;
}

.l-header-top__list {
    display: flex;
    align-items: center;
    gap: clamp( 16px, calc( -11.555555555555554px + 2.7777777777777777vw ), 24px );
    font-size: clamp( 11px, calc( 0.6666666666666679px + 1.0416666666666665vw ), 14px );
}
.l-header-top__list .menu-item {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.l-header-top__list .menu-item.menu-item-74 a::after {
    display: inline-block;
    content: "";
    height: 16px;
    width: 16px;
    background: url(../images/header-login-icon.svg);
    background-size: cover;
    transform: translateY(3px);
}

@media (max-width: 992px) {
    .l-header-top {
        display: none; /* SPではメイン導線を優先し、ユーティリティメニューは非表示 */
    }
}

.l-header__logo-img {
    height: 4cqw;
    max-height: 60px;
    width: auto;
}
@media (max-width: 992px) {
    .l-header__logo-img {
        height: 36px;
    }
}

.l-header__nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 32px;
}
.l-header__nav .l-header__buttons {
    display: flex;
    gap: clamp( 2px, calc( -7px + 1.171875vw ), 8px );
}
.l-header__nav .l-header__buttons .c-btn {
    padding: 6px 18px 4px;
    font-size: clamp( 14px, calc( -18px + 2.5vw ), 18px );
    white-space: nowrap;
}
.l-header__nav .l-header__buttons .c-btn .c-btn__icon {
    width: clamp( 16px, calc( 15px + 0.3125vw ), 19px );
    height: clamp( 16px, calc( 15px + 0.3125vw ), 19px );
}

/* SPドロワー用: ユーティリティメニューの複製はPCでは非表示 */
.l-header__nav-utility {
    display: none;
}

.l-header__nav-list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px clamp( 12px, calc( -84px + 7.5vw ), 24px );
}
.l-header__nav-list .menu-item {
    font-weight: bold;
    position: relative;
    letter-spacing: 0;
}
.l-header__nav-list .menu-item::after {
    display: block;
    content: "";
    background-color: transparent;
    width: 0%;
    height: 3px;
    border-radius: 2px;
    position: absolute;
    bottom: -7px;
    left: 50%;
    transition: all 0.3s ease-out;
}
.l-header__nav-list .menu-item:hover::after {
    background-color: var(--color-primary);
    width: 50%;
    left: 25%;
}
.l-header__nav-list .menu-item:hover a {
    color: var(--color-primary);
    opacity: 1;
}
.l-header__nav-list .current-menu-item > a,
.l-header__nav-list .current_page_item > a {
    color: var(--color-primary);
}

/* 項目数が多いため、幅に余裕がなくなってきたら「TOP」から間引く */
@media (max-width: 1600px) {
    .l-header__nav-list li:first-child {
        display: none;
    }
}

.l-header__menu-toggle {
    display: none;
    position: relative;
    width: 28px;
    height: 18px;
    background: none;
    border: none;
}

.l-header__menu-toggle span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-primary); /* #195DD9: SPハンバーガーメニューの3本線 */
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.l-header__menu-toggle span:nth-child(1) {
    top: 0;
}
.l-header__menu-toggle span:nth-child(2) {
    top: 8px;
}
.l-header__menu-toggle span:nth-child(3) {
    top: 16px;
}
/* 開いている間は3本線を×に変形 */
.l-header__menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.l-header__menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.l-header__menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

@media (max-width: 992px) {
    .l-header__inner {
        min-height: var(--header-height-sp);
    }
    .l-header__nav {
        display: none; /* この幅未満はドロワーメニュー(menu.js側で制御) */
    }
    .l-header__nav.is-open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        position: fixed;
        top: var(--header-height-sp);
        left: auto;
        right: 0;
        z-index: 90;
        background: #fff;
        padding: 20px 24px 40px;
        overflow-y: auto;
        width: 100%;
        min-width: 320px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.125);
    }
    .l-header__nav-list {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        width: 100%;
        order: 1;
    }
    .l-header__nav .menu-item {
        font-size: 16px;
    }
    .l-header__nav-list li:first-child {
        display: block;
    }
    .l-header__nav-list .menu-item {
        font-size: 18px;
        width: 100%;
        border-bottom: solid 1px var(--color-border);
        padding-bottom: 10px;
    }
    .l-header__nav-list .menu-item::after,
    .l-header__nav-list .menu-item:hover::after {
        display: block;
        content: "";
        bottom: 0;
        top: 0;
        left: auto;
        right: 0;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3ClinearGradient%20id%3D%22linear-gradient%22%20x1%3D%220.852%22%20y1%3D%220.694%22%20x2%3D%220.205%22%20y2%3D%220.198%22%20gradientUnits%3D%22objectBoundingBox%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%230454d7%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230688d7%22%2F%3E%0A%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_61390%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2061390%22%20transform%3D%22translate(-457.688%20-1037.688)%22%3E%0A%20%20%20%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_45814%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2045814%22%20width%3D%2224%22%20height%3D%2224%22%20rx%3D%2212%22%20transform%3D%22translate(457.688%201037.688)%22%20fill%3D%22url(%23linear-gradient)%22%2F%3E%0A%20%20%20%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_61432%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2061432%22%20transform%3D%22translate(-370.069%20-1209.25)%22%3E%0A%20%20%20%20%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_63336%22%20data-name%3D%22%E3%83%91%E3%82%B9%2063336%22%20d%3D%22M470.276%2C1045l4.465%2C4.414-4.465%2C4.247%22%20transform%3D%22translate(370.3%201209.605)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%2F%3E%0A%20%20%20%20%20%20%3Cline%20id%3D%22%E7%B7%9A_3%22%20data-name%3D%22%E7%B7%9A%203%22%20x2%3D%229.874%22%20transform%3D%22translate(834.5%202258.936)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E');
    }
    .l-header__nav .l-header__buttons {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        margin: 16px 0;
        order: 3;
    }
    .l-header__nav .l-header__buttons .c-btn {
        width: 100%;
        max-width: 480px;
        margin-inline: auto;
        padding: 12px 18px 11px;
        font-size: 18px;
        gap: 0;
    }
    .l-header__nav .l-header__buttons .c-btn .c-btn__icon {
        width: 24px;
        height: 24px;
        margin-right: 1cqw;
    }
    .l-header__nav-utility {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 16px 12px;
        font-size: 14px;
        margin: 16px 0 24px;
        order: 2;
    }
    .l-header__menu-toggle {
        display: block;
        grid-area: 1 / 2 / 2 / 3;
        margin-left: auto;
    }
}

/* ドロワー表示中は背後のページスクロールを止める */
body.is-menu-open {
    overflow: hidden;
}

/* ---------- Breadcrumb bar ---------- */
.l-breadcrumb {
    padding: 16px 0;
}
.is-no-transition .l-breadcrumb {
    display: none;
}
.l-breadcrumb:has(+ .l-main .c-page-header--gradient),
.l-breadcrumb:has(+ .c-page-header--gradient)  {
    margin-bottom: -56px;
    z-index: 1;
    color: #FFF;
}
.l-breadcrumb:has(+ .l-main .c-page-header--gradient) .c-breadcrumb,
.l-breadcrumb:has(+ .c-page-header--gradient) .c-breadcrumb,
.l-breadcrumb:has(+ .l-main .c-page-header--gradient) .c-breadcrumb__sep,
.l-breadcrumb:has(+ .c-page-header--gradient) .c-breadcrumb__sep {
    color: #FFF;
}

/* ---------- Main ---------- */
.l-main {
    min-height: 40vh;
    /* body側のflexで余った縦幅を.l-mainが吸収し、フッターは常に画面下端に接するようにする */
    flex: 1 0 auto;
}

/* ---------- Footer ---------- */
.l-footer {
    background: var(--color-text); /* #343434: 共通フッター下部の背景色として使用 */
    color: #fff;
    padding: 48px 0 0;
    flex-shrink: 0;
}
.is-no-transition .l-footer {
    padding: 0;
}
.l-footer__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
    padding-bottom: 40px;
}

.l-footer__logo img {
    height: 54px;
    width: auto;
}

.l-footer__nav-list {
    display: grid;
    grid-template-columns: repeat(3, auto);
    column-gap: 64px;
    row-gap: 12px;
}
.l-footer__nav-list .menu-item a {
    font-weight: bold;
    font-size: 15px;
}

.l-footer__bottom {
    border-top: 1px solid #FFF;
    padding: 16px 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 14px;
    max-width: 1152px;
}
.is-no-transition .l-footer__bottom {
    justify-content: center;
    border: none;
    padding: 10px 16px;
}
.l-footer__bottom-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 16px;
    max-width: 600px;
}
.l-footer__bottom-list .menu-item a {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.l-footer__bottom-list .l-footer__login-item a::after {
    display: inline-block;
    content: "";
    height: 16px;
    width: 16px;
    background: url(../images/footer-login-icon.svg);
    background-size: cover;
    margin-left: 4px;
    transform: translateY(3px);
}
.l-footer__bottom-list .menu-item:nth-last-child(2)::after,
.l-footer__bottom-list .menu-item:last-child::after {
    display: inline-block;
    width: 14px;
    height: 14px;
    content: "";
    margin: 0 0 0 2px;
    transform: translateY(3px);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.l-footer__bottom-list .menu-item:nth-last-child(2)::after {
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2231.732%22%20height%3D%2223.784%22%20viewBox%3D%220%200%2031.732%2023.784%22%3E%0A%20%20%3Cg%20transform%3D%22translate(2.559%20-2.2)%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M30.493%2C64.122H1.24A1.244%2C1.244%2C0%2C0%2C0%2C0%2C65.366v21.3a1.244%2C1.244%2C0%2C0%2C0%2C1.24%2C1.244H30.493a1.244%2C1.244%2C0%2C0%2C0%2C1.24-1.244v-21.3a1.219%2C1.219%2C0%2C0%2C0-.362-.873A1.24%2C1.24%2C0%2C0%2C0%2C30.493%2C64.122Zm-.63%2C3.336V86.037h-28V67.449l12.41%2C11.057h.005a2.391%2C2.391%2C0%2C0%2C0%2C1.582.605%2C2.353%2C2.353%2C0%2C0%2C0%2C.585-.084h.06l.149-.055a2.39%2C2.39%2C0%2C0%2C0%2C.793-.466c2.1-1.873%2C7.186-6.4%2C10.6-9.442ZM28.685%2C66%2C16.208%2C77.112a.558.558%2C0%2C0%2C1-.173.1.512.512%2C0%2C0%2C1-.174.03.5.5%2C0%2C0%2C1-.347-.134L3.035%2C65.991H17.74Z%22%20transform%3D%22translate(-2.559%20-61.922)%22%20fill%3D%22%23fff%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E');
}
.l-footer__bottom-list .menu-item:last-child::after {
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220.221%22%20height%3D%2225.603%22%20viewBox%3D%220%200%2020.221%2025.603%22%3E%0A%20%20%3Cg%20transform%3D%22translate(-13.558)%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M71.711%2C0H62.266a2.558%2C2.558%2C0%2C0%2C0-1.808.749L54.567%2C6.64a2.556%2C2.556%2C0%2C0%2C0-.749%2C1.808V23.275A2.331%2C2.331%2C0%2C0%2C0%2C56.146%2C25.6H71.71a2.331%2C2.331%2C0%2C0%2C0%2C2.328-2.328V2.327A2.331%2C2.331%2C0%2C0%2C0%2C71.711%2C0ZM61.44%2C1.618V6.851c0%2C.566-.22.786-.786.786H55.421ZM72.729%2C23.275a1.02%2C1.02%2C0%2C0%2C1-1.019%2C1.019H56.146a1.02%2C1.02%2C0%2C0%2C1-1.019-1.019V8.8h6.228A1.251%2C1.251%2C0%2C0%2C0%2C62.6%2C7.552V1.309h9.106a1.019%2C1.019%2C0%2C0%2C1%2C1.019%2C1.018Z%22%20transform%3D%22translate(-40.26)%22%20fill%3D%22%23fff%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E');
}

.l-footer__copyright {
    color: #FFF;
}
.l-footer__copyright .sp {
    display: none;
}

@media (max-width: 768px) {
    .l-footer__top {
        flex-direction: column;
        gap: 32px;
        padding-bottom: 8px;
    }
    .l-footer__logo img {
        height: 50px;
    }
    .l-footer__nav {
        width: 100%;
    }
    .l-footer__nav-list {
        display: block;
        width: 100%;
    }
    .l-footer__nav-list .menu-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 14px 0;
    }
    .l-footer__nav-list .menu-item:not(:last-child) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }
    .l-footer__nav-list .menu-item a {
        font-size: 16px;
    }
    .l-footer__nav-list .menu-item::after {
        content: "";
        display: block;
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        background: url(../images/footer-nav-arrow.svg);
        background-size: contain;
        background-repeat: no-repeat;
    }
    .l-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding-inline: 16px;
    }
    .l-footer__copyright {
        width: 100%;
        text-align: center;
    }
    .l-footer__copyright .sp {
        display: inline-block;
    }
    .l-footer__bottom-list {
        display: flex;
    }
}

/* ---------- Page with sidebar (archive等) ---------- */
.l-page-with-sidebar {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 40px;
    align-items: start;
}

/* コラム一覧用: 左にカードグリッド、右にサイドバー(資料請求バナー+タグ一覧)
   コラム記事詳細でも同じ比率でサイドバナー用のエリアを設けている */
.l-page-with-sidebar--column {
    grid-template-columns: 1fr 300px;
}
/* 本文中の表・画像等でグリッドが押し広げられないようにする */
.c-column-main {
    min-width: 0;
}

/* サイドバナー・カテゴリタグ一覧をスクロールに追従させる(コラム一覧/記事詳細共通)。
   ヘッダーがposition: stickyのため、その高さ分だけ余白を空けて重ならないようにする。
   SPは1カラム表示になりサイドバーが縦に長く続くため、追従はPCのみに限定する */
@media (min-width: 769px) {
    .l-page-with-sidebar--column .c-sidebar {
        position: sticky;
        top: calc(var(--header-height) + 24px);
    }
}

@media (max-width: 768px) {
    .l-page-with-sidebar {
        grid-template-columns: 1fr;
    }
}

/* ---------- 固定ページ「画面遷移なし」設定(_page_no_transition) ----------
   ページ編集画面の「ページヘッダー設定」メタボックスでチェックすると、
   他ページへの導線(ヘッダーナビ・共通CTA・フッターナビ)を絞ったLP的な
   見た目にする。ヘッダーはロゴのみ残す */
body.is-no-transition .l-header__inner > *:not(.l-header__logo) {
    display: none !important;
}
body.is-no-transition .c-cta {
    display: none !important;
}
body.is-no-transition .l-footer__top {
    display: none !important;
}
body.is-no-transition .l-footer__bottom-nav {
    display: none !important;
}