@charset "UTF-8";
/*
 *
 *	基本レイアウト用 css
 *

 *	01. reset
    └ 01-01. reset

 *	02. base
    ├ 02-01. html・body設定
    ├ 02-02. リンク色設定
    ├ 02-03. input
    └ 02-04. titile

 *	03. nav
    ├ 03-01. main menu
    ├ 03-02. menu second level
    ├ 03-03. mega menu
    ├ 03-04. mega menu background-color
    └ 03-05. hamburger menu icon

 *	04. footer
    └ 04-01. footer
 */

/*----------------------------------------

	01. reset

----------------------------------------*/

@layer reset {

    /* ----------------------------------
        01-01. reset
    -----------------------------------*/

    *,*::before,*::after {
        box-sizing: border-box;
    }
    html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-style: normal;
        /*font-weight: normal;*/
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }
    article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {
        display: block;
    }
    blockquote, q {
        quotes: none;
    }
    :is(blockquote, q) :is(::before, ::after) {
        content: '';
        content: none;
    }
    input, textarea {
        margin: 0;
        padding: 0;
    }
    button, input, select, textarea {
        font-family: inherit;
    }
    ol, ul {
        list-style: none;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    img	{
        border: none;
        image-rendering: -webkit-optimize-contrast;
        max-width: 100%;
    }
}

/*----------------------------------------

	02. base

----------------------------------------*/

@layer base {

    /* ----------------------------------
        02-01. html・body設定
    -----------------------------------*/

    html {
        scroll-behavior: smooth;
    }
    html, body {
          height: 100%;
    }
    body {
        -webkit-text-size-adjust: none;
        -webkit-font-smoothing: antialiased;
        min-width: 320px;
        width: 100%;
        background-color: var(--white);
        color: var(--def-txt-00);
        font-size: var(--f-s-m);
        font-family: "tbudgothic-std", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
        font-weight: 400;
        line-height: 1.6;
    }
    .ios body {
        overflow-x: hidden;
    }

    /* ----------------------------------
        02-02. リンク色設定
    -----------------------------------*/

    a {
        text-decoration: none;

        &:link		{ color: var(--blue-02); }
        &:visited	{ color: var(--blue-02); }
        &:hover		{ color: var(--blue-01); }
        &:active	{ color: var(--blue-01); }
        &.u_line 	{
                      text-decoration: underline;
            &:hover { text-decoration: none; }
        }
    }

    /* ----------------------------------
        02-03. input
    -----------------------------------*/

    /*---- select ----*/
    select {
        padding: 8px 16px;

    }
    .ios select {
        padding: 16px;
        min-width: 72px;
        height: 32px;
        border-radius: var(--bdr-r-4);
    }

    /* ----------------------------------
        02-04. title
    -----------------------------------*/

    h1, h2, h3, h4, h5 {
        font-weight: bold;
    }
    h1 { font-size: var(--f-s-xl); }
    h2 { font-size: var(--f-s-ll); }
    h3 { font-size: var(--f-s-ll); }
}

