@charset "UTF-8";

:root {
    --color-logo-main: #00a0e8;
    --color-sub: #006ebe;
    --color-dark-100: #2a445e;
    --color-accent-300: #e96ea8;
    --color-accent-300-border: #f88cbf;
    --color-accent-700: #f37700;
    --color-white: #fff;
    --color-bg-light: #e5f6ff;
    --color-text: #2a445e;

    --font-family-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;

    --content-width: 1220px;
    --header-height: 96px;
    --gutter: 40px;
}

/*
 * サイト共通フッターのスタイルは /css/base.css にあるため読み込んでいるが、
 * base.css は header / main / p / ul などに全体指定を持つ。LP のレイアウトを
 * 壊すものだけをここで打ち消す。
 */
body {
    background: var(--color-white);
    color: var(--color-text);
    font-family: var(--font-family-base);
}

/* ページ内リンク（#seminar / #docs）への移動をなめらかにする */
html {
    scroll-behavior: smooth;

    @media (prefers-reduced-motion: reduce) {
        scroll-behavior: auto;
    }
}

.lp-br-sp {
    display: none;

    @media (max-width: 979px) {
        display: inline;
    }
}

/*
 * MV はデザイン（PC 1440 / SP 375）の座標をそのまま使って組むため、
 * 画面幅に応じて 1px 相当の単位 --u を縮めることで全体を等比で縮小する。
 */
.lp-main {
    --stage: min(1440px, 100vw);
    --u: calc(var(--stage) / 1440);

    min-height: 0;
    color: inherit;
    letter-spacing: normal;

    @media (max-width: 979px) {
        --stage: min(500px, 100vw);
        --u: calc(var(--stage) / 375);
    }
}

/*
 * :where() で詳細度を 0 にして、打ち消し用のこの指定が
 * 後続のコンポーネント指定を上書きしないようにする。
 */
.lp-main :where(p, ul, ol, li) {
    margin: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

.lp-main :where(ul, ol) {
    padding-left: 0;
    list-style: none;
}

.lp-main :where(img) {
    object-fit: fill;
}

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

/* ---------------------------------- 汎用 ---------------------------------- */

.lp-container {
    width: 100%;
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: 20px;

    @media (max-width: 767px) {
        padding-inline: 16px;
    }
}

.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px 20px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--color-white);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    transition: opacity 0.2s;

    &:hover {
        opacity: 0.8;
    }

    @media (prefers-reduced-motion: reduce) {
        transition: none;
    }
}

.lp-btn__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.lp-btn--trial {
    background-color: var(--color-accent-300);
    border-color: var(--color-accent-300-border);
}

/* --------------------------------- ヘッダー -------------------------------- */

.lp-header {
    position: static;
    width: 100%;
    height: var(--header-height);
    background-color: var(--color-dark-100);
    z-index: auto;

    @media (max-width: 767px) {
        height: 56px;
    }
}

.lp-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding-inline: var(--gutter);

    @media (max-width: 767px) {
        padding-inline: 16px;
    }
}

.lp-header__logo {
    display: block;
    flex-shrink: 0;
    width: 160px;

    & img {
        width: 100%;
        height: auto;
    }

    @media (max-width: 767px) {
        width: 100px;
    }
}

.lp-header__trial {
    @media (max-width: 767px) {
        gap: 8px;
        padding: 8px 12px;
        font-size: 0.75rem;

        & .lp-btn__icon {
            width: 18px;
            height: 18px;
        }
    }
}

/* ----------------------------------- MV ---------------------------------- */

.lp-mv {
    position: relative;
    overflow: hidden;
    height: calc(770 * var(--u));

    @media (max-width: 979px) {
        height: calc(907 * var(--u));
    }
}

.lp-mv__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #005daf 27.72%, #2fc2f3 100%);
}

.lp-mv__stage {
    position: absolute;
    inset-block: 0;
    left: 50%;
    width: var(--stage);
    transform: translateX(-50%);
}

/* Figma の logo グループ（PC 1459.39x855 / SP 574.66x336.67）をそのまま配置する。
   ステージ外へはみ出す前提の絵なので、幅で切り出さず全体を置いて overflow で見切る */
