/* ==========================================================================
   component.css - ボタン・パンくず・ページネーション・CTA・サイドバー等
   ========================================================================== */

/* ---------- Button ---------- */
.c-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 28px 11px;
    border-radius: 999px;
    font-size: clamp( 16px, calc( 14.666666666666666px + 0.4166666666666667vw ), 20px );
    font-weight: bold;
    text-align: center;
    transition: all 0.2s ease;
}
.c-btn:hover {
    opacity: 1;
}
.c-btn__icon {
    flex-shrink: 0;
}
.c-btn--primary {
    background: #1767FA;
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 3px 0 var(--color-primary-dark);
}
.c-btn--primary:hover {
    background: var(--color-primary-dark);
    transform: translateY(3px);
    box-shadow: 0 0px 0 var(--color-primary-dark);
}
.c-btn--accent {
    background: var(--color-accent);
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 3px 0 var(--color-accent-dark);
}
.c-btn--accent:hover {
    background: var(--color-accent-dark);
    transform: translateY(3px);
    box-shadow: 0 0px 0 var(--color-primary-dark);
}
.c-btn--outline {
    background: #fff;
    color: var(--color-primary);
    text-decoration: none !important;
    border: 1px solid var(--color-primary);
}
.c-btn--white {
    background: #fff;
    color: var(--color-primary);
    text-decoration: none !important;
    box-shadow: 0 3px 0 rgba(255, 255, 255, 0.5);
}
.c-btn--white:hover {
    transform: translateY(3px);
    box-shadow: 0 0px 0 rgba(255, 255, 255, 0.5);
    opacity: 0.9;
}

/* 遷移系ボタン(一覧を見る/事例一覧へ 等、ページ遷移を促すボタン)の背景 */
.c-btn--gradient {
    background: var(--gradient-primary-btn);
    background-size: 200% 100%;
    background-position: 0% 0%;
    color: #fff !important;
    text-decoration: none !important;
    padding: 11px clamp( 50px, calc( 40px + 3.125vw ), 80px ) 13px clamp( 20px, calc( 6px + 4.375vw ), 62px );
    position: relative;
    transition: all 0.375s ease-out;
}
.c-btn--gradient .arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: clamp( 32px, calc( 29.333333333333332px + 0.8333333333333334vw ), 40px );
    height: clamp( 32px, calc( 29.333333333333332px + 0.8333333333333334vw ), 40px );
    color: var(--color-primary);
    background: var(--color-bg);
    border-radius: 50%;
    position: absolute;
    top: calc(50% - clamp( 16px, calc( 14.666666666666666px + 0.4166666666666667vw ), 20px ));
    right: 10px;
}
.c-btn--gradient .arrow::after {
    display: block;
    width: clamp( 24px, calc( 22px + 0.625vw ), 30px );
    height: clamp( 24px, calc( 22px + 0.625vw ), 30px );
    content: "";
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2240px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2240px%22%20fill%3D%22%230454D7%22%3E%3Cpath%20d%3D%22M673-446.67H193.33q-14.33%200-23.83-9.5-9.5-9.5-9.5-23.83%200-14.33%209.5-23.83%209.5-9.5%2023.83-9.5H673L456.33-730q-10-10-9.83-23.33.17-13.34%2010.17-23.34%2010-9.66%2023.33-9.83%2013.33-.17%2023.33%209.83l273.34%20273.34q5.33%205.33%207.5%2011%202.16%205.66%202.16%2012.33t-2.16%2012.33q-2.17%205.67-7.5%2011L503.33-183.33q-9.66%209.66-23.16%209.66t-23.5-9.66q-10-10-10-23.5t10-23.5L673-446.67Z%22%2F%3E%3C%2Fsvg%3E');
    background-size: cover;
}
.c-btn--gradient:hover {
    background-position: 100% 0%;
}
.c-btn--gradient:hover .arrow::after {
    animation: fadeInLeft 0.5s ease 1 both;
}
@keyframes fadeInLeft {
  0% { opacity: 0; transform: translate3d(-100%, 0px, 0px); }
  100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}

/* ---------- Breadcrumb ---------- */
.c-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-text-sub);
}

.c-breadcrumb a {
    text-decoration: underline;
}

.c-breadcrumb__sep {
    color: var(--color-text-sub);
}

