/* ==========================================================================
   front-page.css - トップページ(front-page.php)専用スタイル
   ========================================================================== */

/* .c-ph(画像未用意エリアの仮プレースホルダー)はcomponent.cssに共通化して移動済み */
.c-ph--about {
    aspect-ratio: 4 / 1;
    margin-top: 32px;
}

/* ---------- Hero ---------- */
/* container-type: inline-sizeでcqw(コンテナ幅基準の%)を使えるようにし、
   中の文字要素・画像もすべてcqwで揃えることで、ウィンドウ幅が変わっても
   背景画像と文字・図版の比率がずれない(clamp()の上限/下限で崩れない)ようにしている。
   PC/SP切り替え以外はレイアウトの見た目の位置関係が変化しない設計 */
.c-hero {
    position: relative;
    z-index: 1; /* SP時にc-hero__figが下にはみ出す際、後続セクションより手前に描画されるようにする */
    container-type: inline-size;
    background-image: url(../images/mv-bg-pc.png);
    background-size: cover;
    background-position: center top;
    aspect-ratio: 2880 / 1208;
}

.c-hero__body {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.c-hero__kicker {
    position: absolute;
    top: 23%;
    left: 9.25cqw;
    font-size: 1.625cqw;
    font-weight: 900;
    color: var(--color-text);
    white-space: nowrap;
}

.c-hero__title {
    position: absolute;
    top: 31%;
    left: 9cqw;
    font-size: 3.6cqw;
    line-height: 1.3;
    font-weight: 900;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    white-space: nowrap;
}

.c-hero__stats {
    position: absolute;
    top: 59%;
    left: 9cqw;
    display: flex;
    gap: 1cqw;
}

.c-hero__stat {
    display: flex;
    align-items: center;
    gap: 0;
}

.c-hero__stat-bracket {
    display: block;
    height: 4.3cqw;
    width: auto;
}

.c-hero__stat-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    white-space: nowrap;
    line-height: 1.125;
}

.c-hero__stat-label {
    font-size: 1.05cqw;
    font-weight: bold;
    color: var(--color-text);
}

.c-hero__stat-value {
    font-size: 1.05cqw;
    font-weight: bold;
}

.c-hero__stat-value strong {
    font-size: 2.4cqw;
    color: var(--color-primary);
    font-family: "Poppins", sans-serif;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    letter-spacing: 0;
}
.c-hero__stat-value .c-hero__stat-value-under {
    display: block;
    font-size: 90%;
    transform: translateY(-0.15cqw);
}
.c-hero__buttons {
    position: absolute;
    top: 79%;
    left: 9cqw;
    width: fit-content;
    display: flex;
    gap: 1.1cqw;
    flex-wrap: wrap;
}
.c-hero__buttons .c-btn {
    font-size: 1.25cqw;
    padding-top: 0.85cqw;
    padding-bottom: 0.6cqw;
    padding-inline: 1.6cqw;
}

.c-hero__visual {
    position: absolute;
    top: 26.5%;
    right: 4.5%;
    width: 48cqw;
}
.c-hero__fig {
    display: block;
    width: 100%;
    height: auto;
}
.c-hero__badge {
    position: absolute;
    right: -8%;
    bottom: -8%;
    width: 6.5cqw;
    height: auto;
}

/* ---------- 導入企業ロゴスライダー(2段) ---------- */
/* 「お客様情報」で「TOPページスライドロゴ」にチェックした企業ロゴを、
   段(上段/下段、inc/case-customer.php)ごとに.c-logo-set__groupとして横並びにし、
   同じグループを4つ複製してオーバーラップさせずに敷き詰める。
   グループ自体をtranslateX(-100%)(=グループ自身の幅ぶん)だけ動かすことで、
   隣の複製グループにぴったり継ぎ目なく入れ替わり、途切れなく流れ続けて見える
   (会社間の余白(gap)は次の複製との継ぎ目でもズレないよう、外側のgapではなく
   グループ自身の右パディングとして幅に含めている)。
   __rl(右→左)と__lr(左→右)でアニメーションの向きを反転させている。
   animation-durationの秒数はJS(common.js)側で、グループ自身の実測幅に応じて
   個別に上書きする(掲載社数やロゴの縦横比が変わっても体感速度を一定にするため)。
   ここでの値はJS無効時のフォールバック */
.c-logo-set-slider {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    margin-block: 20px;
}

.c-logo-set {
    display: flex;
    overflow: hidden;
    width: 100%;
}