.lp-mv__emblem {
    position: absolute;
    left: calc(-279.39 * var(--u));
    top: calc(-116 * var(--u));
    width: calc(1459.39 * var(--u));
    height: auto;

    @media (max-width: 979px) {
        left: calc(-79 * var(--u));
        top: calc(173 * var(--u));
        width: calc(574.66 * var(--u));
    }
}

/* 背景の光。PC は画面右端に、SP はヒーロー全面に張り付けて端に継ぎ目が出ないようにする。
   PC はデザインで同じフレームが2枚重ねてあるため、背景も2枚重ねて濃度を合わせる */
.lp-mv__glow {
    position: absolute;
    right: 0;
    top: 0;
    width: calc(831 * var(--u));
    height: calc(774 * var(--u));
    background-image: url("../img/mv-bg.webp"), url("../img/mv-bg.webp");
    background-size: 100% 100%;

    @media (max-width: 979px) {
        inset: 0;
        width: auto;
        height: auto;
        background-image: url("../img/mv-bg-sp.webp");
        background-position: center top;
        background-size: cover;
    }

    /* ステージ幅（500px）を超えると縦長の SP 用では足りなくなるため横長版に差し替える */
    @media (min-width: 500px) and (max-width: 979px) {
        background-image: url("../img/mv-bg-sp-wide.webp");
    }
}

.lp-mv__text {
    position: absolute;
    top: calc(84 * var(--u));
    right: calc(148 * var(--u));
    width: calc(679 * var(--u));
    isolation: isolate;

    @media (max-width: 979px) {
        left: calc(16 * var(--u));
        right: auto;
        top: calc(18 * var(--u));
        width: calc(343 * var(--u));
    }
}

/* テキスト背景のもやもや */
.lp-mv__text::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: calc(-17 * var(--u));
    top: calc(68 * var(--u));
    width: calc(720 * var(--u));
    height: calc(394 * var(--u));
    background-color: #005daf;
    opacity: 0.4;
    filter: blur(calc(50 * var(--u)));

    @media (max-width: 979px) {
        left: calc(-24 * var(--u));
        top: calc(-16 * var(--u));
        width: calc(390 * var(--u));
        height: calc(200 * var(--u));
        filter: blur(calc(30 * var(--u)));
    }
}

.lp-mv__ver {
    display: flex;
    align-items: flex-end;
    gap: calc(4.4 * var(--u));
    padding: calc(4 * var(--u));
    color: var(--color-white);
    font-size: calc(35.2 * var(--u));
    font-weight: 700;
    line-height: 1;
    letter-spacing: calc(-1.056 * var(--u));
    text-shadow: 0 calc(2 * var(--u)) calc(20 * var(--u)) rgba(0, 84, 157, 0.8);

    @media (max-width: 979px) {
        font-size: calc(20 * var(--u));
    }
}

.lp-mv__ver-num {
    font-size: calc(60 * var(--u));

    @media (max-width: 979px) {
        font-size: calc(36 * var(--u));
    }
}

.lp-mv__ver-suffix {
    padding-bottom: calc(4.4 * var(--u));
    letter-spacing: calc(-0.704 * var(--u));
}

.lp-mv__catch {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(8 * var(--u));
    margin-top: calc(12 * var(--u));

    @media (max-width: 979px) {
        margin-top: calc(16 * var(--u));
    }
}

.lp-mv__catch-pc {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(8 * var(--u));

    @media (max-width: 979px) {
        display: none;
    }
}

.lp-mv__catch-sp {
    display: none;

    @media (max-width: 979px) {
        display: block;
    }
}

.lp-mv__catch-line {
    display: inline-flex;
    align-items: center;
    padding: 0 calc(12 * var(--u)) calc(2 * var(--u));
    background-color: var(--color-white);
    color: #17324d;
    font-size: calc(64 * var(--u));
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: calc(2.48 * var(--u));

    @media (max-width: 979px) {
        padding: calc(4 * var(--u)) calc(12 * var(--u));
        font-size: calc(28 * var(--u));
        letter-spacing: calc(0.56 * var(--u));
    }
}

.lp-mv__catch-lg {
    font-size: calc(68 * var(--u));

    @media (max-width: 979px) {
        font-size: inherit;
    }
}

