/* ==========================================================================
   admage.jp 共通スタイル（Bootstrap 非依存）
   旧 Bootstrap 4.3.1 + style.css の見た目を再現している。
   ブレークポイント: sm 576px / md 768px / lg 992px / xl 1200px
   ========================================================================== */

/* ---------- 1. 変数 ---------- */
:root {
    --color-text: #212529;
    --color-muted: #6c757d;
    --color-link: #22adde;
    --color-link-hover: #f49b00;
    --color-accent: #29a3dc;
    --color-blue: #35aed8;
    --color-border: #dee2e6;

    --container-padding: 1rem;   /* 画面左右の余白。全ページ共通 */
    --header-height: 100px;
}

/* ---------- 2. リセット ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-padding-top: var(--header-height);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text);
    background: #fff;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.5rem;
    font-weight: 500;
    line-height: var(--lh-heading);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

/* 見出しは文節の切れ目で改行し、各行の長さを揃える（未対応のブラウザでは通常の折り返し）。
   2026-10-19 にスマホだけから全画面幅に広げた。スマホだけに戻すときは @media (max-width: 767.98px) で囲む */
h1, h2, h3, h4, h5, h6,
.page-hero__title,
.qa__closing,
.strength__catch {
    word-break: auto-phrase;
    text-wrap: balance;
}

/* ---------- 2-2. 見出しの大きさ（役割別） ----------
   HTML のタグ（h2・h3…）は旧ページのまま（SEO のため）なので、大きさと太さは役割で決める。
   値は :root の変数で一括管理し、768px 未満では小さくする */
:root {
    --fs-page: 1.5rem;       /* ページ見出し（ヒーロー） */
    --fs-section: 1.375rem;  /* セクション見出し（中央寄せの大見出し・事例タイトル） */
    --fs-block: 1.25rem;     /* ブロック見出し（記事の見出し・各項目の見出し） */
    --fs-sub: 1.125rem;      /* 小見出し（質問・機能の小見出しなど） */
    --fs-label-lg: 1rem;     /* ラベル見出し・大（記事インデックス・カードの見出しなど） */
    --fs-label: 1rem;        /* ラベル見出し（お話を伺った方々・カードの社名） */
    --lh-heading: 1.4;       /* 見出しの行の高さ（スマホは2行になりやすいので広め） */

    --fw-heading: 700;       /* ページ・セクション・ブロック見出しの太さ */
    --fw-heading-sub: 500;   /* 小見出し・ラベル見出しの太さ（大きい見出しとの差をつけるため一段細く） */
}

@media (min-width: 768px) {
    :root {
        --fs-page: 2.5rem;
        --fs-section: 2rem;
        --fs-block: 1.75rem;
        --fs-sub: 1.5rem;
        --fs-label-lg: 1.25rem;
        --lh-heading: 1.2;
    }
}

.page-hero__title {
    font-size: var(--fs-page);
    font-weight: var(--fw-heading);
}

.top-about__title,
.top-no1__title,
.section-title,
.page-intro__title,
.complete__title,
.cta__title,
.case-hero__title {
    font-size: var(--fs-section);
    font-weight: var(--fw-heading);
}

.article-section__title,
.top-feature__title,
.cz-item__title,
.case-article__heading,
.solution__title,
.strength__title,
.usecase__title,
.function-section__title,
.related-cases__title,
.article-cards__title,
.voices__title,
.client-logos__title,
.case-summary__title {
    font-size: var(--fs-block);
    font-weight: var(--fw-heading);
}

.article-section__subtitle,
.cz-worry__title,
.adnw-target__title,
.adnw-functions__title,
.qa__question,
.qa__closing,
.function-group__title,
.function-icons__title,
.case-comment__title,
.strength__catch,
.voice__company {
    font-size: var(--fs-sub);
    font-weight: var(--fw-heading-sub);
}

.case-index__title,
.adnw-card__title,
.adnw-case__title,
.usecase__functions-title,
.case-card__title,
.related-case__company {
    font-size: var(--fs-label-lg);
    font-weight: var(--fw-heading-sub);
}

.case-profile__heading,
.case-card__company {
    font-size: var(--fs-label);
    font-weight: var(--fw-heading-sub);
}

/* 見た目は見出しだが、内容は見出しではないため <p> で書いていることがあるもの
   （締めの一言・キャッチコピー・事例ページのヒーローのカテゴリー名）。h1〜h6 と同じ余白と行の高さにする */
.page-hero__title,
.qa__closing,
.strength__catch {
    margin-bottom: 0.5rem;
    line-height: var(--lh-heading);
}

p {
    margin: 0 0 1rem;
    line-height: 2.2rem;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

img {
    height: auto;
    vertical-align: middle;
    border-style: none;
}

a {
    color: var(--color-link);
    text-decoration: none;
}

a:hover {
    color: var(--color-link-hover);
}

small {
    font-size: 80%;
}

/* ---------- 3. レイアウト ---------- */
.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }

/* ---------- 4. ヘッダー（グローバルナビ） ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    padding: 0.5rem 0;
    background: rgba(0, 0, 0, 0.8);
    border-bottom: 1px solid #000;
    filter: drop-shadow(0 2px 15px rgba(0, 0, 0, 0.5));
}

/* ヘッダーの中身は .container と同じ幅・左右の余白にして、ロゴの左端を本文に揃える */
.site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
    padding: 0.25rem var(--container-padding);
}

@media (min-width: 576px) { .site-header__inner { max-width: 540px; } }
@media (min-width: 768px) { .site-header__inner { max-width: 720px; } }

.site-header__brand {
    display: inline-block;
    max-width: 200px;
    margin-right: 1rem;
    padding: 0.3125rem 0;
    line-height: 1;
}

.site-header__logo {
    width: 200px;
    max-width: 100%;
    height: auto;
}

.site-header__logomark {
    display: none;
    width: 50px;
    height: auto;
    vertical-align: top;
}

/* lg 幅ではメニューが詰まるのでロゴマークだけにする */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .site-header__logo { display: none; }
    .site-header__logomark { display: inline; }
}

.site-header__toggle {
    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
    background: transparent;
    border: 0;
    border-radius: 0.25rem;
    cursor: pointer;
}

.site-header__toggle-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background: no-repeat center / 100% 100%
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.site-nav {
    display: none;
    flex-basis: 100%;
}

.site-nav.is-open {
    display: block;
}

.site-nav__list {
    display: flex;
    flex-direction: column;
}

.site-nav__item {
    position: relative;
    margin-left: 1rem;
    padding-left: 1rem;
    text-indent: -1rem;
    white-space: nowrap;
}

.site-nav__item[hidden] {
    display: none;
}

.site-nav__link {
    display: block;
    padding: 0.5rem 0;
    color: #fff;
    background: none;
    border: 0;
    font: inherit;
    text-indent: inherit; /* button は既定で text-indent がリセットされるため */
    cursor: pointer;
}

.site-nav__link:hover {
    color: rgba(255, 255, 255, 0.75);
}

/* ドロップダウン（主な機能） */
.site-nav__link--dropdown::after {
    content: "";
    display: inline-block;
    margin-left: 0.5em;
    vertical-align: 0.255em;
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-left: 0.3em solid transparent;
}

.site-nav__submenu {
    display: none;
    min-width: 10rem;
    margin-top: 0.125rem;
    padding: 1rem;
    text-align: left;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.site-nav__item.is-open > .site-nav__submenu {
    display: block;
}

.site-nav__sublink {
    display: block;
    padding: 0.25rem 1.5rem;
    color: var(--color-text);
    white-space: nowrap;
}

.site-nav__sublink:hover {
    color: #16181b;
    background: #f8f9fa;
}

.site-nav__sublink--child {
    margin-left: 0.5rem;
}

@media (min-width: 992px) {
    .site-header__inner {
        flex-wrap: nowrap;
        max-width: 960px;
    }

    .site-header__toggle {
        display: none;
    }

    .site-nav {
        display: flex;
        flex-basis: auto;
        margin-left: auto;
    }

    .site-nav__list {
        flex-direction: row;
    }

    .site-nav__link {
        padding: 0.5rem;
    }

    .site-nav__submenu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
    }
}

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

