@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

.p-breadcrumb__list {
    flex-wrap: wrap; //記事名が長い場合は折り返す
}
.single .p-breadcrumb__item:last-child>span.p-breadcrumb__text {
    display: block!important; //記事名の表示
    opacity: 1; //記事名を半透明にしない
    white-space: pre-wrap;//記事名が長い場合は折り返す
}

/* ============================================================
   本体サイト（Laravel + Inertia）共通ヘッダー・フッターの複製
   正典: resources/js/components/site/SiteHeader.vue / SiteFooter.vue
   値の出どころ: resources/scss/public/_base.scss（.site-header 一式）と
                 resources/scss/public/_footer.scss（.footer-global 一式）
   SWELL のスタイルに勝つため !important を付与している。
   rem は SWELL 側の html font-size に引きずられないよう px へ換算済み（1rem = 16px）。
   ============================================================ */

/* SWELL 標準のヘッダー・フッターを非表示化 */
#header,
.l-header,
.l-fixHeader,
.l-header__spacer,
#sp_menu,
.p-spMenu,
.p-spMenu__overlay,
#footer,
.l-footer,
#fix_bottom_menu {
    display: none !important;
}

.xm-header,
.xm-footer {
    font-family: 'Noto Sans JP', sans-serif !important;
    letter-spacing: 0.01em !important;
    color: #101b2d !important;
}
.xm-header *,
.xm-footer * {
    box-sizing: border-box !important;
}
/* :where() で詳細度を 0 にし、.xm-contact などの個別の色指定を上書きしないようにする */
:where(.xm-header, .xm-footer) a {
    color: inherit !important;
    text-decoration: none !important;
}
.xm-header img,
.xm-footer img {
    display: block !important;
    max-width: 100% !important;
}

.xm-icon {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    flex: 0 0 auto !important;
}
.xm-icon--13 {
    width: 13px !important;
    height: 13px !important;
}
.xm-icon--16 {
    width: 16px !important;
    height: 16px !important;
    stroke-width: 1.8 !important;
}
.xm-icon--17 {
    width: 17px !important;
    height: 17px !important;
}
.xm-icon--26 {
    width: 26px !important;
    height: 26px !important;
}

/* ---- ヘッダー ------------------------------------------------ */
/*
  本体の .site-header は fixed だが、こちらは SWELL の本文がそのまま下に続くので
  sticky で置き換える（fixed だと本文の頭がヘッダーの下に潜る）。
  高さは下層と同じ縮んだ状態（.is-scrolled）で固定。
*/
.xm-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
    height: 68px !important;
    background: rgba(247, 247, 244, 0.97) !important;
    border-bottom: 1px solid #d8dce2 !important;
}
/* ログイン中は管理バー（固定表示は 783px 以上）の分だけ下げる */
@media screen and (min-width: 783px) {
    .admin-bar .xm-header {
        top: 32px !important;
    }
}
.xm-header__inner {
    height: 100% !important;
    max-width: 1600px !important;
    padding: 0 42px !important;
    margin: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 32px !important;
}
.xm-brand {
    display: inline-flex !important;
    gap: 12px !important;
    align-items: center !important;
    flex: 0 0 auto !important;
}
.xm-brand__logo {
    width: clamp(192px, 14vw, 240px) !important;
    height: auto !important;
    max-height: 58px !important;
    object-fit: contain !important;
    object-position: left center !important;
}
.xm-nav {
    display: flex !important;
    align-items: center !important;
    gap: clamp(13px, 1.55vw, 29px) !important;
    margin-left: auto !important;
}
.xm-nav a {
    position: relative !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}
.xm-nav a::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    bottom: -8px !important;
    width: 0 !important;
    height: 1px !important;
    background: #0b5cad !important;
    transition: width 0.2s cubic-bezier(0.23, 1, 0.32, 1) !important;
}
.xm-nav a:hover::after {
    width: 100% !important;
}
.xm-contact {
    background: #0b5cad !important;
    color: #fff !important;
    height: 40px !important;
    padding: 0 15px 0 17px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    transition:
        background 0.2s ease,
        transform 0.16s ease !important;
    white-space: nowrap !important;
}
.xm-contact:hover {
    background: #084d91 !important;
    color: #fff !important;
}
.xm-contact:active {
    transform: scale(0.97) !important;
}
.xm-menu-toggle {
    display: none !important;
    background: none !important;
    border: 0 !important;
    padding: 8px !important;
    color: #101b2d !important;
    cursor: pointer !important;
    font: inherit !important;
}
.xm-header .xm-icon--close {
    display: none !important;
}
.xm-header.is-open .xm-icon--close {
    display: block !important;
}
.xm-header.is-open .xm-icon--menu {
    display: none !important;
}
.xm-mobile-menu {
    display: none !important;
}

