@charset "utf-8";

/*
	先に読み込ませる用 css

    01. レイヤー設定

    02. root
    ├ 02-01. 基本色
    └ 02-02. パーツ毎

    03. reset

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

	05. nav
    ├ 05-01. main menu
    └ 05-02. button

	06. container
    └ 06-01. box

	07. contents parts
    ├ 07-01. main image
    ├ 07-02. title
    ├ 07-03. logo slider
    └ 07-04. card list

	08. footer
    ├ 08-01. footer
    └ 08-02. フローティングバナー
 */

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

	01. レイヤー設定

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

@layer 
    reset,        /* リセットスタイル */
    base,         /* 基本なスタイル */
    components,   /* ボタン、カードなどのコンポーネントスタイル */
    layouts,      /* レイアウト別のスタイル */
    utilities,    /* 単一目的の調整用クラス */
    overwrite;    /* それよりさらに上書きする緊急時の上書き用クラス */

:root {

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

	02. root

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

    /* ----------------------------------
        02-01. 基本色
    -----------------------------------*/

    /* blue --------*/
    --blue-01: #59bde0;
    --blue-02: #39a9d6;
    --blue-03: #2d8fb5;
    --blue-04: #036eb8;

    /* dark-blue --------*/
    --darkBlue-00: #5991aa;
    --darkBlue-01: #556e7c;
    --darkBlue-02: #354e5d;
    --darkBlue-03: #2d424f;

    /* orange1 --------*/
    --orange1-00: #ffeab3; /* storong 蛍光ペン */
    --orange1-01: #efba2c;
    --orange1-02: #eaa615;
    --orange1-03: #ec8018;

    /* orange2 --------*/
    --orange2-01: #e88645;
    --orange2-02: #e06827;
    --orange2-03: #cd3e06;

    /* red --------*/
    --red-01: #e96165;
    --red-02: #e24145;
    --red-03: #bb2f32;
    --red-04: #f00;

    /* gray1 --------*/
    --gray1-01: #f1f5f5;
    --gray1-02: #ecf1f1;
    --gray1-03: #bdc3c6;
    --gray1-04: #e1e6e6;

    /* gray2 --------*/
    --gray2-01: #acb9b8;
    --gray2-02: #95a5a4;
    --gray2-03: #7f8c8b;
    --gray2-04: #454b4b;
    --gray2-05: #282c2c;

    /* black --------*/
    --black: #000;

    /* white --------*/
    --white: #fff;

    /* ----------------------------------
        02-02. パーツ毎
    -----------------------------------*/

    /* 共通 --------*/
    --max-w-1500: 1500px;      /* ヘッダの最大幅 */
    --max-w-1196: 1196px;      /* コンテンツの最大幅 */
    --max-w-980: 980px;        /* 左右画像リストの最大幅 */

    --def-txt-00: #282C2C; /* デフォルトテキストカラー */
    --def-txt-01: #454B4B; /* 本文薄い */
    --def-txt-02: #7f8c8b; /* 本文極薄 */

    /* NEW 共通フォントサイズ --------*/
    --f-s-10:  0.63rem;  /* 10px */
    --f-s-12:  0.75rem;  /* 12px */
    --f-s-14:  0.88rem;  /* 14px メインメニュー */
    --f-s-18:  1.125rem; /* 18px table h5 */

    --f-s-s:  0.707rem;  /* 11.312px 白銀比 */
    --f-s-m:       1rem; /* 16px 白銀比 デフォルト */
    --f-s-l:    1.43rem; /* 23px 白銀比 h4 */
    --f-s-ll:  2rem;     /* 32px 白銀比 h2-3 */
    --f-s-xl:  2.81rem;  /* 45px 白銀比 h1 */
    --f-s-xxl: 4rem;     /* 64px 白銀比 */

    --bdr-r-8: 8px;      /* 角丸 8px */

    --def-shadow: 0 2px 6px rgba(0,0,0,.1);      /* box shadow */
    --def-hvr-shadow: 0 2px 16px rgba(0,0,0,.5); /* hover shadow */
    --def-transition: all .3s ease-in-out;       /* デフォルトtransition */
}

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

	03. reset

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