/* ---------- Page header (アーカイブ/詳細見出しエリア) ---------- */
.c-page-header {
    position: relative;
    padding: 56px 0;
}

.c-page-header--band {
    background: var(--color-bg-sub);
}

/* FAQ等、グラデーション背景+ウォーターマーク文字にしたい場合の追加バリアント */
.c-page-header--gradient {
    background: var(--gradient-primary);
    margin-bottom: clamp( 40px, calc( 32px + 2.5vw ), 64px );
    min-height: clamp( 178px, calc( 144px + 10.625vw ), 280px );
    display: flex;
}
.c-page-header--gradient .c-page-header__eyebrow,
.c-page-header--gradient .c-page-header__title-prefix,
.c-page-header--gradient .c-page-header__title {
    color: #fff;
    line-height: 1.25;
}
.c-page-header--gradient .container {
    width: var(--container-width);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.c-page-header__watermark {
    position: absolute;
    bottom: clamp( -80px, calc( -16px + -5vw ), -32px );
    right: 0%;
    transform: translateY(-50%);
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: clamp( 60px, calc( 40px + 6.25vw ), 120px );
    line-height: 1;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.15);
    white-space: nowrap;
    pointer-events: none;
}

.c-page-header__eyebrow {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.25;
    font-family: "Poppins", sans-serif;
    letter-spacing: 0;
    color: var(--color-primary);
}

.c-page-header__title-prefix {
    font-size: clamp( 30px, calc( 26px + 1.25vw ), 42px );
    font-weight: bold;
    color: var(--color-primary);
    margin-top: 4px;
}

/* プレミアムプラン限定機能のページヘッダーに表示する白枠バッジ(eyebrowとtitleの間) */
.c-page-header__badge {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 16px;
    background: #FFF;
    border-radius: 999px;
    color: var(--color-primary);
    font-weight: bold;
    line-height: 1.25;
    align-self: flex-start;
}

.c-page-header__title {
    font-size: clamp( 30px, calc( 26px + 1.25vw ), 42px );
    font-weight: bold;
    color: var(--color-primary);
}

.c-page-header__description {
    max-width: 512px;
    margin-top: 12px;
    line-height: var(--lh-body);
}
.c-page-header--gradient .c-page-header__description {
    color: #fff;
}

.c-page-header__illustration {
    position: absolute;
    right: 6%;
    top: 20px;
    height: clamp( 100px, 20vw, 280px );
    width: auto;
    pointer-events: none;
}
@media (max-width: 768px) {
    .c-page-header__illustration {
        top: 85%;
    }
}