.lp-mv__catch-sm {
    font-size: calc(56 * var(--u));

    @media (max-width: 979px) {
        font-size: inherit;
    }
}

.lp-mv__lead {
    margin-top: calc(15 * var(--u));
    color: var(--color-white);
    font-size: calc(33 * var(--u));
    font-weight: 700;
    line-height: 1.4;
    text-shadow: 0 calc(2 * var(--u)) calc(20 * var(--u)) rgba(0, 53, 106, 0.8);

    @media (max-width: 979px) {
        margin-top: calc(11 * var(--u));
        font-size: calc(16 * var(--u));
    }
}

.lp-mv__actions {
    display: flex;
    gap: calc(20 * var(--u));
    margin-top: calc(59 * var(--u));

    @media (max-width: 979px) {
        flex-direction: column;
        gap: calc(12 * var(--u));
        margin-top: calc(365 * var(--u));
    }
}

.lp-btn--doc,
.lp-btn--movie {
    gap: calc(8 * var(--u));
    padding: calc(16 * var(--u)) calc(20 * var(--u));
    border-width: calc(2 * var(--u));
    border-radius: calc(8 * var(--u));
    font-size: calc(20 * var(--u));
    box-shadow: 0 calc(2 * var(--u)) calc(16 * var(--u)) rgba(42, 68, 94, 0.7);

    @media (max-width: 979px) {
        padding: calc(18 * var(--u)) calc(20 * var(--u));
        font-size: calc(16 * var(--u));
    }
}

.lp-btn--doc {
    background-color: var(--color-accent-700);
    border-color: var(--color-accent-700);
}

.lp-btn--movie {
    background-color: var(--color-white);
    border-color: var(--color-accent-700);
    color: var(--color-accent-700);
}

.lp-btn__icon--lg {
    width: calc(48 * var(--u));
    height: calc(48 * var(--u));

    @media (max-width: 979px) {
        width: calc(28 * var(--u));
        height: calc(28 * var(--u));
    }
}

/* ------------------------------ リリース告知カード ----------------------------- */

.lp-release {
    position: relative;
    z-index: 1;
    margin-top: calc(-138 * var(--u));
    padding-bottom: 80px;

    @media (max-width: 979px) {
        margin-top: calc(-197 * var(--u));
        padding-bottom: 48px;
    }
}

/* MV に重ねている分だけ背景を下げ、MV のグラデーションを隠さないようにする */
.lp-release::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: calc(138 * var(--u)) 0 0;
    background-color: var(--color-bg-light);

    @media (max-width: 979px) {
        inset: calc(197 * var(--u)) 0 0;
    }
}

.lp-release__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: min(1020px, calc(100% - 40px));
    margin-inline: auto;
    padding: 40px 60px;
    border: 2px solid var(--color-logo-main);
    border-radius: 8px;
    background-color: var(--color-white);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    text-align: center;

    @media (max-width: 979px) {
        width: calc(100% - 32px);
        padding: 24px 20px;
        gap: 16px;
    }
}

.lp-release__title {
    color: var(--color-logo-main);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: -0.02em;

    @media (max-width: 979px) {
        font-size: 1.25rem;
    }
}

.lp-release__text {
    color: var(--color-dark-100);
    font-size: 1.125rem;
    line-height: 1.8;

    @media (max-width: 979px) {
        font-size: 0.9375rem;

        & br {
            display: none;
        }
    }
}

.lp-release__btn {
    gap: 16px;
    padding: 16px 32px;
    border-width: 2px;
    border-color: #f997c5;
    font-size: 1.5rem;

    & .lp-btn__icon--lg {
        width: 48px;
        height: 48px;
    }

    @media (max-width: 979px) {
        gap: 8px;
        padding: 14px 20px;
        font-size: 1.0625rem;

        & .lp-btn__icon--lg {
            width: 32px;
            height: 32px;
        }
    }
}

/* ------------------------------ 導入文（セクション2） ----------------------------- */

.lp-intro {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 0 110px 100px;
    background-color: var(--color-bg-light);

    @media (max-width: 979px) {
        padding: 0 16px 56px;
    }
}

/*
 * 背景画像は PC では幅いっぱいに引き伸ばし、SP では左右を見切れさせる。
 */