/* ---- フッター ------------------------------------------------ */
.xm-footer {
    background: #101b2d !important;
    color: #fff !important;
    padding: clamp(64px, 6vw, 109px) max(24px, calc((100vw - 1516px) / 2)) 26px !important;
}
.xm-footer__inner {
    max-width: 1516px !important;
    margin: 0 auto !important;
}
.xm-footer__top {
    display: grid !important;
    grid-template-columns: minmax(320px, 0.86fr) minmax(0, 2.14fr) !important;
    gap: clamp(56px, 6.5vw, 128px) !important;
    align-items: start !important;
}
.xm-footer__brand {
    position: relative !important;
    padding-left: clamp(21px, 2.2vw, 32px) !important;
}
.xm-footer__brand::before {
    position: absolute !important;
    top: 5px !important;
    bottom: 2px !important;
    left: 0 !important;
    width: 2px !important;
    background: #0b5cad !important;
    content: '' !important;
}
.xm-footer__logo {
    width: clamp(256px, 20vw, 320px) !important;
    height: auto !important;
    max-height: 80px !important;
    object-fit: contain !important;
    object-position: left center !important;
}
.xm-footer__brand > p {
    margin: 37px 0 0 !important;
    color: #fff !important;
    font-size: clamp(18px, 1.45vw, 23px) !important;
    font-weight: 500 !important;
    letter-spacing: -0.045em !important;
    line-height: 1.62 !important;
}
.xm-footer__company {
    display: grid !important;
    gap: 10px !important;
    margin-top: 32px !important;
    color: #c6d4e2 !important;
    font-size: 12px !important;
    line-height: 1.75 !important;
}
.xm-footer__company strong {
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
.xm-footer__company span {
    display: block !important;
}
.xm-footer__company small {
    color: #8fa4bb !important;
    font-size: 10px !important;
    line-height: 1.8 !important;
}
.xm-footer__nav {
    display: grid !important;
    grid-template-columns: 1fr 1.42fr 1fr 1fr !important;
    gap: clamp(20px, 2.7vw, 56px) !important;
}
.xm-footer__group {
    min-width: 0 !important;
}
.xm-footer__group h2 {
    margin: 0 !important;
    padding: 0 0 16px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(211, 225, 238, 0.34) !important;
    background: none !important;
    color: #82c4ed !important;
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.16em !important;
    line-height: 1 !important;
}
.xm-footer__group > div {
    display: grid !important;
    gap: 0 !important;
    margin-top: 13px !important;
}
.xm-footer__group a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 13px !important;
    min-height: 33px !important;
    color: #eef5fb !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    transition:
        color 180ms cubic-bezier(0.23, 1, 0.32, 1),
        padding 180ms cubic-bezier(0.23, 1, 0.32, 1) !important;
}
.xm-footer__group a svg {
    color: #5e93bd !important;
    transition:
        color 180ms ease,
        transform 180ms cubic-bezier(0.23, 1, 0.32, 1) !important;
}
.xm-footer__group a:hover {
    padding-left: 5px !important;
    color: #8ed0f3 !important;
}
.xm-footer__group a:hover svg {
    color: #8ed0f3 !important;
    transform: translate3d(2px, -2px, 0) !important;
}
.xm-footer__group a:focus-visible {
    outline: 2px solid #8ed0f3 !important;
    outline-offset: 3px !important;
}
.xm-footer__note {
    display: block !important;
    margin-top: 12px !important;
    color: #7f96ad !important;
    font-size: 10px !important;
    line-height: 1.55 !important;
}
.xm-footer__bottom {
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: clamp(54px, 5vw, 90px) !important;
    padding-top: 18px !important;
    border-top: 1px solid rgba(211, 225, 238, 0.25) !important;
}
.xm-footer__bottom small {
    color: #8fa1b6 !important;
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 9px !important;
    font-weight: 500 !important;
    letter-spacing: 0.12em !important;
}