@layer overwrite {

    /*---- 背景色 ----*/
    .white_bk    { background-color: var(--white); }
    .gray_bk     { background-color: var(--gray1-01); }
    .orange1_bk  { background-color: var(--orange1-02); }
    .orange2_bk  { background-color: var(--orange2-01); }
    .red_bk      { background-color: var(--red-01); }
    .green1_bk   { background-color: var(--green1-01); }
    .green2_bk   { background-color: var(--green1-02); }
    .green3_bk   { background-color: var(--green2-02); }
    .blue_bk     { background-color: var(--blue-02); }
    .purple_bk   { background-color: var(--purple-02); }

    /*---- 表示 / 非表示 ----*/
    .show	{ display: block; }
    .hide	{ display: none; }

    /*---- box ----*/
    .box_80		{ width: 80%; }
    .box_50		{ width: 50%; }
    .box_30		{ width: 30%; }
    .box_20		{ width: 20%; }
    .box_10		{ width: 10%; }

    /*---- text-align ----*/
    .tx_left	{ text-align: left; }
    .tx_right	{ text-align: right; }
    .tx_center	{ text-align: center; }
    .tx_bold	{ font-weight: bold; }

    /*---- font color ----*/
    .tx_red_01      { color: var(--red-01); }
    .tx_red_02		{ color: var(--red-02); }
    .tx_green_01    { color: var(--green1-01); }
    .tx_green_02    { color: var(--green1-02); }
    .tx_green_03    { color: var(--green2-02); }
    .tx_blue	    { color: var(--blue-02); }
    .tx_purple      { color: var(--purple-02); }
    .tx_orange_01	{ color: var(--orange1-02); }
    .tx_orange_02   { color: var(--orange2-01); }
    .tx_gray_01	    { color: var(--gray2-03); }
    .tx_white       { color: var(--white); }

    /*---- font size ----*/
    .fs_10	{ font-size: var(--f-s-10); }  /* 10px */
    .fs_12	{ font-size: var(--f-s-12); }  /* 12px */
    .fs_14	{ font-size: var(--f-s-14); }  /* 14px */

    .fs_s	{ font-size: var(--f-s-s); }   /* 11.312px 白銀比 */
    .fs_m	{ font-size: var(--f-s-m); }   /* 16px 白銀比 デフォルト */
    .fs_l	{ font-size: var(--f-s-l); }   /* 23px 白銀比 h4 */
    .fs_ll	{ font-size: var(--f-s-ll); }  /* 32px 白銀比 h2-3 */
    .fs_xl	{ font-size: var(--f-s-xl); }  /* 45px 白銀比 h1 */
    .fs_xxl	{ font-size: var(--f-s-xxl); } /* 64px 白銀比 */

    /* 改行 */
    .br-pc {
        @media (width >= 1025px) { display: inline; } /* ---- PC  幅が1025px以上の場合 ----*/
        @media (width <= 1024px) { display: none; }   /* ---- tab 幅が1024px以下の場合 ----*/
        @media (width <= 699px)  { display: none; }   /* ---- SP  幅が699px以下の場合 ----*/
    }
    .br-pc-tab {
        @media (width >= 1025px) { display: inline; } /* ---- PC ----*/
        @media (width <= 1024px) { display: inline; } /* ---- tab ----*/
        @media (width <= 699px)  { display: none; }   /* ---- SP ----*/
    }
    .br-pc-sp {
        @media (width >= 1025px) { display: inline; } /* ---- PC ----*/
        @media (width <= 1024px) { display: none; }   /* ---- tab ----*/
        @media (width <= 699px)  { display: inline; } /* ---- SP ----*/
    }
    .br-tab {
        @media (width >= 1025px) { display: none; }   /* ---- PC ----*/
        @media (width <= 1024px) { display: inline; } /* ---- tab ----*/
        @media (width <= 699px)  { display: none; }   /* ---- SP ----*/
    }
    .br-tab-sp {
        @media (width >= 1025px) { display: none; }   /* ---- PC ----*/
        @media (width <= 1024px) { display: inline; } /* ---- tab ----*/
        @media (width <= 699px)  { display: inline; } /* ---- SP ----*/
    }
    .br-sp {
        @media (width >= 1025px) { display: none; }   /* ---- PC ----*/
        @media (width <= 1024px) { display: none; }   /* ---- tab ----*/
        @media (width <= 699px)  { display: inline; } /* ---- SP ----*/
    }
}

 /*----------------------------------------

	03. nav

----------------------------------------*/

