/* =========================================================
   Fujimotors 共通レイアウト（ヘッダー / フッター）
   WordPress/Elementor 由来のマークアップを脱却した手書きCSS。
   ※marketing本文ページは引き続き Elementor CSS を使用するため、
     本ファイルは fm- 名前空間でスコープし衝突を避ける。
   ========================================================= */
:root {
    --fm-primary: #0063B1;
    --fm-primary-dark: #00518f;
    --fm-accent: #377EE4;
    --fm-light: #EFF8FF;
    --fm-text: #333333;
    --fm-header-height: 57px;
}

/* =========================================================
   ベース（Elementor/テーマCSSを外したページでも崩れないための最小リセット）
   ※marketingページでは kit(.elementor-kit-43, 詳細度0,1,0) が
     色/フォント等を上書きするので、ここはIndex等の手書きページに効く。
   値は従来テーマ(body)と同等にしてIndexの見た目を維持。
   ========================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}
body {
    margin: 0;
    /* 元サイト（kit）と同じ Noto Sans JP を基本書体に。読み込み前/未対応はシステムフォントへフォールバック */
    font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--fm-text);
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* フォーム部品は既定でフォントを継承しないので明示（ボタン/入力もNoto Sans JPに） */
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
}

.fm-skip {
    position: absolute;
    left: -9999px;
    top: 0;
}
.fm-skip:focus {
    left: 8px;
    top: 8px;
    z-index: 10000;
    background: #fff;
    padding: 8px 12px;
}

/* ===== ヘッダー ===== */
.fm-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}
.fm-header__inner {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    padding: 0 41px 0 14px;
    min-height: var(--fm-header-height);
}
.fm-logo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}
.fm-logo img {
    display: block;
    width: 230px;
    max-width: 52vw;
    height: auto;
}

/* メインナビ */
.fm-nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
    padding-right: 32px;
}
.fm-menu {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    width: auto;
}
.fm-menu > li {
    flex: 0 0 136.64px;
    position: relative;
}
.fm-menu > li:nth-child(1) {
    flex-basis: 122.64px;
}
.fm-menu > li:nth-child(2) {
    flex-basis: 152.61px;
}
.fm-menu > li:nth-child(6) {
    flex-basis: 164.64px;
}
.fm-menu > li > a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: var(--fm-header-height);
    padding: 0 20px;
    color: var(--fm-text);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}
/* アクティブ/ホバー時の下線（元の pointer-underline 相当：項目の全幅・3px） */
.fm-menu > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--fm-primary);
    transform: scaleX(0);
    transition: transform .25s ease;
}
.fm-menu > li > a:hover,
.fm-menu > li.is-active > a {
    color: var(--fm-primary);
}
.fm-menu > li > a:hover::after,
.fm-menu > li.is-active > a::after {
    transform: scaleX(1);
}
.fm-menu .fm-caret {
    font-size: 0.8em;
    transition: transform .3s ease;
}

/* サブメニュー（PC=ホバー表示） */
@media screen and (min-width: 1025px) and (max-width: 1308px) {
    .fm-header__inner {
        padding-right: clamp(16px, calc(-43.64px + 5.82vw), 32px);
    }
    .fm-nav {
        padding-right: clamp(10px, calc(-72px + 8vw), 32px);
    }
    .fm-menu {
        gap: 0 clamp(3px, calc(-8.18px + 1.09vw), 6px);
    }
    .fm-menu > li {
        flex-basis: clamp(96px, calc(-55.48px + 14.78vw), 136.64px);
    }
    .fm-menu > li:nth-child(1) {
        flex-basis: clamp(82px, calc(-69.48px + 14.78vw), 122.64px);
    }
    .fm-menu > li:nth-child(2) {
        flex-basis: clamp(112px, calc(-39.36px + 14.77vw), 152.61px);
    }
    .fm-menu > li:nth-child(6) {
        flex-basis: clamp(124px, calc(-27.48px + 14.78vw), 164.64px);
    }
    .fm-menu > li > a {
        padding-right: clamp(10px, calc(-27.27px + 3.64vw), 20px);
        padding-left: clamp(10px, calc(-27.27px + 3.64vw), 20px);
    }
    .fm-social {
        gap: clamp(6px, calc(-1.45px + 0.73vw), 8px);
    }
}