/* ---------- Post meta (日付+カテゴリ) ---------- */
.c-post-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 16px;
    row-gap: 6px;
    color: var(--color-text-sub);
}
.c-post-meta__date,
.c-post-meta__modified {
    font-weight: bold;
    transform: translateY(-3px);
}
.c-post-list>P {
    padding-top: 1rem;
}
.c-post-list .c-post-meta__date {
    color: var(--color-primary);
}
.single-column .c-post-meta__date::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 4px;
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2240px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2240px%22%20fill%3D%22%23195dd9%22%3E%3Cpath%20d%3D%22M522.3-497.27v-148.64q0-17.3-11.58-28.8-11.59-11.51-28.64-11.51t-28.72%2011.51q-11.66%2011.5-11.66%2028.8v164.26q0%208.74%202.99%2016.32t8.98%2014.32l132.46%20135.79q12.22%2012.41%2029.28%2012.08%2017.07-.34%2029.37-12.08%2012.31-11.74%2012.31-29.08%200-17.35-12.31-29.66L522.3-497.27Zm-42.25%20433.1q-86.15%200-161.93-32.69t-132.16-89.07q-56.39-56.37-89.09-132.13-32.7-75.76-32.7-161.9t32.78-161.96q32.77-75.82%2089.04-132.09%2056.27-56.27%20132.05-89.23Q393.83-896.2%20480-896.2t161.96%2032.96q75.78%2032.96%20132.05%2089.23%2056.27%2056.27%2089.23%20132.05Q896.2-566.17%20896.2-480t-32.96%20161.96q-32.96%2075.78-89.23%20132.05-56.27%2056.27-132.04%2089.04-75.76%2032.78-161.92%2032.78ZM480-480Zm-.19%20327.68q135.41%200%20231.64-95.76%2096.23-95.76%2096.23-231.73%200-135.97-96.18-231.92-96.18-95.95-231.49-95.95-135.6%200-231.65%2095.9-96.04%2095.9-96.04%20231.78%200%20136.16%2096.04%20231.92%2096.04%2095.76%20231.45%2095.76Z%22%2F%3E%3C%2Fsvg%3E');
    background-size: cover;
    transform: translateY(5px);
}
.single-column .c-post-meta__modified::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 4px;
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2240px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2240px%22%20fill%3D%22%23195dd9%22%3E%3Cpath%20d%3D%22M480-61.16q-78.3%200-146.91-29.7-68.6-29.71-119.51-80.68-50.9-50.97-80.44-119.44-29.53-68.47-29.53-146.62t29.72-146.67q29.73-68.51%2080.77-119.27%2051.04-50.76%20119.64-80.49%2068.59-29.72%20146.88-29.72h17.28l-38.13-38.13q-12.58-12.3-12.53-30.52.05-18.21%2012.63-31.12%2012.59-12.6%2031.1-12.45%2018.52.14%2031.06%2012.68l111.12%20111.41q13.05%2013.43%2013.05%2031.34%200%2017.9-13.05%2030.96L522.03-629.03q-12.64%2013.02-30.9%2013.23-18.26.21-31.17-12.81-13.06-13.25-12.73-31.15.34-17.91%2013.39-31.34l34.51-34.13h-17.9q-119.31%200-202.11%2083.83-82.8%2083.83-82.8%20203.78t83.85%20203.95q83.85%2083.99%20203.83%2083.99%20108.15%200%20189.71-70.79%2081.55-70.78%2095.88-177.78%202.95-17.2%2016.29-28.16%2013.34-10.95%2030.33-10.95%2018.79%200%2031.49%2011.4%2012.69%2011.41%2011.17%2027.8-14.68%20145.34-122.28%20241.17Q625-61.16%20480-61.16Z%22%2F%3E%3C%2Fsvg%3E');
    background-size: cover;
    transform: translateY(5px);
}

/* ---------- Post list item (お知らせ一覧の1行) ---------- */
.c-post-list {
    border-top: 1px solid var(--color-border);
}

.c-post-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 0;
    border-bottom: 1px solid var(--color-border);
    transition: all 0.2s ease;
}
.c-post-list__item:hover {
    border-color: var(--color-primary);
}
.c-post-list__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.c-post-list__title {
    line-height: var(--lh-heading);
    transition: all 0.2s ease;
}
.c-post-list__item:hover {
    opacity: 1;
}
.c-post-list__item:hover .c-post-list__title {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.c-post-list__arrow {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.c-post-list__arrow svg {
    width: 18px;
    height: 18px;
}

/* ---------- Pick up (コラム一覧のピックアップ記事) ---------- */
.c-pickup {
    margin-bottom: 48px;
}
.c-pickup__label {
    display: inline-block;
    font-size: clamp( 22px, calc( 20px + 0.625vw ), 28px );
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.25;
    color: #fff;
    background: var(--color-primary);
    padding: 0.5rem 1.5rem;
    border-radius: 0.75rem 0.75rem 0 0;
}
.c-pickup__list {
    display: flex;
    flex-direction: column;
}

/* ---------- Card (コラム一覧・PICK UP共通のアイキャッチ+カテゴリ+タイトル+日付) ---------- */
.c-card {
    display: flex;
    flex-direction: column;
}

.c-card__thumbnail {
    display: block;
    /*aspect-ratio: 3 / 2;*/
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-bg-sub);
}

.c-card__thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
}

.c-card__title {
    font-size: clamp( 16px, calc( 14.666666666666666px + 0.4166666666666667vw ), 20px );
    font-weight: bold;
    line-height: 1.5;
}
.c-card__date {
    font-size: 16px;
    color: var(--color-text-sub);
}

/* 記事一覧ホバー時はタイトルを#195DD9に変える(全体を薄くする一般的なa:hoverは無効化) */
.c-card:hover {
    opacity: 1;
}
.c-card:hover .c-card__title {
    color: var(--color-primary);
}

