/* =============================================
FC Apps Direct - Product LP Base Styles
File: products-base.css
Purpose: 50+ 製品LPで共通して使うベースCSS
個別製品用のproduct-xxxx.css を追加読み込み
以前のproducts-base.cssの内容を統合！2026.05.15
   ============================================= */

/* ------------------------------
0. CSS Variables
   ------------------------------ */
:root {
    --main-blue: rgb(0, 146, 215);
    --main-blue01: rgb(0, 115, 168);
    --sub-white: #ffffff;
    --sub-gray: #f5f7f9;
    --sub-gray01: #333;
    --text-main: #111;
    --text-sub: #555;
    --radius: 20px;
    --inner-width: 1200px;

    --font-12: 0.75rem;
    --font-13: 0.8125rem;
    --font-14: 0.875rem;
    --font-15: 0.9375rem;
    --font-16: 1rem;
    --font-18: 1.125rem;
    --font-20: 1.25rem;
    --font-24: 1.5rem;
    --font-32: 2rem;
    --font-40: 2.5rem;
}

/* ------------------------------
1. Reset / Base
   ------------------------------ */
html,
body {
    margin: 0;
    padding: 0;
    font-family: 'Zen Kaku Gothic Antique', 'Yakuhanjp', sans-serif;
    color: #222;
    line-height: 1.7;
    background: #fff;
}

img:not(.navbar-brand img) {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

section {
    padding: 80px 0;
}

/* ------------------------------
2. Utility classes
   ------------------------------ */
.container-narrow {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}

.text-center {
    text-align: center;
}

.text-white {
    color: #fff;
}

.mb-40 {
    margin-bottom: 40px;
}

.mb-60 {
    margin-bottom: 60px;
}

/* ------------------------------
3. Section Titles
   ------------------------------ */
.sec-title {
    font-size: 2.2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 40px;
    color: #0092d7;
}

.sec-lead {
    font-size: 1.2rem;
    text-align: center;
    color: #555;
    margin-bottom: 60px;
}

/* ------------------------------
4. Buttons
   ------------------------------ */
.btn-base {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 26px;
    gap: 8px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px;
    transition: 0.3s ease;
    cursor: pointer;
    text-decoration: none;
}

.btn-blue {
    background: #0092d7;
    color: #fff;
}

.btn-blue:hover {
    opacity: .85;
    transform: translateY(-2px);
}

/* ------------------------------
5. Card Layouts
   ------------------------------ */
.card-grid {
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.card-base {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* ------------------------------
6. Fade-in motions
   ------------------------------ */
.fadein {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .8s ease, transform .8s ease;
}

.fadein.show {
    opacity: 1;
    transform: translateY(0);
}

/* ------------------------------
7. Related Products
   ------------------------------ */
.related-products {
    background: #f7fafd;
    padding: 80px 0;
}

.related-products-list {
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin-top: 40px;
}

.related-item {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    text-decoration: none;
    color: #222;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: 0.3s ease;
}

.related-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}


/* ===============================
共通見出し
=============================== */
.gradHead {
    font-size: var(--font-32);
    font-weight: 700;
    text-align: center;
    margin-bottom: 60px;
    line-height: 1.4;
}

/* ===============================
environment
=============================== */
.center-table {
    display: flex;
    justify-content: center;
}

.env-table {
    width: 100%;
    max-width: 800px;
    border-collapse: collapse;
}

.env-table th,
.env-table td {
    padding: 16px;
    border: 1px solid #ddd;
}

.env-table th {
    width: 160px;
    background: #f0f3f6;
    text-align: left;
}


/* ===============================
LP独自追随ヘッダー制御
=============================== */
.lp-sub-header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 900;
    padding: 14px 20px;
    transition: top 0.25s ease;
}

.lp-sub-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
}

.lp-sub-header.fixed {
    position: fixed;
    top: 0;
    transition: top 0.25s ease, background 0.25s ease;
}