/* ---- 1024px 以下：フッターの段組み -------------------------- */
@media (max-width: 1024px) {
    .xm-footer__top {
        grid-template-columns: minmax(272px, 0.76fr) minmax(0, 1.24fr) !important;
        gap: 48px !important;
    }
    .xm-footer__nav {
        grid-template-columns: 1fr 1.35fr !important;
        gap: 35px 26px !important;
    }
}

/* ---- 1024〜769px：ヘッダーの詰め ---------------------------- */
@media (max-width: 1024px) and (min-width: 769px) {
    .xm-header__inner {
        padding-left: 28px !important;
        padding-right: 28px !important;
        gap: 18px !important;
    }
    .xm-contact {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/*
  ---- 840〜769px：ナビを横並びのまま収めるための追加の詰め ----
  上の詰めだけでは 820px 前後（デスクトップのスクロールバー 15px 込み）で
  お問い合わせボタンが右にはみ出すため、余白・ロゴ・ナビ間隔をもう一段詰める。
*/
@media (max-width: 840px) and (min-width: 769px) {
    .xm-header__inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
        gap: 14px !important;
    }
    .xm-brand__logo {
        width: 176px !important;
    }
    .xm-nav {
        gap: 10px !important;
    }
}

/* ---- 768px 以下 --------------------------------------------- */
@media (max-width: 768px) {
    /* ナビをハンバーガーへ */
    .xm-nav {
        display: none !important;
    }
    .xm-menu-toggle {
        display: block !important;
    }
    .xm-mobile-menu {
        display: block !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 100% !important;
        padding: 0 28px !important;
        visibility: hidden !important;
        opacity: 0 !important;
        transform: translateY(-10px) !important;
        transition:
            opacity 0.2s ease,
            transform 0.2s ease,
            visibility 0.2s !important;
        background: #f7f7f4 !important;
        border-bottom: 1px solid #d8dce2 !important;
    }
    .xm-mobile-menu.is-open {
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .xm-mobile-menu nav {
        padding: 15px 0 28px !important;
    }
    .xm-mobile-menu nav > a:not(.xm-mobile-contact) {
        border-bottom: 1px solid #d8dce2 !important;
        padding: 16px 0 !important;
        display: grid !important;
        grid-template-columns: 35px 1fr 20px !important;
        align-items: center !important;
        font-size: 14px !important;
    }
    .xm-mobile-menu nav > a > span {
        color: #0b5cad !important;
        font: 500 10px 'IBM Plex Sans', sans-serif !important;
    }
    .xm-mobile-contact {
        margin-top: 20px !important;
        background: #0b5cad !important;
        color: #fff !important;
        padding: 15px !important;
        display: block !important;
        text-align: center !important;
        font-size: 13px !important;
    }

    .xm-header__inner {
        padding: 0 20px !important;
        gap: 12px !important;
    }
    .xm-brand__logo {
        width: 176px !important;
        max-height: 46px !important;
    }
    .xm-contact {
        display: none !important;
    }
    .xm-menu-toggle {
        margin-left: auto !important;
    }

    .xm-footer {
        padding: 58px 24px 22px !important;
    }
    .xm-footer__top {
        display: block !important;
    }
    .xm-footer__brand {
        padding-left: 18px !important;
    }
    .xm-footer__logo {
        width: 224px !important;
        max-height: 59px !important;
    }
    .xm-footer__brand > p {
        margin-top: 29px !important;
        font-size: 17px !important;
    }
    .xm-footer__company {
        margin-top: 27px !important;
        font-size: 11px !important;
    }
    .xm-footer__company small {
        font-size: 10px !important;
    }
    .xm-footer__nav {
        grid-template-columns: 1fr 1fr !important;
        gap: 40px 21px !important;
        margin-top: 61px !important;
    }
    .xm-footer__group a {
        font-size: 12px !important;
    }
    .xm-footer__note {
        font-size: 9px !important;
    }
    .xm-footer__bottom {
        justify-content: flex-start !important;
        margin-top: 56px !important;
        padding-top: 16px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .xm-nav a::after,
    .xm-contact,
    .xm-mobile-menu,
    .xm-footer__group a,
    .xm-footer__group a svg {
        transition: none !important;
    }
}