/* ---------- 5. ページ見出し（メインビジュアル） ---------- */
.page-hero {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    background: radial-gradient(circle at 10% 10%, rgb(24, 98, 140) 1%, rgb(6, 13, 23) 35%, rgb(6, 13, 23));
}

.page-hero__inner {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.page-hero__title {
    color: #fff;
}

/* 見出し左の白い縦線 */
.page-hero__title::before {
    content: "";
    border-left: 5px solid #fff;
    padding-right: 1.5rem;
}

/* particles.js が挿入するキャンバス */
.particles-js-canvas-el {
    position: absolute;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
}

/* ---------- 6. パンくずリスト ---------- */
.breadcrumb {
    display: none;
}

@media (min-width: 768px) {
    .breadcrumb {
        display: block;
    }
}

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
    padding: 0.75rem 0;
}

.breadcrumb__item {
    margin-left: 1rem;
    padding-left: 1rem;
    text-indent: -1rem;
}

/* 1つ目の項目の文字を本文の左端に揃える */
.breadcrumb__item:first-child {
    margin-left: 0;
}

.breadcrumb__item + .breadcrumb__item {
    padding-left: 0.5rem;
}

.breadcrumb__item + .breadcrumb__item::before {
    display: inline-block;
    margin-left: 1rem;
    padding-right: 0.5rem;
    color: var(--color-muted);
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    content: "\f0da";
}

.breadcrumb__item[aria-current="page"] {
    color: var(--color-muted);
}

/* ---------- 7. ボタン ---------- */
/* 旧 .btn.btn-link1: 黒地の大きいボタン */
.button-primary {
    display: block;
    width: 100%;
    margin-top: 1.5rem;
    padding: 1rem 0;
    color: #f8f9fa;
    text-align: center;
    background: #000;
    border: 1px solid transparent;
    border-radius: 6px;
    transition: 0.3s ease;
}

.button-primary:hover {
    color: #fff;
    background: var(--color-accent);
    transform: translate3d(0, -3px, 0);
    filter: drop-shadow(0 4px 6px rgba(34, 104, 188, 0.3));
}

/* 旧 .btn.btn-entry: 緑のボタン（フォームの送信ボタン、送信完了ページの「トップページに戻る」） */
.button-entry {
    display: block;
    width: 100%;
    padding: 1rem 0;
    font: inherit;
    line-height: 1.5;
    color: #f8f9fa;
    text-align: center;
    background: #b0cc4e;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    filter: drop-shadow(0 2px 6px rgba(122, 142, 37, 0.5));
    cursor: pointer;
    transition: 0.5s ease;
}

.button-entry:hover {
    color: #f8f9fa;
    transform: translate3d(0, 5px, 0);
    filter: drop-shadow(0 0 2px rgba(148, 176, 47, 0.7));
}

/* 送信中は押せないようにする */
.button-entry:disabled {
    opacity: 0.65;
    cursor: default;
    transform: none;
}