.lp-sub-header.no-transition {
    transition: none !important;
}

.lp-right {
    display: flex;
    align-items: center;
    gap: 1.5em;
    font-size: clamp(0.813rem, 0.632rem + 0.38vw, 0.938rem);
}

.lp-nav {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.lp-nav a {
    padding-inline: 0.75em;
}

.lp-header-btns {
    display: flex;
    gap: 8px;
}

.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 20px;
    font-size: var(--font-14);
    font-weight: 600;
    line-height: 1;
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
    color: currentColor !important;
}

.lp-btn.btn-hover {
    transition:
        background-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.2s ease;
}

@media (any-hover: hover) {

    .lp-btn.btn-hover:hover,
    .lp-btn.btn-hover:focus {
        transform: translateY(-1px);
        box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.25);
    }
}

.lp-btn-request {
    color: #fff;
    background-color: var(--main-blue);
}

.lp-btn-contact {
    color: #fff;
    background-color: #333;
}


/* =====================================
LP 共通ブロック
===================================== */

.lp-section {
    /* padding: 100px 30px !important; */
    padding-block: min(12%, 6em);
}

.lp-block-inner {
    width: 90%;
    max-width: 1080px;
    margin-inline: auto;
}

.lp-block-title {
    margin-bottom: 1.5em;
    font-size: clamp(1.55rem, 1.3rem + 1.1vw, 2.3rem);
    font-weight: 700;
    text-align: center;
    line-height: 1.4;
}

.lp-block-title.has-line::after {
    content: "";
    display: block;
    width: 50px;
    height: 1px;
    margin: 16px auto 0;
    background: var(--main-blue, currentColor);
}

.lp-inner-small {
    width: 85%;
    margin-inline: auto;
}

.lp-inner {
    width: 90%;
    margin-inline: auto;
}

.lp-block-size-base {
    max-width: 1080px;
}

.lp-block-size-large {
    max-width: 1440px;
}


/* ===== コンポーネント ===== */
.bg-sub-gray01 {
    background: var(--sub-gray01);
}

.bg-sub-gray {
    background: var(--sub-gray);
}

.bg-white {
    background: #fff;
}

.color-white {
    color: #fff;
}

.c-grid {
    display: grid;
}

.c-grid-col-2 {
    grid-template-columns: repeat(2, 1fr);
}

.c-grid-col-3 {
    grid-template-columns: repeat(3, 1fr);
}

.c-grid-col-4 {
    grid-template-columns: repeat(4, 1fr);
}

.c-grid-col-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(var(--max-width), 1fr));
}

.c-gap-1 {
    gap: 1rem;
}

.c-gap-2 {
    gap: 2rem;
}

.c-gap-3 {
    gap: 3rem;
}

.c-hover-item {
    transition: opacity 0.3s;
}

@media (any-hover: hover) {

    .c-hover-item:hover,
    .c-hover-item:focus {
        opacity: 0.75;
    }
}

/* ===== メインビジュアル ====== */
.lp-main {
    /* width: 100%; */
    /* overflow: hidden; */
    padding-top: 5.7rem;
    background-size: cover;
    position: relative;
}

.lp-main-visual>img {
    width: 100%;
}

.lp-main-inner {
    width: 90%;
    margin-inline: auto;
    max-width: var(--main-max-width);
}

.lp-main-content-wrapper {
    display: grid;
    grid-template-columns: var(--main-content-width, auto) var(--main-image-width, auto);
    align-items: center;
}

.lp-main-content {
    /* position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -40%);
  color: #fff;
  max-width: 750px;
  padding: 1.2rem 1rem 0; */

}

.lp-main-catch {
    margin-block: 1.15em 0.7em;
    font-size: clamp(1.4rem, 0.18rem + 2.75vw, 2.65rem);
    line-height: 1.4;
    letter-spacing: -0.05rem;
    font-weight: bold;
}