/* PICK UP用: 横並びの大きいカード */
.c-card--pickup {
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    padding-block: 24px;
    padding-inline: clamp( 24px, calc( 21.333333333333332px + 0.8333333333333334vw ), 32px );
    background: var(--color-bg-sub);
    border-radius: 0 1rem 1rem 1rem;
}
.c-card--pickup:has(+.c-card--pickup) {
    border-radius: 0 1rem 0 0;
}
.c-card--pickup+.c-card--pickup {
    border-radius: 0 0 1rem 1rem;
    padding-top: 0;
}
.c-card--pickup .c-card__thumbnail {
    flex-shrink: 0;
    width: 200px;
}

.c-card--pickup .c-card__body {
    margin-top: 0;
}

.c-card--pickup .c-card__title {
    font-size: 16px;
}

.c-card--compact {
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    margin-block: 32px;
}

.c-card--compact .c-card__thumbnail {
    flex-shrink: 0;
    width: 192px;
}

.c-card--compact .c-card__body {
    margin-top: 0;
}

.c-card-list {
    display: flex;
    flex-direction: column;
}

.c-card--related {
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    padding: clamp( 24px, calc( 21.333333333333332px + 0.8333333333333334vw ), 32px );
    background: var(--color-bg-sub);
    border-radius: 16px;
}
.c-card--related .c-card__thumbnail {
    flex-shrink: 0;
    width: 227px;
    border-radius: 4px;
}
.c-card--related .c-card__body {
    margin-top: 0;
}

/* ---------- Resource card (資料請求一覧: サムネイル+タイトル+概要文+資料請求はこちら) ---------- */
.c-resource-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 1000px;
    margin-inline: auto;
}

.c-resource-card {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 24px;
    background: var(--color-bg-sub);
    border-radius: 16px;
    transition: opacity 0.2s ease;
}
.c-resource-card:hover {
    opacity: 0.8;
}

.c-resource-card__thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 260px;
    aspect-ratio: 3 / 2;
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-bg);
}
.c-resource-card__thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c-resource-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1;
    gap: 8px;
    height: stretch;
}

.c-resource-card__title {
    font-size: clamp( 16px, calc( 14.666666666666666px + 0.4166666666666667vw ), 20px );
    font-weight: bold;
    line-height: 1.5;
}

.c-resource-card__excerpt {
    font-size: 14px;
    color: var(--color-text-sub);
    line-height: var(--lh-body);
}

.c-resource-card__link {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    margin-left: auto;
    font-weight: bold;
    border-bottom: solid 2px var(--color-border);
    padding-top: 8px;
    padding-bottom: 2px;
}

.c-resource-card__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--gradient-primary);
}

@media (max-width: 768px) {
    .c-resource-card {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
    }
    .c-resource-card__thumbnail {
        width: 100%;
    }
}

/* ---------- Card grid (コラム一覧) ---------- */
.c-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 24px;
}

/* ---------- Pagination ---------- */
.c-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 40px;
}

.c-pagination__link,
.c-pagination__current {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 24px;
}
.c-pagination__link.prev,
.c-pagination__link.next {
    border: solid 1px var(--color-primary);
}
.c-pagination__link.prev svg,
.c-pagination__link.next svg {
    width: 64%;
    height: 64%;
}

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

.c-pagination__arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Sidebar ---------- */
.c-sidebar.c-news-sidebar {
    padding: clamp( 16px, calc( 13.333333333333334px + 0.8333333333333334vw ), 24px );
}
.c-sidebar__block + .c-sidebar__block {
    margin-top: 32px;
}

.c-sidebar__title {
    font-weight: bold;
    margin-bottom: 8px;
}
.c-sidebar__title::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
    margin-right: 8px;
}
.c-sidebar__list li + li {
    margin-top: 8px;
}

/* コラム一覧サイドバーの資料請求バナー(1枚画像) */
.c-sidebar__banner {
    display: block;
}

.c-sidebar__banner-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* コラム一覧サイドバーのカテゴリタグ一覧 */
.c-sidebar__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.c-sidebar__search {
    display: flex;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow: hidden;
    border-radius: 999px;
}
.c-sidebar__search input {
    flex: 1;
    padding: 6px 12px;
    border-radius: 999px 0 0 999px;
    width: calc(100% - 48px);
}
.c-sidebar__search button {
    width: 48px;
    background-color: var(--color-bg);
    padding: 0 12px;
    border-radius: 0 999px 999px 0;
}
.c-sidebar__search button span {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    filter: grayscale(1) brightness(2);
    transition: all 0.2s ease;
}
.c-sidebar__search button:hover span {
    filter: grayscale(0) brightness(1);
}
.c-sidebar__year {
    border-color: var(--color-border);
    padding: 12px 24px 12px 12px;
    width: 100%;
    border-radius: 999px;
    font-size: 1rem;
    appearance: none;
}
.c-sidebar__year-wrap {
    position: relative;
}
/* 検索エリア最下部の「条件をリセット」。カテゴリ・キーワード検索・年アーカイブを
   まとめてクリアするだけなので、目立たせすぎない控えめな見た目にしている */