/* 旧 .btn-link3: CTA 内の白いボタン */
.button-cta {
    display: block;
    padding: 2rem 0;
    color: #000;
    font-size: 1.5rem;
    text-align: center;
    background: #fff;
    border-radius: 6px;
    filter: drop-shadow(0 0 15px #137ea8);
    transition: 0.3s ease;
}

.button-cta:hover {
    color: #000;
    transform: translate3d(0, 5px, 0);
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
}

.button-cta .fas,
.button-cta .far {
    margin-right: 1rem;
}

/* 旧 .btn-link6: 「詳しく見る」系の黒い横長ボタン */
.button-more {
    display: block;
    width: 90%;
    margin: 3rem auto;
    padding: 1rem 0;
    color: #fff;
    text-align: center;
    background: #000;
    border-radius: 6px;
    transition-duration: 0.3s;
}

.button-more:hover {
    color: #fff;
    background: var(--color-accent);
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
}

.button-more .fas {
    margin-left: 1rem;
}

/* 旧 .btn-link5: 暗い背景（ヒーロー）の上に置く半透明のボタン */
.button-ghost {
    display: block;
    width: 90%;
    margin: 0 auto;
    padding: 1rem 0;
    color: #fff;
    text-align: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    filter: drop-shadow(0 0 10px #c9c9c9);
    transition-duration: 0.3s;
}

.button-ghost:hover {
    color: #fff;
    text-shadow: 0 0 5px #000;
    background: rgba(255, 255, 255, 0.5);
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    filter: none;
}

/* 旧 .btn-link2: 右寄せの小さなリンクボタン（「事例を読む」など） */
.button-link {
    margin: 0;
    padding-left: 2.5rem;
    text-align: right;
}

.button-link a {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.4rem 1.5rem;
    color: var(--color-accent);
    line-height: 1.5;
    background: #fff;
    border-bottom: 1px solid var(--color-accent);
    border-radius: 4px;
    transition: 0.3s ease;
}

.button-link a:hover {
    color: var(--color-link-hover);
    border-bottom-color: var(--color-link-hover);
    transform: translate3d(2px, 0, 0);
}

/* 旧 .ls-check: 先頭に ▶ の付く箇条書き */
.check-list {
    margin: 1rem 0;
}

.check-list li {
    margin-left: 1rem;
    padding-left: 1rem;
    text-indent: -1rem;
}

.check-list li::before {
    content: "\f0da";
    margin-right: 1rem;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

@media (max-width: 540px) {
    .check-list li {
        text-indent: -1.5rem;
    }
}

/* ---------- 8. お問い合わせ CTA ---------- */
.cta {
    margin: 3rem 0;
    padding: 3rem 0;
    color: #fff;
    text-align: center;
    background: var(--color-blue);
}


.cta__lead {
    margin: 1.5rem 0 4.5rem;
}

.cta__body {
    padding: 0 var(--container-padding);
}

.cta__buttons,
.cta__phone {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(-1 * var(--container-padding));
}

.cta__buttons {
    justify-content: space-around;
    gap: 3rem 0;
    margin-bottom: 3rem;
}

.cta__phone {
    justify-content: center;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border);
}

.cta__buttons > *,
.cta__phone > * {
    flex: 0 0 100%;
    padding: 0 var(--container-padding);
}

.cta__phone-note {
    margin: 0;
    line-height: 1.5;
}

.cta__phone-number {
    display: block;
    padding: 1rem 0 1.5rem;
    color: #fff;
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1.2;
}

.cta__phone-number:hover {
    color: #fff;
}

.cta__phone-number .fas {
    margin-right: 1rem;
}

@media (min-width: 992px) {
    .cta__buttons > *,
    .cta__phone > * {
        flex-basis: 41.666667%;
    }

    .cta__phone-note {
        margin-right: 1rem;
        text-align: right;
    }
}

/* ---------- 9. フッター ---------- */
.site-footer__columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 3rem calc(-1 * var(--container-padding)) 0;
    text-align: center;
}

.site-footer__column {
    flex: 0 0 100%;
    margin-bottom: 1.5rem;
    padding: 0 var(--container-padding);
}

.site-footer__heading {
    margin: 0;
    font-weight: 700;
    text-transform: uppercase;
}

/* 見出し下の短い線（旧 hr） */
.site-footer__heading::after {
    content: "";
    display: block;
    width: 60px;
    margin: 0 auto 1.8rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.site-footer__column .fas {
    margin-right: 0.5rem;
}

.site-footer__copyright {
    padding: 1rem 0;
    color: rgba(0, 0, 0, 0.5);
    text-align: center;
}

@media (min-width: 768px) {
    .site-footer__columns {
        text-align: left;
    }

    .site-footer__column {
        flex-basis: 50%;
    }

    .site-footer__heading::after {
        margin-left: 0;
    }
}

@media (min-width: 1200px) {
    .site-footer__column {
        flex-basis: 25%;
    }
}

/* ---------- 10. 404 ページ ---------- */
.not-found {
    padding: 3rem 0;
}

.not-found__message {
    margin: 0 auto;
    padding-bottom: 3rem;
    text-align: center;
}

.not-found__action {
    margin: 0 auto;
    padding: 3rem 0;
}

/* 旧グリッドの col-sm-10 / col-lg-10 と同じ幅 */
@media (min-width: 576px) {
    .not-found__action {
        width: calc((100% + 2 * var(--container-padding)) * 0.833333 - 2 * var(--container-padding));
    }
}

@media (min-width: 992px) {
    .not-found__message {
        width: calc((100% + 2 * var(--container-padding)) * 0.833333 - 2 * var(--container-padding));
    }
}

/* ---------- 11. 共通パーツ（本文） ---------- */
/* スマホ幅だけ改行する <br class="sp-only"> / タブレット幅以上だけ表示する .pc-only */
.pc-only {
    display: none;
}

@media (min-width: 768px) {
    .sp-only {
        display: none;
    }

    .pc-only {
        display: inline;
    }
}

/* 見出し左の青い縦線 */
.heading-bar::before {
    content: "";
    padding-right: 1.5rem;
    border-left: 5px solid var(--color-accent);
}

/* 旧 h2.font-weight-bold: 各セクションの中央寄せ見出し */
.section-title {
    text-align: center;
}

/* ---------- 12. 料金ページ ---------- */
.price-plans {
    margin: 3rem 0;
    padding: 3rem 0;
}

/* スマホ幅では表を横スクロールさせる（旧 .table-responsive） */
.price-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.price-table {
    width: 100%;
    margin: 3rem 0 1rem;
    border-collapse: collapse;
    text-align: center;
}

.price-table th,
.price-table td {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid var(--color-border);
}

/* 見出し行（旧 .thead-dark） */
.price-table thead th,
.price-table thead td {
    vertical-align: bottom;
    color: #fff;
    background: #343a40;
    border-color: #454d55;
    border-bottom: 2px solid #454d55;
}

/* 項目名の列（旧 .table-active） */
.price-table tbody th {
    background: rgba(0, 0, 0, 0.075);
}

/* スマホでは3列だと項目名も値も細かく折り返すので、
   項目名を各行の上に横いっぱいに置き、その下に2プランの値を左右に並べる（HTML はそのまま） */
@media (max-width: 767.98px) {
    .price-table-wrap {
        overflow: visible;
    }

    .price-table,
    .price-table thead,
    .price-table tbody {
        display: block;
    }

    .price-table tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    /* 見出し行の左上の空きセル */
    .price-table thead td {
        display: none;
    }

    .price-table tbody th {
        grid-column: 1 / -1;
        padding: 0.5rem 0.75rem;
        text-align: left;
    }

    .price-table tbody td {
        border-top: 0;
    }

    .price-table tbody td + td {
        border-left: 1px solid var(--color-border);
    }
}

.price-includes {
    margin: 3rem 0;
}

.price-includes__title {
    padding-bottom: 3rem;
}

.price-includes__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 0 calc(-1 * var(--container-padding));
}

.price-includes__item {
    flex: 0 0 66.666667%;
    padding: 0 var(--container-padding);
    font-weight: 700;
    text-align: center;
}

.price-includes__item img {
    max-width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    .price-includes__item {
        flex-basis: 25%;
    }
}

/* ---------- 13. 導入事例一覧ページ ---------- */
/* 冒頭の見出しと説明文（左寄せ） */
.page-intro {
    margin: 3rem 0;
    padding: 3rem 0;
}


.case-list {
    margin: 3rem 0;
}

.case-list__items {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(-1 * var(--container-padding));
    padding-bottom: 3rem;
}

.case-list__item {
    flex: 0 0 100%;
    padding: 0 var(--container-padding);
}

@media (min-width: 768px) {
    .case-list__item {
        flex-basis: 50%;
        padding: 0 3rem;
    }
}

/* カード全体がリンク。ホバーで文字がリンク色（オレンジ）になる */
.case-card {
    display: block;
    color: #000;
}

.case-card__thumbnail {
    overflow: hidden;
}

.case-card__thumbnail img {
    width: 100%;
    height: auto;
    transition: 0.3s ease;
}

.case-card__thumbnail img:hover {
    opacity: 0.7;
    transform: scale(1.1);
}

.case-card__date {
    margin: 0;
    padding-top: 1rem;
}

.case-card__company {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
}


.case-card__summary {
    padding: 1rem 0;
}

/* スタンダードプラン利用企業の声 */
.voices {
    margin: 3rem 0;
}

.voices__title {
    margin-bottom: 3.5rem;
    text-align: center;
}

.voice {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(-1 * var(--container-padding));
    padding-bottom: 3rem;
}

.voice__image,
.voice__body {
    flex: 0 0 100%;
    padding: 0 var(--container-padding);
}

.voice__image {
    text-align: center;
}

.voice__image img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--color-border);
}

.voice__header {
    text-align: center;
    border-bottom: 1px solid var(--color-border);
}

.voice__company {
    padding-top: 0.5rem;
}

.voice__plan {
    margin: 0 0 0 0.5rem;
}

.voice__plan span {
    padding: 0 0.5rem;
    background: #ecf0f1;
}

@media (min-width: 768px) {
    .voice__image {
        flex-basis: 33.333333%;
        text-align: left;
    }

    .voice__body {
        flex-basis: 66.666667%;
    }

    .voice__header {
        text-align: left;
    }

    .voice__company {
        display: inline;
        padding-top: 0;
    }
}

@media (min-width: 992px) {
    .voice__plan {
        display: inline;
    }
}

/* 導入企業ロゴ（画像はコンテナの左右余白まで広げる） */
.client-logos {
    text-align: center;
}

.client-logos .container {
    padding-bottom: 3rem;
}

.client-logos__image {
    display: block;
    width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    .client-logos__image {
        width: calc(100% + 2 * var(--container-padding));
        max-width: none;
        margin: 0 calc(-1 * var(--container-padding));
    }
}

/* ---------- 14. 導入事例の個別ページ ---------- */
/* 事例タイトル（写真の上に黒帯でタイトルを重ねる） */
.case-hero {
    position: relative;
    overflow: hidden;
}

.case-hero__image {
    width: 100%;
    height: auto;
}

.case-hero__text {
    position: relative;
    padding: 0.5rem 0;
    color: #fff;
    background: #000;
}

.case-hero__title {
    padding: 1rem 0;
}

.case-hero__meta {
    display: inline-block;
    overflow-wrap: break-word;
    word-break: break-word;
}

.case-hero__meta p {
    display: inline-block;
}

.case-hero__meta span {
    padding-left: 1rem;
}

/* 720px 以上は写真を 横:縦 = 10:3 で切り抜き、タイトルを半透明の帯で重ねる */
@media (min-width: 720px) {
    .case-hero::before {
        content: "";
        display: block;
        padding-top: 30%;
    }

    .case-hero__image {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .case-hero__title {
        padding-left: 1rem;
    }

    .case-hero__meta {
        padding: 0 1rem;
    }

    .case-hero__text {
        position: absolute;
        padding: 0.5rem 0.8rem;
        bottom: 0;
        left: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.7);
    }
}

/* 企業紹介とお話を伺った方 */
.case-profile {
    background: #ecf0f1;
}