.lp-main-lead {
    margin-block: 2.5em 1.5em;
    line-height: 1.9;
    font-size: clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem);
    font-weight: 500;
}

.pdlogo {
    display: flex;
}

.pdlogo img {
    width: var(--pc-width, unset);
}

/* ======= メインビジュアルCTA ======= */
.lp-mv-cta {
    padding-block: 1.5rem 1.3rem;
    display: flex;
    justify-content: center;
    gap: 16px;
    color: #fff;
}

.lp-mv-cta .lp-btn {
    flex: 1;
    max-width: 15em;
}

.lp-btn-large {
    height: 3.8rem;
    font-size: var(--font-18);
    letter-spacing: 0.04em;
    /* box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); */
}


.lp-mv-follow-banner {
    position: fixed;
    right: 0px;
    bottom: 0px;
    z-index: 50;
    opacity: 0;
    transform: translateY(20px);
    display: grid;
    justify-content: flex-end;
    transition: opacity 0.4s ease, transform 0.4s ease, bottom 0.4s ease, visibility 0.3s ease;
}

.lp-mv-follow-banner.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.lp-mv-follow-banner.is-scrolled {
    bottom: 80px;
    /* scrollTopの矢印刁E*/
}

/* .lp-mv-follow-banner.is-fixed {
  position: fixed;
  right: 0;
  bottom: auto;
  top: auto;
} */

.lp-mv-follow-banner:not(.is-visible) {
    opacity: 0;
    transform: translateY(20px);
}

.lp-mv-follow-banner.is-bottom {
    opacity: 0;
    visibility: hidden;
}

/* ===== 追随バナー ===== */
.lp-mv-follow-banner a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* padding: 24px 28px; */
    /* background: var(--sub-gray); */
    color: #333;
    font-size: var(--font-16);
    font-weight: 600;
    text-decoration: none;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.lp-mv-follow-banner a:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}

/* =========================
パンくず
========================= */
.lp-breadcrumb-wrap {
    width: 100%;
    position: relative;
    z-index: 20;
}

.lp-breadcrumb-in-mv .breadcrumb {
    margin: 0;
    padding: 0 !important;
}

.lp-breadcrumb-in-mv .breadcrumb-item,
.lp-breadcrumb-in-mv .breadcrumb-item a,
.lp-breadcrumb-in-mv .breadcrumb-item+.breadcrumb-item::before {
    color: #fff;
    font-size: var(--font-13);
    font-weight: 400;
}

/* ======= メーカー表記 ======= */
.lp-main-partner {
    font-size: var(--font-14);
    font-weight: 500;
    color: rgba(0, 0, 0, 0.75);
    line-height: 1.4;
    white-space: nowrap;
    padding: 0 1em 1em 1em;
}

.lp-main-partner.is-right {
    text-align: right;
}


/* ====== problem ====== */
.lp-problem {
    padding-bottom: 0;
    padding-inline: 20px;
}

.lp-problem-inner {
    max-width: 1080px;
    margin-inline: auto;
}

.lp-problem-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* gap: 64px; */
    align-items: flex-end;
}

.lp-problem-visual {
    /* position: absolute;
  right: 0;
  width: calc((100% - 64px) / 2);
  pointer-events: none; */
    display: grid;
    justify-content: center;
}

.lp-problem-visual img {
    display: block;
    height: auto;
}

.lp-problem-list {
    padding-left: 0;
    /* bootstrap打消し */
    padding-bottom: min(10%, 5rem);
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.lp-problem-list li {
    background: #fff;
    padding: 24px 28px;
    border-radius: 16px;
    font-size: clamp(1rem, 0.82rem + 0.38vw, 1.125rem);
    font-weight: 500;
    line-height: 1.7;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
    position: relative;
}

.product-detail .lp-problem-list li::after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 14px 0 0 20px;
    border-color: #fff transparent transparent transparent;
    transform: translateX(-50%);
}

