/*
  「中古パソコンショップが本気でAI活用に取り組んでみた」シリーズ 共通CSS。

  配置場所(想定): https://www.pcwrap.com/work_images/aicolumn/aicolumn-common.css
  各話の単独ページ(work_images/aicolumn/配下の静的HTML)からは、<base href>の
  影響を受けないようルートからのフルパスで参照すること:
    <link rel="stylesheet" href="work_images/aicolumn/aicolumn-common.css">
  ハブページ(content/aicolumn、通常のコンテンツページ)からは<base href>が
  無いため絶対URLで参照すること:
    <link rel="stylesheet" href="https://www.pcwrap.com/work_images/aicolumn/aicolumn-common.css">
  (相対名のままだとどちらのケースも探しに行く場所がズレるため注意。)

  【重要】CSSファイル内のurl()は、HTMLのbase hrefの影響を受けず、
  「このCSSファイル自身の置き場所」を基準に解決される(HTMLの<base>とは無関係の
  別ルール)。このファイルはwork_images/aicolumn/に置かれるため、相対パスで
  画像を書くとwork_images/aicolumn/配下を探しに行ってしまい見つからない。
  そのため下記の背景画像は絶対URLで指定している。

  【デザインの共通化について(2026-09-09)】
  0話のハブページ(content/aicolumn)で作り込んだデザイン(1080px固定・見出し・
  9つの課題のような番号付きリスト・引用ボックス・4コマの2枚並び・シリーズ一覧)を、
  1話以降の単独ページにも同じデザインで展開できるよう、見出しレベル(h1/h2/h3)に
  直接依存せず、クラス名で見た目を指定する方式にしている。
  - ハブページ側：CMSが自動でH1(シリーズ名)を出すため、話数タイトルはH2、
    セクション見出しはH3に、それぞれ下記のクラスを付けて使う。
  - 単独ページ側：ページ自体のH1が話数タイトルになるため、H1に.ep-title、
    セクション見出しはH2に.aicolumn-headingを付けて使う。
*/

/* 簡易ヘッダー：本サイトのslider-sec背景(main_bg.jpg)で色味を合わせる */
.aicolumn-simple-header {
    background: url(https://www.pcwrap.com/assets/images/main_bg.jpg);
    background-position: top center;
    background-size: cover;
    padding: 14px 20px;
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: background-color .2s;
}
/* 本サイトと同じく、少しでもスクロールすると背景が白くなる挙動を
   aicolumn-common.js のスクロール検知で再現する。 */
.aicolumn-simple-header.is-scrolled {
    background-image: none;
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.aicolumn-simple-header .header-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}
.aicolumn-simple-header .navbar-brand {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0;
}
.aicolumn-simple-header .navbar-brand img {
    display: block;
    width: 170px;
    height: 30px;
}
.aicolumn-simple-header .header-row2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
}
/* 3年保証バッジ・法人様はこちらは元画像の縦横比が異なるため、
   高さを揃えて幅は自動調整することで見た目のサイズを合わせる */
.aicolumn-simple-header .header-row2 img {
    display: block;
    height: 36px;
    width: auto;
}
.aicolumn-simple-header .under-menu {
    display: flex;
    flex: 1 1 260px;
    min-width: 220px;
    height: 36px;
}
.aicolumn-simple-header .under-menu .text {
    flex: 1;
    height: 36px;
    box-sizing: border-box;
    border: 2px solid #0553c4;
    border-right: none;
    border-radius: 4px 0 0 4px;
    padding: 2px 10px;
    font-size: 16px;
}
.aicolumn-simple-header .under-menu .btn {
    height: 36px;
    box-sizing: border-box;
    border: none;
    border-radius: 0 4px 4px 0;
    padding: 0 16px;
    background: #0553c4;
    color: #fff;
    font-size: 14px;
}

