/* =========================================================
   魚匠えびす｜業務用・お取引をご検討の方へ（仕入れ・卸のご案内）LP
   納品CSS v1（2026-09-01 / JFC 南口）
   対：06_納品コード_業務用LP.html

   ■ トンマナ（この4点を守れば崩れません）
   1. 色  ：差し色は「深い和紅 #c0392b」の1色。金 #d4a017 は従属的な強調のみ。
            地は白ではなく生成り #faf8f4、交互セクションは #f5f0e8。多色にしない。
   2. 書体：見出し・数値＝明朝（--ai-serif）／本文・ラベル＝ゴシック（--ai-sans）。
            この明朝×ゴシックの対比がブランドの核。見出しをゴシックにしない。
   3. 余白：セクション上下 70px（SP 52px）／内容幅 max 1080px・左右 40px（SP 24px）。
   4. 形  ：角丸はボタン 3px／カード 6〜8px まで。影は「薄く・広く」（rgba(90,60,30,.14) 程度）。

   ■ スコープ
   全セレクタを .ai_container 配下に閉じています（既存テーマCSSと相互に干渉しません）。
   唯一の例外は html{scroll-behavior:smooth}（ページ内アンカーの滑らかスクロール）。
   不要であればその1行のみ削除してください。

   ■ 色・書体を変えたい場合
   下の .ai_container{ --ai-* } の値だけを変更してください。個別ルールは触れずに全体が変わります。
   ========================================================= */

.ai_container{
    --ai-main:#c0392b;      /* 深い和紅 */
    --ai-dark:#96281b;
    --ai-orange:#e67e22;
    --ai-gold:#d4a017;
    --ai-gold-d:#b8860b;
    --ai-bg:#faf8f4;        /* 生成り */
    --ai-bg-alt:#f5f0e8;
    --ai-text:#2c2c2c;
    --ai-sub:#666666;
    --ai-border:#ddd4c4;
    --ai-serif:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro","HG明朝E","MS PMincho",serif;
    --ai-sans:"Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Meiryo",sans-serif;
  }
  .ai_container,