.product-detail .lp-problem-list li:nth-child(1) {
    transform: translateX(0);
}

.product-detail .lp-problem-list li:nth-child(2) {
    transform: translateX(24px);
}

.product-detail .lp-problem-list li:nth-child(3) {
    transform: translateX(48px);
}

/* ====== featureできること====== */
.lp-realize {
    position: relative;
}

.lp-realize-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 1.5em 3em;
    align-items: start;
}

.lp-realize-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.lp-realize-heading {
    /* font-size: 1.7rem; */
    font-size: clamp(1.25rem, 1.047rem + 0.86vw, 1.75rem);
    font-weight: 600;
    line-height: 1.5;
}

.lp-realize-lead {
    font-size: var(--font-18);
    font-weight: 500;
    line-height: 1.8;
    color: #333;
}

.lp-realize-visual {
    position: relative;
}

.lp-realize-movie {
    aspect-ratio: 16/9;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    width: 100%;
}

.lp-realize-movie iframe {
    width: 100%;
    height: 100%;
}



/* ====== feature特徴====== */
/* .lp-feature {
  padding: 120px 0;
} */

.lp-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 64px 48px;
}

.lp-feature-item {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lp-feature-image {
    width: 100%;
    height: auto;
}

.lp-feature-image img {
    border-radius: 10px;
    margin-inline: auto;
}

.lp-feature-image.is-3x2 {
    aspect-ratio: 3/2;
}

.lp-feature-image.is-3x2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.lp-feature-item h3 {
    margin: 0;
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.4;
}

.lp-feature p {
    font-size: 1.05rem;
    line-height: 1.8;
}

/* ====== price料金体系====== */
.lp-price {
    overflow: hidden;
}

/* 既存スタイル */
.lp-price-order-flow-text {
    padding: 0.75em 1em;
    margin: 0 auto 2.5rem;
    font-size: clamp(0.938rem, 0.811rem + 0.54vw, 1.25rem);
    font-weight: bold;
    text-align: center;
    background-color: var(--main-blue);
    color: #fff;
    width: 100%;
}

/* =========================
   注文フロー
========================= */
.lp-order-flow-wrap {
    width: 100%;
}

.lp-order-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.25rem;
    position: relative;
    background: #f5f5f5;
    border-radius: 20px;
}

/* =========================
   Step
========================= */
.lp-order-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    min-width: 120px;
}

.lp-order-step-no {
    margin: 0 0 0.75rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--main-blue);
    line-height: 1;
}

.lp-order-icon {
    width: 64px;
    height: 64px;
    border: 3px solid var(--main-blue);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--main-blue);
    font-size: 2rem;
    background: #fff;
}

.lp-order-text {
    margin: 1rem 0 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.7;
    text-align: left;
    color: #111;
}

/* =========================
   矢印
========================= */
.lp-order-arrow {
    color: var(--main-blue);
    font-size: 1.4rem;
    transform: translateY(-8px);
    flex-shrink: 0;
}

/* =========================
   ご利用開始
========================= */
.lp-order-start {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--main-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.4;
    position: relative;
    flex-shrink: 0;
}

/* 破線削除 */
.lp-order-start::before {
    display: none;
}

/* =========================
   タブレット
========================= */
@media (min-width: 992px) {

    .lp-main .lp-breadcrumb-in-mv {
        padding: 0 0 0 1.3em !important;
        margin: 0;
    }

}

@media screen and (max-width: 991px) {

    .lp-order-flow {
        gap: 2rem 1rem;
        padding: 2rem 1rem 3rem;
    }

    .lp-order-step {
        min-width: calc(50% - 1rem);
    }

    .lp-order-arrow {
        display: none;
    }

    .lp-order-start {
        width: 100px;
        height: 100px;
        font-size: 1.2rem;
        order: 10;
    }

}