.lp-intro::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    bottom: -99px;
    width: 100vw;
    height: 525px;
    transform: translateX(-50%);
    background-image: url("../img/bg-section.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0.5;

    @media (max-width: 979px) {
        bottom: -40px;
        height: 320px;
        background-size: cover;
        background-position: center;
    }
}

.lp-intro__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    text-align: center;

    @media (max-width: 979px) {
        gap: 24px;
    }
}

.lp-intro__title {
    color: #0d4282;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.4;

    @media (max-width: 979px) {
        font-size: 1.5rem;
    }
}

.lp-intro__text {
    max-width: 1071px;
    color: #000;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.8;

    @media (max-width: 979px) {
        font-size: 0.9375rem;
        text-align: left;

        & br {
            display: none;
        }
    }
}

/* --------------------------- できること（セクション3） --------------------------- */

.lp-can {
    padding-block: 100px;

    @media (max-width: 979px) {
        padding-block: 56px;
    }
}

.lp-can__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(var(--content-width), 100% - 40px);
    margin-inline: auto;

    @media (max-width: 979px) {
        width: calc(100% - 32px);
    }
}

.lp-can__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--color-logo-main);

    @media (max-width: 979px) {
        flex-wrap: wrap;
        gap: 4px;
    }
}

.lp-can__title-logo {
    width: 212px;
    height: auto;

    @media (max-width: 979px) {
        width: 143px;
    }
}

.lp-can__title-num {
    font-family: "Figtree", var(--font-family-base);
    font-size: 5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;

    @media (max-width: 979px) {
        font-size: 3rem;
    }
}

.lp-can__title-text {
    align-self: flex-end;
    padding-bottom: 4px;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.4;

    /* SP は「Forguncy 12 で」と「できること」の2行に分ける */
    @media (max-width: 979px) {
        display: contents;
    }
}

.lp-can__title-de {
    @media (max-width: 979px) {
        align-self: flex-end;
        padding-bottom: 6px;
        font-size: 1.75rem;
        font-weight: 700;
        line-height: 1.4;
    }
}

.lp-can__title-rest {
    @media (max-width: 979px) {
        flex-basis: 100%;
        font-size: 2rem;
        font-weight: 700;
        line-height: 1.4;
        text-align: center;
    }
}

.lp-can__lead {
    margin-top: 16px;
    color: #000;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.8;
    text-align: center;

    @media (max-width: 979px) {
        font-size: 1rem;
        line-height: 1.5;
        text-align: left;
    }
}

.lp-can__doc {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 24px;
    padding: 12px 24px 12px 32px;
    border: 2px solid var(--color-logo-main);
    border-radius: 50px;
    background-color: var(--color-white);
    color: var(--color-logo-main);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    transition: opacity 0.2s;

    &:hover {
        opacity: 0.7;
    }

    @media (prefers-reduced-motion: reduce) {
        transition: none;
    }

    @media (max-width: 979px) {
        padding: 12px 16px 12px 20px;
        font-size: 0.875rem;
    }
}

.lp-can__doc-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

/* picture 自体を箱にしないことで、図の幅の % をセクション幅基準で解決させる */
.lp-can__inner > picture {
    display: contents;
}

.lp-can__diagram {
    width: 100%;
    max-width: 1220px;
    height: auto;
    margin-top: 40px;

    /* SP の図は画面幅いっぱいに敷く（左右の余白 16px を打ち消す） */
    @media (max-width: 979px) {
        width: calc(100% + 32px);
        max-width: none;
        margin: 24px -16px 0;
    }
}

/* ------------------------ セクション4（AI活用〜冗長化構成） ----------------------- */

