@charset "UTF-8";
/* ==========================================================================
   plasplus-shi.css  —  PlasPlus 記事本文まわりの追加部品スタイル

   記事本文（.plasplus_detail > .body）の中で使う部品の見た目をまとめたファイルです。
   既存の plasplus_new.css のあとに読み込みます。既存のスタイルは変更しません。

   --------------------------------------------------------------------------
   色を追加・変更するとき
   --------------------------------------------------------------------------
   よく使う色は、下の「0. トークン」に名前と値を1行足し、「8. 色状態」に
   その名前を使うルールを1組足すと、class から呼び出せるようになります。
   あとから色を調整したくなったときも、トークンの値を1か所直せば全記事に反映されます。

       :root { --shi-yellow: #FFF9E0; }                     ← 名前と値

       .plasplus_detail>.body .shi-cms-panel.is-yellow,     ← 呼び出す class
       .plasplus_detail>.body .shi-cms-card.is-yellow,
       .plasplus_detail>.body .shi-cms-zone.is-yellow {
           background-color: var(--shi-yellow);
           color: var(--shi-ink);        ← 文字色も必ずセットで書きます
       }

   記事ごとに1回だけ使う色なら、CSS を触らずに HTML 側で指定できます。

       <div class="shi-cms-panel" style="background-color:#FFF4E5">
       <div class="shi-cms-panel" style="background-color:#1A6B5A; color:#ffffff">
                                                    ↑ 濃い色のときは文字色も併記

   --------------------------------------------------------------------------
   編集するときに崩さない点
   --------------------------------------------------------------------------
   1  すべてのセレクタを `.plasplus_detail>.body ` で始めます。
      既存スタイルより優先されるために必要です。:root だけが例外です。
   2  `!important` は使いません。
   3  属性セレクタは box-sizing の1本だけです。ほかは class 名を並べて書きます。
   4  class だけでは既存の指定に負けます。`a.shi-cms-btn` / `h2.shi-cms-band` /
      `hr.shi-cms-divider` のように要素名を添えます。
   5  文字サイズは `calc(16px * n)` で書きます。`em` は基準が変わるため使いません。
   6  角丸は `--shi-radius`（10px）に揃えます。
   7  リンクのホバーは透明度ではなく背景色で表します。既存の `opacity:.5` を
      `opacity:1` で打ち消してから背景色を変えます。
   8  本文 HTML に `col2` / `r_5-5` / `r_4-6` / `r_3-7` / `r_6-4` / `r_7-3` は書きません。
      既存の .col2 は上書きできない指定を持っているためです。
   9  `<form>` と新しい送信先は作りません。問い合わせは既存ページへのリンクにします。
   10 `<picture>` は使いません。PC / スマホの画像出し分けは img 2枚を CSS で切り替えます。

   --------------------------------------------------------------------------
   色を選ぶときの目安（コントラスト比）
   --------------------------------------------------------------------------
   - 薄い背景（薄青 #E5F0F8 / 薄赤 #FBF0F0 / 薄紫 #D0B0F0 / 灰 #eeeeee）の上の
     本文色は #333333 にします。青字や紫字は読みにくくなります
     （#0070ba on #E5F0F8 は 4.51、#7030A0 on #D0B0F0 は 4.26 で基準を下回ります）。
   - #dddddd / #cccccc / #999999 は白地に対して薄すぎるため使いません
     （それぞれ 1.36 / 1.61 / 2.85。線や枠は #666666 にします）。
   - 薄い背景の上に白い文字を置きません。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. トークン（C1 の唯一の例外）
   -------------------------------------------------------------------------- */
:root {
    --shi-brand: #0070ba;
    --shi-brand-dark: #005a95;
    --shi-ink: #333333;
    --shi-gray: #eeeeee;
    --shi-blue: #E5F0F8;
    --shi-red: #FBF0F0;
    --shi-purple: #7030A0;
    --shi-purple-soft: #D0B0F0;
    --shi-line: #666666;
    --shi-radius: 10px;
}

/* --------------------------------------------------------------------------
   1. box-sizing（C3。属性セレクタを使ってよいのはこの1本だけ）
   このサイトに全称 box-sizing が無く既定は content-box のため、padding を持つ
   カードがグリッド列幅を超えて横あふれする。子要素にも一律必要なので属性で当てる。
   -------------------------------------------------------------------------- */