@layer base {

    /* ----------------------------------
        03-01. main menu
    -----------------------------------*/

    /* メインメニュー */
    #menu_box {
        position: fixed;
        inset: 0 auto auto 0; /* top right bottom left */
        width: 100%;
        height: 64px;
        background-color: var(--gray1-01);
        border-bottom: 1px solid var(--gray1-03);
        z-index: 10;

        & #nav_box {
            position: relative;
            display: flex;
            align-items: center;
            margin-inline: auto; 
            max-width: var(--max-w-1500);
            height: 100%;
        }
    }
    /* logo --------*/
    #logo_box {
        flex: 0 0 158px;

        & a,
        & div {
            display: flex;
            place-items: center; /* 上下左右中央 */
            padding: 0 24px;
        }
        & a:hover {
            opacity: var(--def-hvr-opacity);
        }
    }
    nav #logo_box img {
        margin-top: -6px;
    }
    /* メインメニュー --------*/
    #main_nav {
        display: flex;
        justify-content: flex-end;
        width: 100%;

        & > li {
            flex: 0 0 auto;

            & > a {
                display: flex;
                place-items: center; 
                flex-wrap: wrap;
                font-size: var(--f-s-14);
                border-radius: var(--bdr-r-8);
                transition: var(--def-transition);

                &:hover {
                    border-radius: var(--bdr-r-8);
                }
            }
        }
        /* CTA以外のボタン */
        & > li:not(.cta_btn) {
            & > a {
                padding: 0 16px;
                height: 100%;
                color: var(--def-txt-00);
            }
            & > a:hover,
            & > a.active {
                margin-top: 8px;
                color: var(--white);
                background-color: var(--blue-02);
                border-radius: var(--bdr-r-8) var(--bdr-r-8) 0 0;
            }
        }
        /* CTAボタンのみ */
        & > li:has(.inquiry_btn),
        & > li:has(.download_btn) {
            & > a {
                margin: 4px;
                width: 152px;
            }
        }
    }
    .inquiry_btn, .download_btn, .details_btn {
        box-shadow: var(--def-shadow);
    }
    .inquiry_btn  { background-color: var(--orange-btn-bg);
         &:hover  { background-color: var(--orange-btn-bg-hvr); }
    }
    .download_btn { background-color: var(--blue-btn-bg);
          &:hover { background-color: var(--blue-btn-bg-hvr); }
    }
    .details_btn  { background-color: var(--def-btn-bg);
         &:hover  { background-color: var(--def-btn-bg-hvr); }
    }

    /* スマホ用ヘッダは非表示にする */
    #sp_header,
    #menu_btn {
        display: none;
    }
    #menu_overray {
        position: fixed;
        top: 0;
        width: 0;
        height: 100%;
        background-color: rgb(0 0 0 / 0);
    }
    .slide_on #menu_overray {
        width: 100%;
        background-color: rgb(0 0 0 / .4);
        z-index: 99;
    }
    .pc_img {
        display: inline;
        @media (width <= 1200px) { display: none; }
    }
    .sp_img {
        display: none;
        @media (width <= 1200px) { display: inline; }
    }

    /* ---- Tablet / SP ----*/
    @media (width <= 1200px) {

        #menu_box {
            left: auto;
            right: 0;
            z-index: 100;
            width: 0;
            height: 100%;
            opacity: 0;
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            transition: var(--def-transition);

            &.active {
                width: 256px;
                opacity: 1;
                background-color: var(--darkBlue-03);
            }
            & #nav_box {
                align-items: flex-start;
            }
        }

        #logo_box,
        #main_nav {
            display: none;
        }
        .slide_on #main_nav {
            display: block;
        }

        #main_nav {
            & > li {
                & > a {
                    justify-content: center;
                    border-bottom: 1px solid var(--darkBlue-01);

                    &:hover {
                        margin-top: 0;
                        border-radius: 0;
                    }
                }
            }
            & > li:not(.cta_btn) {
                & > a,
                & > a.active {
                    margin: 0;
                    width: 100%;
                    height: 64px;
                    color: var(--white);
                    text-align: center;
                    border-radius: 0;
                }
            }
            /* CTAボタンのみ */
            & > li:has(.inquiry_btn),
            & > li:has(.download_btn) {
                & > a {
                    margin: 0;
                    width: 100%;
                    height: 64px;
                    border-radius: 0;

                    &:hover {
                        transform: translateY(0);
                    }
                }
                & img {
                    max-height: 100%;
                }
            }
        }

        /* スマホ用ヘッダ ---- */
        #sp_header {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 3;
            display: flex;
            /*place-items: center;*/
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 64px;
            background-color: var(--gray1-01);
            border-bottom: 1px solid var(--gray1-04);

            & #sp_logo_box {
                width: 110px;
                height: 26px;
            }
            & #menu_btn {
                display: block;
                position: absolute;
                top: 0;
                right: 0;
            }
        }
    }

    /* ----------------------------------
        03-02. menu second level
    -----------------------------------*/

    ul.nav_second_level {
        visibility: hidden;
        opacity: 0;
        z-index: 10;
        position: absolute;
        top: 64px;
        left: 0;
        padding: 8px;
        width: 100%;
        max-width: var(--max-w-1500);
        max-height: 0;
        transition: var(--def-transition);
        transform-origin: top center;
        display: flex;
        justify-content: center;
        background-color: var(--gray1-01);
        border-radius: 0 0 var(--bdr-r-8) var(--bdr-r-8);

        /* Chrome / Safariのみスクロールバーの見た目をカスタマイズ */
        &::-webkit-scrollbar {
            width: 10px;
        }
        &::-webkit-scrollbar-track {
            background-color: rgb(0 0 0 / .4) !important;
        }
        &::-webkit-scrollbar-thumb {
            background-color: rgb(30 30 30 / .8);
            border-radius: 10px;
            box-shadow: inset 0 0 0 1px #555;
        }

        /* hoverだとすぐに表示してしまうため、jsでclassをon/offする */
        &.active {
            visibility: visible;
            opacity: 1;
            max-height: 88vh;
            border: 4px solid var(--blue-02);
        }
    }

    /* ---- Tablet / SP ----*/
    @media (width <= 1200px) { /* CTAボタンを3つ配置したので1200pxでメニューがロゴに被ってしまう対応 2023-11-29 saito */

        ul.nav_second_level {
            display: none;
        }
    }

    /* ----------------------------------
        03-03. mega menu
    -----------------------------------*/

    ul.nav_second_level li {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        gap: 8px;
        padding-right: 8px;

        &:last-child {
            padding-right: 0;
        }
        & a {
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            background-color: var(--white);
            border-radius: var(--bdr-r-4);
            transition: var(--def-transition);

            &:hover {
                box-shadow: var(--def-hvr-shadow);
            }
            & > div {
                position: relative;
                display: flex;
                place-items: center;
                width: 100%;
                overflow: hidden;
                aspect-ratio: 16 / 9;

                & img {
                    width: 100%;
                }
            }
            & p {
                position: relative;
                margin: 0 8px 8px;
                padding: 8px 0;
                height: calc(2.4em + 8px);
                line-height: 1.2;
                color: var(--def-txt-00);
                font-size: var(--f-s-12);
                font-weight: bold;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }
            & span {
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                padding: 4px;
                text-align: left;
                line-height: 1;
                font-size: var(--f-s-10);
                color: var(--white);
                background-color: var(--gray2-01);
                border-radius: var(--bdr-r-4) 0 0 0;

            }
        }
    }
    ul.nav_second_level li {
                    flex: 0 0 calc(100% / 7);
        &.flex_02 { flex: 0 0 calc(100% / 7 * 2); }
        &.flex_03 { flex: 0 0 calc(100% / 7 * 3); }
        &.flex_04 { flex: 0 0 calc(100% / 7 * 4); }
        &.flex_05 { flex: 0 0 calc(100% / 7 * 5); }
        &.flex_06 { flex: 0 0 calc(100% / 7 * 6); }

        & > div:not(.menu_title) { width: 100%; }

        &.flex_02 > div:not(.menu_title) { width: calc((100% - 8px) / 2); }
        &.flex_03 > div:not(.menu_title) { width: calc((100% - 16px) / 3); }
        &.flex_04 > div:not(.menu_title) { width: calc((100% - 24px) / 4); }
        &.flex_05 > div:not(.menu_title) { width: calc((100% - 32px) / 5); }
        &.flex_06 > div:not(.menu_title) { width: calc((100% - 40px) / 6); }
    }

    .menu_title {
        flex: 0 0 100%;
        height: 32px !important;
        line-height: 32px;
        font-size: var(--f-s-12);
        color: var(--white);
        text-align: center;
        border-radius: var(--bdr-r-4);
    }

    /* ----------------------------------
        03-04. mega menu background-color
    -----------------------------------*/

    ul.nav_second_level li {
        /* green-01 #2baa52 rgba(43, 170, 82, .8) */
        &:nth-child(7n+1) {
            & .menu_title { background-color: var(--green2-02); }
            & p          { border-top: 1px solid var(--green2-02); }
        }
        /* blue #2d8fb5 rgba(45,143,181,0.8) */
        &:nth-child(7n+2) {
            & .menu_title { background-color: var(--blue-02); }
            & p          { border-top: 1px solid var(--blue-02); }
        }
        /* purple #8147aa rgba(129,71,170,0.8) */
        &:nth-child(7n+3) {
            & .menu_title { background-color: var(--purple-02); }
            & p          { border-top: 1px solid var(--purple-02); }
        }
        /* red #bb2f32 rgba(187,47,50,0.8) */
        &:nth-child(7n+4) {
            & .menu_title { background-color: var(--red-01); }
            & p          { border-top: 1px solid var(--red-01); }
        }
        /* orange-01 #cd3e06 rgba(205,62,6,0.8) */
        &:nth-child(7n+5) {
            & .menu_title { background-color: var(--orange2-01); }
            & p          { border-top: 1px solid var(--orange2-01); }
        }
        /* orange-02 #ec8018 rgba(236,128,24,0.8) */
        &:nth-child(7n+6) {
            & .menu_title { background-color: var(--orange1-02); }
            & p          { border-top: 1px solid var(--orange1-02); }
        }
        /* green-02 #1a9c73 rgba(26,156,115,0.8) */
        &:nth-child(7n+7) {
            & .menu_title { background-color: var(--green1-02); }
            & p          { border-top: 1px solid var(--green1-02); }
        }
    }

    /* ----------------------------------
        03-05. hamburger menu icon
    -----------------------------------*/

    #menu_btn {
        z-index: 100;

        & input {
            display: none;
        }
    }

    .menu_button {
        display: block;
        width: 64px;
        height: 64px;
        cursor: pointer;
    }

    .hamburger_line,
    .hamburger_line::before,
    .hamburger_line::after {
        position: absolute;
        top: calc(50% - 1px);
        left: 20px;
        width: 24px;
        height: 2px;
        border-radius: 1px;
        background-color: var(--gray2-04);
        transition: var(--def-transition);
    }
    .hamburger_line::before,
    .hamburger_line::after {
        content: "";
        display: block;
        left: 0;
    }
    .hamburger_line::before {
        top: -8px;
    }
    .hamburger_line::after {
        top: 8px;
    }

    /* active */
    #hamburger_menu_button {
        transition: var(--def-transition);
    }
    #hamburger_menu.active + #hamburger_menu_button {
        transform: translateX(-256px);
        background-color: var(--darkBlue-03);

        & .hamburger_line {
            background: none;

            &::before,
            &::after {
                top: 0;
                background-color: var(--white);
            }
            &::before {
                transform: rotate(45deg) scale(1);
            }
            &::after {
                transform: rotate(-45deg) scale(1);
            }
        }
    }
}