.lp-detail {
    position: relative;
    isolation: isolate;
    padding-block: 100px;
    background: linear-gradient(to bottom, #80cff3 54.98%, #d1f1ff 85.17%);

    @media (max-width: 979px) {
        padding-block: 56px;
    }
}

/* デザインでは同じ図を2枚（2枚目は上下反転）並べ、下端をフェードさせて
   セクションの上半分だけに敷いている。グラデーションは親側が全面に持つ */
.lp-detail__bg {
    /* 図の基準幅。ステージ（最大1440px）より画面が広いときは画面幅まで広げる。
       配置の数値はすべてこの幅から比率で出すので、拡大しても崩れない。
       100% は top では高さに対して解決されてしまうため 100vw を使う */
    --bg-w: max(calc(1620 * var(--u)), 100vw);

    position: absolute;
    z-index: -1;
    inset: 0;
    overflow: hidden;
    opacity: 0.3;
}

.lp-detail__bg::before,
.lp-detail__bg::after {
    content: "";
    position: absolute;
    left: 50%;
    width: var(--bg-w);
    aspect-ratio: 1620 / 1146;
    transform: translateX(-50%);
    background-image: url("../img/bg-detail.png");
    background-size: 100% 100%;
}

/* 画像の上端にある透明な 10px をセクションの外へ逃がす */
.lp-detail__bg::before {
    top: calc(var(--bg-w) * -10 / 1620);
}

/* 2枚目は上下反転させて継ぎ目を鏡合わせにし、下端 479px でフェードアウトさせる。
   下地の色に依存しないよう、デザインのべた塗りではなくマスクで消す */
.lp-detail__bg::after {
    top: calc(var(--bg-w) * 1116 / 1620);
    transform: translateX(-50%) scaleY(-1);
    mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--bg-w) * 479 / 1620));
}

.lp-detail__block {
    position: relative;
    width: min(var(--content-width), 100% - 40px);
    margin-inline: auto;
    /* リボン見出しの分だけ上に余白をとる（カード側の margin だと親から抜けてしまう） */
    padding-top: 55px;

    & + & {
        margin-top: 80px;
    }

    @media (max-width: 979px) {
        width: calc(100% - 32px);
        padding-top: calc(27 * var(--u));

        & + & {
            margin-top: 48px;
        }
    }
}

/* 見出しリボン（3枚のSVGを背景として重ねる） */
.lp-ribbon {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 50%;
    width: 920px;
    height: 100px;
    transform: translateX(-50%);
    background-image: url("../img/hd-wing-b.svg"), url("../img/hd-wing-a.svg"), url("../img/hd-base.svg");
    background-repeat: no-repeat;
    background-position: calc(50% + 20px) 2px, calc(50% - 20px) 0, center;
    background-size: 602px 97px, 602px 98px, 630px 87px;

    /* SP は PC の配置を 0.5 倍に等倍縮小し、--u で画面幅に追従させる */
    @media (max-width: 979px) {
        width: 100%;
        height: calc(50 * var(--u));
        background-position: calc(50% + 10 * var(--u)) calc(1 * var(--u)), calc(50% - 10 * var(--u)) 0, center;
        background-size:
            calc(301 * var(--u)) calc(48.5 * var(--u)),
            calc(301 * var(--u)) calc(48.75 * var(--u)),
            calc(315 * var(--u)) calc(43.5 * var(--u));
    }
}

.lp-ribbon__text {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-white);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.08em;
    white-space: nowrap;

    @media (max-width: 979px) {
        top: calc(7 * var(--u));
        font-size: calc(24 * var(--u));
    }
}

.lp-detail__card {
    padding: 100px 60px 80px;
    border-radius: 8px;
    background-color: var(--color-white);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);

    @media (max-width: 979px) {
        padding: 56px 20px 32px;
    }
}

.lp-detail__lead {
    color: #000;
    font-size: 1.125rem;
    line-height: 1.5;
    text-align: center;

    @media (max-width: 979px) {
        font-size: 0.9375rem;
        text-align: left;

        & br {
            display: none;
        }
    }
}

.lp-detail__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    margin-top: 40px;

    @media (max-width: 979px) {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-top: 32px;
    }
}

.lp-detail__item-title {
    display: flex;
    align-items: center;
    min-height: 50px;
    color: #0d4282;
    font-size: 1.5rem;
    font-weight: 700;

    @media (max-width: 979px) {
        min-height: 0;
        font-size: 1.25rem;
    }
}

.lp-detail__item-figure {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 12px;
}

/* 画面キャプチャだけは背景色の枠がないため細い罫線で囲む。
   border だと隣の図より高さが増えるので、内側に outline で描く */
