/* ============================================
   IP×AI活用支援 LP 固有スタイル
   共通レイアウト（.section / .container / .header / .footer 等）と
   デザイントークン（--navy / --red / --paper-2 等）は
   css/service-top.css が提供する。ここには本ページ固有の装飾のみ書く。
   ============================================ */

/* --- ヒーロー --- */
.ipai-hero {
    background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 100%);
    color: #fff;
    padding: 5.5rem 0 4rem;
}
/* .container (service-top.css) の内寸に合わせる。ここがズレると
   Task 2 以降の .container セクションとヒーローの左端が段差になる */
.ipai-hero-inner { max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem; }
.ipai-hero-target {
    display: inline-block;
    font-size: .82rem;
    letter-spacing: .04em;
    /* .6 は濃紺グラデ両端（#002261 / #043184）に対し 6.2:1 / 5.2:1。
       非テキスト要素の 3:1 ガイドラインに余裕を持って収まる */
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 999px;
    padding: .4rem 1rem;
    margin-bottom: 1.5rem;
}
.ipai-hero h1 {
    font-size: clamp(1.9rem, 5vw, 3.1rem);
    line-height: 1.35;
    font-weight: 900;
    margin: 0 0 1.2rem;
}
.ipai-hero h1 .accent { color: #ff8fa3; }  /* 濃紺背景上で --red は沈むため明度を上げた同系色 */
.ipai-hero-sub {
    font-size: clamp(.95rem, 2.2vw, 1.1rem);
    line-height: 1.9;
    opacity: .92;
    max-width: 46em;
    margin: 0 0 2rem;
}
.ipai-hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 1.4rem; }
.ipai-hero-note { font-size: .84rem; opacity: .8; margin: 0; }

/* --- 汎用カードグリッド --- */
.ipai-grid { display: grid; gap: 1.25rem; }
.ipai-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.ipai-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.ipai-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.ipai-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1.6rem 1.4rem;
}
.ipai-card h3 { font-size: 1.05rem; margin: 0 0 .7rem; color: var(--navy); }
.ipai-card p { font-size: .92rem; line-height: 1.85; color: var(--text); margin: 0; }
.ipai-card-num {
    display: inline-block;
    font-family: var(--font-en);
    font-size: 1.05rem;
    letter-spacing: .06em;
    color: var(--red);
    line-height: 1;
    margin-bottom: .6rem;
}

/* --- section-head の補助（service-top.css に無いため定義） --- */
.section-kicker {
    font-family: var(--font-en);
    font-size: .82rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-mut);
    margin-bottom: .5rem;
}
.section-note {
    font-size: .82rem;
    line-height: 1.8;
    color: var(--text-mut);
    margin-top: 1.5rem;
    text-align: center;
}
.ipai-textlink {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    color: var(--navy);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid var(--navy);
    padding-bottom: 2px;
}
.ipai-textlink:hover { color: var(--red); border-color: var(--red); }

/* --- 表（比較表・料金表） --- */
.ipai-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ipai-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: .9rem; }
.ipai-table th, .ipai-table td {
    border: 1px solid var(--line);
    padding: .9rem .8rem;
    text-align: left;
    vertical-align: top;
}
.ipai-table thead th { background: var(--navy); color: #fff; font-weight: 700; white-space: nowrap; }
.ipai-table tbody th { background: var(--paper-2); font-weight: 700; white-space: nowrap; }
/* .is-us は自社列のハイライト。thead では背景だけ差し替えると
   .ipai-table thead th の color:#fff が残って白地に白（1.1:1）になるため、
   ヘッダーには別の指定を当てる。--red + 白文字は .btn-primary と同じ組み合わせ */
.ipai-table thead th.is-us { background: var(--red); }
.ipai-table tbody .is-us { background: #fff1f4; }

/* --- 未確定データのプレースホルダ --- */
.ipai-tbd {
    background: #fff3cd;
    border-bottom: 2px dotted var(--gold);
    padding: 0 .2em;
    font-weight: 700;
}

/* --- レスポンシブ ---
   ブレークポイントは既存サイトの 1024 / 768 に揃える
   （service-top.css:869,890 / manga-marketing.css:266,282）。
   768px はヘッダーがモバイルナビに切り替わる点でもある */
@media (max-width: 1024px) {
    .ipai-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
    .ipai-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .ipai-hero { padding: 3.5rem 0 2.8rem; }
    /* service-top.css:920 の .hero-actions .btn と同じ扱い。
       これが無いと btn-lg のCTAが 320px 幅で横にはみ出す */
    .ipai-hero-actions .btn { width: 100%; }
    .ipai-grid.cols-2,
    .ipai-grid.cols-3,
    .ipai-grid.cols-4 { grid-template-columns: 1fr; }
}