/*----------------------------------------

	04. footer

----------------------------------------*/

@layer base {

    /* ----------------------------------
        04-01. footer
    -----------------------------------*/

    footer {
        position: sticky;
        top: 100vh;
        padding-bottom: 104px;
        width: 100%;
        background-color: var(--gray1-01);
        transition: var(--def-transition);

        /* フッタ上段 --------*/
        & > div:first-child {
            position: relative;
            height: 184px;
            background-color: var(--blue-02);

            & #footer_img {
                position: absolute;
                bottom: -8%;
                left: 50%;
                transform: translateX(-50%);
                width: 90%;
                max-width: 840px;
                z-index: 1;
            }
        }
        /* フッタ中段 --------*/
        & > div:nth-child(2) {
            display: flex;
            margin: 56px auto 40px;
            padding: 0 24px;
            max-width: var(--max-w-1196);

            & > div:first-child {
                flex: 0 0 40%;
                padding-right: 40px;
                font-size: var(--f-s-12);

                & img {
                    margin-bottom: 16px;
                    max-width: 160px;
                }
                & #footer_contact_box {
                    display: inline-block;
                    margin-top: 40px;
                    color: var(--gray2-04);
                    border-radius: 8px;
                    background-color: var(--gray1-02);

                    & > div {
                        margin: 0 16px;
                        padding: 16px;
                        border-bottom:  1px solid var(--gray1-03);

                        &:last-child {
                            border-bottom:  none;
                        }
                        & a {
                            display: block;
                            color: var(--gray2-04);

                            &::before {
                                display: none;
                            }
                        }
                    }
                    & img {
                        margin: 0 8px 8px 0;
                        width: 16px;
                        vertical-align: middle;
                    }
                    & span {
                        font-size: var(--f-s-m);
                        font-weight: bold;
                    }
                }
            }
            & > div:nth-child(2),
            & > div:last-child {
                flex: 0 0 30%;

                & a {
                    display: inline-block;
                    color: var(--def-txt-00);

                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
            & .lv_01 > li {
                margin-bottom: 16px;

                & > a {
                    font-weight: bold;

                    &::before {
                        content: "● ";
                        color: var(--blue-02);
                    }
                }
            }
            & .lv_02 > li > a {
                position: relative;
                margin: 8px 0 0 30px;
                font-size: var(--f-s-14);
                vertical-align: middle;

                &::before {
                    content: "";
                    position: absolute;
                    top: 6px;
                    left: -12px;
                    width: 8px;
                    height: 8px;
                    background: url("../img/icon_svg/icon-arrow-r-b.svg") no-repeat center center / contain;
                }
                &.open::before {
                    transform: rotate(90deg);
                }
            }
            & .lv_03 {
                margin: 4px 0 0 24px;
                padding-left: 8px;

                & > li > a {
                    font-size: var(--f-s-14);
                    color: var(--gray2-04) !important;

                    &::before {
                        content: "・";
                        color: var(--blue-02);
                    }
                }
            }
        }
        /* フッタ下段 --------*/
        & > div:nth-child(3) {
            display: flex;
            align-items: center;
            margin-inline: auto; 
            padding: 16px 24px;
            max-width: var(--max-w-1196);
            font-size: var(--f-s-12);
            border-top:  1px solid var(--gray2-01);

            & a {
                color: var(--def-txt-00);

                &:hover {
                    text-decoration: underline;
                }
            }
            & > div:nth-child(2) {
                flex: 1;
                padding-right: 24px;
                text-align: right;
            }
            & > div:last-child {
                flex: 0 0 48px;
            }
             & #top_btn {
                width: 48px;
                height: 48px;
                text-align: center;
                cursor: pointer;
                border-radius: 50%;

                &:hover {
                    box-shadow: var(--def-hvr-shadow);

                    & #top_btn_icon {
                        fill: var(--blue-03);
                    }
                }
                & #top_btn_icon {
                    width: 48px;
                    height: 48px;
                    fill: var(--blue-02);
                }
            }
        }
    }
    #thanks footer {
        padding-bottom: 0;
    }

    /*---- 下固定ボタン ----*/
    #btm_btn_box {
        position: fixed;
        bottom: -104px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 104px;
        background-color: var(--btm-btn-bg);
        transition: var(--def-transition);
        z-index: 1000;

        &.show_btn {
            bottom: 0;
        }
        & a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 240px;
            height: 64px;
            border-radius: var(--bdr-r-8);

            &:first-child {
                margin-right: 24px;
            }
            & img {
                max-width: 80%;
            }
        }
    }

    @media (width <= 1024px) {

        #footer_img {
            bottom: -4%;
        }

        footer > div:nth-child(3) > div {
            &:first-child {
                flex: 0 0 64%;
                padding-right: 24px;
            }
            &:last-child {
                padding-right: 72px;
            }
        }
    }
    /* ---- SP ----*/
    @media (width <= 699px) {

        footer > div:first-child {
            height: 96px;
        }

        footer > div:nth-child(2),
        footer > div:nth-child(3) {
            flex-wrap: wrap;

            & > div {
                flex: 0 0 100% !important;
            }
        }

        footer > div:nth-child(2) > div:first-child {
            padding-right: 0;

            & #footer_contact_box {
                display: block;
                margin: 16px 0 40px;
                width: 100%;
            }
        }
        footer > div:nth-child(3) > div {
            color: var(--gray1-01); /* ｜を背景と同じ色にして消す */

            &:nth-child(2) {
                margin-top: 24px;
                padding: 0;
                text-align: center;
            }
            &:last-child {
                margin: 16px 0;
                padding: 0;
                text-align: right !important;
            }
            & a {
                display: block;
            }
        }

        #btm_btn_box a {
            width: 48%;

            &:first-child {
                margin-right: 8px;
            }
        }
    }
}

@layer components {


}