.case-profile__intro {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(-1 * var(--container-padding));
    padding: 3rem 0 1rem;
    border-bottom: 1px solid var(--color-border);
}

.case-profile__lead,
.case-profile__logo {
    flex: 0 0 100%;
    padding: 0 var(--container-padding);
}

.case-profile__logo img {
    max-width: 100%;
    height: auto;
}

/* 概要の下の「過去のインタビューはこちら」などのリンク（casestudy010） */
.case-profile__link {
    font-weight: 700;
}

.case-profile__heading {
    padding: 1rem 0;
}

.case-profile__people {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(-1 * var(--container-padding));
    padding-bottom: 1.5rem;
}

.case-person {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 0.5rem;
    flex: 0 0 100%;
    margin-bottom: 1rem;
    padding: 0 var(--container-padding);
}

/* 左の 1rem は旧ページの <source class="mr-3"> が作っていた余白の再現 */
.case-person img {
    margin-left: 1rem;
}

/* 肩書きのいちばん長い単位（または名前）が写真の横に入りきらないときだけ、
   写真の下に回す（min-content を最小幅にした flex の折り返し） */
.case-person__text {
    flex: 1 1 0;
    min-width: min-content;
    padding-left: 1rem;
}

/* 肩書き。<span> で区切った部署・役職の単位の途中では改行せず、単位の間（空白）で折り返す */
.case-person__title {
    margin: 0 0 0.25rem;
    font-size: 0.8rem;
    line-height: 1.6;
}

.case-person__title span {
    white-space: nowrap;
}

/* 名前は常に1行 */
.case-person__name {
    margin: 0;
    line-height: 1.5;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .case-profile__lead {
        flex-basis: 58.333333%;
    }

    .case-profile__logo {
        flex-basis: 41.666667%;
    }

    .case-person {
        flex-basis: 50%;
    }
}

/* PC 幅は人数で等分する（2人なら半分ずつ、3人なら3等分）。肩書きの幅をできるだけ確保するため */
@media (min-width: 992px) {
    .case-person {
        flex: 1 1 0;
        margin-bottom: 0;
    }
}

/* 記事インデックス */
.case-index {
    padding: 3rem 0;
}

.case-index__title {
    padding: 1rem 0 1rem 1rem;
    color: #fff;
    background: #000;
}

.case-index__list {
    margin-bottom: 1rem;
    padding: 1rem 0;
}

.case-index__list li {
    margin-left: 1rem;
}

.case-index__list a {
    display: block;
    padding: 0.25rem 0 0.25rem 1rem;
    color: #000;
    text-indent: -1rem;
}

.case-index__list a:hover {
    color: var(--color-link-hover);
}

.case-index__list .fas {
    margin-right: 1rem;
}

/* 事例概要（ねらい・導入内容など）。灰色の囲みに青い文字 */
.case-summary {
    padding: 3rem 0;
    color: var(--color-blue);
}

.case-summary__title {
    margin-bottom: 3rem;
    padding: 1rem 0;
    text-align: center;
}

.case-summary__list {
    margin: 0;
    padding: 1rem;
    background: #ecf0f1;
}

.case-summary__row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(-1 * var(--container-padding));
    padding: 1rem 0;
    line-height: 2rem;
}

.case-summary__row dt,
.case-summary__row dd {
    flex: 0 0 100%;
    margin: 0;
    padding: 0 var(--container-padding);
    font-weight: 400;
}

.case-summary__row .fas {
    margin-right: 1rem;
    font-size: 1.75rem;
    vertical-align: middle;
}

@media (min-width: 768px) {
    .case-summary__row dt { flex-basis: 25%; }
    .case-summary__row dd { flex-basis: 75%; }
}

@media (min-width: 992px) {
    .case-summary__row dt { flex-basis: 16.666667%; }
    .case-summary__row dd { flex-basis: 83.333333%; }
}

/* インタビュー本文
   余白のルール: 記事と記事の間 5rem（上下 2.5rem ずつ）、質問と質問の間 3rem、
   記事見出しの下 3rem。HTML 側では余白を指定しない */
.case-article {
    padding: 2.5rem 0;
}

.case-article__heading {
    margin-bottom: 3rem;
    padding: 1rem 0;
    text-align: center;
    border: 1px solid var(--color-border);
}

.qa {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(-1 * var(--container-padding));
    line-height: 2rem;
}

.qa + .qa {
    margin-top: 3rem;
}

/* 直前の回答の続き（段落の間隔のまま続ける） */
.qa + .qa--continued {
    margin-top: 0;
}

.qa__body,
.qa__media {
    flex: 0 0 100%;
    padding: 0 var(--container-padding);
}

.qa__media img {
    width: 100%;
    height: auto;
}

@media (min-width: 992px) {
    .qa--with-media .qa__body {
        flex-basis: 58.333333%;
    }

    .qa--with-media .qa__media {
        flex-basis: 41.666667%;
    }
}

.qa__question,
.qa__closing {
    padding: 0.5rem 0 1.5rem;
}

/* 図だけの行（解説図など）。中央寄せで原寸まで */
.qa--figure .qa__media {
    text-align: center;
}

.qa--figure .qa__media img {
    width: auto;
    max-width: 100%;
}

/* 灰色の囲みにした本文（記事の締めのコメントなど） */
.qa__body--boxed {
    padding: 1rem;
    background: #ecf0f1;
}

/* 本文中の箇条書き */
.qa__list {
    margin-bottom: 1rem;
}

.qa__list li {
    margin-left: 1rem;
    padding-left: 1rem;
    text-indent: -1rem;
}

/* 箇条書きの黒地の番号 */
.qa__list-number {
    margin-right: 1rem;
    padding: 0 0.25rem;
    font-weight: 700;
    color: #fff;
    background: #000;
}

/* 本文中のリンクの前のアイコン */
.qa__body a .fas {
    margin-right: 0.5rem;
}

/* 提携先などのロゴとリンクの並び */
.case-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    gap: 1.5rem 0;
    margin: 0 calc(-1 * var(--container-padding));
    text-align: center;
}

@media (min-width: 768px) {
    .case-links {
        gap: 0;
    }
}

.case-links img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--color-border);
}

.case-links span {
    display: block;
    margin-top: 0.5rem;
}

.case-links .fas {
    margin-left: 0.5rem;
}

/* 回答の途中に入る聞き手（弊社側）の発言 */
.qa__interviewer {
    color: var(--color-blue);
}

/* 注記（※〜）。<small class="note"> で書き、色は青緑に統一。
   段落の外に置いたときは1行ずつ改行する */
.note {
    color: #17a2b8;
}

.qa__body > .note,
.case-profile__lead > .note {
    display: block;
}

/* 発言者名のラベル */
.speaker {
    margin-right: 0.5rem;
    padding: 0 0.5rem;
    font-weight: 700;
    background: #f4f6f7;
}

/* 本文の後ろのセクション（取材者コメント・その他の導入事例） */
.case-section {
    padding: 3rem 0;
}

/* 取材者コメント */
.case-comment {
    padding: 1rem;
    background: #ecf0f1;
}

@media (min-width: 768px) {
    .case-comment {
        padding: 3rem;
    }
}


/* その他の導入事例 */
.related-cases__title {
    padding: 1rem 0;
}

.related-cases {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(-1 * var(--container-padding));
}

.related-cases__item {
    flex: 0 0 100%;
    padding: 0 var(--container-padding);
}

@media (min-width: 992px) {
    .related-cases__item {
        flex-basis: 50%;
    }
}

@media (min-width: 1200px) {
    .related-cases__item {
        flex-basis: 33.333333%;
    }
}

/* カード全体で overflow: hidden。ホバーで拡大した写真が本文に少しかぶるのは元の見た目どおり */
.related-case {
    display: flex;
    flex-direction: column;
    padding: 0.25rem;
    overflow: hidden;
    overflow-wrap: break-word;
    background: #fff;
    border-radius: 0.25rem;
}