.c-logo-set__group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 64px;
    padding-right: 64px;
    animation: movfax-logo-slide-rl 30s linear infinite;
}

.c-logo-set__lr .c-logo-set__group {
    animation-name: movfax-logo-slide-lr;
}

.c-logo-set__img {
    display: block;
    flex-shrink: 0;
    width: auto;
    max-width: none;
    height: 64px;
    object-fit: contain;
}

@keyframes movfax-logo-slide-rl {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

@keyframes movfax-logo-slide-lr {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}


/* ---------- 重要なお知らせ ---------- */
.c-important-news {
    border: 3px solid var(--color-accent);
    padding: 20px 24px;
    max-width: 1000px;
    margin-inline: auto;
    margin-top: clamp( 36px, calc( 16px + 6.25vw ), 96px );
    margin-bottom: clamp( 60px, calc( 48px + 3.75vw ), 96px );
}

.c-important-news__label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-accent);
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 12px;
}
.c-important-news__label span {
    width: 40px;
    height: 40px;
}
.c-important-news__label span svg {
    width: 100%;
    height: 100%;
}
.c-important-news__list {
    display: flex;
    flex-direction: column;
    gap: clamp( 10px, calc( 8px + 0.625vw ), 16px );
}
.c-important-news__list li {
    padding-top: clamp( 10px, calc( 8px + 0.625vw ), 16px );
    border-top: solid 2px var(--color-border);
}
.c-important-news__list li:first-child {
    padding-top: 0;
    border-top: none;
}
.c-important-news__list a {
    display: flex;
    gap: 16px;
    align-items: baseline;
}
.c-important-news__date {
    flex-shrink: 0;
    font-size: 16px;
    font-weight: bold;
    color: var(--color-text-sub);
}

.c-important-news__title {
    font-weight: 500;
    line-height: var(--lh-heading);
}

/* ---------- セクション共通 ---------- */
.c-section {
    padding-block: 120px;
}

.c-section--sub {
    background: var(--color-bg-sub);
}

.c-section__ballon {
    display: block;
    width: fit-content;
    text-align: center;
    background: var(--gradient-primary);
    color: var(--color-bg);
    font-weight: bold;
    font-size: 20px;
    padding: 0.25rem 1.75rem 0.325rem;
    margin: 0 auto 20px;
    border-radius: 3rem;
    position: relative;
}
.c-section__ballon::after {
    display: block;
    content: "";
    width: 0;
    height: 0;
    border-top: solid 0.75rem var(--color-primary);
    border-right: solid 0.375rem transparent;
    border-bottom: solid 0rem transparent;
    border-left: solid 0.375rem transparent;
    position: absolute;
    left: calc(50% - 0.375rem);
    bottom: -0.75rem;
    transform: skewX(-30deg);
}
.c-section__eyebrow {
    display: block;
    width: fit-content;
    text-align: center;
    color: var(--color-primary);
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1;
    margin: 0 auto;
}

.c-section__title {
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    line-height: var(--lh-heading);
    margin-block: 8px 24px;
    padding-bottom: 24px;
    position: relative;
}
.c-section__title .c-section__title-logo {
    width: auto;
    height: 60px;
    display: inline;
    vertical-align: middle;
}
.c-section__title::after {
    display: block;
    width: 92px;
    height: 4px;
    background-color: var(--color-primary);
    content: "";
    position: absolute;
    bottom: 0;
    left: calc(50% - 48px);
}

.c-section__title--sm {
    font-size: 22px;
}

.c-section__cta {
    text-align: center;
    margin-top: 64px;
}

/* ---------- News panel (トップページ「お知らせ」) ---------- */
.c-news-panel {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 40px;
    align-items: start;
}

.c-news-panel__logo {
    color: var(--color-primary);
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 1;
}

.c-news-panel__link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding-bottom: 8px;
    font-weight: bold;
    border-bottom: 1px solid var(--color-border);
}