.c-sidebar__reset {
    text-align: center;
}
.c-sidebar__reset-link {
    display: block;
    font-size: 14px;
    padding: 6px;
    border: solid 1px var(--color-border-strong);
    border-radius: 999px;
    color: var(--color-text-sub);
    transition: all 0.2s;
}
.c-sidebar__reset-link:hover {
    color: var(--color-text);
    background: #FFF;
    opacity: 1;
}

.c-sidebar__year-wrap::after {
    content: "";
    display: block;
    height: 1.5rem;
    width: 1.5rem;
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2220px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2220px%22%20fill%3D%22%23999999%22%3E%3Cpath%20d%3D%22M466.5-350.5Q460-353%20455-358L265-548q-11-11-10.5-25.5T266-599q11-11%2025.5-11t25.5%2011l163%20164%20164-164q11-11%2025.5-10.5T695-598q11%2011%2011%2025.5T695-547L505-358q-5%205-11.5%207.5T480-348q-7%200-13.5-2.5Z%22%2F%3E%3C%2Fsvg%3E');
    background-size: cover;
    position: absolute;
    top: calc(50% - 0.75rem + 0.125rem);
    right: 0.5rem;
    bottom: 0;
}


/* ---------- CTA box (下部の申込導線) ---------- */
.c-cta {
    background: var(--gradient-primary);
    padding: 56px 0;
    position: relative;
    overflow: hidden;
}
.c-cta .container {
    position: relative;
    z-index: 1;
}
.c-cta::after {
    display: block;
    content: "";
    width: 660px;
    height: 410px;
    background: url(../images/c-cta__cloud.png);
    background-size: contain;
    position: absolute;
    bottom: -120px;
    right: -120px;
    z-index: 0;
}

.c-cta__box {
    background: #fff;
    outline: 2px solid var(--color-primary);
    outline-offset: -10px;
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    margin-inline: auto;
}

.c-cta__badge {
    display: inline-block;
    background: var(--color-accent);
    color: #fff;
    border-radius: 999px;
    padding: 8px 16px;
    font-weight: bold;
    font-size: 13px;
}

.c-cta__copy {
    margin-top: 12px;
    margin-bottom: 30px;
}
.c-cta__copy img {
    width: 100%;
    max-width: 920px;
    margin-inline: auto;
}
.c-cta__copy .sp {
    display: none;
}
.c-cta__copy .pc {
    display: block;
}
.c-cta__buttons {
    display: flex;
    justify-content: center;
    column-gap: 24px;
    row-gap: 16px;
    margin-top: 36px;
    flex-wrap: wrap;
}
.c-cta__buttons .c-btn {
    font-size: 165%;
    padding: 16px clamp( 38px, calc( 32px + 1.875vw ), 56px ) 13px;
}
.c-cta__buttons .c-btn .c-btn__icon {
    width: clamp( 22px, calc( 20px + 0.625vw ), 28px );
    height: clamp( 22px, calc( 20px + 0.625vw ), 28px );
}
.c-cta__note {
    font-size: clamp( 13px, calc( 12px + 0.3125vw ), 16px );
    color: var(--color-text-sub);
    margin-top: 28px;
}
.c-cta__note a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}
.c-cta__caption {
    margin: 15px auto 0;
    color: white;
    font-size: 86.666%;
}

/* ---------- Scroll hint (横スクロールできる要素であることをSPだけで示すヒント画像) ---------- */
/* 対象のラップ要素に .c-scroll-hint を付けるだけで、scroll-hint.js が
   SP幅の場合のみ画像を自動で挿入する。ゆっくり左右に揺れ、
   タップまたは3秒経過で自動的にフェードアウトする */
.c-scroll-hint {
    position: relative;
    overflow-x: auto;
}