/* 高さは旧ページと同じ 171px 固定。旧ページは幅だけ広がって写真が横に伸びていたので、cover で切り抜く */
.related-case img {
    width: 100%;
    height: 171px;
    object-fit: cover;
    border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
    transition: 0.3s ease;
}

.related-case img:hover {
    opacity: 0.7;
    transform: scale(1.1);
}

.related-case__body {
    flex: 1 1 auto;
    padding: 1rem 0.5rem;
    color: #000;
}

.related-case__company {
    margin-bottom: 0.75rem;
}

.related-case__body p:last-child {
    margin-bottom: 0;
}

/* ---------- 15. admage®でできること（about.html） ---------- */
/* できる3つのこと */
.about-points {
    margin: 5rem 0;
    padding: 3rem 0;
}

.about-points__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 0 calc(-1 * var(--container-padding));
    padding: 3rem 0;
}

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

.about-points__item img {
    max-width: 100%;
    height: auto;
    margin-bottom: 1.5rem;
}

.about-points__label {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.2;
}

/* 実現するビジネス（灰色の背景に白い囲み） */
.solutions {
    padding: 5rem 0;
    background: #f4f6f7;
}

.solutions__title {
    padding: 3rem 0;
}

.solution {
    display: flex;
    flex-wrap: wrap;
    padding: 1rem;
    background: #fff;
}

.solution__body,
.solution__media {
    flex: 0 0 100%;
}

@media (min-width: 768px) {
    .solution {
        margin: 0 calc(-1 * var(--container-padding));
        padding: 3rem;
    }

    .solution__body,
    .solution__media {
        padding: 0 var(--container-padding);
    }
}

.solution__media {
    text-align: center;
}

.solution__media img {
    max-width: 100%;
    height: auto;
    margin-bottom: 1.5rem;
}

.solution__title {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

.solution__body p {
    margin-top: 1.5rem;
}

/* PC 幅では写真を左、本文を右に */
@media (min-width: 992px) {
    .solution__media {
        order: -1;
        flex-basis: 33.333333%;
    }

    .solution__body {
        flex-basis: 66.666667%;
    }
}

/* 機能の特長（本文と右側のアイコン） */
.strengths {
    padding: 5rem 0;
}

.strength {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(-1 * var(--container-padding)) 5rem;
    padding-top: 3rem;
}

.strength__body,
.strength__image {
    flex: 0 0 100%;
    padding: 0 var(--container-padding);
}

.strength__image {
    text-align: center;
}

.strength__image img {
    max-width: 100%;
    height: auto;
}

.strength__title {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
}

.strength__body p {
    margin-top: 1.5rem;
}

/* 見出しの下の青いキャッチコピー（.strength__body p より優先させるため2つのクラスで指定） */
.strength__body .strength__catch {
    margin-top: 3rem;
    color: var(--color-blue);
}

@media (min-width: 768px) {
    .strength__body {
        flex-basis: 75%;
    }

    .strength__image {
        flex-basis: 25%;
    }

    .strength__title {
        text-align: left;
    }
}

/* その他の用途（アドネットワーク・SSP・効果測定）。id はトップページからのリンク先 */
.usecases {
    padding: 3rem 0;
}

.usecases__intro {
    padding-bottom: 3rem;
    text-align: center;
}

.usecases__intro p {
    margin: 1.5rem 0;
}

.usecase {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(-1 * var(--container-padding));
    padding: 3rem 0;
}

.usecase__icon {
    display: none;
}

.usecase__body {
    flex: 0 0 100%;
    padding: 0 var(--container-padding);
}

@media (min-width: 768px) {
    .usecase__icon {
        display: block;
        flex: 0 0 16.666667%;
        padding: 0 var(--container-padding);
    }

    .usecase__icon img {
        max-width: 100%;
        height: auto;
    }

    .usecase__body {
        flex-basis: 83.333333%;
        padding-left: 3rem;
    }
}

.usecase__title {
    margin-bottom: 1rem;
    color: var(--color-blue);
}

.usecase__functions {
    margin-bottom: 3rem;
    padding: 1rem;
    background: #f4f6f7;
}

.usecase__functions-title {
    margin-bottom: 1rem;
    padding: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

.usecase__functions ul {
    margin-bottom: 1rem;
}

/* ---------- 16. 主な機能（function/index.html） ---------- */
/* ページ内タブ（各権限の機能へ飛ぶボタン） */
.page-tabs__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 3rem 0;
}

.page-tabs__list li {
    border: 1px solid var(--color-border);
}

.page-tabs__list a {
    display: block;
    padding: 0.5rem 1rem;
}

.page-tabs__list .fas {
    padding-left: 0.5rem;
}

@media (min-width: 768px) {
    .page-tabs__list li + li {
        margin-left: 0.5rem;
    }
}

/* 権限ごとの機能（アイコン一覧） */
.function-overview {
    padding: 3rem 0;
}

.function-overview__accounts {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(-1 * var(--container-padding));
    padding-top: 3rem;
}

.function-icons__account {
    flex: 0 0 100%;
    padding: 0 var(--container-padding);
}

@media (min-width: 1200px) {
    .function-icons__account--half {
        flex-basis: 50%;
    }
}

.function-icons__title {
    padding: 3rem 0;
    text-align: center;
}

/* アイコンは .function-icons__group 単位で折り返す（HTML のコメント参照） */
.function-icons__group {
    display: flex;
    justify-content: center;
}

@media (min-width: 576px) {
    .function-icons__row {
        display: flex;
        justify-content: center;
    }
}

@media (min-width: 992px) {
    .function-icons,
    .function-icons__row {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.function-icon {
    display: block;
    padding: 0 0.5rem;
    text-align: center;
}

.function-icon img {
    max-width: 100%;
    height: auto;
}

.function-icon__label {
    display: block;
    margin-bottom: 1rem;
    line-height: 2.2rem;
}

/* 文字数が多くてアイコンより幅が広くなるラベルを詰める */
.function-icon__label--compact {
    font-size: 0.9em;
}

/* 権限ごとの機能表 */
.function-section {
    padding: 3rem 0;
}

.function-section__title {
    margin-bottom: 3rem;
}

.function-group__title {
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    color: var(--color-blue);
    border-bottom: 1px solid var(--color-border);
}

.function-list + .function-group__title {
    margin-top: 3rem;
}

/* 機能名と説明。スマホは「機能名 → 説明」の縦積み、768px 以上で 1 : 3 の2列 */
.function-list {
    margin: 0;
}

.function-list__row {
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f4f6f7;
}

.function-list__row dt,
.function-list__row dd {
    margin: 0;
}

.function-list__row dt {
    margin-bottom: 0.25rem;
    font-weight: 700;
}

@media (min-width: 768px) {
    .function-list {
        padding: 0 3rem;
    }

    .function-list__row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin: 0 calc(-1 * var(--container-padding)) 1rem;
        padding: 1rem 0;
    }

    .function-list__row dt,
    .function-list__row dd {
        padding: 0 var(--container-padding);
    }

    .function-list__row dt {
        flex: 0 0 25%;
        margin-bottom: 0;
        font-weight: 400;
        text-align: center;
    }

    .function-list__row dd {
        flex: 0 0 75%;
        border-left: 1px solid var(--color-border);
    }
}

/* 参考記事のカード */
.article-cards {
    margin: 3rem 0;
    padding: 3rem 0;
}

.article-cards__title {
    padding-bottom: 3rem;
    text-align: center;
}

.article-cards__list {
    display: flex;
    flex-wrap: wrap;
}

@media (min-width: 768px) {
    .article-cards__list {
        margin: 0 calc(-1 * var(--container-padding));
    }
}

.article-cards__item {
    flex: 0 0 100%;
    margin-bottom: 1.5rem;
    padding: 0 0.25rem;
    border: 1px solid var(--color-border);
}

.article-cards__item:hover {
    filter: brightness(0.95);
    transition: 0.3s ease-in-out;
}

@media (min-width: 768px) {
    .article-cards__item {
        flex-basis: 33.333333%;
    }
}

@media (min-width: 992px) {
    .article-cards__item {
        flex-basis: 25%;
    }
}

.article-card {
    display: block;
}

.article-card img {
    width: 100%;
    padding: 0.5rem;
    border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}

.article-card__title {
    display: block;
    padding: 0.25rem;
    line-height: 2.2rem;
    text-align: center;
}

/* ---------- 17. 機能の解説記事（function/*.html） ---------- */
/* 記事のセクション。事例ページと同じく、見出しと見出しの間は 5rem（上下 2.5rem ずつ） */
.article-section {
    padding: 2.5rem 0;
}

.article-section__title {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

.article-section__subtitle {
    padding: 3rem 0 0.5rem;
}

.article-section p {
    margin-top: 1.5rem;
}

/* 本文中の図。中央寄せで原寸まで */
.article-figure img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 3rem auto;
}

.article-list {
    margin: 1.5rem 0 1rem;
}

.article-list li {
    margin-left: 1rem;
    padding-left: 1rem;
    text-indent: -1rem;
}

/* 枠線の囲み（手順の説明など） */
.article-box {
    margin-top: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
}

.article-box p {
    margin: 0;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .article-box {
        padding: 1.5rem;
    }
}

/* 段落の後ろに置く「参考：…」の外部リンク */
.article-section .article-ref {
    margin: 0;
    line-height: 1.5;
}

.article-section .note {
    display: block;
}

/* 図の色に対応させた文字色（キックバック／ソケット通信の記事。ASP① が緑、ASP② が黄色）。
   どちらも白地で読みやすいよう、図より濃い色にしている（コントラスト比 4.5:1 以上） */
.text-asp1 {
    color: #1e7e34;
}

.text-asp2 {
    color: #9a6700;
}

/* ---------- 18. トップページ（index.html） ---------- */
/* ヒーロー（キャッチコピー・ロゴと説明文が PC 幅で左右に並ぶ） */
.top-hero {
    padding: 3rem 0;
}

.top-hero > .container {
    width: 100%;
}

.top-hero__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 calc(-1 * var(--container-padding));
    color: #fff;
    text-align: center;
}

.top-hero__brand,
.top-hero__body {
    flex: 0 0 100%;
    padding: 0 var(--container-padding);
}

.top-hero__brand {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.top-hero__brand img {
    max-width: 100%;
    height: auto;
}

.top-hero__catch {
    margin-bottom: 1rem;
    font-size: var(--fs-page);
    font-weight: 500;
    line-height: var(--lh-heading);
}

.top-hero__lead {
    margin-bottom: 3rem;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 2.5rem;
    word-break: auto-phrase;   /* 単語の途中で改行しない */
}

/* 992px 未満は改行を入れず、1つの文として自然に折り返す（無理に改行すると行数が増えるため） */
.top-hero__break {
    display: none;
}

/* PC 幅では説明文を必ず2行（<br> の位置だけで改行）にする。
   列の幅に1行目（31文字）が収まる大きさにしている */
@media (min-width: 992px) {
    .top-hero__lead {
        font-size: 0.875rem;
        white-space: nowrap;
    }

    .top-hero__break {
        display: inline;
    }
}

@media (min-width: 1200px) {
    .top-hero__lead {
        font-size: 1.0625rem;
    }
}

.top-hero__button {
    margin: 0;
}

/* ボタンが2つ並ぶときの間（旧 mb-3） */
.top-hero__button + .top-hero__button {
    margin-top: 1rem;
}

@media (min-width: 992px) {
    .top-hero__brand,
    .top-hero__body {
        flex-basis: 50%;
    }
}

/* about（斜めの灰色の背景に、画面イメージと説明） */
.top-about {
    padding: 5rem 0;
    background: linear-gradient(108deg, #cfd9df5e 16%, #e2ebf070 55%, #fff 55%);
}

.top-about__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin: 0 calc(-1 * var(--container-padding));
}

.top-about__image,
.top-about__body {
    padding: 0 var(--container-padding);
}

.top-about__image {
    flex: 0 0 58.333333%;
    margin: 3rem auto;
}

.top-about__image img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 0 6px rgba(48, 160, 218, 0.3));
}