@layer 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%;
        aspect-ratio: attr(width) / attr(height);
    }
}

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

	04. base

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

@layer base {

    /* ----------------------------------
        04-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;
    }

    /* ----------------------------------
        04-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; }
        }
    }

    /* ----------------------------------
        04-03. 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); }
}

    /* ----------------------------------
        04-04. etc
    -----------------------------------*/
@layer overwrite {

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

    /* 改行 */
    .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 ----*/
    }
}

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

	05. nav

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

@layer base {

    /* ----------------------------------
        05-01. main menu
    -----------------------------------*/

    #nav_box {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 64px;
        background-color: var(--gray1-01);
        border-bottom: 1px solid var(--gray1-03);
        z-index: 10;

        & #nav_innerbox {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 auto;
            padding: 0 24px;
            max-width: var(--max-w-1500);
            height: 100%;

            & #logo_box {
                flex: 0 0 240px;
                display: flex;
                align-items: center;
            }
            & #main_nav {
                display: flex;
                height: 100%;

                & li {
                    height: 100%;

                    & a {
                        display: flex;
                        align-items: center;
                        height: 100%;
                        transition: var(--def-transition);
                    }
                    &:not(.h_cta) a {
                        padding: 0 16px;
                        color: var(--def-txt-00);
                        font-size: var(--f-s-14);

                        &:hover {
                            color: var(--white);
                            background-color: var(--blue-02);
                        }
                    }
                    &.h_cta a {
                        padding: 0 8px;

                        & img {
                            min-width: 160px;
                            max-height: 100%;
                        }
                    }
                }
            }
            /* スマホ用ボタン（ハンバーガーアイコン） */
            & .menu_btn_box {
                display: none; /* PCでは非表示 */

                & .menu-toggle {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    width: 30px;
                    height: 21px;
                    background: transparent;
                    border: none;
                    cursor: pointer;

                    & span {
                        width: 100%;
                        height: 3px;
                        background-color: var(--def-txt-00);
                        transition: var(--def-transition);
                    }
                }
            }
        }
    }

    /* メディアクエリ：画面サイズが1024px以下の場合 */
    @media (width <= 1024px) {

        #nav_box {
            & #nav_innerbox {
                padding: 0;

                & #logo_box {
                    flex: 0 0 200px;
                    justify-content: center;
                }
                & .menu_btn_box {
                    display: block; /* スマホで表示 */
                    width: 48px;
                    text-align: center;

                    & .menu-toggle.active {

                        & span:nth-child(1) {
                            margin-top: 8px;
                            width: 160%;
                            transform: rotate(45deg);
                        }
                        & span:nth-child(2) {
                            margin-top: -8px;
                            width: 160%;
                            transform: rotate(-45deg);
                        }
                        & span:nth-child(3) {
                            opacity: 0;
                        }
                    }
                }

                & #main_nav {
                    display: none;
                    width: 100%;
                    position: absolute;
                    top: 64px; /* ヘッダーの高さに合わせて調整 */
                    left: 0;
                    background-color: var(--gray1-02);

                    &.active {
                        display: block;
                        height: auto;
                    }
                    & li {
                        height: 64px;
                        border-top: 1px solid var(--gray1-03);

                        & a {
                            justify-content: center;
                        }
                    }
                }
                & #menu_overray {
                    display: none;
                    position: fixed;
                    top: 64px;
                    width: 100%;
                    height: calc(100% - 64px);
                    background-color: rgb(0 0 0 / .6);

                    &.active {
                        display: block;
                    }
                }
            }
        }
    }

    /* ----------------------------------
        05-02. button
    -----------------------------------*/

    .btn_box {
        margin-top: 40px;
        padding: 0 16px;
        text-align: center;
    }
    [class^="btn_"]:not(.btn_box) {
        position: relative;
        display: inline-block;
        padding: 16px 48px;
        min-height: 56px;
        line-height: 1.6;
        text-align: center;
        color: var(--white);
        background-color: var(--darkBlue-01);
        border-radius: var(--bdr-r-8);
        border: none;
        cursor: pointer;
        vertical-align: middle;
        box-shadow: var(--def-shadow);
        transition: var(--def-transition);

        & img,
        & svg {
            position: absolute;
            top: 50%;
            right: 8px;
            width: 16px;
            fill: var(--white);
            transform: translateY(-50%);
        }
        &:hover {
            transform: translateY(-2px);
            background-color: var(--darkBlue-02);
            box-shadow: var(--def-hvr-shadow);
        }
    }

    /* CTA button */
    .cta_box,
    #btm_cta_box {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin: 64px auto 0;
        padding: 32px;
        max-width: var(--max-w-980);
        background-color: var(--gray1-01);
    }
    section {
        &:nth-child(odd) {
            .cta_box,
            #btm_cta_box {
                background-color: var(--gray1-04);
            }
        }
    }
    .cta_btn {
        display: block;
        position: relative;
        margin: 0 auto;
        padding: 8px;
        width: 88%;
        height: 72px;
        border-radius: var(--bdr-r-8);
        transition: var(--def-transition);
        box-shadow: var(--def-shadow);

        &:hover {
            transform: translateY(-2px);
            box-shadow: var(--def-hvr-shadow);
        }
        & img {
            width: 100%;
            max-height: 100%;
        }
    }

    .orange_btn {
        background-color: var(--orange2-01);

        &:hover {
            background-color: var(--orange2-02);
        }
    }
    .blue_btn {
        background-color: var(--blue-02);

        &:hover {
            background-color: var(--blue-03);
        }
    }

    @media (width <= 699px) {

        #btm_cta_box {
            display: block;

            & > div:first-child {
                margin-bottom: 24px;
            }
        }
    }
}
    
 /*----------------------------------------

	06. container

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

@layer components {

    /* ----------------------------------
        06-01. box
    -----------------------------------*/

    main {
        margin-inline: auto;
        padding-top: 64px;
        max-width: var(--max-w-1500);
    }
    section {
        position: relative;
        padding: 32px;
        scroll-margin-top: 80px;
        background: url(../../common/img/sec-03.svg) top center / 100% auto no-repeat;

        &:nth-child(odd) {
            background: url(../../common/img/sec-04.svg) top center / 100% auto no-repeat var(--gray1-01);
        }
    }

    .txt_gray_box {
        position: relative;
        margin: 40px auto 64px;
        padding: 32px;
        background-color: var(--gray1-01);
        max-width: var(--max-w-980);
        font-size: var(--f-s-m);
        color: var(--gray2-04);
        line-height: 1.8;
        text-align: justify;
        word-break: break-all;
    }

    strong {
        background: linear-gradient(transparent 60%, var(--orange1-00) 60%);
    }

    @media (width <= 699px) {

        section {
            padding: 16px;
        }
    }
}

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

	07. contents parts

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