/* =========================
   SP
========================= */
@media screen and (max-width: 767px) {

    .lp-order-flow {
        flex-direction: column;
        align-items: stretch;
        padding: 0 1rem;
        gap: 2rem;
    }

    /* Step全体 */
    .lp-order-step {
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 1rem;
        padding-left: 5.5rem;
        min-height: 72px;
    }

    /* Step番号 */
    .lp-order-step-no {
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
        font-size: 0.95rem;
    }

    /* アイコン */
    .lp-order-icon {
        width: 58px;
        height: 58px;
        min-width: 58px;
        font-size: 1.75rem;
        position: absolute;
        left: 0;
        top: 22px;
    }

    /* 黒文字 */
    .lp-order-text {
        margin: 0;
        font-size: 1.2rem;
        line-height: 1.7;
        text-align: left;
    }

    /* 利用開始 */
    .lp-order-start {
        width: 100px;
        height: 100px;
        margin: 0 auto;
        font-size: 1.2rem;
        order: unset;
    }


    /* SPでは下矢印 */
    .lp-order-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin: -0.5rem 0;
        transform: none;
        font-size: 1.25rem;
        line-height: 1;
    }

    .lp-order-arrow i::before {
        content: "\f078";
    }
}

/* ====== case導入事例====== */
.lp-case {
    position: relative;
}

.lp-case-grid.grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.lp-case-grid.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.lp-case-grid.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 1200px) {

    .lp-case-grid.grid-cols-4,
    .lp-case-grid.grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================
   カード
========================= */
.lp-case-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.03),
        0 12px 32px rgba(0, 0, 0, 0.03);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ホバー */
.lp-case-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.06),
        0 20px 48px rgba(0, 0, 0, 0.06);
}

.lp-case-img {
    overflow: hidden;
}

.lp-case-img img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.lp-case-card:hover .lp-case-img img {
    transform: scale(1.02);
}

/* =========================
   事例ストエリア
========================= */
.lp-case-title,
.lp-case-company,
.lp-case-lead {
    padding-inline: 2rem;
}

.lp-case-title {
    margin-top: 1.25rem;
    font-size: var(--font-18);
    font-weight: 700;
    line-height: 1.6;
    color: #000;
}

.lp-case-company {
    margin-top: 0.75rem;
    font-size: var(--font-14);
    font-weight: 700;
    color: var(--main-blue);
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

.lp-case-lead {
    margin-top: 1rem;
    padding-bottom: 1.75rem;
    font-size: var(--font-15);
    line-height: 1.9;
    color: #333;
    flex-grow: 1;
}

/* =========================
   SP
========================= */
@media (max-width: 768px) {

    .lp-case-grid,
    .lp-case-grid.grid-cols-4,
    .lp-case-grid.grid-cols-3,
    .lp-case-grid.grid-cols-2 {
        grid-template-columns: 1fr;
    }

    .lp-case-card {
        border-radius: 16px;
    }

    .lp-case-title,
    .lp-case-company,
    .lp-case-lead {
        padding-inline: 1.25rem;
    }

    .lp-case-title {
        font-size: 1.1rem;
    }

    .lp-case-lead {
        line-height: 1.8;
    }

    .lp-main-lead {
        margin-block: 1.5em;
    }
}

/* ====== APPアプリダウンロード====== */
.lp-app {
    padding-block: min(12%, 4em);
    ;
}

.lp-app-info {
    display: flex;
    justify-content: center;
    gap: 1em;
    align-items: center;
    font-size: var(--font-24);
    font-weight: bold;
}

.lp-app-grid {
    margin-block: 2em;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    column-gap: 2em;
}

.lp-app-download-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
}

@media (max-width: 500px) {
    .lp-app-grid {
        flex-direction: column-reverse;
        align-items: center;
        row-gap: 1.5em;
    }
}


/* ====== environment動作環境====== */
.lp-environment-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ddd;
    font-size: var(--font-16);
}

.lp-environment-table th {
    width: 180px;
    background: #f0f0f0;
    text-align: left;
    padding: 16px 20px;
    font-weight: 600;
    border-right: 1px solid #ddd;
    vertical-align: middle;
}