.c-news-panel__link-arrow {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.c-news-panel__link-arrow svg {
    width: 18px;
    height: 18px;
}
.c-news-panel__body {
    border: 3px solid var(--color-primary);
    border-radius: 24px;
    padding: 8px 32px;
}

/* パネル内では枠線が箱自体にあるので一覧側のborder-topは打ち消し、
   日付+カテゴリとタイトルを縦に並べて screenshot のレイアウトに合わせる */
.c-news-panel__body .c-post-list {
    border-top: 0;
}

.c-news-panel__body .c-post-list__item {
    padding: 24px 0;
}

.c-news-panel__body .c-post-list__item:last-child {
    border-bottom: 0;
}

.c-news-panel__body .c-post-list__body {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

@media (max-width: 768px) {
    .c-news-panel {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .c-news-panel__body {
        padding: 8px 20px;
    }
}

.c-section__note {
    text-align: center;
    font-size: 12px;
    color: var(--color-text-sub);
    margin-top: 16px;
}

/* ---------- 特徴 ---------- */
/* 画像とテキストを左右交互(2行目のみ画像が左)に並べる */
.c-features {
    display: flex;
    flex-direction: column;
    gap: 80px;
    margin-top: 64px;
}

.c-feature {
    display: flex;
    align-items: center;
    gap: 64px;
}

.c-feature:nth-child(even) {
    flex-direction: row-reverse;
}

.c-feature__body {
    flex: 1;
    min-width: 0;
}

.c-feature__img {
    display: block;
    flex: 1;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 16px;
}

.c-feature__heading {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.c-feature__num {
    flex-shrink: 0;
    font-family: "Poppins", sans-serif;
    letter-spacing: 0; /* Poppins表示のため文字間0 */
    font-size: 52px;
    font-weight: 700;
    line-height: 1;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.c-feature__title {
    font-size: 30px;
    font-weight: bold;
    line-height: var(--lh-heading);
    padding-left: 20px;
    border-left: 2px solid var(--color-border);
}

.c-feature__text {
    line-height: var(--lh-body);
    color: var(--color-text);
}

/* ---------- シチュエーション別活用法 ---------- */
/* アイコン画像(背景の円形もSVGに内包)をカード上部に少し重ねて配置する */
.c-usecases {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px 32px;
    margin-top: 24px;
}

.c-usecase {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 360px;
}

.c-usecase__img {
    width: 176px;
    height: 176px;
    margin-bottom: -32px;
    position: relative;
    z-index: 1;
}

.c-usecase__card {
    width: 100%;
    background: #fff;
    border-radius: 16px;
    padding: 48px 24px 28px;
    text-align: center;
}

.c-usecase__title {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.25;
    margin-bottom: 16px;
}
.c-usecase__title:has(.c-usecase__subtitle) {
    margin-bottom: 8px;
    margin-top: -16px;
    line-height: 1.25;
}
.c-usecase__subtitle {
    font-size: 14px;
    font-weight: medium;
}

.c-usecase__text {
    line-height: var(--lh-body);
    color: var(--color-text-sub);
    text-align: left;
    letter-spacing: 0.04em;
}

/* .c-case-grid / .c-case-card(導入事例カード)はcomponent.cssに共通化して移動済み
   (導入事例アーカイブページ archive-case_study.php でも同じ見た目を再利用するため) */

/* ---------- 料金プラン ---------- */
/* ラベル列とプラン2列(スタンダード/プレミアム)を1つのCSS Gridで構成する比較表。
   初期費用・受信料金・送信料金・オプションは両プランで金額が同じため、
   .c-plan-cell--mergedをgrid-column: 2 / span 2にして1セルにまとめている。
   ヘッダー行(1行目)にはラベル列のセルを置いていないため、罫線はヘッダーの左端
   (=ラベル列の右端)から始まり、2行目以降だけラベル列を含む段違いの外枠になる */
.c-plan-panel {
    display: grid;
    grid-template-columns: 240px 1fr 1fr;
    max-width: 1200px;
    min-width: 1000px;
    margin: 56px auto 0;
}
.c-plan-panel-wrap {
    overflow-x: auto;
}
.c-plan-labels__item {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-sub);
    color: var(--color-primary);
    font-weight: bold;
    font-size: 20px;
    line-height: var(--lh-heading);
    padding: 12px 16px;
    border-top: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
    list-style: none;
}
.c-plan-labels__item--spacer {
    background: transparent;
    border: none;
}
.c-plan-labels__item--last {
    border-bottom: 1px solid var(--color-border);
}

.c-plan-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px 24px;
    border-top: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    background: var(--color-bg);
}
.c-plan-cell--standard:not(.c-plan-cell--header) {
    border-right: 1px solid var(--color-border);
}
.c-plan-cell--premium {
    border-right: 1px solid var(--color-border);
}
.c-plan-cell--merged {
    grid-column: 2 / span 2;
}
.c-plan-cell--header {
    padding: 24px 20px;
    color: #fff;
    border-top: none;
    position: relative;
    flex-direction: column;
}
.c-plan-cell--header.c-plan-cell--standard {
    background: var(--color-primary-light);
}
.c-plan-cell--header.c-plan-cell--premium {
    background: var(--color-primary-medium);
}
.c-plan-cell--last {
    border-bottom: 1px solid var(--color-border);
}

.c-plan__ribbon {
    position: absolute;
    top: -24px;
    left: -24px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.25;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    letter-spacing: 0;
    transform: rotateZ(-15deg);
    z-index: 1;
}

.c-plan__catch {
    font-size: 16px;
    margin-bottom: 4px;
    font-weight: bold;
    position: relative;
}
.c-plan__catch::before,
.c-plan__catch::after {
    display: block;
    width: 2px;
    height: 90%;
    background: var(--color-bg);
    content: "";
    position: absolute;
}
.c-plan__catch::before {
    top: 2px;
    left: -10px;
    transform: rotateZ(-15deg);
}
.c-plan__catch::after {
    top: 2px;
    right: -4px;
    transform: rotateZ(15deg);
}
.c-plan__name {
    font-size: 30px;
    font-weight: bold;
    line-height: 1.125;
}

.c-plan__row-label {
    display: none; /* SPのみ、値の上に項目名を表示するため使用 */
}

.c-plan__value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2px 2px;
    font-weight: bold;
    font-size: 18px;
}
.c-plan__value--sm {
    font-weight: normal;
    font-size: 14px;
    color: var(--color-text-sub);
}

/* 数字と単位(円/枚など)でサイズに差をつける */
.c-plan__num {
    font-size: 28px;
    font-weight: 900;
    line-height: 1.125;
}
.c-plan__num--price {
    font-size: 34px;
}
.c-plan__num--accent {
    color: var(--color-accent);
}
.c-plan__unit {
    font-weight: 800;
    font-size: 18px;
}

.c-plan__note {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-sub);
}

.c-plan__checklist {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--color-text);
    text-align: left;
}
.c-plan__checklist li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 15px;
    line-height: 1.375;
    font-weight: 600;
}
.c-plan__checklist li::before {
    content: "";
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 1px;
}
.c-plan-cell--standard .c-plan__checklist li::before {
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%235F96FC%22%3E%3Cpath%20d%3D%22m424-296%20282-282-56-56-226%20226-114-114-56%2056%20170%20170Zm56%20216q-83%200-156-31.5T197-197q-54-54-85.5-127T80-480q0-83%2031.5-156T197-763q54-54%20127-85.5T480-880q83%200%20156%2031.5T763-763q54%2054%2085.5%20127T880-480q0%2083-31.5%20156T763-197q-54%2054-127%2085.5T480-80Z%22%2F%3E%3C%2Fsvg%3E');
}
.c-plan-cell--premium .c-plan__checklist li::before {
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%231754C4%22%3E%3Cpath%20d%3D%22m424-296%20282-282-56-56-226%20226-114-114-56%2056%20170%20170Zm56%20216q-83%200-156-31.5T197-197q-54-54-85.5-127T80-480q0-83%2031.5-156T197-763q54-54%20127-85.5T480-880q83%200%20156%2031.5T763-763q54%2054%2085.5%20127T880-480q0%2083-31.5%20156T763-197q-54%2054-127%2085.5T480-80Z%22%2F%3E%3C%2Fsvg%3E');
}

