@charset "UTF-8";

/* =========================================================
   製品・修理に関するお問い合わせ パネル (c-support-panels)
   Figma: PC node 8345:11271 / SP node 8354:13674
   ========================================================= */

.c-support-panels {
    display: flex;
    flex-direction: column;
    gap: calc(24 / var(--root-fz) * 1rem);
}

/* -------------------- パネル本体 -------------------- */
.c-support-panels__panel {
    background-color: var(--color-white-1);
    border: 1px solid var(--color-gray-3);
    padding: calc(24 / var(--root-fz) * 1rem) calc(40 / var(--root-fz) * 1rem) calc(48 / var(--root-fz) * 1rem);
}

/* 見出しのない、リンク1本だけの中央寄せパネル */
.c-support-panels__panel--center {
    display: flex;
    justify-content: center;
    padding: calc(24 / var(--root-fz) * 1rem) calc(40 / var(--root-fz) * 1rem);
}

/* -------------------- アイコン -------------------- */
.c-support-panels__ico {
    display: block;
    flex-shrink: 0;
    width: calc(40 / var(--root-fz) * 1rem);
}

.c-support-panels__ico img {
    display: block;
    width: 100%;
    height: auto;
}

/* -------------------- アイコン付きリンク（よくあるご質問） -------------------- */
.c-support-panels .c-support-panels__link {
    display: flex;
    align-items: center;
    gap: calc(4 / var(--root-fz) * 1rem);
    width: -moz-fit-content;
    width: fit-content;
}

/* アイコン〜テキスト間は 11px（gap 4px + 7px） */
.c-support-panels__link .c-support-panels__ico {
    margin-right: calc(7 / var(--root-fz) * 1rem);
}

/* flex 配置のため矢印アイコンの baseline 補正を無効化 */
.c-support-panels__link .c-btn-2__ico {
    top: 0;
}

/* -------------------- パネル見出し -------------------- */
.c-support-panels__head {
    display: flex;
    align-items: center;
    gap: calc(9 / var(--root-fz) * 1rem);
    padding-block: calc(12 / var(--root-fz) * 1rem);
}

/* -------------------- パネル本文 -------------------- */
.c-support-panels__txt {
    padding-bottom: calc(24 / var(--root-fz) * 1rem);
}

/* -------------------- パネル内リンクリスト -------------------- */
/* 上下に罫線を引く（module.css の c-list-link__item は上罫線のみ） */
.c-support-panels__links .c-list-link__item {
    border-bottom: 1px solid var(--color-gray-3);
}

/* -------------------- 下部の枠線ボタン -------------------- */
.c-support-panels .c-support-panels__btn {
    width: 100%;
}

/* -------------------- SP -------------------- */
@media screen and (max-width: 767px) {
    .c-support-panels {
        gap: 24px;
    }

    .c-support-panels__panel {
        padding: 24px 16px 32px;
    }

    .c-support-panels__panel--center {
        padding: 24px 16px;
    }

    .c-support-panels__ico {
        width: 40px;
    }

    .c-support-panels .c-support-panels__link {
        gap: 4px;
    }

    .c-support-panels__link .c-support-panels__ico {
        margin-right: 7px;
    }

    .c-support-panels__head {
        gap: 9px;
        padding-block: 12px;
    }

    .c-support-panels__txt {
        padding-bottom: 24px;
    }

    /* 縦積みになるため、隣り合う罫線が二重にならないようにする */
    .c-support-panels__links .c-list-link__item:not(:last-child) {
        border-bottom: none;
    }
}