.lp-detail__item-figure--shot {
    outline: 1px solid #eff3f5;
    outline-offset: -1px;
}

.lp-detail__item-text {
    margin-top: 24px;
    color: #000;
    font-size: 1rem;
    line-height: 1.5;

    @media (max-width: 979px) {
        margin-top: 16px;
        font-size: 0.9375rem;
    }
}

/* --------------------------------- AI活用 --------------------------------- */

.lp-ai__tags {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;

    @media (max-width: 979px) {
        flex-direction: column;
        gap: 8px;
    }
}

.lp-ai__tag-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.lp-ai__tag {
    padding: 4px 16px;
    background-color: #fff170;
    color: #0d4282;
    font-size: 1.25rem;
    font-weight: 700;

    @media (max-width: 979px) {
        padding: 2px 10px;
        font-size: 1rem;
    }
}

.lp-ai__tag-note {
    color: #000;
    font-size: 1.125rem;
    line-height: 1.5;

    @media (max-width: 979px) {
        font-size: 0.9375rem;
    }
}

.lp-ai__cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    margin-top: 40px;

    @media (max-width: 1199px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    @media (max-width: 979px) {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-top: 32px;
    }
}

.lp-ai__figure {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    border-radius: 8px;

    & img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}

.lp-ai__card-head {
    margin-top: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #0d4282;
    color: #0d4282;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.08em;
}

.lp-ai__card-body {
    display: flex;
    flex-direction: column;
    margin-top: 16px;
    color: #000;
    font-size: 0.875rem;
    line-height: 1.5;
}

.lp-ai__data {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 60px;
    padding-inline: 100px;

    @media (max-width: 979px) {
        margin-top: 40px;
        padding-inline: 0;
    }
}

.lp-ai__data-title {
    color: #000;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;

    @media (max-width: 979px) {
        font-size: 1.125rem;
    }
}

.lp-ai__data-img {
    width: 100%;
    max-width: 680px;
    height: auto;
}

.lp-ai__data-text {
    color: #000;
    font-size: 0.875rem;
    line-height: 1.5;
    text-align: center;

    @media (max-width: 979px) {
        text-align: left;

        & br {
            display: none;
        }
    }
}

/* 丸型の主要CTAボタン */
.lp-pill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 20px 20px 20px 32px;
    border-radius: 50px;
    background-color: var(--color-logo-main);
    color: var(--color-white);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    transition: opacity 0.2s;

    & img {
        flex-shrink: 0;
        width: 24px;
        height: 24px;
    }

    &:hover {
        opacity: 0.8;
    }

    @media (prefers-reduced-motion: reduce) {
        transition: none;
    }

    @media (max-width: 979px) {
        padding: 16px 16px 16px 24px;
        font-size: 1rem;
    }
}

/* ------------------------------ 機能の詳細を知る ------------------------------ */

.lp-docs {
    padding-block: 100px;
    background-color: #eff9ff;

    @media (max-width: 979px) {
        padding-block: 56px;
    }
}

.lp-docs__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: min(var(--content-width), 100% - 40px);
    margin-inline: auto;

    @media (max-width: 979px) {
        gap: 24px;
        width: calc(100% - 32px);
    }
}

.lp-docs__title {
    color: #0d4282;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-align: center;

    @media (max-width: 979px) {
        font-size: 1.75rem;
    }
}

.lp-docs__lead {
    color: #000;
    font-size: 1.125rem;
    line-height: 1.5;
    text-align: center;

    @media (max-width: 979px) {
        font-size: 0.9375rem;
    }
}