.c-scroll-hint__img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 136px;
    height: 96px;
    margin-top: -48px;
    margin-left: -68px;
    z-index: 5;
    cursor: pointer;
    animation: c-scroll-hint-sway 2.4s ease-in-out infinite;
    transition: opacity 0.4s ease;
}
.c-scroll-hint__img.is-hidden {
    opacity: 0;
    pointer-events: none;
}

/* 目次プラグイン Easy Table of Contents */
.ez-toc-title-container {
    margin-bottom: 16px;
}
.ez-toc-title-container .ez-toc-title {
    display: flex !important;
    align-items: center;
    gap: 0.25rem;
}
.ez-toc-title-container .ez-toc-title::before {
    display: inline-block;
    content: "";
    width: 32px;
    height: 32px;
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2240px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2240px%22%20fill%3D%22%23195dd9%22%3E%3Cpath%20d%3D%22M286.67-613.33V-680H840v66.67H286.67Zm0%20166.66v-66.66H840v66.66H286.67Zm0%20166.67v-66.67H840V-280H286.67ZM153.33-613.33q-13.66%200-23.5-9.84Q120-633%20120-647q0-14%209.83-23.5%209.84-9.5%2023.84-9.5t23.5%209.58q9.5%209.59%209.5%2023.75%200%2013.67-9.59%2023.5-9.58%209.84-23.75%209.84Zm0%20166.66q-13.66%200-23.5-9.83-9.83-9.83-9.83-23.83%200-14%209.83-23.5%209.84-9.5%2023.84-9.5t23.5%209.58q9.5%209.58%209.5%2023.75%200%2013.67-9.59%2023.5-9.58%209.83-23.75%209.83Zm0%20166.67q-13.66%200-23.5-9.83-9.83-9.84-9.83-23.84t9.83-23.5q9.84-9.5%2023.84-9.5t23.5%209.59q9.5%209.58%209.5%2023.75%200%2013.66-9.59%2023.5-9.58%209.83-23.75%209.83Z%22%2F%3E%3C%2Fsvg%3E');
    background-size: cover;
}
div#ez-toc-container ul li.ez-toc-heading-level-2>a {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
}
div#ez-toc-container ul li.ez-toc-heading-level-3>a {
    font-size: 16px;
    font-weight: bold;
    padding-left: 16px;
    border-left: solid 3px var(--color-primary);
    margin-bottom: 8px;
}
div#ez-toc-container ul li.ez-toc-heading-level-4>a,
div#ez-toc-container ul li.ez-toc-heading-level-5>a {
    font-size: 16px;
    font-weight: normal;
    margin-bottom: 8px;
}
div#ez-toc-container {
    margin: 48px auto !important;
    border-radius: 8px;
    background-color: var(--color-bg-lightgray);
    border: none;
    padding: 32px clamp( 24px, calc( 16px + 2.5vw ), 48px ) 24px;
    position: relative;
}
div#ez-toc-container::before {
    content: "";
    width: 100%;
    height: 8px;
    border-radius: 8px 8px 0 0;
    background: var(--gradient-primary);
    position: absolute;
    top: 0;
    left: 0;
}
.wp-block-post-featured-image {
    margin-bottom: clamp( 32px, calc( 26.666666666666668px + 1.6666666666666667vw ), 48px );
}

/* テーブル */
.wp-block-table {
    margin-block: 48px;
}
.wp-block-table td, .wp-block-table th {
    border: solid 2px var(--color-bg);
}
.wp-block-table th {
    background: var(--gradient-primary);
    color: var(--color-bg);
    font-weight: bold;
    padding: 12px clamp( 16px, calc( 13.333333333333334px + 0.8333333333333334vw ), 24px );
}
.wp-block-table td {
    background: var(--color-bg-sub);
    padding: 12px clamp( 16px, calc( 13.333333333333334px + 0.8333333333333334vw ), 24px );
}
.wp-block-table tr:first-child th:first-child,
.wp-block-table tr:first-child td:first-child {
    border-radius: 12px 0 0 0;
}
.wp-block-table tr:first-child th:last-child,
.wp-block-table tr:first-child td:last-child {
    border-radius: 0 12px 0 0;
}
.wp-block-table tr:last-child th:last-child,
.wp-block-table tr:last-child td:last-child {
    border-radius: 0 0 12px 0;
}
.wp-block-table tr:last-child th:first-child,
.wp-block-table tr:last-child td:first-child {
    border-radius: 0 0 0 12px;
}