.lp-environment-table td {
    padding: 16px 20px;
    line-height: 1.8;
    background: #fff;
}

.lp-environment-table tr+tr th,
.lp-environment-table tr+tr td {
    border-top: 1px solid #ddd;
}

.lp-environment .lp-block-inner {
    max-width: 700px;
}

/* =========================================================
   FAQ
========================================================= */
.lp-faq .faq-accordion {
    max-width: 800px;
    margin: 48px auto 0;
}

.lp-faq .accordion-item {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 16px;
    background: #fff;
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.06);
}

/* ボタン */
.lp-faq .accordion-button {
    position: relative;
    padding: 24px 72px 24px 28px;
    background: #fff;
    color: #111;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    border: none;
    box-shadow: none;
}

/* 開いた時 */
.lp-faq .accordion-button:not(.collapsed) {
    background: #fff;
    color: #111;
    box-shadow: none;
}

/* hover */
.lp-faq .accordion-button:hover {
    background: #fafafa;
}

/* Bootstrapの青枠削除 */
.lp-faq .accordion-button:focus {
    box-shadow: none;
    border: none;
}

/* デフォルト矢印削除 */
.lp-faq .accordion-button::after {
    display: none;
}

/* カスタム矢印 */
.lp-faq .accordion-button::before {
    content: "+";
    position: absolute;
    top: 50%;
    right: 28px;
    transform: translateY(-50%);
    font-size: 28px;
    font-weight: 300;
    color: rgb(0, 146, 215);
    transition: transform .3s ease;
}

.lp-faq .accordion-button:not(.collapsed)::before {
    content: "−";
}

/* 回答部分 */
.lp-faq .accordion-body {
    padding: 28px 28px;
    font-size: 15px;
    font-weight: 500;
    line-height: 2;
    color: #333;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* リンク */
.lp-faq .accordion-body a {
    color: #2871fa;
    font-weight: 700;
    text-decoration: underline;
}

/* スマホ */
@media (max-width: 768px) {

    .lp-faq .accordion-button {
        padding: 20px 56px 20px 20px;
        font-size: 15px;
    }

    .lp-faq .accordion-body {
        padding: 0 20px 20px;
        font-size: 14px;
    }

    .lp-faq .accordion-button::before {
        right: 20px;
        font-size: 24px;
    }
}

/* ===============================
LP関連製品レイアウト
=============================== */
.lp-related .prod-list-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    width: 1280px;
}

.lp-related .prod-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lp-related .prod-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.lp-related .prod-card {
    height: 100%;
}