.lp-docs__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    width: 100%;

    @media (max-width: 979px) {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.lp-docs__list--main {
    grid-template-columns: min(286px, 100%);
    justify-content: center;

    & .lp-docs__card {
        min-height: 322px;
    }

    @media (max-width: 979px) {
        grid-template-columns: 1fr;

        & .lp-docs__card {
            min-height: 0;
        }
    }
}

.lp-docs__card {
    --docs-color: var(--color-logo-main);
    --docs-gradient: linear-gradient(136deg, #47bff5 0%, #00a0e8 33.87%);

    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 2px solid var(--docs-color);
    border-radius: 8px;
    background-color: var(--color-white);
}

.lp-docs__card--orange {
    --docs-color: var(--color-accent-700);
    --docs-gradient: linear-gradient(136deg, #ffb36a 0%, #f37700 33.87%);
}

.lp-docs__card--green {
    --docs-color: #5eb41e;
    --docs-gradient: linear-gradient(136deg, #87ca54 0%, #5eb41e 33.87%);
}

.lp-docs__card-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 150px;
    padding: 24px 16px 20px;
    background-image: var(--docs-gradient);
    color: var(--color-white);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.04em;
    text-align: center;

    & img {
        flex-shrink: 0;
    }
}

.lp-docs__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
    gap: 16px;
    padding: 12px 20px 24px;
}

.lp-docs__card-text {
    width: 100%;
    color: #000;
    font-size: 1rem;
    line-height: 1.5;
}

/* 白背景・青枠の小さめリンクボタン */
.lp-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 24px 12px 32px;
    border: 2px solid var(--color-logo-main);
    border-radius: 50px;
    background-color: var(--color-white);
    color: var(--color-logo-main);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transition: opacity 0.2s;

    & img {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
    }

    &:hover {
        opacity: 0.7;
    }

    @media (prefers-reduced-motion: reduce) {
        transition: none;
    }
}

.lp-link-btn--orange {
    border-color: var(--color-accent-700);
    color: var(--color-accent-700);
}

.lp-link-btn--green {
    border-color: #5eb41e;
    color: #5eb41e;
}

/* -------------------------------- セミナー -------------------------------- */

.lp-seminar {
    padding-block: 100px;

    @media (max-width: 979px) {
        padding-block: 56px;
    }
}

.lp-seminar__inner {
    width: min(var(--content-width), 100% - 40px);
    margin-inline: auto;

    @media (max-width: 979px) {
        width: calc(100% - 32px);
    }
}

.lp-seminar__title {
    color: #0d4282;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-align: center;

    @media (max-width: 979px) {
        font-size: 1.75rem;
    }
}

.lp-seminar__list {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 40px;

    @media (max-width: 979px) {
        gap: 32px;
        margin-top: 24px;
    }
}

/* サムネイルの右に、上へテキスト・右下へボタンを置く */
.lp-seminar__link {
    display: grid;
    grid-template-areas:
        "thumb text"
        "thumb btn";
    grid-template-columns: 300px 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 32px;
    transition: opacity 0.2s;

    & > .lp-link-btn {
        grid-area: btn;
        align-self: end;
        justify-self: end;
    }

    &:hover {
        opacity: 0.7;
    }

    @media (prefers-reduced-motion: reduce) {
        transition: none;
    }

    @media (max-width: 979px) {
        grid-template-areas:
            "thumb"
            "text"
            "btn";
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        row-gap: 16px;

        & > .lp-link-btn {
            justify-self: start;
        }
    }
}

.lp-seminar__thumb {
    grid-area: thumb;
    width: 100%;
    height: auto;

    @media (max-width: 979px) {
        width: min(300px, 100%);
    }
}

.lp-seminar__text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    grid-area: text;
    color: #000;
    line-height: 1.3;
    letter-spacing: 0.04em;

    @media (max-width: 979px) {
        gap: 8px;
    }
}

.lp-seminar__date {
    font-size: 1.125rem;
    font-weight: 700;

    @media (max-width: 979px) {
        font-size: 1rem;
    }
}

.lp-seminar__name {
    font-size: 1.25rem;
    font-weight: 700;

    @media (max-width: 979px) {
        font-size: 1.0625rem;
    }
}

.lp-seminar__host {
    color: #666;
    font-size: 0.875rem;
}

/* -------------------------------- 下部CTA -------------------------------- */

.lp-cta {
    padding: 100px 110px;
    background: linear-gradient(to bottom, #0d4282 0%, #0e8bd2 50%, #57a2d7 100%);

    @media (max-width: 979px) {
        padding: 56px 16px;
    }
}

.lp-cta__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: var(--content-width);
    margin-inline: auto;
}

.lp-cta__columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;

    @media (max-width: 979px) {
        grid-template-columns: 1fr;
    }
}