@keyframes c-scroll-hint-sway {
    0%, 100% {
        transform: translateX(-10px);
    }
    50% {
        transform: translateX(10px);
    }
}

@media (min-width: 769px) {
    .c-scroll-hint__img {
        display: none;
    }
}

@media (max-width: 768px) {
    .c-card-grid {
        grid-template-columns: 1fr;
    }
    .c-card--pickup {
        flex-direction: column;
        align-items: flex-start;
    }
    .c-card--pickup .c-card__thumbnail {
        width: 100%;
    }
    .c-card--compact {
        align-items: flex-start;
    }
    .c-card--compact .c-card__thumbnail {
        width: clamp( 128px, calc( 106.66666666666667px + 6.666666666666667vw ), 192px );
        border-radius: 6px;
    }
    .c-card--related {
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .c-card--related .c-card__thumbnail {
        width: 100%;
    }
    .c-cta__box {
        padding: 24px;
    }
    .c-cta__buttons .c-btn {
        font-size: 100%;
        padding: 12px 16px 10px;
        width: 100%;
        max-width: 400px;
    }
    .c-cta__copy img {
        max-width: 400px;
    }
    .c-cta__copy .sp {
        display: block;
    }
    .c-cta__copy .pc {
        display: none;
    }
    .c-sidebar__list {
        display: flex;
        flex-wrap: wrap;
        column-gap: 16px;
        row-gap: 8px;
    }
    .c-sidebar__list li + li {
        margin-top: unset;
    }
}

/* ---------- フローティングバナー(画面右端・天地中央に固定表示) ---------- */
.c-floating-banner {
    position: fixed;
    bottom: 10px;
    right: 0;
    z-index: 80;
}
/* トップページのみ、ファーストビュー(ロゴスクロールアニメーション領域より上)では非表示にし、
   その領域を通過したらフワッと表示する。表示切り替えはcommon.jsのIntersectionObserverが
   .c-logo-set-sliderの通過を検知して.is-visibleを付け外しする */
body.home .c-floating-banner {
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    pointer-events: none;
}
body.home .c-floating-banner.is-visible {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.c-floating-banner__link {
    display: block;
}
.c-floating-banner__link:hover {
    opacity: 1;
}
.c-floating-banner__link:hover .c-floating-banner__img {
    box-shadow: 0 0 0.75rem rgba(0,0,0,.375);
}
/* PC用・スマホ用とも固定サイズ・縦横比は持たせず、登録した画像を実寸で表示する
   (グローバルなimg{max-width:100%}を上書きし、幅の狭い画面でも縮小させない) */
.c-floating-banner__img {
    max-width: none;
    width: auto;
    height: auto;
    transition: box-shadow 0.2s ease;
}

/* ×は画像側に描き込み済みのため、ここでは右上に透明なクリック領域だけを重ねる */
.c-floating-banner__close {
    position: absolute;
    top: 0;
    right: 0;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: e-resize;
    z-index: 1;
}
@media (max-width: 768px) {
    .c-floating-banner {
        bottom: 52px;
    }
}

/* ---------- スマホ専用 追従型CTA(画面最下部に固定、お問い合わせ/お申し込み/資料請求の3分割) ----------
   表示するかどうかはinc/helpers.phpのmovfax_should_show_sp_fixed_cta()で判定済み
   (トップページは常時表示。固定ページ/お知らせ/コラム/導入事例は記事ごとのメタボックスでON/OFF)。
   PCでは常に非表示にし、スマホ幅でのみ表示する */
.c-sp-fixed-cta {
    display: none;
}
@media (max-width: 768px) {
    .c-sp-fixed-cta {
        display: flex;
        position: fixed;
        gap: 6px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        background: rgba(255,255,255,.85);
        padding: 8px;
        letter-spacing: 0;
    }
}
.c-sp-fixed-cta__item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 4px 9px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.2;
    color: #fff !important;
    text-decoration: none !important;
}
.c-sp-fixed-cta__item--primary {
    background: #1767FA;
    box-shadow: 0 3px 0 var(--color-primary-dark);
}
.c-sp-fixed-cta__item--accent {
    background: var(--color-accent);
    box-shadow: 0 3px 0 var(--color-accent-dark);
}
.c-sp-fixed-cta__item--dark {
    background: #343434;
    box-shadow: 0 3px 0 #000000;
}
.c-sp-fixed-cta__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* スマホで追従型CTAが表示されている間、画面最下部までスクロールした際に
   フッターの内容(コピーライト等)が固定CTAの下に隠れてしまわないよう、
   フッターに追従型CTAの高さぶんの余白を追加する */
@media (max-width: 768px) {
    body:has(.c-sp-fixed-cta) .l-footer {
        padding-bottom: 56px;
    }
}

/* ---------- 画像未用意エリアの仮プレースホルダー ---------- */
.c-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background: var(--color-bg-sub);
    color: var(--color-text-sub);
    font-weight: bold;
    letter-spacing: 0; /* "IMAGE" は英字ラベルのため文字間0 */
    border-radius: 8px;
}