.fm-sub {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    width: max-content;
    background: #fff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.10);
    list-style: none;
    margin: 0;
    padding: 6px 0;
    display: none;
    z-index: 999;
}
/* PC（≥1025px）のみホバーでサブメニュー表示。モバイルはクリック開閉（JS+is-open） */
@media (min-width: 1025px) {
    .fm-has-sub:hover > .fm-sub {
        display: block;
    }
}
.fm-sub a {
    display: block;
    padding: 10px 18px;
    color: var(--fm-primary);
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}
.fm-sub a:hover {
    background: var(--fm-light);
}

/* SNSアイコン */
.fm-social {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 11px;
}
.fm-social a,
.fm-nav-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10%;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
}
/* グリフごとの line-height 継承による縦ズレを防止（インスタ揃え） */
.fm-social a i,
.fm-nav-social a i {
    display: block;
    line-height: 1;
}
/* 元サイト準拠のブランドカラー（Elementor social-icons の既定色） */
.fm-social .fm-yt, .fm-nav-social .fm-yt { background: #cd201f; }
.fm-social .fm-fb, .fm-nav-social .fm-fb { background: #3b5998; }
.fm-social .fm-ig, .fm-nav-social .fm-ig { background: #262626; }
.fm-social a:hover,
.fm-nav-social a:hover { opacity: 0.85; }

/* メニュー内SNS（ハンバーガー展開時のみ表示） */
.fm-nav-social {
    display: none;
}

/* バーガー（モバイルのみ表示） */
/* レイアウト（display系は .fm-burger のまま＝モバイルの inline-flex 切替と同詳細度に保つ） */
.fm-burger {
    display: none;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    font-size: 24px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
/* 見た目は .fm-header を前置して kit の .elementor-kit-43 button(0,1,1) に勝たせる */
.fm-header .fm-burger {
    border: 1px solid transparent;
    border-radius: 4px;
    background: #fff;            /* バックは常に白 */
    color: #333;                /* 通常時は黒っぽく */
    transition: color .25s ease, border-color .25s ease;
}
/* hover/focus/active でもバックは白を維持（kit/themeの暗いhover・focus背景 #54595F/#c36 を上書き） */
.fm-header .fm-burger:hover,
.fm-header .fm-burger:focus,
.fm-header .fm-burger:active {
    background: #fff;
}
/* focus/active 単体（hover・選択でない）は通常の黒文字に戻す（kitの白文字を上書き） */
.fm-header .fm-burger:focus,
.fm-header .fm-burger:active {
    color: #333;
}
/* ホバー時／選択時（X表示）は青（同色）。focus黒より後に定義して勝たせる */
.fm-header .fm-burger:hover,
.fm-header .fm-burger[aria-expanded="true"] {
    color: var(--fm-primary);
}
/* アイコン入れ替え（☰⇄✕）も回転でアニメーション */
.fm-header .fm-burger i {
    transition: transform .3s ease;
}
.fm-header .fm-burger[aria-expanded="true"] i {
    transform: rotate(180deg);
}
/* フォーカス枠：ブラウザ/テーマ既定のオレンジ→青系に上書き */
.fm-header .fm-burger:focus {
    outline: 2px solid var(--fm-primary);
    outline-offset: 2px;
}
/* マウスクリック時はリングを出さず、aria-expandedのグレー枠で表現（キーボード時のみ青リング） */
.fm-header .fm-burger:focus:not(:focus-visible) {
    outline: none;
}

/* ===== モバイル ===== */
@media screen and (max-width: 1024px) {
    .fm-header__inner {
        gap: 16px;
        padding: 0 18px;
        min-height: 64px;
    }
    .fm-burger {
        display: inline-flex;
        order: 2;
    }
    /* ハンバーガー時：ヘッダーのSNSは隠し、メニュー内に出す */
    .fm-social {
        display: none;
    }
    .fm-nav-social {
        display: flex;
        justify-content: center;
        gap: 16px;
        padding: 20px;
    }
    .fm-logo {
        margin-right: auto;
    }
    .fm-nav {
        order: 4;
        flex-basis: 100%;
        display: block;
        padding-right: 0;
        position: fixed;
        left: 0;
        right: 0;
        top: var(--fm-header-height);
        background: #fff;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease;
    }
    .fm-nav.is-open {
        max-height: 80vh;
        overflow-y: auto;
    }
    .fm-menu {
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 0;
        width: 100%;
    }
    .fm-menu > li,
    .fm-menu > li:nth-child(1),
    .fm-menu > li:nth-child(2),
    .fm-menu > li:nth-child(6) {
        flex: 0 0 auto;
    }
    .fm-menu > li > a {
        width: 100%;
        height: auto;
        padding: 14px 20px;
        border-bottom: 1px solid #eef1f5;
        justify-content: space-between;
    }
    .fm-menu > li > a::after {
        display: none;
    }
    .fm-sub {
        position: static;
        display: block;          /* クリック開閉＋アニメ用に常時block化し、高さで開閉 */
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease;
        box-shadow: none;
        background: #f6f9fc;
        padding: 0;
        min-width: 0;
        width: auto;
    }
    .fm-has-sub.is-open > .fm-sub {
        max-height: 320px;       /* サブ項目4件分。展開をアニメーション */
    }
    .fm-sub a {
        padding: 12px 32px;
        border-bottom: 1px solid #eef1f5;
    }
    .fm-has-sub.is-open > a .fm-caret {
        transform: rotate(180deg);
    }
    /* 元サイト準拠：現在ページは白文字＋青背景、ホバーはグレー */
    .fm-menu > li > a:hover {
        background: #ededed;
        color: var(--fm-primary);
    }
    .fm-menu > li.is-active > a,
    .fm-menu > li.is-active > a:hover {
        background: var(--fm-primary);
        color: #fff;
    }
    /* バーガーは開いている間 ✕（囲み枠つき） */
    /* 選択時は囲み枠を表示（transparent→色をアニメーション） */
    .fm-header .fm-burger[aria-expanded="true"] {
        border-color: #cfd8e3;
    }
}

/* スマホ実機幅：ロゴ＋バーガー＋SNS3つを1行に収める（インスタ見切れ防止） */
@media screen and (max-width: 480px) {
    .fm-header__inner {
        gap: 10px;
        padding: 0 12px;
    }
    .fm-logo img {
        max-width: 42vw;
    }
    .fm-social {
        gap: 5px;
    }
    .fm-social a {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }
}

/* ===== フッター ===== */
.fm-footer {
    background: #fff;
    color: var(--fm-text);
}
.fm-footer__top {
    max-width: 1140px;
    margin: 0 auto;
    padding: 48px 20px 40px;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 32px;
}
.fm-footer__brand {
    text-align: center;
}
.fm-footer__brand img {
    width: 220px;
    max-width: 100%;
    height: auto;
}
.fm-footer__addr {
    margin: 12px 0;
    font-size: 14px;
    line-height: 1.7;
}
/* ※ .fm-footer を前置して詳細度を上げ、Elementor kitの
   `.elementor-kit-43 a{color:#0063B1}` (詳細度0,1,1) に勝たせる。
   これが無いと文字が背景と同じ青になり見えなくなる。 */
.fm-footer .fm-footer__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    background: var(--fm-primary);
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    border-radius: 4px;
}
.fm-footer .fm-footer__btn:hover {
    background: var(--fm-primary-dark);
    color: #fff;
}
.fm-footer__col h4 {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 700;
    color: var(--fm-text);
}
.fm-footer__col hr {
    border: 0;
    border-top: 1px solid #e3e8ef;
    margin: 0 0 12px;
}
.fm-footer__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.fm-footer__col li {
    margin-bottom: 8px;
}
.fm-footer__col a {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    color: var(--fm-text);
    font-size: 14px;
    text-decoration: none;
}
.fm-footer__col a:hover {
    color: var(--fm-primary);
}
.fm-footer__col a .fm-caret {
    color: var(--fm-primary);
    font-size: 0.75em;
}

/* 下帯 */
.fm-footer__bottom {
    background: var(--fm-primary);
    color: #fff;
}
.fm-footer__bottom-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
}
.fm-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.fm-footer__links a {
    color: #fff;
    text-decoration: none;
}
.fm-footer__links a:hover {
    text-decoration: underline;
}
.fm-footer__copy {
    margin: 0;
    color: #fff;
}

@media screen and (max-width: 880px) {
    .fm-footer__top {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }
    .fm-footer__brand {
        grid-column: 1 / -1;
    }
}
@media screen and (max-width: 520px) {
    .fm-footer__top {
        grid-template-columns: 1fr;
    }
    .fm-footer__bottom-inner {
        flex-direction: column;
        text-align: center;
    }
}