.top-about__body {
    flex: 0 0 100%;
    text-align: center;
}

.top-about__title {
    padding-bottom: 1rem;
}

.top-about__body p:first-of-type {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 992px) {
    .top-about__image {
        flex-basis: 41.666667%;
        margin: 0;
    }

    .top-about__body {
        flex-basis: 58.333333%;
        text-align: left;
    }
}

/* トップの各セクション */
.top-section {
    margin: 5rem 0;
    padding: 3rem 0;
}

.top-section__lead {
    margin-bottom: 3rem;
    padding: 1.5rem 0;
    text-align: center;
}

/* できること（写真付きのリンク3つ） */
.top-capabilities {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 3rem 0;
    margin: 0 calc(-1 * var(--container-padding));
    padding: 3rem 0;
    text-align: center;
}

.top-capabilities li {
    flex: 0 0 100%;
    padding: 0 var(--container-padding);
}

.top-capabilities img {
    max-width: 100%;
    height: auto;
    margin-bottom: 1.5rem;
}

.top-capabilities__label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.2;
}

@media (min-width: 992px) {
    .top-capabilities li {
        flex-basis: 33.333333%;
    }
}

/* 導入企業ロゴ */
.top-clients {
    padding: 3rem 0;
    text-align: center;
}

.top-clients img {
    max-width: 100%;
    height: auto;
}

/* 特徴（写真と本文。PC 幅で左右に並び、--reverse は写真が右） */
.top-features {
    padding: 3rem 0;
}

.top-features__title {
    padding: 5rem 0;
}

.top-feature {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(-1 * var(--container-padding));
}

.top-feature + .top-feature {
    margin-top: 6rem;
}

.top-feature__image,
.top-feature__body {
    flex: 0 0 100%;
    padding: 0 var(--container-padding);
}

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

.top-feature__image img {
    max-width: 100%;
    height: auto;
}

.top-feature__title {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

.top-feature__body p {
    margin-top: 1.5rem;
}

@media (min-width: 992px) {
    .top-feature__image {
        flex-basis: 33.333333%;
    }

    .top-feature__body {
        flex-basis: 66.666667%;
    }

    .top-feature--reverse {
        flex-direction: row-reverse;
    }
}

/* カスタマイズ事例（写真と、概要・箇条書き・リンク） */
.top-case {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(-1 * var(--container-padding));
    padding: 3rem 0;
}

.top-case__image,
.top-case__body {
    flex: 0 0 100%;
    padding: 0 var(--container-padding);
}

.top-case__image img {
    width: 100%;
    height: auto;
}

/* 概要は見出しではないが、小見出しの大きさで灰色の帯にする */
.top-case__summary {
    margin-bottom: 0.5rem;
    padding: 1rem;
    font-size: var(--fs-sub);
    font-weight: var(--fw-heading-sub);
    line-height: var(--lh-heading);
    background: #ecf0f1;
}

@media (min-width: 992px) {
    .top-case__image {
        flex-basis: 33.333333%;
    }

    .top-case__body {
        flex-basis: 66.666667%;
    }
}

/* その他の用途（アイコン付きのリンク3つ。スマホではアイコンが左） */
.mode-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 calc(-1 * var(--container-padding));
    padding: 3rem 0;
}

.mode-cards li {
    flex: 0 0 100%;
    padding: 0 var(--container-padding);
}