@layer components {

    /* ----------------------------------
        07-01. main image
    -----------------------------------*/

    #main_img {
        position: relative;
        display: flex;
        align-items: center;
        margin: 0 auto;
        max-width: var(--max-w-1500);
        background-image: none;

        & > div {
            position: relative;

            &:first-child {
                flex: 1;
                z-index: 1;
            }
            &:last-child p {
                font-size: var(--f-s-12);
                text-align: center;
            }
        }
        & h1 {
            margin: 0 auto 24px;
            padding: 32px 0;
            width: 100%;
            line-height: 1.4;
            letter-spacing: 4px;
            border-bottom: 1px solid var(--gray2-04);

            & span {
                display: inline-block;
                font-weight: bold;
            }
        }
        /* CTAボタンエリア */
        & #main_cta_box {
            display: flex;
            justify-content: center;
            margin-top: 32px;
            padding-bottom: 40px;
            z-index: 1;

            & > div {
                flex: 0 0 50%;
            }
        }
        /* main image */
        #main_image {
            width: 100%;
            height: auto;
        }
    }

    @media (width <= 1024px) {

    }

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

        #main_img {
            flex-direction: column;

            & > div {
                flex: 0 0 100%;
            }
            & > div:first-child {
                order: 2;
            }
            & > div:last-child {
                order: 1;
            }
            & #main_cta_box {
                display: block;

                & > div:last-child {
                    margin-top: 24px;
                }
                & .cta_btn {
                    width: 100%;
                }
            }
        }
    }

    /* ----------------------------------
        07-02. title
    -----------------------------------*/

    h2 {
        max-width: var(--max-w-980);
        text-align: center;
        margin: 120px auto 0;
        padding: 40px 24px 0;

        & span {
            display: inline-block;
            padding-bottom: 12px;
            border-bottom: 4px solid var(--blue-02);
        }
        & + p {
            margin: 32px auto 0;
            padding: 0 24px;
            max-width: var(--max-w-980);
            text-align: center;
        }
    }

    @media (width <= 1024px) {
        h2 {
            margin: 0 auto;
            padding: 64px 0 0;
            font-size: var(--f-s-l);
        }
    }

    /* ----------------------------------
        07-03. logo slider
    -----------------------------------*/

    .slider_container {
        margin-top: 32px;
        overflow: hidden;

        & .slider {
            width: 100%;
            position: relative;

            & .slides {
                display: flex;
                align-items: center;
                width: calc((16.6% * 6) * 2); /* calc((16.6% * n) * 2) nにロゴの数を設定する */
                height: 80px;
                animation: slide 30s linear infinite;

                &.allow-pause:hover {
                    animation-play-state: paused;
                }
                & .slide {
                    flex-basis: 50%;
                    display:flex;
                    align-items: center;

                    & div {
                        flex-basis: 16.6%;

                        & a {
                            display: block;
                            transition: var(--def-transition);
                        }
                        & a:hover {
                            transform: translateY(-8px);
                        }
                    }
                    & img {
                        max-width: 100%;
                    }
                }
            }
        }
    }
    @keyframes slide {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    }

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

        .slides {
            width: calc((33% * 9) * 2) !important;

            & div {
                flex-basis: 33% !important;
            }
        }
    }

    /* ----------------------------------
        07-04. card list
    -----------------------------------*/

    .card_list {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 16px;
        margin: 40px auto;

        & > a,
        & > div {
            padding-bottom: 16px;
            border-radius: var(--bdr-r-8);
            transition: var(--def-transition);
        }
        & > a {
            color: var(--def-txt-00);
            box-shadow: var(--def-shadow);
            background-color: var(--gray1-01);

            &:hover {
                transform: translateY(-2px);
                box-shadow: var(--def-hvr-shadow);
            }
            & .card_thumb {
                background-color: var(--white);
            }
            & .card_content { 
                padding: 0 8px;
            }
        }
        & .card_thumb {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            aspect-ratio: 16 / 9;
            background-color: var(--gray1-01);
            border-radius: var(--bdr-r-8);
            overflow: hidden;

            & img {
                width: 100%;
                height: auto;
                max-width: 100%;
                max-height: 100%;
                border-radius: var(--bdr-r-8) var(--bdr-r-8) 0 0;
            }
        }
        & h3 {
            position: relative;
            padding: 16px 4px 0;
            font-size: var(--f-s-18);
            text-align: center;
        }
        & .card_content {
/*            & p {
                margin-top: 12px;
                color: var(--gray2-04);
                font-size: var(--f-s-14);
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 4;
                overflow: hidden;
            }*/
            /*&.dot_box > p {*/
            & > p {
                position: relative;
                display: block;
                margin: 12px 16px 0 16px;
                padding: 2px 0 12px 0;
                font-size: var(--f-s-14);
                border-bottom: 1px solid var(--gray1-03);
                overflow: visible;

                &:last-child {
                    border-bottom: none;
                }
                &::before {
                    content: "●";
                    position: absolute;
                    top: 0;
                    left: -12px;
                    color: var(--blue-02);
                }
            }
        }
    }
    .clm_6 {
        & > a,
        & > div { flex: 0 0 calc((100% / 6) - 16px); }
    }
    .clm_5 {
        & > a,
        & > div { flex: 0 0 calc(20% - 16px); }
    }
    .clm_4 {
        & > a,
        & > div { flex: 0 0 calc(25% - 16px); }
    }
    .clm_3 {
        & > a,
        & > div { flex: 0 0 calc(33.33% - 16px); }
    }
    .clm_2 {
        & > a,
        & > div { flex: 0 0 calc(50% - 16px); }
    }

    /* solution list */
    .solution_list {
        & h3 {
            &:before {
                content: "";
                position: absolute;
                bottom: -54px;
                left: 50%;
                margin-left: -16px;
                border: 16px solid transparent;
                border-top: 16px solid var(--gray2-01);
                z-index: 2;
            }
            &:after {
                content: "";
                position: absolute;
                bottom: -24px;
                left: 50%;
                margin-left: -8px;
                width: 16px;
                height: 10px;
                background-color: var(--gray2-01);
                z-index: 2;
            }
        }
        & h4 {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 40px 0 0 0;
            padding: 0 48px;
            min-height: 4.2rem;
            font-size: var(--fs-l);
            font-weight: bold;
            color: var(--white);
            text-align: center;
            background-color: var(--blue-02);
            border-radius: var(--bdr-r-8) var(--bdr-r-8) 0 0;

            & img {
                position: absolute;
                top: calc(50% - 18px);
                left: 12px;
                max-width: 32px;
            }
        }
        & .card_content {
            padding: 0 0 16px 0;
            border-radius: 0 0 var(--bdr-r-8) var(--bdr-r-8);
            background-color: var(--gray1-01);

            /*&.dot_box > p {*/
            & > p {
                margin: 12px 16px 0 2.6rem;

                &::before {
                    left: -19px;
                }
            }
        }
    }

    /* odd */
    section:nth-child(odd) {
        & .card_list {
            & .card_thumb {
                background-color: var(--white);
            }
        }
        & .solution_list {
            & .card_content {
                background-color: var(--white);
            }
        }
    }

    /* ---- tablet ----*/
    @media (width <= 1024px) {

        .card_list {
            flex-wrap: nowrap;
            justify-content: flex-start;
            overflow-x: auto;
        }
        .clm_6, .clm_5, .clm_4 {
            & > a,
            & > div {
                flex: 0 0 calc(33.33% - 16px);
            }
        }
        .num_list > div {
            flex: 0 0 calc(64% - 16px);
        }
    }
    /* ---- SP ----*/
    @media (width <= 699px) {

        .card_list {
            & > a,
            & > div {
                flex: 0 0 calc(88% - 16px);
            }
        }

        .features_list {
            margin: 24px 16px;

            & p {
                padding-left: 0;
            }
            & div {
                margin: 16px 0 0;
                padding: 12px;
            }
        }

        .num_list {
            & > div {
                flex: 0 0 calc(88% - 16px);

                & .card_content {
                    & h4,
                    & p {
                        font-size: var(--f-s-m);
                    }
                }
            }
        }
    }

}

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

	08. footer

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

@layer base {
    
    /* ----------------------------------
        08-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;
                height: auto;
                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("../../common/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);
                }
            }
        }
    }

    @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;
            }
        }
    }

    /* ----------------------------------
        08-02. フローティングバナー
    -----------------------------------*/

    #floating_banner {
        display: none;
    }
}