.lp-cta__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 40px 40px;
    border-radius: 12px;
    background-color: var(--color-white);
    text-align: center;

    @media (max-width: 979px) {
        padding: 0 20px 24px;
    }
}

.lp-cta__card-title {
    width: 100%;
    padding-block: 20px;
    border-bottom: 1px solid var(--color-sub);
    color: var(--color-sub);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.02em;

    @media (max-width: 979px) {
        font-size: 1.25rem;
    }
}

.lp-cta__card-text {
    margin-top: 32px;
    color: #000;
    font-size: 1rem;
    line-height: 1.4;

    @media (max-width: 979px) {
        margin-top: 20px;
    }
}

.lp-cta__card .lp-pill-btn {
    margin-top: 20px;
}

.lp-pill-btn--sub {
    background-color: var(--color-sub);
}

.lp-cta__trial {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 40px 60px;
    border-radius: 12px;
    background-color: var(--color-white);

    @media (max-width: 979px) {
        flex-direction: column;
        gap: 16px;
        padding: 24px 20px;
    }
}

.lp-cta__trial-text {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex-grow: 1;
    color: var(--color-sub);

    @media (max-width: 979px) {
        gap: 12px;
        text-align: center;
    }
}

.lp-cta__trial-title {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.02em;

    @media (max-width: 979px) {
        font-size: 1.375rem;
    }
}

.lp-cta__trial-note {
    font-size: 1rem;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* -------------------------------- 共通フッター -------------------------------- */

/*
 * 他のページでは body や要素に効いている書体・palt・Bootstrap の初期スタイルを、
 * この LP ではフッターの中だけに当てて揃える。下段（.footer--btm）は .footer-wrap の外にあるため footer ごと対象にする。
 */
footer:has(> .footer-wrap) {
    color: #212529;
    font-family: "Noto Sans JP", sans-serif;
    font-feature-settings: "palt";
    line-height: 1.5;

    & img {
        vertical-align: middle;
    }

    & small {
        font-weight: 400;
    }
}

/*
 * 共通フッターの下段は Bootstrap 4 のクラスで組まれている。この LP は Bootstrap を
 * 読み込まない（読み込むと LP 全体の見た目が変わる）ため、下段で使われている
 * クラスだけを Bootstrap 4.3 と同じ値でここに再現する。
 */
.footer--btm {
    padding-block: 3rem;
    line-height: 1.5;

    & .container {
        width: 100%;
        margin-inline: auto;
        padding-inline: 15px;

        @media (min-width: 576px) {
            max-width: 540px;
        }

        @media (min-width: 768px) {
            max-width: 720px;
        }

        @media (min-width: 992px) {
            max-width: 960px;
        }

        @media (min-width: 1200px) {
            max-width: 1140px;
        }
    }

    & .row {
        display: flex;
        flex-wrap: wrap;
        margin-inline: -15px;
    }

    & .col-lg-5,
    & .col-lg-6 {
        position: relative;
        width: 100%;
        padding-inline: 15px;
    }

    @media (min-width: 992px) {
        & .col-lg-5 {
            flex: 0 0 41.666667%;
            max-width: 41.666667%;
        }

        & .col-lg-6 {
            flex: 0 0 50%;
            max-width: 50%;
        }
    }

    & ul {
        margin-bottom: 1rem;
        padding-left: 40px;
    }

    & .d-flex {
        display: flex;
    }

    & .flex-column {
        flex-direction: column;
    }

    & .align-items-start {
        align-items: flex-start;
    }

    & .justify-content-between {
        justify-content: space-between;
    }

    & .justify-content-end {
        justify-content: flex-end;
    }

    & .mt-0 {
        margin-top: 0;
    }

    & .mb-5 {
        margin-bottom: 3rem;
    }

    & .ml-2 {
        margin-left: 0.5rem;
    }

    & .pl-0 {
        padding-left: 0;
    }

    & .pb-2 {
        padding-bottom: 0.5rem;
    }

    & .px-1 {
        padding-inline: 0.25rem;
    }

    & .px-3 {
        padding-inline: 1rem;
    }

    & .border-bottom {
        border-bottom: 1px solid #dee2e6;
    }

    & .border-right {
        border-right: 1px solid #dee2e6;
    }

    & .text-white {
        color: #fff;
    }
}