.lp-related .prod-link-detail {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.lp-related .prod-card-inner {
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ===============================
  アニメーション
=============================== */
.a-fadeIn-right {
    opacity: 0;
    transform: translateX(80px);
    transition: opacity 1s ease, transform 1s ease;
}

.a-fadeIn-left {
    opacity: 0;
    transform: translateX(-80px);
    transition: opacity 1s ease, transform 1s ease;
}

.a-fadeIn-right.is-visible,
.a-fadeIn-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* =====================================
  responsive
   ===================================== */
@media (max-width: 768px) {

    .lp-nav {
        display: none;
    }

    .lp-header-btns a {
        font-size: clamp(0.75rem, 0.631rem + 0.51vw, 0.875rem);
    }

    /* ===== メインビジュアル　===== */
    .lp-main-catch {
        font-size: clamp(1.4rem, 0.46rem + 3.9vw, 2.35rem);
        line-height: 1.55;
    }

    .lp-btn-large {
        width: 100%;
        padding: 1.4rem 0;
        font-size: var(--font-18);
    }

    .lp-main-content-wrapper {
        grid-template-columns: 1fr;
    }

    .lp-main-content {
        order: 2;
    }

    .lp-main-partner,
    .lp-main-partner.is-right {
        text-align: center;
    }

    .lp-main-content .pdlogo {
        justify-content: center;
        margin: 0 auto;
    }

    .pdlogo img {
        width: var(--sp-width, auto);
    }

    .lp-main-visual-content p {
        font-size: 0.9rem;
        line-height: 1.6;
        padding: 0 0 0.8rem;
    }

    .lp-mv-cta {
        flex-direction: column;
        gap: 12px;
        padding-top: 0.5rem;
        align-items: center;
    }

    .lp-mv-cta .lp-btn {
        width: 100%;
        max-width: none;
    }

    .lp-btn-large {
        height: 3.4rem;
        font-size: var(--font-16);
    }

    .lp-breadcrumb-in-mv {
        display: none;
    }

    .mv-manufacturer {
        right: 50%;
        transform: translateX(50%);
        bottom: 1.5rem;
        text-align: center;
    }

    /* ====== 追随バナー ======= */
    .lp-mv-follow-banner {
        position: fixed;
        top: auto !important;
        /* SP時は下に固定 */
        bottom: 0 !important;
        /* SP時は下に固定 */
        left: 0;
        width: 100%;
        /* z-index: 9999; */
        z-index: 1100;
    }

    .lp-mv-follow-banner a {
        width: 100%;
        /* padding: 16px 12px; */
        border-radius: 0;
        font-size: var(--font-15);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
    }

    .lp-mv-follow-banner a:hover {
        transform: none;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
    }


    /* ====== problem お困りごと ====== */
    .lp-problem-visual {
        /* position: static; */
        width: 100%;
        /* margin-top: 32px; */
        /* pointer-events: auto; */
    }

    .lp-problem-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .lp-problem-list {
        padding-bottom: 0;
    }

    .lp-problem-list li::after {
        top: auto;
        bottom: -10px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        border-width: 12px 10px 0 10px;
        border-color: #fff transparent transparent transparent;
    }

    .product-detail .lp-problem-list li:nth-child(1) {
        transform: none;
    }

    .product-detail .lp-problem-list li:nth-child(2) {
        transform: none;
        ;
    }

    .product-detail .lp-problem-list li:nth-child(3) {
        transform: none;
    }

    .lp-problem {
        padding-bottom: 0 !important;
    }

    /* ====== featureできること====== */
    .lp-realize-grid {
        grid-template-columns: 1fr;
    }

    /* .lp-realize-visual {
    margin-top: 32px;
  } */

    /* .lp-realize {
    padding-bottom: 0;
  } */

    /* ====== feature特徴====== */
    .lp-feature-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* ====== price料金体系====== */
    .lp-price-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .lp-price-card {
        padding: 32px 24px;
    }

    .lp-price-main {
        font-size: 2.125rem;
    }

    /* ====== appアプリダウンロード！====== */
    .lp-app-icon {
        width: 80px;
        height: 80px;
    }

    /* ====== environment動作環境====== */
    .lp-environment-table {
        font-size: var(--font-15);
    }

    .lp-environment-table th {
        width: 120px;
        padding: 14px 12px;
    }

    .lp-environment-table td {
        padding: 14px 12px;
    }

    /* ====== related関連製品====== */
    .lp-related .prod-list-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .related-products-section .prod-card .prod-title-sub {
        display: block !important;
        font-size: 0.72rem;
        line-height: 1.35;
    }

    .related-products-section .prod-card .prod-title-main {
        font-size: clamp(1.1rem, 4.4vw, 1.35rem);
        line-height: 1.35;
    }

    .related-products-section .prod-card .prod-img-logo {
        width: 60px;
        height: 60px;
    }


    /* section {
    padding: 60px 16px;
  } */

    .recommend-content {
        grid-template-columns: 1fr;
    }

    .price-list {
        flex-direction: column;
        align-items: center;
    }

    .btn-group {
        flex-direction: column;
    }

    .lp-inner {
        flex-direction: row;
        gap: 12px;
    }

}