/* ---------- 導入フロー ---------- */
/* イラスト画像(それぞれサイズが異なる)をカード上部に少し重ねて配置する */
.c-flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 64px;
    padding-inline: 32px;
}

.c-flow__step {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.c-flow__img {
    height: 150px;
    width: auto;
    margin-bottom: -80px;
    position: relative;
    z-index: 1;
}

.c-flow__card {
    width: 100%;
    background: var(--color-bg);
    border: 2px solid var(--color-primary);
    border-radius: 12px;
    padding: 96px 24px 28px;
    text-align: center;
}

.c-flow__title {
    font-size: 24px;
    font-weight: bold;
    line-height: var(--lh-heading);
    margin-bottom: 12px;
}

.c-flow__text {
    line-height: var(--lh-body);
    text-align: left;
    line-height: 1.5;
}

@media (max-width: 992px) {
    .c-features {
        gap: 40px;
    }
    .c-feature,
    .c-feature:nth-child(even) {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }
    .c-feature__num {
        font-size: 40px;
    }
    .c-feature__title {
        font-size: 20px;
    }
}
@media (max-width: 768px) {
    .c-hero {
        background-image: url(../images/mv-bg-sp.png);
        aspect-ratio: 563 / 1176;
    }
    .c-hero__kicker {
        top: 3%;
        left: 52%;
        width: 92cqw;
        transform: translateX(-50%);
        font-size: 4.5cqw;
        text-align: center;
        white-space: normal;
    }
    .c-hero__title {
        top: 7%;
        left: 50%;
        width: 92cqw;
        transform: translateX(-50%);
        font-size: 9.6cqw;
        text-align: center;
        white-space: normal;
    }
    .c-hero__stats {
        top: 22%;
        left: 50%;
        width: 96cqw;
        transform: translateX(-50%);
        display: grid;
        grid-template-columns: repeat(2, auto);
        justify-content: center;
        gap: 2cqw 3cqw;
    }
    .c-hero__stat:nth-child(3) {
        grid-column: 1 / -1;
        justify-self: center;
    }
    .c-hero__stat-bracket {
        height: 16cqw;
    }
    .c-hero__stat-label,
    .c-hero__stat-value {
        font-size: 4cqw;
    }
    .c-hero__stat-value strong {
        font-size: 7.5cqw;
        font-weight: 700;
    }
    .c-hero__buttons {
        top: 43%;
        left: 50%;
        width: 88cqw;
        transform: translateX(-50%);
        flex-direction: column;
        align-items: center;
        gap: 3cqw;
    }
    .c-hero__buttons .c-btn {
        width: 100%;
        font-size: 6cqw;
        padding-top: 3.2cqw;
        padding-bottom: 2.4cqw;
        padding-inline: 4cqw;
    }
    .c-hero__buttons .c-btn .c-btn__icon {
        width: 6.2cqw;
        height: 6.2cqw;
    }
    .c-hero__visual {
        top: 62%;
        right: auto;
        bottom: -8%;
        left: 50%;
        width: 100cqw;
        transform: translateX(-50%);
        overflow-x: hidden;
    }
    .c-hero__visual .c-hero__fig {
        transform: translateX(-3cqw) scale(1.025);
    }
    .c-hero__badge {
        width: 20cqw;
        right: 2%;
        bottom: 20%;
    }
    .c-important-news__label {
        gap: 4px;
        font-size: 20px;
    }
    .c-important-news__label span {
        width: 28px;
        height: 28px;
    }
    .c-important-news__list a {
        flex-direction: column;
        gap: 4px;
    }
    .c-important-news__title {
        width: 100%;
        overflow: hidden;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        max-height: 48px;
    }
    .c-section__eyebrow {
        font-size: 20px;
    }
    .c-section__title {
        font-size: 26px;
    }
    .c-section {
        padding-block: 60px;
    }
    .c-usecase {
        width: 100%;
        max-width: 340px;
    }
    .c-flow {
        grid-template-columns: 1fr;
        padding-inline: 0;
    }
    .c-flow__title {
        font-size: 20px;
    }
    .c-flow__img {
        height: 136px;
    }
    .c-plan-panel {
        grid-template-columns: 124px 1fr 1fr;
        min-width: 640px;
        margin: 32px auto 0;
    }
    .c-plan-labels__item {
        font-size: 16px;
        padding: 8px;
        text-align: center;
    }
    .c-plan__catch {
        font-size: 13px;
        line-height: 1.25;
    }
    .c-plan__num--price {
        font-size: 26px;
    }
    .c-plan-cell {
        padding: 8px 12px;
    }
    .c-plan__ribbon {
        left: -36px;
        width: 70px;
        height: 70px;
        font-size: 13px;
    }
    .c-plan__name {
        font-size: 18px;
    }
    .c-faq-item {
        padding: 0 16px;
        border-radius: 16px;
    }
    .c-faq-item__q {
        padding: 16px 0;
    }
    .c-faq-item__question {
        font-size: 18px;
    }
    .c-faq-item__mark {
        width: 32px;
        height: 32px;
        font-size: 20px;
    }
    .c-faq-item__icon {
        width: 24px;
        height: 24px;
    }
    .c-faq-item__icon::before {
        width: 24px;
        height: 2px;
    }
    .c-faq-item__icon::after {
        width: 2px;
        height: 24px;
    }
    .c-news-panel__head {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
    .c-usecases {
        gap: 16px 32px;
    }
}