.ai_container *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  .ai_container{
    font-family:var(--ai-sans);color:var(--ai-text);background:var(--ai-bg);
    font-size:16px;line-height:1.8;letter-spacing:.02em;-webkit-font-smoothing:antialiased;
  }
  .ai_container img{display:block;max-width:100%}
  .ai_container .ai_wrap{max-width:1080px;margin:0 auto;padding:0 40px}

  /* ===== section head（鮎踏襲：番号丸＋英字ラベル＋明朝h2＋赤線） ===== */
  .ai_container .ai_head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:13px;margin:0 auto 40px}
  .ai_container .ai_head .ai_num{
    width:40px;height:40px;border-radius:50%;background:var(--ai-main);color:#fff;
    font-family:var(--ai-serif);font-size:16px;display:flex;align-items:center;justify-content:center;letter-spacing:.04em;
  }
  .ai_container .ai_head .ai_label{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ai-main);font-weight:700}
  .ai_container .ai_head h2{font-family:var(--ai-serif);font-size:clamp(23px,3vw,29px);font-weight:600;line-height:1.5}
  /* ※ .ai_rule は現在のHTMLでは使用していません（見出しは 番号丸／英字ラベル／h2／説明文 の4点構成）。
     赤い短線を足したくなった場合のみ、h2の下に <div class="ai_rule"></div> を入れてください。 */
  .ai_container .ai_head .ai_rule{width:48px;height:2px;background:var(--ai-main);margin-top:2px}
  .ai_container .ai_head .ai_desc{color:var(--ai-sub);font-size:15px;max-width:640px;margin-top:4px}

  .ai_container section{padding:70px 0}
  .ai_container .ai_alt{background:var(--ai-bg-alt)}

  /* ===== top bar ===== */
  .ai_container .ai_bar{background:#fff;border-bottom:1px solid var(--ai-border)}
  .ai_container .ai_bar .ai_wrap{display:flex;justify-content:space-between;align-items:center;min-height:56px;flex-wrap:wrap;gap:6px 16px;padding:10px 40px}
  .ai_container .ai_bar .ai_brand{font-family:var(--ai-serif);font-size:19px;font-weight:600;letter-spacing:.1em;color:var(--ai-text)}
  .ai_container .ai_bar .ai_brand small{font-family:var(--ai-sans);font-size:11px;font-weight:400;color:var(--ai-sub);margin-left:10px;letter-spacing:.06em}
  .ai_container .ai_bar .ai_tel{font-size:13px;color:var(--ai-sub)}
  .ai_container .ai_bar .ai_tel b{font-family:var(--ai-serif);color:var(--ai-main);font-size:17px;letter-spacing:.04em;margin-left:4px}

  /* ===== hero ===== */
  .ai_container .ai_hero{background:var(--ai-bg);border-bottom:1px solid var(--ai-border)}
  .ai_container .ai_hero .ai_wrap{padding-top:56px;padding-bottom:60px}
  .ai_container .ai_hero_inner{display:grid;grid-template-columns:0.92fr 1.08fr;gap:52px;align-items:center}
  .ai_container .ai_hero .ai_cat{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--ai-main);font-weight:700;margin-bottom:20px}
  .ai_container .ai_hero h1{font-family:var(--ai-serif);font-size:clamp(28px,4vw,42px);line-height:1.5;font-weight:600;margin-bottom:20px}
  .ai_container .ai_hero h1 .ai_accent{color:var(--ai-main)}
  .ai_container .ai_hero .ai_sub{border-left:3px solid var(--ai-gold);padding:6px 0 6px 18px;font-size:16px;line-height:1.95;color:var(--ai-sub);margin-bottom:32px}
  .ai_container .ai_cta_row{display:flex;gap:14px;flex-wrap:wrap}
  .ai_container .ai_btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;text-decoration:none;padding:15px 30px;border-radius:3px;font-size:15.5px;transition:.2s}
  .ai_container .ai_btn_primary{background:var(--ai-main);color:#fff;box-shadow:0 6px 16px rgba(150,40,27,.22)}
  .ai_container .ai_btn_primary:hover{background:var(--ai-dark)}
  .ai_container .ai_btn_ghost{border:1px solid var(--ai-main);color:var(--ai-main);background:#fff}
  .ai_container .ai_btn_ghost:hover{background:var(--ai-bg-alt)}

  /* ===== hero collage（実商品画像／CSSのみのオートフェードカルーセル） =====
     JSなし。7枚のスライドを同じ位置に重ねて置き、1枚ずつ順番にopacityでフェード表示（クロスフェード）。
     1枚あたり表示4秒×7枚＝28秒で1周、ホバー／フォーカス中は一時停止。手動切り替え用ドットは無し。
     表示領域（.ai_car_view）の角丸は10px、枠線なし。常に正方形（aspect-ratio:1/1）。

     ・全スライド共通の@keyframes（ai_car_fade）を1つだけ用意し、各スライドに
       animation-delay を 0s,4s,8s...とずらして付けることで「順番に光る」を表現しています。
     ・枚数を変える場合は、animation-durationとkeyframesの%値（100÷枚数）、
       各スライドのdelay（0,4,8,12...秒）をセットで直してください
       （7枚のとき100÷7＝14.2857%＝1枚ぶんの時間幅）。
     ・左下の再生／一時停止ボタンは、チェックボックス（ai_car_toggle_input）+ label のみで実装
       （JSなし）。チェックが入る＝一時停止で、~ で後続の.ai_car_slideのanimationを止めています。
       そのためHTML上は input → label → スライド群 の順番である必要があります。 */
  .ai_container .ai_collage{display:flex;flex-direction:column;gap:14px}
  .ai_container .ai_car_view{
    position:relative;overflow:hidden;border-radius:10px;box-shadow:0 8px 22px rgba(90,60,30,.14);aspect-ratio:1/1;
  }
  .ai_container .ai_car_toggle_input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
  .ai_container .ai_car_toggle{
    position:absolute;left:12px;bottom:12px;z-index:3;width:34px;height:34px;border-radius:50%;
    background:rgba(44,38,32,.55);display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:.2s;
  }
  .ai_container .ai_car_toggle:hover{background:rgba(44,38,32,.78)}
  .ai_container .ai_ico_pause{display:flex;gap:4px}
  .ai_container .ai_ico_pause span{width:3px;height:12px;background:#fff;border-radius:1px}
  .ai_container .ai_ico_play{
    display:none;width:0;height:0;margin-left:2px;
    border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent #fff;
  }
  .ai_container .ai_car_toggle_input:checked ~ .ai_car_toggle .ai_ico_pause{display:none}
  .ai_container .ai_car_toggle_input:checked ~ .ai_car_toggle .ai_ico_play{display:block}
  .ai_container .ai_car_toggle_input:checked ~ .ai_car_slide{animation-play-state:paused}
  .ai_container .ai_car_slide{
    position:absolute;inset:0;opacity:0;background:var(--ai-bg-alt);
    animation:ai_car_fade 28s infinite;
  }
  /* 再生/停止ボタン用のinput・labelが.ai_car_slideより前に入っているため、
     :nth-child だと数がズレます。同じタグ(div)の中での順番だけを数える
     :nth-of-type を使ってください。 */
  .ai_container .ai_car_slide:nth-of-type(1){animation-delay:0s}
  .ai_container .ai_car_slide:nth-of-type(2){animation-delay:4s}
  .ai_container .ai_car_slide:nth-of-type(3){animation-delay:8s}
  .ai_container .ai_car_slide:nth-of-type(4){animation-delay:12s}
  .ai_container .ai_car_slide:nth-of-type(5){animation-delay:16s}
  .ai_container .ai_car_slide:nth-of-type(6){animation-delay:20s}
  .ai_container .ai_car_slide:nth-of-type(7){animation-delay:24s}
  /* フェードイン(0→0.6秒)は自分の持ち時間の頭で、フェードアウト(4→4.6秒)は次の
     スライドの持ち時間に食い込ませて重ねています。こうしないと、両方が同時に
     透明に近くなる一瞬ができて背景色（--ai-bg-alt）が見えてしまうため。 */
  @keyframes ai_car_fade{
    0%{opacity:0}
    2.14%{opacity:1}
    14.28%{opacity:1}
    16.43%{opacity:0}
    100%{opacity:0}
  }
  .ai_container .ai_car_slide img{width:100%;height:100%;object-fit:cover;display:block}
  .ai_container .ai_car_slide .ai_stamp{
    position:absolute;right:10px;bottom:10px;z-index:2;background:rgba(192,57,43,.92);color:#fff;
    font-family:var(--ai-serif);font-size:12px;padding:5px 12px;border-radius:2px;letter-spacing:.06em;
  }

  /* ===== proof（実績・落ち着いた和） ===== */
  .ai_container .ai_proof{background:var(--ai-bg-alt);border-bottom:1px solid var(--ai-border)}
  .ai_container .ai_proof .ai_wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding-top:0;padding-bottom:0}
  .ai_container .ai_proof .ai_cell{text-align:center;padding:34px 16px;border-right:1px solid var(--ai-border)}
  .ai_container .ai_proof .ai_cell:last-child{border-right:none}
  .ai_container .ai_proof .ai_num{font-family:var(--ai-serif);font-size:clamp(26px,3.4vw,36px);font-weight:600;color:var(--ai-main);line-height:1.1}
  .ai_container .ai_proof .ai_num .ai_u{font-size:14px;margin-left:3px;color:var(--ai-text)}
  .ai_container .ai_proof .ai_lbl{font-size:12.5px;color:var(--ai-sub);margin-top:10px;line-height:1.55}

  /* ===== products =====
     カード枚数に応じて列数を調整（最大3列・左詰め）。
     - 4枚のときは3列だと "3+1" で余りが出て間延びするため、明示的に2列（2×2）にしています。
     - 5〜6枚に増やす場合は下の2行を入れ替えてください（3列にすれば "3+2" 等は自動で左詰めになります）。
       .ai_prod_grid{grid-template-columns:repeat(3,1fr)}
     - 2〜3枚に減らす場合はそのまま2列/3列でOKです（余りは出ません）。 */
  .ai_container .ai_prod_grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
  .ai_container .ai_card{background:#fff;border:1px solid var(--ai-border);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;transition:.2s}
  .ai_container .ai_card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(90,60,30,.14)}
  .ai_container .ai_card .ai_thumb{aspect-ratio:1/1;overflow:hidden;position:relative;background:var(--ai-bg-alt)}
  .ai_container .ai_card .ai_thumb img{width:100%;height:100%;object-fit:cover}
  .ai_container .ai_card .ai_ribbon{position:absolute;top:0;left:0;background:var(--ai-main);color:#fff;font-size:12px;font-weight:700;padding:6px 14px;border-radius:0 0 8px 0;letter-spacing:.04em}
  .ai_container .ai_card .ai_ribbon.ai_gold{background:var(--ai-gold-d)}
  .ai_container .ai_card .ai_body{padding:20px 22px 24px;flex:1;display:flex;flex-direction:column}
  .ai_container .ai_card .ai_sku{font-family:var(--ai-serif);font-size:11px;color:#a89a7d;letter-spacing:.08em}
  .ai_container .ai_card h3{font-family:var(--ai-serif);font-size:18px;font-weight:600;line-height:1.5;margin:6px 0 10px}
  .ai_container .ai_card .ai_desc{font-size:13.5px;color:var(--ai-sub);line-height:1.8;flex:1}
  .ai_container .ai_card .ai_tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
  .ai_container .ai_card .ai_tag{font-size:11.5px;background:var(--ai-bg-alt);color:var(--ai-dark);padding:4px 11px;border-radius:3px;border:1px solid var(--ai-border)}

  /* ===== catalog（実績の売れ筋 全品リスト） ===== */
  .ai_container .ai_catalog{max-width:960px;margin:46px auto 0}
  .ai_container .ai_cat_group{margin-top:30px}
  .ai_container .ai_cat_group:first-child{margin-top:0}
  .ai_container .ai_cat_group .ai_cat_head{display:flex;align-items:baseline;gap:12px;border-bottom:2px solid var(--ai-main);padding-bottom:8px;margin-bottom:12px}
  .ai_container .ai_cat_group .ai_cat_head h4{font-family:var(--ai-serif);font-size:18px;font-weight:600;color:var(--ai-main)}
  .ai_container .ai_cat_group .ai_cat_head .ai_method{font-size:12.5px;color:var(--ai-sub)}
  .ai_container .ai_item_list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 30px}
  .ai_container .ai_item_list .ai_it{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 4px;border-bottom:1px dashed var(--ai-border)}
  .ai_container .ai_item_list .ai_it .ai_nm{font-size:14.5px;font-weight:600}
  .ai_container .ai_item_list .ai_it .ai_bdg{flex-shrink:0;font-size:11px;font-weight:700;color:#fff;background:var(--ai-gold-d);padding:3px 10px;border-radius:3px;letter-spacing:.02em}
  .ai_container .ai_item_list .ai_it .ai_bdg.ai_red{background:var(--ai-main)}
  @media(max-width:640px){.ai_container .ai_item_list{grid-template-columns:1fr}}

  /* ===== strengths ===== */
  .ai_container .ai_st_grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:920px;margin:0 auto}
  .ai_container .ai_st_item{background:#fff;border:1px solid var(--ai-border);border-radius:8px;padding:30px 32px;display:flex;gap:22px;align-items:flex-start}
  .ai_container .ai_st_item .ai_no{flex-shrink:0;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--ai-gold);color:var(--ai-gold-d);display:flex;align-items:center;justify-content:center;font-family:var(--ai-serif);font-size:20px;font-weight:600}
  .ai_container .ai_st_item h3{font-family:var(--ai-serif);font-size:19px;font-weight:600;margin-bottom:10px;line-height:1.5}
  .ai_container .ai_st_item p{font-size:14px;color:var(--ai-sub);line-height:1.85}

  /* ===== PB / OEM =====
     ※現在このHTMLでは未使用。2026-07-23の改訂でPB/OEMセクションを削除したため。
       将来セクションを復活させる場合に備えて定義だけ残しています。 */
  .ai_container .ai_pb_lead{max-width:720px;margin:0 auto 40px;text-align:center;color:var(--ai-sub);font-size:15.5px;line-height:1.95}
  .ai_container .ai_pb_grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:960px;margin:0 auto}
  .ai_container .ai_pb_item{background:#fff;border:1px solid var(--ai-border);border-radius:8px;padding:30px 26px;text-align:center}
  .ai_container .ai_pb_item .ai_ico{width:54px;height:54px;border-radius:50%;background:var(--ai-bg-alt);border:1px solid var(--ai-gold);color:var(--ai-gold-d);font-family:var(--ai-serif);font-size:22px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
  .ai_container .ai_pb_item h3{font-family:var(--ai-serif);font-size:18px;font-weight:600;margin-bottom:10px;line-height:1.5}
  .ai_container .ai_pb_item p{font-size:13.5px;color:var(--ai-sub);line-height:1.8}
  .ai_container .ai_pb_cta{text-align:center;margin-top:38px}

  /* ===== channels ===== */
  .ai_container .ai_channels{text-align:center}
  .ai_container .ai_ch_logos{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
  .ai_container .ai_ch{background:#fff;border:1px solid var(--ai-border);border-radius:6px;padding:22px 24px;min-width:158px;min-height:118px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
  .ai_container .ai_ch .ai_logo{height:40px;display:flex;align-items:center;justify-content:center}
  .ai_container .ai_ch .ai_logo img{max-height:40px;max-width:132px;width:auto;object-fit:contain}
  .ai_container .ai_ch small{font-family:var(--ai-sans);font-size:11px;color:var(--ai-sub);letter-spacing:0;line-height:1.4}

  /* ===== clients / お取引先例 =====
     2列（SPは1列）。将来ロゴ画像に差し替えても崩れないよう、各枠は高さ固定（min-height）＋
     中央寄せの「窓」（.ai_client_logo）にしてあります。画像に差し替える手順：
       <div class="ai_client_logo"><span class="ai_client_name">◯◯</span></div>
     の中身を
       <div class="ai_client_logo"><img src="img/xxx.png" alt="◯◯株式会社"></div>
     に置き換えるだけでOK（.ai_client_logo img 側で縦横比を保ったまま枠内に収まるようにしています）。 */
  .ai_container .ai_client_lead{max-width:720px;margin:0 auto 38px;text-align:center;color:var(--ai-sub);font-size:15.5px;line-height:1.95}
  .ai_container .ai_client_grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:900px;margin:0 auto}
  .ai_container .ai_client_tile{background:#fff;border:1px solid var(--ai-border);border-radius:8px;padding:20px;min-height:104px;display:flex;align-items:center;justify-content:center}
  .ai_container .ai_client_logo{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
  .ai_container .ai_client_logo img{max-width:100%;max-height:56px;width:auto;height:auto;object-fit:contain;display:block}
  .ai_container .ai_client_name{font-family:var(--ai-serif);font-size:15px;font-weight:600;line-height:1.6;color:var(--ai-text);text-align:center}
  @media(max-width:640px){.ai_container .ai_client_grid{grid-template-columns:1fr}}

  /* ===== flow ===== */
  .ai_container .ai_flow_grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:940px;margin:0 auto}
  .ai_container .ai_flow_step{text-align:center;position:relative;padding:0 6px}
  .ai_container .ai_flow_step .ai_circle{width:62px;height:62px;border-radius:50%;background:#fff;border:1.5px solid var(--ai-main);color:var(--ai-main);font-family:var(--ai-serif);font-size:22px;font-weight:600;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
  .ai_container .ai_flow_step h3{font-family:var(--ai-serif);font-size:16px;font-weight:600;margin-bottom:7px}
  .ai_container .ai_flow_step p{font-size:13px;color:var(--ai-sub);line-height:1.7}
  .ai_container .ai_flow_step:not(:last-child)::after{content:"";position:absolute;top:31px;right:-9px;width:14px;height:14px;border-top:2px solid var(--ai-gold);border-right:2px solid var(--ai-gold);transform:rotate(45deg)}

  /* ===== CV / contact ===== */
  .ai_container .ai_cv{background:var(--ai-bg-alt);border-top:1px solid var(--ai-border)}
  .ai_container .ai_cv .ai_head h2{color:var(--ai-text)}
  .ai_container .ai_cv_card{background:#fff;border:1px solid var(--ai-border);border-radius:10px;max-width:760px;margin:0 auto;padding:42px}
  .ai_container .ai_field{margin-top:18px}
  .ai_container .ai_field label{display:block;font-size:13.5px;font-weight:700;margin-bottom:7px}
  .ai_container .ai_field label .ai_req{color:#fff;background:var(--ai-main);font-size:10px;padding:2px 7px;border-radius:2px;margin-left:8px;vertical-align:middle;font-weight:700}
  .ai_container .ai_field input,
.ai_container .ai_field select,
.ai_container .ai_field textarea{width:100%;border:1px solid var(--ai-border);border-radius:5px;padding:12px 14px;font-size:15px;font-family:inherit;background:var(--ai-bg);color:var(--ai-text)}
  .ai_container .ai_field input:focus,
.ai_container .ai_field select:focus,
.ai_container .ai_field textarea:focus{outline:none;border-color:var(--ai-main)}
  .ai_container .ai_field_row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .ai_container .ai_submit{width:100%;margin-top:24px;background:var(--ai-main);color:#fff;border:none;border-radius:5px;padding:17px;font-size:16.5px;font-weight:700;cursor:pointer;transition:.2s;letter-spacing:.06em;font-family:var(--ai-serif)}
  .ai_container .ai_submit:hover{background:var(--ai-dark)}
  .ai_container .ai_cv_alt{margin-top:22px;text-align:center;font-size:14px;color:var(--ai-sub)}
  .ai_container .ai_cv_alt b{font-family:var(--ai-serif);color:var(--ai-main);font-size:20px;letter-spacing:.04em}
  .ai_container .ai_cv_alt .ai_hrs{font-size:12px;margin-top:2px}

  /* ===== footer ===== */
  .ai_container footer{background:#2c2620;color:#c9bda9;font-size:13px;padding:36px 0;text-align:center}
  .ai_container footer .ai_brand{font-family:var(--ai-serif);color:#fff;font-weight:600;letter-spacing:.12em;font-size:17px;margin-bottom:8px}
  .ai_container footer .ai_op{opacity:.6;margin-top:10px;font-size:12px}

  .ai_container .ai_note{background:#fff8e6;border:1px dashed var(--ai-gold);color:#7a5a12;font-size:12.5px;padding:11px 16px;border-radius:5px;margin-top:28px;text-align:center}

  @media(max-width:860px){
    .ai_container .ai_wrap{padding:0 24px}
    .ai_container .ai_bar .ai_wrap{padding:0 24px}
    .ai_container .ai_hero_inner{grid-template-columns:1fr;gap:34px}
    .ai_container .ai_proof .ai_wrap{grid-template-columns:repeat(2,1fr)}
    .ai_container .ai_proof .ai_cell:nth-child(2){border-right:none}
    .ai_container .ai_proof .ai_cell:nth-child(1),
.ai_container .ai_proof .ai_cell:nth-child(2){border-bottom:1px solid var(--ai-border)}
    .ai_container .ai_prod_grid{grid-template-columns:repeat(2,1fr)}
    .ai_container .ai_st_grid{grid-template-columns:1fr}
    .ai_container .ai_flow_grid{grid-template-columns:repeat(2,1fr);gap:30px 16px}
    .ai_container .ai_flow_step:not(:last-child)::after{display:none}
  }
  @media(max-width:560px){
    .ai_container section{padding:52px 0}
    .ai_container .ai_prod_grid{grid-template-columns:1fr}
    .ai_container .ai_field_row{grid-template-columns:1fr}
    .ai_container .ai_cv_card{padding:26px 20px}
    /* Market Proven（モールロゴ）はSPのみ2列グリッドに。.ai_chはmin-heightで高さを揃えているので
       5枚中1枚だけ2列目に余ってもガタつきません。 */
    .ai_container .ai_ch_logos{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
    .ai_container .ai_ch{min-width:0}
  }