/* ========== 本文の共通ラッパー(単独ページ=.aicolumn-content／ハブページ=.aicolumn-hub-content) ========== */
.aicolumn-content,
.aicolumn-hub-content {
    max-width: 1080px;
    margin: 0 auto;
    padding: 24px 20px 40px;
    font-size: 16px;
    line-height: 1.9;
    color: #333;
}
.aicolumn-content p,
.aicolumn-hub-content p { margin: 0 0 1.1em; }
.aicolumn-content a,
.aicolumn-hub-content a { color: #0553c4; text-decoration: underline; }
.aicolumn-content a:hover,
.aicolumn-hub-content a:hover { text-decoration: none; }
.aicolumn-content img,
.aicolumn-hub-content img { max-width: 100%; height: auto; }

/* 話数バッジ(「第0話」等) */
.aicolumn-content .ep-badge,
.aicolumn-hub-content .ep-badge {
    display: inline-block;
    background: #0553c4;
    color: #fff;
    font-weight: bold;
    font-size: 13px;
    letter-spacing: .08em;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 12px;
}

/* 話数タイトル(単独ページ：h1 / ハブページ：h2 に付ける) */
.aicolumn-content .ep-title,
.aicolumn-hub-content .ep-title {
    font-size: 26px;
    font-weight: bold;
    line-height: 1.5;
    margin: 0 0 30px;
    padding-bottom: 16px;
    border-bottom: 3px solid #1a3f6b;
    color: #1a3f6b;
}

/* セクション見出し(単独ページ：h2 / ハブページ：h3 に付ける) */
.aicolumn-content .aicolumn-heading,
.aicolumn-hub-content .aicolumn-heading {
    font-size: 19px;
    font-weight: bold;
    margin: 2.4em 0 0.9em;
    padding-left: 14px;
    border-left: 6px solid #0553c4;
    color: #1a3f6b;
}

/* 課題リスト等の番号付きリスト(付箋をイメージした色分け) */
.aicolumn-content .task-list,
.aicolumn-hub-content .task-list {
    list-style: none;
    counter-reset: task;
    display: grid;
    gap: 10px;
    margin: 1.6em 0;
    padding: 0;
}
.aicolumn-content .task-list li,
.aicolumn-hub-content .task-list li {
    counter-increment: task;
    position: relative;
    background: #f7f9fc;
    border-left: 5px solid #ffd54a;
    border-radius: 6px;
    padding: 14px 18px 14px 50px;
}
.aicolumn-content .task-list li:nth-child(3n+2),
.aicolumn-hub-content .task-list li:nth-child(3n+2) { border-left-color: #7ec8e3; }
.aicolumn-content .task-list li:nth-child(3n+3),
.aicolumn-hub-content .task-list li:nth-child(3n+3) { border-left-color: #ff9eb5; }
.aicolumn-content .task-list li::before,
.aicolumn-hub-content .task-list li::before {
    content: counter(task);
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #1a3f6b;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 引用・気づきの強調ボックス */
.aicolumn-content .pullquote,
.aicolumn-hub-content .pullquote {
    background: #eef4fc;
    border-left: 5px solid #0553c4;
    border-radius: 6px;
    padding: 18px 22px;
    margin: 1.8em 0;
    font-weight: bold;
    font-size: 17px;
}

/* 4コマ：2枚横並び(SPは縦並び) */
.aicolumn-content .panel-pair,
.aicolumn-hub-content .panel-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 1.8em 0;
}
.aicolumn-content .panel-pair img,
.aicolumn-hub-content .panel-pair img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,.1);
}
@media (max-width: 600px) {
    .aicolumn-content .panel-pair,
    .aicolumn-hub-content .panel-pair {
        grid-template-columns: 1fr;
    }
}

.aicolumn-content hr,
.aicolumn-hub-content hr {
    border: none;
    border-top: 1px solid #ddd;
    margin: 2.6em 0;
}

/* シリーズ一覧(主にハブページで使用。単独ページ側でも将来使えるよう共通化) */
.aicolumn-content .series-title,
.aicolumn-hub-content .series-title {
    font-size: 20px;
    font-weight: bold;
    color: #1a3f6b;
    margin: 0 0 1em;
}
.aicolumn-content .series-list,
.aicolumn-hub-content .series-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}
.aicolumn-content .series-list li,
.aicolumn-hub-content .series-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 8px;
    background: #f7f9fc;
}
.aicolumn-content .series-list li.is-current,
.aicolumn-hub-content .series-list li.is-current {
    background: #eef4fc;
    border: 2px solid #0553c4;
}
.aicolumn-content .series-list li.is-upcoming,
.aicolumn-hub-content .series-list li.is-upcoming {
    opacity: .55;
}
.aicolumn-content .series-list .ep-num,
.aicolumn-hub-content .series-list .ep-num {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #1a3f6b;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 15px;
}
.aicolumn-content .series-list li.is-upcoming .ep-num,
.aicolumn-hub-content .series-list li.is-upcoming .ep-num {
    background: #aaa;
}

/* シリーズ一覧：まだ話数を確定させたくない「次回」枠用のピル型バッジ。
   丸番号バッジ(.ep-num)は公開済み/話数が確定した回専用とし、次回枠は
   「NEXT」という文字を表示するこちらを使う(2026-09-10、担当者指示。
   「1話」のように番号を先出しすると、結局シリーズの通し番号が見えて
   しまうため、丸バッジとは形も変えて視覚的に「未確定」と分かるようにした)。 */
.aicolumn-content .series-list .ep-next,
.aicolumn-hub-content .series-list .ep-next {
    flex: 0 0 auto;
    height: 24px;
    padding: 0 12px;
    border-radius: 12px;
    background: #aaa;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 11px;
    letter-spacing: .04em;
}

.aicolumn-content .series-list a,
.aicolumn-hub-content .series-list a {
    font-weight: bold;
    text-decoration: none;
}
.aicolumn-content .series-list a:hover,
.aicolumn-hub-content .series-list a:hover {
    text-decoration: underline;
}

/* シリーズ一覧：タイトルは決まったがまだ未公開の回に付ける「Coming Soon」バッジ
   (未公開だが「近日公開」だけの回とは区別するため) */
.aicolumn-content .series-list .coming-soon,
.aicolumn-hub-content .series-list .coming-soon {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: 10px;
    background: #dde3ec;
    color: #5a6b85;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: .04em;
    vertical-align: middle;
}

/* 本サイトの.neg-mt50は、複雑な固定ヘッダーの高さ分だけ次のセクションを
   上に重ねるための負のマージン。この簡易ヘッダー(固定headerなし)では
   前提が崩れてレイアウトが乱れるため、このページ内でのみ無効化する。 */
.neg-mt50 { margin-top: 0 !important; }

/* 本サイトの.probootstrap-animateは初期状態がopacity:0・visibility:hiddenで、
   スクロール検知のJS(このページでは読み込んでいない)が.probootstrap-animatedを
   付与することで初めてフェードイン表示される。JSがない状態だと永久に非表示に
   なってしまうため、このページでは常に表示状態にする。
   (2026-09-09、本番環境で発生・確認済み。opacity:1だけ上書きしてvisibility:hiddenを
   見落としていたため一度目の修正では直り切らず、visibilityも明示して解消した。) */
.probootstrap-animate {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}