.plasplus_detail>.body [class*="shi-cms-"] {
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   2. 打ち消し（CLASS_CONTRACT.md §5。部品ルート class を列挙する）
   -------------------------------------------------------------------------- */

/* 2.1 部品内 p — 既存 `.body p{padding-left:20px}`(:370) を打ち消す */
.plasplus_detail>.body .shi-cms-panel p,
.plasplus_detail>.body .shi-cms-frame p,
.plasplus_detail>.body .shi-cms-cards p,
.plasplus_detail>.body .shi-cms-card p,
.plasplus_detail>.body .shi-cms-zone p,
.plasplus_detail>.body .shi-cms-booth p,
.plasplus_detail>.body .shi-cms-info-band p,
.plasplus_detail>.body .shi-cms-message p,
.plasplus_detail>.body .shi-cms-related p,
.plasplus_detail>.body .shi-cms-related-cards p {
    padding-left: 0;
}

/* 2.2 部品内 h3 — `.body h3{border-left:10px solid #333}`(:343) の黒バーと、
   `.body * h3{line-height:1}`(:336) による 16px 潰れを打ち消す。
   line-height は 16px 以外でなければならない（§9.3 の検査項目）→ 1.6 = 25.6px */
.plasplus_detail>.body .shi-cms-panel h3,
.plasplus_detail>.body .shi-cms-frame h3,
.plasplus_detail>.body .shi-cms-cards h3,
.plasplus_detail>.body .shi-cms-card h3,
.plasplus_detail>.body .shi-cms-zone h3,
.plasplus_detail>.body .shi-cms-booth h3,
.plasplus_detail>.body .shi-cms-info-band h3,
.plasplus_detail>.body .shi-cms-message h3,
.plasplus_detail>.body .shi-cms-related h3,
.plasplus_detail>.body .shi-cms-related-cards h3 {
    border-left: 0;
    padding-left: 0;
    line-height: 1.6;
}

/* 2.3 部品内 h4 — `.body h4{margin:10px 0 10px 20px}`(:364) の左20px と、
   `.body * h4{line-height:1}`(:357) による 16px 潰れを打ち消す */
.plasplus_detail>.body .shi-cms-panel h4,
.plasplus_detail>.body .shi-cms-frame h4,
.plasplus_detail>.body .shi-cms-cards h4,
.plasplus_detail>.body .shi-cms-card h4,
.plasplus_detail>.body .shi-cms-zone h4,
.plasplus_detail>.body .shi-cms-booth h4,
.plasplus_detail>.body .shi-cms-info-band h4,
.plasplus_detail>.body .shi-cms-message h4,
.plasplus_detail>.body .shi-cms-related h4,
.plasplus_detail>.body .shi-cms-related-cards h4 {
    margin-left: 0;
    line-height: 1.6;
}

/* 2.4 部品内 ol / ul — 既存の margin-left:20px を打ち消す */
.plasplus_detail>.body .shi-cms-panel ol,
.plasplus_detail>.body .shi-cms-panel ul,
.plasplus_detail>.body .shi-cms-frame ol,
.plasplus_detail>.body .shi-cms-frame ul,
.plasplus_detail>.body .shi-cms-cards ol,
.plasplus_detail>.body .shi-cms-cards ul,
.plasplus_detail>.body .shi-cms-card ol,
.plasplus_detail>.body .shi-cms-card ul,
.plasplus_detail>.body .shi-cms-zone ol,
.plasplus_detail>.body .shi-cms-zone ul,
.plasplus_detail>.body .shi-cms-booth ol,
.plasplus_detail>.body .shi-cms-booth ul,
.plasplus_detail>.body .shi-cms-info-band ol,
.plasplus_detail>.body .shi-cms-info-band ul,
.plasplus_detail>.body .shi-cms-message ol,
.plasplus_detail>.body .shi-cms-message ul,
.plasplus_detail>.body .shi-cms-related ol,
.plasplus_detail>.body .shi-cms-related ul,
.plasplus_detail>.body .shi-cms-related-cards ol,
.plasplus_detail>.body .shi-cms-related-cards ul {
    margin-left: 0;
}

/* --------------------------------------------------------------------------
   3. 字号（CMS-08 / §6.4）
   テキストを直接持つ要素に付ける。素の h2 には付けない。
   -------------------------------------------------------------------------- */
.plasplus_detail>.body .shi-text-size-13 {
    font-size: calc(16px * 1.3);
    line-height: 1.6;
}

.plasplus_detail>.body .shi-text-size-18 {
    font-size: calc(16px * 1.8);
    line-height: 1.5;
}

.plasplus_detail>.body .shi-text-size-20 {
    font-size: calc(16px * 2);
    line-height: 1.4;
}

/* --------------------------------------------------------------------------
   4. 汎用テキスト状態
   -------------------------------------------------------------------------- */
.plasplus_detail>.body .is-align-center {
    text-align: center;
}

.plasplus_detail>.body .is-weight-bold {
    font-weight: bold;
}

/* --------------------------------------------------------------------------
   5. 青帯（CMS-01）— h2 に class を付ける。IPF 記事では使わない（見本のみ）
   既存 `.body h2`(:325) の border-left / border-bottom / line-height / color を打ち消す。
   帯の高さは行数に応じて伸びる（line-height を数値にして padding で高さを作る）。
   -------------------------------------------------------------------------- */
.plasplus_detail>.body h2.shi-cms-band {
    border-left: 0;
    border-bottom: 0;
    line-height: 1.6;
    color: #ffffff;
    background-color: var(--shi-brand);
    margin: 32px 0 20px 0;
    padding: 12px 16px;
    border-radius: 0;
}

.plasplus_detail>.body h2.shi-cms-band.is-square {
    border-radius: 0;
}

.plasplus_detail>.body h2.shi-cms-band.is-radius {
    border-radius: var(--shi-radius);
}

/* --------------------------------------------------------------------------
   6. 見出し別ver（CMS-02 / CMS-03）— shi-cms-heading
   ベースで既存の黒バーと 16px 潰れを打ち消し、is-bar / is-marker で装飾を足す。
   is-marker は既存 h3 と同じ幅10pxの縦バー。高さは見出しの行高に追従する。
   is-bar と同じ style="border-color:..." で色を指定する。
   -------------------------------------------------------------------------- */
.plasplus_detail>.body h2.shi-cms-heading,
.plasplus_detail>.body h3.shi-cms-heading {
    border-left: 0;
    border-bottom: 0;
    padding-left: 0;
    line-height: 1.6;
    color: var(--shi-ink);
    margin: 24px 0 12px 0;
}

.plasplus_detail>.body h2.shi-cms-heading.is-bar,
.plasplus_detail>.body h3.shi-cms-heading.is-bar {
    border-left: 10px solid var(--shi-brand);
    border-bottom: 1px solid var(--shi-brand);
    padding-left: 10px;
    padding-bottom: 4px;
}

.plasplus_detail>.body h2.shi-cms-heading.is-marker,
.plasplus_detail>.body h3.shi-cms-heading.is-marker {
    border-left: 10px solid var(--shi-brand);
    padding-left: 10px;
}

.plasplus_detail>.body h2.shi-cms-heading.is-marker::before,
.plasplus_detail>.body h3.shi-cms-heading.is-marker::before {
    content: none;
}

.plasplus_detail>.body h2.shi-cms-heading.is-marker.is-purple,
.plasplus_detail>.body h3.shi-cms-heading.is-marker.is-purple {
    border-color: var(--shi-purple);
}

.plasplus_detail>.body h2.shi-cms-heading.is-marker.is-purple-soft,
.plasplus_detail>.body h3.shi-cms-heading.is-marker.is-purple-soft {
    border-color: var(--shi-purple-soft);
}

/* --------------------------------------------------------------------------
   7. 背景パネル（CMS-02 / CMS-04）
   -------------------------------------------------------------------------- */
.plasplus_detail>.body .shi-cms-panel {
    padding: 20px;
    margin: 0 0 24px 0;
    background-color: var(--shi-gray);
    color: var(--shi-ink);
    border-radius: 0;
}

.plasplus_detail>.body .shi-cms-panel.is-square {
    border-radius: 0;
}

.plasplus_detail>.body .shi-cms-panel.is-radius {
    border-radius: var(--shi-radius);
}

/* --------------------------------------------------------------------------
   8. 色状態（is-*）— panel / card / zone に共通
   薄背景（gray / blue / red / purple-soft）の本文色は #333333 固定（§6.10-1,2）。
   濃色（brand / purple）は白字。#0070ba 上の白は約 5.2、#7030A0 上の白は 8.02。
   規定色以外は class を増やさず、要素の style="background-color:..." で指定する（H3）。
   濃色は同じ style に color:#ffffff を併記する。青帯と縦バーマーカーには付けない。
   -------------------------------------------------------------------------- */
.plasplus_detail>.body .shi-cms-panel.is-gray,
.plasplus_detail>.body .shi-cms-card.is-gray,
.plasplus_detail>.body .shi-cms-zone.is-gray {
    background-color: var(--shi-gray);
    color: var(--shi-ink);
}

.plasplus_detail>.body .shi-cms-panel.is-blue,
.plasplus_detail>.body .shi-cms-card.is-blue,
.plasplus_detail>.body .shi-cms-zone.is-blue {
    background-color: var(--shi-blue);
    color: var(--shi-ink);
}

.plasplus_detail>.body .shi-cms-panel.is-brand,
.plasplus_detail>.body .shi-cms-card.is-brand,
.plasplus_detail>.body .shi-cms-zone.is-brand {
    background-color: var(--shi-brand);
    color: #ffffff;
}

.plasplus_detail>.body .shi-cms-panel.is-red,
.plasplus_detail>.body .shi-cms-card.is-red,
.plasplus_detail>.body .shi-cms-zone.is-red {
    background-color: var(--shi-red);
    color: var(--shi-ink);
}

.plasplus_detail>.body .shi-cms-panel.is-purple,
.plasplus_detail>.body .shi-cms-card.is-purple,
.plasplus_detail>.body .shi-cms-zone.is-purple {
    background-color: var(--shi-purple);
    color: #ffffff;
}

.plasplus_detail>.body .shi-cms-panel.is-purple-soft,
.plasplus_detail>.body .shi-cms-card.is-purple-soft,
.plasplus_detail>.body .shi-cms-zone.is-purple-soft {
    background-color: var(--shi-purple-soft);
    color: var(--shi-ink);
}

/* 濃色ゾーン（is-brand / is-purple）の上に白いカードを重ねるための色状態。
   ゾーンが color:#ffffff を宣言しており、カードに背景色だけを与えると白地に白字
   （コントラスト比 1.0）になる。背景と文字色をセットで宣言してこれを防ぐ（NFR-01）。
   style="background-color:#ffffff" では文字色が継承されたままになるため class にする。 */
.plasplus_detail>.body .shi-cms-panel.is-white,
.plasplus_detail>.body .shi-cms-card.is-white,
.plasplus_detail>.body .shi-cms-zone.is-white {
    background-color: #ffffff;
    color: var(--shi-ink);
}

/* --------------------------------------------------------------------------
   9. 枠＋タイトル（CMS-05）
   枠線は #666666。#dddddd を使わない（§6.10-3）。
   -------------------------------------------------------------------------- */
.plasplus_detail>.body .shi-cms-frame {
    border: 1px solid var(--shi-line);
    padding: 20px;
    margin: 0 0 24px 0;
    color: var(--shi-ink);
    border-radius: 0;
}

.plasplus_detail>.body .shi-cms-frame.is-square {
    border-radius: 0;
}

.plasplus_detail>.body .shi-cms-frame.is-radius {
    border-radius: var(--shi-radius);
}

.plasplus_detail>.body .shi-cms-frame.is-plain {
    border: 0;
}

.plasplus_detail>.body .shi-cms-frame.is-legend {
    position: relative;
    border: 1px solid var(--shi-brand);
    padding: 32px 20px 20px;
}

.plasplus_detail>.body .shi-cms-frame.is-legend>.shi-cms-frame__title {
    position: absolute;
    top: 0;
    left: 20px;
    transform: translateY(-50%);
    margin: 0;
    padding: 0 16px;
    background-color: #ffffff;
    color: var(--shi-brand);
    text-shadow: 0 1px 1px rgba(51, 51, 51, 0.18);
}

.plasplus_detail>.body .shi-cms-frame__title {
    margin: 0 0 12px 0;
    font-weight: bold;
    line-height: 1.6;
}

.plasplus_detail>.body .shi-cms-frame__body {
    margin: 0;
}

/* --------------------------------------------------------------------------
   10. 区切り（CMS-06 / §6.9）
   先頭の `border:0` は必須。既存 `.body hr`(:377) は border-top しか指定しないため、
   ブラウザ既定の border-style:inset が下左右に 1px ずつ残り高さ 2px の二重線になる（実測）。
   class なしの既存 hr の見た目は変更しない。
   -------------------------------------------------------------------------- */
.plasplus_detail>.body hr.shi-cms-divider {
    border: 0;
    border-top: 1px solid var(--shi-line);
    margin: 32px 0;
    width: 100%;
    display: block;
    opacity: 1;
}

.plasplus_detail>.body hr.shi-cms-divider.is-solid {
    border-top: 1px solid var(--shi-line);
}

.plasplus_detail>.body hr.shi-cms-divider.is-dotted {
    border-top: 2px dotted var(--shi-line);
}

.plasplus_detail>.body hr.shi-cms-divider.is-thick {
    border-top-width: 2px;
}

.plasplus_detail>.body hr.shi-cms-divider.is-heavy {
    border-top-width: 4px;
}

/* --------------------------------------------------------------------------
   11. ボタン（CMS-07）
   既定は1サイズ。LP用の大きい板は is-board。
   既存 `.body a{display:inline}`(:401) と `.body a:hover{opacity:.5}`(:407) を打ち消す。
   ホバーは opacity ではなく background-color で表す（C7）。
   -------------------------------------------------------------------------- */
.plasplus_detail>.body a.shi-cms-btn {
    display: inline-block;
    min-height: 44px;
    padding: 10px 24px;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    border-radius: var(--shi-radius);
    background-color: var(--shi-brand);
    color: #ffffff;
    border: 1px solid var(--shi-brand);
}

.plasplus_detail>.body a.shi-cms-btn.is-primary {
    background-color: var(--shi-brand);
    color: #ffffff;
    border: 1px solid var(--shi-brand);
}

.plasplus_detail>.body a.shi-cms-btn.is-secondary {
    background-color: #ffffff;
    color: var(--shi-brand);
    border: 1px solid var(--shi-brand);
}

.plasplus_detail>.body a.shi-cms-btn.is-purple {
    background-color: var(--shi-purple);
    color: #ffffff;
    border: 1px solid var(--shi-purple);
}

.plasplus_detail>.body a.shi-cms-btn.is-board {
    display: block;
    width: 60%;
    max-width: 360px;
    min-height: 72px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px 24px;
    font-size: calc(16px * 1.3);
    font-weight: bold;
    line-height: 1.5;
    border-radius: 0;
}

.plasplus_detail>.body a.shi-cms-btn:hover,
.plasplus_detail>.body a.shi-cms-btn:active,
.plasplus_detail>.body a.shi-cms-btn:focus {
    opacity: 1;
    background-color: var(--shi-brand-dark);
    color: #ffffff;
    border: 1px solid var(--shi-brand-dark);
}

.plasplus_detail>.body a.shi-cms-btn.is-secondary:hover,
.plasplus_detail>.body a.shi-cms-btn.is-secondary:active,
.plasplus_detail>.body a.shi-cms-btn.is-secondary:focus {
    opacity: 1;
    background-color: var(--shi-blue);
    color: var(--shi-brand-dark);
    border: 1px solid var(--shi-brand-dark);
}

.plasplus_detail>.body a.shi-cms-btn.is-purple:hover,
.plasplus_detail>.body a.shi-cms-btn.is-purple:active,
.plasplus_detail>.body a.shi-cms-btn.is-purple:focus {
    opacity: 1;
    background-color: var(--shi-brand-dark);
    color: #ffffff;
    border: 1px solid var(--shi-brand-dark);
}

/* --------------------------------------------------------------------------
   12. カードグリッド（LP-03 / §6.7）
   minmax(0,1fr) の 0 は、長い英数字で列幅が min-content に膨らみ横スクロールが
   出るのを防ぐために必須。7枚目を CSS は止めない（上限は HTML 側の件数検査）。
   -------------------------------------------------------------------------- */
.plasplus_detail>.body .shi-cms-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin: 0 0 32px 0;
}