.mode-card {
    display: flex;
    align-items: center;
    padding: 1rem;
    text-align: center;
    transition: 0.3s ease;
}

.mode-card:hover {
    background: #f7f7f7;
    transform: scale(1.05);
    filter: drop-shadow(0 4px 16px #e9e9e9);
}

.mode-card img {
    flex: 0 0 25%;
    max-width: 25%;
    height: auto;
    padding-right: var(--container-padding);
}

.mode-card__label {
    flex: 1;
    padding-left: var(--container-padding);
    font-size: 1.3rem;
    line-height: 2.2rem;
}

@media (min-width: 961px) {
    .mode-card__label {
        font-size: 1rem;
    }
}

@media (min-width: 992px) {
    .mode-cards li {
        flex-basis: 25%;
    }

    .mode-card {
        flex-direction: column;
        padding: 0;
    }

    .mode-card img {
        max-width: 100%;
        padding: 0;
    }

    .mode-card__label {
        padding: 0;
        margin-bottom: 1rem;
    }
}

/* トップページの非表示のセクション（HTML では hidden。出すときのために見た目を用意しておく） */
/* 総合広告配信システムNo.1: スマホは中央揃えで「本文 → 写真」、992px 以上は「本文 7 : 写真 5」の横並び */
.top-no1 {
    margin: 5rem 0;
    padding: 3rem 0;
    text-align: center;
}

.top-no1__inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.top-no1__body > p {
    margin: 1.5rem 0;
}

.top-no1__body > .top-no1__notes {
    margin: 0;
    line-height: 1.5;
}

.top-no1__image img {
    width: 100%;
    height: auto;
}

@media (min-width: 992px) {
    .top-no1 {
        text-align: left;
    }

    .top-no1__inner {
        flex-direction: row;
        align-items: center;
        gap: calc(2 * var(--container-padding));
    }

    .top-no1__body {
        flex: 7;
    }

    .top-no1__image {
        flex: 5;
    }
}

/* IT導入補助金: 水色の箱に影。文は文節の切れ目で折り返す */
.top-subsidy {
    padding: 3rem 0;
    text-align: center;
}

.top-subsidy__box {
    display: inline-block;
    padding: 1rem 1.5rem;
    background: #e7f5f8;
    filter: drop-shadow(4px 4px 0 #27729a);
}

.top-subsidy__box p {
    word-break: auto-phrase;
    text-wrap: balance;
}

/* 前後に「＼ ／」の斜め線を付ける */
.top-subsidy__lead {
    font-weight: 700;
}

.top-subsidy__lead::before,
.top-subsidy__lead::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 1rem;
    margin: 0 0.5rem;
    background: #000;
    transform: rotate(-30deg);
}

.top-subsidy__lead::after {
    transform: rotate(30deg);
}

.top-subsidy__lead sup {
    font-size: 0.85rem;
}

.top-subsidy__title {
    padding: 1rem 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #27729a;
    border-top: 1px solid #27729a;
    border-bottom: 1px solid #27729a;
}

.top-subsidy__text {
    margin-bottom: 0;
}

/* 黄色の下線マーカー */
.top-subsidy__marker {
    font-size: 1.75rem;
    font-weight: 700;
    background: linear-gradient(180deg, transparent 75%, #fff258 75%);
}

.top-subsidy__marker--lg {
    font-size: 2rem;
}

/* ---------- 19. フォーム（お問い合わせ・資料請求・開発事例集の請求で共通） ---------- */
.form-panel {
    margin-top: 1rem;
    padding: 1rem;
    background: #ecf0f1;
}

/* 送信に失敗したときのお知らせ */
.form-alert {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    line-height: 1.5;
    color: #721c24;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 0.25rem;
}

/* 項目名の列の幅（992px 以上）。開発事例集の請求・資料請求は 1/3、横幅いっぱいに置くお問い合わせは 1/6（.form--wide） */
.form {
    --form-label-width: 33.333333%;
}

.form--wide {
    --form-label-width: 16.666667%;
}

/* 1項目分の行。スマホは「項目名 → 入力欄」の縦積み、992px 以上は「項目名 | 入力欄」の横並び */
.form__row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(-1 * var(--container-padding)) 1rem;
}

.form__label,
.form__field,
.form__error,
.form__submit {
    flex: 0 0 100%;
    padding: 0 var(--container-padding);
}

.form__label {
    font-weight: 700;
    line-height: 1.5;
}

/* 長い項目名は、このまとまりの途中では改行しない（「個人情報保護／方針への同意」） */
.form__label-unit {
    display: inline-block;
}

/* 入力欄の項目名は、入力欄の文字と高さを揃える */
label.form__label {
    padding-top: calc(0.375rem + 1px);
    padding-bottom: calc(0.375rem + 1px);
}

.form__field {
    padding-left: 3rem;
}

@media (min-width: 992px) {
    .form__label {
        flex-basis: var(--form-label-width);
    }

    .form__field {
        flex-basis: calc(100% - var(--form-label-width));
        padding-left: 0;
    }

    .form__submit {
        flex-basis: calc(100% - var(--form-label-width));
        margin-left: var(--form-label-width);
    }
}

.form__required {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.25em 0.4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    vertical-align: baseline;
    background: var(--color-blue);
    border-radius: 0.25rem;
}

.form__input {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font: inherit;
    line-height: 1.5;
    color: #495057;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form__input:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* 複数行の入力欄は rows の行数分の高さにする */
textarea.form__input {
    height: auto;
    resize: vertical;
}

.form__input[aria-invalid="true"] {
    border-color: #b50b0b;
}

/* 入力欄の下のエラーメッセージ（空のときは高さを持たない） */
.form__error {
    margin: 0;
    padding-left: calc(var(--container-padding) + 2.2rem);
    font-size: 0.8rem;
    line-height: 1.5;
    color: #b50b0b;
    text-indent: 0.5rem;
}

.form__check {
    display: inline-block;
    margin-bottom: 0.5rem;
}

.form__privacy {
    display: block;
    padding-left: 1rem;
}

/* ---------- 20. カスタマイズ（customize.html） ---------- */
.cz-intro {
    margin: 3rem 0;
    padding: 3rem 0;
    text-align: center;
}

.cz-intro p {
    padding-top: 3rem;
}

.cz-examples,
.cz-engineers {
    margin: 3rem 0;
}

/* 例・エンジニア紹介の1件。写真の位置は画面幅で変わる（HTML のコメント参照） */
.cz-item {
    display: grid;
    grid-template-areas:
        "title"
        "image"
        "body";
    margin: 3rem 0;
    padding: 3rem 0;
}

.cz-item__title {
    grid-area: title;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

/* 「例」のラベルが付く見出しは、2行目以降をラベルの後ろに揃える */
.cz-examples .cz-item__title {
    padding-left: 1.5em;
    text-indent: -1.5em;
}

.cz-item__badge {
    margin-right: 1rem;
    padding: 0 0.25rem;
    font-size: 80%;
    color: #fff;
    background: #000;
}

.cz-item__image {
    grid-area: image;
}

.cz-item__image img {
    max-width: 100%;
    height: auto;
}

.cz-item__body {
    grid-area: body;
}

.cz-item__body > p:first-child {
    padding-top: 1rem;
}

.cz-item--pc-image .cz-item__image {
    display: none;
}

@media (min-width: 768px) {
    .cz-item {
        grid-template-areas:
            "title"
            "body"
            "image";
    }

    .cz-item__image,
    .cz-item--pc-image .cz-item__image {
        display: block;
        text-align: center;
    }
}

@media (min-width: 992px) {
    .cz-item {
        grid-template-areas:
            "title image"
            "body  image";
        grid-template-columns: 7fr 5fr;
        grid-template-rows: auto 1fr;
        column-gap: calc(2 * var(--container-padding));
    }
}

.cz-examples__more {
    margin: 3rem 0;
    font-weight: 700;
    text-align: center;
}

.cz-engineers__title {
    padding: 3.5rem 0 3rem;
}

/* お悩み（2列） */
.cz-worries__title {
    padding: 1rem 0 2.5rem;
    margin-bottom: 3rem;
}

.cz-worries__list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(-1 * var(--container-padding)) 3rem;
}

.cz-worry {
    flex: 0 0 100%;
    padding: 1rem;
    margin-bottom: 1rem;
}

.cz-worry__title {
    padding-bottom: 1rem;
    color: var(--color-blue);
}

.cz-worry__inner {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(-1 * var(--container-padding));
}

.cz-worry__image,
.cz-worry__inner p {
    flex: 0 0 100%;
    padding: 0 var(--container-padding);
}

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

.cz-worry__image img {
    max-width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    .cz-worry,
    .cz-worry__image,
    .cz-worry__inner p {
        flex-basis: 50%;
    }
}

/* 開発事例集の請求（枠線の囲み） */
.cz-casebook__box {
    padding: 1.5rem;
    border: 1px solid #6c757d;
}

.cz-casebook__title {
    padding: 1rem 0 2.5rem;
    margin-bottom: 3rem;
}

.cz-casebook__inner {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(-1 * var(--container-padding));
}

.cz-casebook__image,
.cz-casebook__body {
    flex: 0 0 100%;
    padding: 0 var(--container-padding);
}

.cz-casebook__image img {
    max-width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    .cz-casebook__image,
    .cz-casebook__body {
        flex-basis: 50%;
    }
}

/* ---------- 21. 送信完了ページ（customize_comp.html・inquiry/complete.html・inquiry-docs/complete-docs.html） ---------- */
.complete {
    padding: 3rem 0;
    text-align: center;
}

.complete__title {
    padding: 3rem 0;
}

.complete__message {
    margin: 0 auto;
    padding-bottom: 3rem;
    word-break: auto-phrase;   /* 文節の切れ目で折り返す（「メ／ール」のような切れ方を防ぐ） */
}

.complete__action {
    margin: 0 auto;
    padding: 3rem 0;
}

/* 旧グリッドの col-sm-10 / col-lg-10 と同じ幅（404 ページと同じ） */
@media (min-width: 576px) {
    .complete__action {
        width: calc((100% + 2 * var(--container-padding)) * 0.833333 - 2 * var(--container-padding));
    }
}

@media (min-width: 992px) {
    .complete__message {
        width: calc((100% + 2 * var(--container-padding)) * 0.833333 - 2 * var(--container-padding));
    }
}

/* ---------- 22. フォームのページ（inquiry/・inquiry-docs/） ---------- */
.form-page {
    margin: 3rem 0;
    padding: 3rem 0;
}

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

.form-page__body {
    padding: 3rem 0;
}

/* 資料請求: 768px 以上は「資料の写真 5 : フォーム 7」の横並び。スマホは写真を出さない */
.form-page__columns {
    display: flex;
    margin: 0 calc(-1 * var(--container-padding));
    padding: 3rem 0;
}

.form-page__columns .form-page__body {
    flex: 0 0 100%;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

.form-page__image {
    display: none;
}

@media (min-width: 768px) {
    .form-page__image {
        display: block;
        flex: 0 0 41.666667%;
        padding: 0 var(--container-padding);
    }

    .form-page__image img {
        max-width: 100%;
        height: auto;
    }

    .form-page__columns .form-page__body {
        flex-basis: 58.333333%;
    }
}

/* ---------- 23. admage® ad server（adnetwork/index.html） ----------
   セクションの枠（.top-section）・説明文（.top-section__lead）・サポートの3項目（.top-feature）は
   トップページの部品をそのまま使っている。ここにはこのページだけの部品を書く */

/* 導入: 製品ロゴ・概要・お問い合わせボタンを中央に縦に並べる（ヒーローは他の下層ページと同じ） */
.adnw-intro {
    margin: 3rem 0;
    padding: 3rem 0;
    text-align: center;
}

.adnw-intro__logo {
    width: 100%;
    max-width: 400px;
    height: auto;
}

.adnw-intro__lead {
    max-width: 50rem;
    margin: 2rem auto 0;
    text-align: left;
}

/* 中央に置く、幅を抑えたボタン */
.adnw-intro__button {
    max-width: 24rem;
    margin: 1rem auto 0;
}

/* 対象のお客様: 2つのグループ（768px 以上は左右に並ぶ）。各グループに写真付きの項目が2つ */
.adnw-targets {
    display: grid;
    gap: 3rem calc(2 * var(--container-padding));
    padding: 3rem 0;
}

@media (min-width: 768px) {
    .adnw-targets {
        grid-template-columns: 1fr 1fr;
    }
}

.adnw-target__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.adnw-target__title img {
    width: 2rem;
    height: auto;
}

.adnw-target__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.adnw-target__list li {
    padding: 1rem;
    text-align: center;
    background: #ecf0f1;
}

.adnw-target__list img {
    max-width: 100%;
    height: auto;
}

.adnw-target__list p {
    margin: 1rem 0 0;
    line-height: 1.6;
    word-break: auto-phrase;
}

/* 締めの一言（見出しではないので <p>。上に下向きの矢印を付ける） */
.adnw-targets__message {
    margin: 0;
    font-size: var(--fs-sub);
    font-weight: var(--fw-heading-sub);
    line-height: var(--lh-heading);
    color: var(--color-blue);
    text-align: center;
    word-break: auto-phrase;
    text-wrap: balance;
}

.adnw-targets__message::before {
    content: "\f107";
    display: block;
    margin-bottom: 1rem;
    font-family: "Font Awesome 5 Free";
    font-size: 3rem;
    font-weight: 900;
    line-height: 1;
    color: var(--color-muted);
}

/* 仕組みの図 */
.adnw-diagram {
    display: block;
    text-align: center;
}

.adnw-diagram img {
    max-width: 100%;
    height: auto;
}

/* 主な機能（スマホは1列、768px 以上は3列の枠） */
.adnw-functions__title {
    margin: 5rem 0 1.5rem;
    text-align: center;
}

.adnw-functions {
    display: grid;
    gap: 1rem;
}

@media (min-width: 768px) {
    .adnw-functions {
        grid-template-columns: repeat(3, 1fr);
    }
}

.adnw-functions li {
    padding: 1rem;
    text-align: center;
    border: 1px solid var(--color-border);
    border-radius: 6px;
}

.adnw-functions__more {
    margin: 0.5rem 0 0;
    color: var(--color-muted);
    font-size: 0.875rem;
    text-align: right;
}

/* カスタマイズの例（スマホは1列、768px 以上は2列、992px 以上は3列のカード） */
.adnw-cards {
    display: grid;
    gap: 2rem calc(2 * var(--container-padding));
}

@media (min-width: 768px) {
    .adnw-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .adnw-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

.adnw-card {
    padding: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
}

.adnw-card__title {
    margin-bottom: 1rem;
    color: var(--color-blue);
    text-align: center;
}

.adnw-card img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto 1rem;
}

.adnw-card p {
    margin: 0;
}

/* サポートの番号（「01.」）。見出しの上に大きめに出す */
.adnw-number {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--color-blue);
    font-size: 2.5rem;
    line-height: 1;
}

/* 導入事例（ロゴと説明。768px 以上は2列） */
.adnw-cases {
    display: grid;
    gap: 2rem calc(2 * var(--container-padding));
    padding: 3rem 0;
}

@media (min-width: 768px) {
    .adnw-cases {
        grid-template-columns: 1fr 1fr;
    }
}

.adnw-case img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--color-border);
}

.adnw-case__body {
    padding-top: 1rem;
}

.adnw-case__title {
    margin-bottom: 0.5rem;
}