/* ---------- 導入事例カード(トップページ「導入事例・お客様の声」、導入事例アーカイブで共通利用) ---------- */
.c-case-grid {
    display: grid;
    grid-template-columns: repeat(3, calc(33.33333% - 24px));
    column-gap: 36px;
    row-gap: 42px;
    margin-block: clamp( 40px, calc( 32px + 2.5vw ), 64px ) clamp( 64px, calc( 58px + 1.875vw ), 82px );
}

/* カード自体に開き/閉じの引用符アイコン(case-card--before.svg / case-card--after.svg)を
   カードの角からはみ出す形で配置する。文字(“ ”)で表現すると参照フォントが環境によって
   異なり見え方が変わってしまうため、SVG画像に統一している */
.c-case-card {
    display: block;
    position: relative;
    background: var(--color-bg-sub);
    border-radius: 16px;
    padding: 30px;
    overflow: visible;
}
.c-case-card::before,
.c-case-card::after {
    content: "";
    display: block;
    width: clamp( 36px, calc( 33px + 0.9375vw ), 45px );
    aspect-ratio: 46.121 / 38.234;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
}
.c-case-card::before {
    background-image: url(../images/case-card--before.svg);
    top: -16px;
    left: 18px;
}
.c-case-card::after {
    background-image: url(../images/case-card--after.svg);
    bottom: -16px;
    right: 18px;
}

.c-case-card__thumbnail {
    display: block;
    aspect-ratio: 315 / 210;
    border-radius: 12px;
    overflow: hidden;
}

.c-case-card__thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c-case-card__thumbnail .c-ph {
    border-radius: 0;
}

.c-case-card__body {
    display: block;
    padding-top: 16px;
}

.c-case-card__title {
    display: block;
    font-weight: bold;
    line-height: var(--lh-heading);
    margin-bottom: 8px;
    word-break: break-all;
}

.c-case-card__excerpt {
    display: block;
    font-size: 16px;
    word-break: break-all;
}

.c-case-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

/* 記事一覧ホバー時はタイトルを#195DD9に変える(全体を薄くする一般的なa:hoverは無効化) */
.c-case-card:hover {
    opacity: 1;
}
.c-case-card:hover .c-case-card__title {
    color: var(--color-primary);
}

@media (max-width: 768px) {
    .c-case-grid {
        grid-template-columns: 1fr;
    }
}

/* 「もっと見る」ボタンのプラスアイコン(.c-btn--gradient .arrowの+版) */
.c-btn--gradient .plus {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: clamp( 32px, calc( 29.333333333333332px + 0.8333333333333334vw ), 40px );
    height: clamp( 32px, calc( 29.333333333333332px + 0.8333333333333334vw ), 40px );
    color: var(--color-primary);
    background: var(--color-bg);
    border-radius: 50%;
    position: absolute;
    top: calc(50% - clamp( 16px, calc( 14.666666666666666px + 0.4166666666666667vw ), 20px ));
    right: 10px;
}
.c-btn--gradient .plus::after {
    display: block;
    width: clamp( 28px, calc( 26.666666666666668px + 0.4166666666666667vw ), 32px );
    height: clamp( 28px, calc( 26.666666666666668px + 0.4166666666666667vw ), 32px );
    content: "";
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2240px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2240px%22%20fill%3D%22%230454D7%22%3E%3Cpath%20d%3D%22M453.33-453.33H240v-53.34h213.33V-720h53.34v213.33H720v53.34H506.67V-240h-53.34v-213.33Z%22%2F%3E%3C%2Fsvg%3E');
    background-size: cover;
}
.c-btn--gradient.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

.c-floating-banner.is-hidden {
    display: none;
}