.plasplus_detail>.body .shi-cms-cards.is-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* LP 標準。1列時はカード幅が広いので、画像左右（flex）は PC/タブレットで維持する。
   スマホ（768px 以下）ではカード内も縦積みにする。 */
.plasplus_detail>.body .shi-cms-cards.is-cols-1 {
    grid-template-columns: minmax(0, 1fr);
}

/* 画像カード容器の幅。100%は既定。PC/SPとも同じ割合で中央に配置する。 */
.plasplus_detail>.body .shi-cms-cards.is-width-85 {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
}

.plasplus_detail>.body .shi-cms-cards.is-width-70 {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

/* 空のゾーンは見出しとリードを残し、cards 要素だけを消す（HTML から空 div を
   削除する運用にはしない。MT 差し戻しで構造が壊れるため。§6.7） */
.plasplus_detail>.body .shi-cms-cards:empty {
    display: none;
}

/* 枚数ヒント（is-count-1 … is-count-6）。
   仕様上「装飾を持たない」ため宣言を1つも書かない。CSS は7枚目を止めない（§6.7 / LP-04）。 */
.plasplus_detail>.body .shi-cms-cards.is-count-1,
.plasplus_detail>.body .shi-cms-cards.is-count-2,
.plasplus_detail>.body .shi-cms-cards.is-count-3,
.plasplus_detail>.body .shi-cms-cards.is-count-4,
.plasplus_detail>.body .shi-cms-cards.is-count-5,
.plasplus_detail>.body .shi-cms-cards.is-count-6 {
}

/* --------------------------------------------------------------------------
   13. Zone カード（LP-05 / §6.8 / §6.15）
   DOM 順は __media → __body に固定。右寄せは row-reverse の視覚順だけで行う。
   -------------------------------------------------------------------------- */
/* 無色カードは親（zone / 記事本文）の文字色を継承する。
   --shi-ink 固定だと .shi-cms-zone.is-brand / .is-purple の白字がカード内で切れる。
   色付きカードは §8 の is-* が同じ要素で上書きする（灰青赤薄紫は墨、濃紫は白）。 */
.plasplus_detail>.body .shi-cms-card {
    padding: 16px;
    margin: 0;
    color: inherit;
    border-radius: 0;
}

.plasplus_detail>.body .shi-cms-card.is-square {
    border-radius: 0;
}

.plasplus_detail>.body .shi-cms-card.is-radius {
    border-radius: var(--shi-radius);
}

.plasplus_detail>.body .shi-cms-card.is-media-left,
.plasplus_detail>.body .shi-cms-card.is-media-right {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.plasplus_detail>.body .shi-cms-card.is-media-right {
    flex-direction: row-reverse;
}

/* 画像があるときは親に背景を置かない（余白が灰く見えないようにする）。
   画像未投入の空き枠だけ灰色＋1px線で成立させる（§6.15）。
   1px の線は必須: Zone の初期背景も #eeeeee のため、背景色だけでは
   灰ゾーンの上で空き枠が同色に沈んで見えなくなる（実測 media bg = zone bg = rgb(238,238,238)）。
   border は使わない: border-box + 1px で content 比が 16:9 から外れ、
   object-fit:contain が枠内側に余白を残す。inset box-shadow なら
   線は占有せず空き枠の最外周に重なる。
   #dddddd は白地 1.36 で非文字 3.0 に満たないため使わず、#666666（白地 5.74）で引く（§6.10-3）。 */
.plasplus_detail>.body .shi-cms-card__media {
    flex: 0 0 40%;
    align-self: flex-start;
    min-height: 90px;
    margin: 0 0 12px 0;
}

.plasplus_detail>.body .shi-cms-card__media:empty {
    background-color: var(--shi-gray);
    box-shadow: inset 0 0 0 1px var(--shi-line);
}

.plasplus_detail>.body .shi-cms-card__media img {
    width: 100%;
    height: auto;
}

.plasplus_detail>.body .shi-cms-card__body {
    flex: 1 1 auto;
    min-width: 0;
}

.plasplus_detail>.body .shi-cms-card__title {
    margin: 0 0 8px 0;
    font-weight: bold;
    line-height: 1.6;
}

.plasplus_detail>.body .shi-cms-card__text {
    margin: 0;
    line-height: 1.7;
}

/* カード全体が単一の a になる形（CLASS_CONTRACT.md 裁定 A-02 / §6.15）。
   a 無しの `.shi-cms-card` も等しく成立するため、ここは a 付きのときだけの追補にする。
   打ち消し対象は既存 `.body a{display:inline}`(:401)。
   ホバーは背景色を変えず、透明度をわずかに落として表す。既存 `.body a:hover{opacity:.5}` は
   文字まで薄まり本文コントラストが 2.85 まで落ちるため使わず、.85 に上書きする。
   .85 のときの本文コントラストは最小 6.93（is-gray カード）で AA 4.5 に余裕がある。
   .75 を下回ると is-gray カードが 4.5 を割るため、これ以上薄くしない。
   `.is-media-left` / `.is-media-right` は (0,4,0) でこの (0,3,1) に勝つため、
   ここで display:block を書いても画像左右の flex は解除されない（意図どおり）。 */
.plasplus_detail>.body a.shi-cms-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.plasplus_detail>.body a.shi-cms-card:hover,
.plasplus_detail>.body a.shi-cms-card:active,
.plasplus_detail>.body a.shi-cms-card:focus {
    opacity: .85;
}

/* NFR-04: 焦点リングは outline-style / outline-color を longhand で書く。 */
.plasplus_detail>.body a.shi-cms-card:focus-visible {
    outline-style: solid;
    outline-width: 2px;
    outline-color: var(--shi-brand-dark);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   14. ゾーン（LP-06）
   ゾーン名 class は background-color を持たない（H12）。区別は見出しが担う。
   -------------------------------------------------------------------------- */
.plasplus_detail>.body .shi-cms-zone {
    padding: 24px;
    margin: 0 0 32px 0;
    color: var(--shi-ink);
    border-radius: 0;
}

.plasplus_detail>.body .shi-cms-zone.is-square {
    border-radius: 0;
}

.plasplus_detail>.body .shi-cms-zone.is-radius {
    border-radius: var(--shi-radius);
}

.plasplus_detail>.body .shi-cms-zone__head {
    margin: 0 0 16px 0;
}

.plasplus_detail>.body .shi-cms-zone__title {
    margin: 0 0 8px 0;
    font-size: calc(16px * 1.5);
    font-weight: bold;
    line-height: 1.6;
}

/* タイトル下の短いアクセント線。色は見出しに追従（濃色Zoneは白、浅色Zoneは墨）。 */
.plasplus_detail>.body .shi-cms-zone__title::after {
    content: "";
    display: block;
    width: 48px;
    height: 1px;
    margin-top: 8px;
    background-color: currentColor;
}

.plasplus_detail>.body .shi-cms-zone__lead {
    margin: 0;
    line-height: 1.7;
}

.plasplus_detail>.body .shi-cms-zone__body {
    margin: 0;
}

/* ゾーン名。意図的に宣言を持たない（background-color を持たせない。H12 / LP-06）。 */
.plasplus_detail>.body .shi-cms-zone.is-zone-future,
.plasplus_detail>.body .shi-cms-zone.is-zone-communication {
}

/* --------------------------------------------------------------------------
   15. ブース位置（LP-12 / BUG-02 / H13）
   会場行は空欄のまま枠を残す。空でも高さが潰れないようにする。
   -------------------------------------------------------------------------- */
.plasplus_detail>.body .shi-cms-booth {
    margin: 0 0 32px 0;
    color: var(--shi-ink);
}

.plasplus_detail>.body .shi-cms-booth__title {
    margin: 0 0 12px 0;
    font-weight: bold;
    line-height: 1.6;
}

.plasplus_detail>.body .shi-cms-booth__map {
    margin: 0 0 16px 0;
    border: 1px solid var(--shi-brand);
}

.plasplus_detail>.body .shi-cms-frame__body>.shi-cms-booth__map:last-child {
    margin-bottom: 0;
}

.plasplus_detail>.body .shi-cms-booth__map img {
    width: 100%;
    height: auto;
}

.plasplus_detail>.body .shi-cms-booth__meta {
    margin: 0;
    padding: 12px 16px;
    min-height: 44px;
    border: 1px solid var(--shi-line);
    line-height: 1.7;
}

/* --------------------------------------------------------------------------
   15b. 案内帯（会場・ブース番号＋来場登録）
   灰色背景・中央揃え。リンクは「こちら」だけに付ける。
   -------------------------------------------------------------------------- */
.plasplus_detail>.body .shi-cms-info-band {
    background-color: var(--shi-gray);
    color: var(--shi-ink);
    text-align: center;
    padding: 20px 16px;
    margin: 0 0 32px 0;
}

.plasplus_detail>.body .shi-cms-info-band p {
    margin: 0;
    line-height: 1.8;
}

.plasplus_detail>.body .shi-cms-info-band p + p {
    margin-top: 8px;
}

.plasplus_detail>.body .shi-cms-info-band__venue {
    font-weight: bold;
}

.plasplus_detail>.body .shi-cms-info-band a {
    color: var(--shi-brand);
    text-decoration: underline;
}

.plasplus_detail>.body .shi-cms-booth>.shi-cms-info-band:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   16. メッセージ帯（LP-14 / §6.11）
   <picture> を使わず img 2枚を出し分ける。帯の幅は記事本文幅に一致させる。
   欠ける側は要素ごと出さない運用（src="" の img を出さない）。
   -------------------------------------------------------------------------- */
.plasplus_detail>.body .shi-cms-message {
    margin: 0 0 32px 0;
    width: 100%;
}

.plasplus_detail>.body .shi-cms-message__pc {
    display: block;
    width: 100%;
    height: auto;
}

.plasplus_detail>.body .shi-cms-message__sp {
    display: none;
    width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   17. 関連記事（CMS-11）
   関連カードは全体クリック。Zone カードと統合しない（H14 / §6.15）。
   NEW バッジ・NEW class は作らない。
   -------------------------------------------------------------------------- */
.plasplus_detail>.body .shi-cms-related {
    margin: 40px 0 0 0;
    color: var(--shi-ink);
}

.plasplus_detail>.body .shi-cms-related__title {
    margin: 0 0 16px 0;
    font-weight: bold;
    line-height: 1.6;
}

.plasplus_detail>.body .shi-cms-related-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
}

.plasplus_detail>.body .shi-cms-related-cards.is-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.plasplus_detail>.body .shi-cms-related-cards.is-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.plasplus_detail>.body .shi-cms-related-cards:empty {
    display: none;
}

.plasplus_detail>.body a.shi-cms-related-card {
    display: block;
    min-width: 0;
    padding: 12px;
    text-decoration: none;
    color: var(--shi-ink);
    background-color: var(--shi-gray);
    border-radius: var(--shi-radius);
}

.plasplus_detail>.body a.shi-cms-related-card:hover,
.plasplus_detail>.body a.shi-cms-related-card:active,
.plasplus_detail>.body a.shi-cms-related-card:focus {
    opacity: 1;
    background-color: var(--shi-blue);
    color: var(--shi-ink);
}

.plasplus_detail>.body .shi-cms-related-card__thumb {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 8px 0;
    background-color: var(--shi-gray);
}

.plasplus_detail>.body .shi-cms-related-card__title {
    margin: 0;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   18. SP（768px 以下）
   カードは1列。画像左右は解除して画像を上に置く。メッセージ帯は SP 用へ入れ替える。
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

    .plasplus_detail>.body .shi-cms-cards {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .plasplus_detail>.body .shi-cms-cards.is-cols-2 {
        grid-template-columns: 1fr;
    }

    .plasplus_detail>.body .shi-cms-cards.is-cols-1 {
        grid-template-columns: minmax(0, 1fr);
    }

    .plasplus_detail>.body .shi-cms-related-cards,
    .plasplus_detail>.body .shi-cms-related-cards.is-cols-2,
    .plasplus_detail>.body .shi-cms-related-cards.is-cols-3 {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .plasplus_detail>.body .shi-cms-cards .shi-cms-card.is-media-left,
    .plasplus_detail>.body .shi-cms-cards .shi-cms-card.is-media-right {
        display: block;
    }

    .plasplus_detail>.body .shi-cms-cards .shi-cms-card__media {
        flex: none;
    }

    .plasplus_detail>.body .shi-cms-message__pc {
        display: none;
    }

    .plasplus_detail>.body .shi-cms-message__sp {
        display: block;
    }
}
/* ==========================================================================
   19. UI精査による追記（提案）
   全セレクタ `.plasplus_detail>.body ` 始まり / !important 0件 /
   属性セレクタ・em・禁止色を追加しない（CSS-01〜12 維持）
   ========================================================================== */

/* --- A. リンク形部品への white-space: break-spaces 継承の打ち消し ---------
   `.plasplus_detail a{white-space:break-spaces}`(plasplus_new.css:265) の継承で
   a 内部の改行・インデントが行ボックスになる。実測(1280/test.html):
   __thumb 内 84px、__thumb→__title は指定 8px に対し 50px。
   a.shi-cms-card 221.3px に対し同内容の article.shi-cms-card は 134px。 */
.plasplus_detail>.body a.shi-cms-card,
.plasplus_detail>.body a.shi-cms-related-card {
    white-space: normal;
}

/* --- B. 関連サムネの境界（__media と同じ解法を対称に適用） ---------------
   実測: __thumb の背景 rgb(238,238,238) は親 a.shi-cms-related-card と同値、
   線なしでは親と同色に沈む。__media と同じ inset 1px を使う（border だと
   content 比が 16:9 から外れ、contain 側に灰ハローが出る）。 */
.plasplus_detail>.body .shi-cms-related-card__thumb {
    box-shadow: inset 0 0 0 1px var(--shi-line);
}

/* --- C. メディア枠の縦横比固定 -------------------------------------------
   実測(1280/test.html): __media 高さ 91.5/187.1/155.2/90/90/90px（2.08倍差）、
   カード高さ 134〜231.1px（1.72倍）。HTML の width/height 属性(640x360)は
   height:auto により無効化され CLS 予約として機能していない。
   __media は製品写真が切れると意味を失うため contain、__thumb は元が 16:9 近傍の
   記事サムネのため cover にする。

   高さを決めている要因は viewport で入れ替わる（__media の幅が flex で変わるため）。実測:
     1280px 幅154.8px → 16:9 は 87.1px だが既存 min-height:90px が下限で勝ち 90px（比 1.72）
     1024px 幅123.6px → 16:9 は 69.5px、同じく min-height:90px が勝ち 90px（比 1.37）
      769px 幅181.5px → 16:9 の 102.1px が勝つ（比 1.78）
      375px 幅255.0px → 16:9 の 143.4px が勝つ（比 1.78）
   つまり PC幅では min-height、SP・中間幅では aspect-ratio が高さを決めている。
   本修正の目的はどちらの経路でも「同じ viewport 内で全カードが同じ高さ」になることで、
   画像ごとの intrinsic 比（1.69 / 0.81 / 1.70 …）に振り回されなくなる点にある。 */
.plasplus_detail>.body .shi-cms-card__media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.plasplus_detail>.body .shi-cms-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top;
}

.plasplus_detail>.body .shi-cms-related-card__thumb {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

/* 関連記事サムネも Zone カード画像と同じ contain にそろえる（2026-08-26）。
   cover では 1280x680（既存サムネ33枚すべてこの比）が左右 5.6% 切り落とされ、
   比の外れた画像では最大 53.6% が黙って消える。contain なら切れず、
   枠と カード地色 が同じ --shi-gray のため余白はカードに溶けて目立たない。
   これで「画像は切れない。比が合わないと余白が出る」の1本に統一される。 */
.plasplus_detail>.body .shi-cms-related-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* --- D. ゾーン下端の二重余白 ---------------------------------------------
   実測: cards の margin-bottom 32px が zone__body を抜けて zone の
   padding-bottom 24px と重なり、下端に 56px（上端は 24px で非対称）。 */
.plasplus_detail>.body .shi-cms-zone__body>.shi-cms-cards:last-child {
    margin-bottom: 0;
}

/* --- E. ブース位置のラベルと枠の近接関係 ---------------------------------
   実測: ラベル→枠 30px、枠→次ラベル 0px で対応関係が逆転。
   `.shi-cms-booth p` への直接指定は .shi-cms-frame__title(12px) を 8px に
   巻き込むため、隣接兄弟で対象を限定する（実測で __title は 12px 維持を確認）。 */
.plasplus_detail>.body .shi-cms-booth__map+p,
.plasplus_detail>.body .shi-cms-booth__meta+p {
    margin-bottom: 8px;
}

.plasplus_detail>.body .shi-cms-booth__meta {
    margin-bottom: 24px;
}

/* --- F. 素の h3 直後に部品が来ると 10px に潰れる --------------------------
   部品側は margin-top を持たないため、隣接マージン結合が既存
   `.body h3{margin:10px 0 10px}` の 10px だけで決まる。他の見出し接続は
   20〜32px。実測: test.html「展示概要」1件、test-2.html 5件。
   `.shi-cms-related` は既に margin-top 40px を持つため対象外。 */
.plasplus_detail>.body h3+.shi-cms-panel,
.plasplus_detail>.body h3+.shi-cms-frame,
.plasplus_detail>.body h3+.shi-cms-zone,
.plasplus_detail>.body h3+.shi-cms-cards,
.plasplus_detail>.body h3+.shi-cms-booth,
.plasplus_detail>.body h3+.shi-cms-info-band,
.plasplus_detail>.body h3+.shi-cms-message {
    margin-top: 20px;
}

/* --- H. .body 内に置かれた h1 が無装飾で本文より小さい --------------------
   実測(test-2.html): font-size 14px / line-height 21px / font-weight 400 /
   margin 0 / color rgb(102,102,102)。直後の h2 は 24px bold のため
   h1 が h2 より弱く見える。`.plasplus_detail>.body h1` のルールは
   既存CSS・本CSSとも 0 件。既存記事24本のうち .body 内 h1 を持つのは
   test-2.html の1件のみ（他記事への波及なし）。 */
.plasplus_detail>.body h1 {
    font-size: calc(16px * 2);
    font-weight: bold;
    line-height: 1.4;
    margin: 0 0 20px 0;
    color: var(--shi-ink);
}

/* --- I. 中間幅（769〜1023px）でカード本文が全角5文字/行になる -------------
   実測: 769px で .plasplus_detail が 499px、カード幅 213.5px、
   本文幅 92.9px（全角5文字）。768px で1列に落ちると 648px に跳ね上がる。
   1024px 未満では画像を上に積んで本文に幅を戻す。
   1列化(H2案)は 6枚が6行になり COMPUTED-03 に抵触するため採らない。 */
@media (max-width: 1023px) {

    .plasplus_detail>.body .shi-cms-cards:not(.is-cols-1) .shi-cms-card.is-media-left,
    .plasplus_detail>.body .shi-cms-cards:not(.is-cols-1) .shi-cms-card.is-media-right {
        display: block;
    }

    .plasplus_detail>.body .shi-cms-cards:not(.is-cols-1) .shi-cms-card__media {
        flex: none;
    }
}

/* --- J. ブース図・メッセージ帯は画像本来の縦横比で表示する ---------------
   高さは自由。読込前の領域予約には実画像寸法と一致するHTML width/heightを使う。
   CSSで固定比率を指定すると異なる比率の画像が歪むため、指定しない。 */

/* 中央寄せ段落は既存本文の左padding 20pxを打ち消す（CTAの中心ズレ対策）。 */
.plasplus_detail>.body p.is-align-center {
    padding-left: 0;
}

/* 画像カード。白枠・文言・内部余白は画像に含め、カード間隔は既存gridを使う。
   is-media-left/rightや色classとは併用しない。SP画像なしの場合も同じURLで2枚記述する。 */
.plasplus_detail>.body .shi-cms-card.is-image {
    padding: 0;
    background-color: transparent;
    overflow: hidden;
}

.plasplus_detail>.body .shi-cms-card__pc {
    display: block;
    width: 100%;
    height: auto;
}

.plasplus_detail>.body .shi-cms-card__sp {
    display: none;
    width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .plasplus_detail>.body .shi-cms-card__pc {
        display: none;
    }

    .plasplus_detail>.body .shi-cms-card__sp {
        display: block;
    }
}

/* --- K. リンク部品の :focus-visible を明示する ----------------------------
   `a.shi-cms-card` だけが明示宣言を持ち、`a.shi-cms-related-card` と
   `a.shi-cms-btn` は UA 既定リング（Chromium 実測: outline-style auto /
   rgb(0,95,204) / 1px / offset 1px）に委ねられていた。
   実害は現状無い（#005fcc は #eeeeee 上 5.16、#E5F0F8 上 5.17、白上 5.98）が、
   ブラウザ間で太さ・色が保証されず、祖先の outline リセットにも耐えない。
   新色は足さず var(--shi-brand-dark) を再利用する
   （contrast.py 実測: #005a95 は白上 7.25 / #E5F0F8 上 6.27）。 */
.plasplus_detail>.body a.shi-cms-related-card:focus-visible,
.plasplus_detail>.body a.shi-cms-btn:focus-visible {
    outline-style: solid;
    outline-width: 2px;
    outline-color: var(--shi-brand-dark);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   20. コード見本（catalog の pre）
   既存 `.plasplus_detail pre{white-space:break-spaces}` を打ち消す。
   -------------------------------------------------------------------------- */
.plasplus_detail>.body pre,
.plasplus_detail>.body pre code {
    white-space: pre;
    overflow-x: auto;
    background: #111111;
    color: #ffffff;
    padding: 12px 16px;
    margin: 0 0 100px 0;
    font-size: 13px;
    line-height: 1.5;
    border: 0;
}

.plasplus_detail>.body pre code {
    display: block;
    padding: 0;
    margin: 0;
}