/* CMSのブロック編集で作ったページの部品（2026-10-20）。HPの色・角丸・余白に合わせる */
.cmsb-section{padding-top:56px}
.cmsb-body{max-width:1080px;color:#0d2b3a}
.cmsb-body > * + *{margin-top:28px}
.cmsb-body img{display:block;max-width:100%;height:auto}

/* 見出し */
.cmsb-h2{margin:56px 0 0;padding-bottom:12px;border-bottom:2px solid #e3eef4;font-size:clamp(22px,2.4vw,30px);line-height:1.45;color:#09283c;letter-spacing:.02em}
.cmsb-body > .cmsb-h2:first-child{margin-top:0}
.cmsb-h3{margin:0 0 10px;padding-left:12px;border-left:4px solid #42c6f2;font-size:18px;line-height:1.55;color:#0a3046}

/* 文章 */
.cmsb-text{max-width:860px}
.cmsb-text p,.cmsb-media-body p,.cmsb-col-body p{margin:0 0 14px;font-size:15px;line-height:2}
.cmsb-text p:last-child,.cmsb-media-body p:last-child,.cmsb-col-body p:last-child{margin-bottom:0}
.cmsb-text h3{margin:24px 0 10px;padding-left:12px;border-left:4px solid #42c6f2;font-size:18px;color:#0a3046}
.cmsb-text ul,.cmsb-media-body ul,.cmsb-col-body ul,.cmsb-list{margin:0 0 14px;padding-left:1.4em;list-style:disc}
.cmsb-text li,.cmsb-media-body li,.cmsb-col-body li,.cmsb-list li{margin:0 0 6px;font-size:15px;line-height:1.9}
.cmsb-list li::marker{color:#42c6f2}
.cmsb-body a:not(.cmsb-btn):not(.case-placement-card){color:#0b7fb3;text-decoration:underline;text-underline-offset:3px}

/* 写真 */
.cmsb-image{margin-left:0;margin-right:0}
.cmsb-image img{width:100%;border-radius:14px}
.cmsb-image figcaption{margin-top:8px;font-size:13px;color:#5a7382;text-align:center}

/* 写真＋テキスト */
.cmsb-media{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:center}
.cmsb-media.is-image-right .cmsb-media-img{order:2}
.cmsb-media-img img{width:100%;border-radius:14px}

/* 2カラム・3カラム */
.cmsb-cols{display:grid;gap:20px}
.cmsb-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cmsb-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cmsb-col{display:flex;flex-direction:column;overflow:hidden;border:1px solid #d7e5ed;border-radius:14px;background:#fff}
.cmsb-col-img img{width:100%;aspect-ratio:16/10;object-fit:cover}
.cmsb-col-body{display:flex;flex:1;flex-direction:column;padding:20px 22px 22px}
.cmsb-col-link{margin-top:auto !important;padding-top:12px}
.cmsb-col-link a{font-weight:700;font-size:14px;text-decoration:none !important}

/* 表 */
.cmsb-table{margin-left:0;margin-right:0;overflow-x:auto}
.cmsb-table table{width:100%;min-width:520px;border-collapse:collapse;font-size:14px;line-height:1.9}
.cmsb-table th,.cmsb-table td{padding:12px 16px;border:1px solid #d7e5ed;text-align:left;vertical-align:top}
.cmsb-table th{background:#0a3046;color:#fff;font-weight:600}
.cmsb-table tr td:first-child{width:28%;background:#f3f8fb;font-weight:600}

/* ボタン */
.cmsb-button{text-align:center}
.cmsb-btn{display:inline-flex;align-items:center;gap:14px;padding:16px 34px;border-radius:999px;background:linear-gradient(90deg,#3fc3ee,#1a8fd0);color:#fff !important;font-weight:700;font-size:15px;text-decoration:none;box-shadow:0 10px 24px rgba(26,143,208,.25);transition:transform .2s,box-shadow .2s}
.cmsb-btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(26,143,208,.32)}

/* 区切り線 */
.cmsb-divider{height:0;border:0;border-top:1px solid #d7e5ed}

/* 動画 */
.cmsb-video{position:relative;max-width:860px;aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:#0a3046}
.cmsb-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* 導入事例（case-placements.css のカードを使う）・項目と内容（ws-spec）・お問い合わせ誘導（ws-catalog-cta） */
.cmsb-cases{margin-top:28px}
.cmsb-spec{max-width:960px}
.cmsb-cta{margin-top:56px !important;border-radius:18px}
.cmsb-cta p{margin:10px 0 0;color:rgba(255,255,255,.85)}

@media (max-width:860px){
  .cmsb-cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .cmsb-section{padding-top:36px}
  .cmsb-media,.cmsb-cols-2,.cmsb-cols-3{grid-template-columns:minmax(0,1fr)}
  .cmsb-media.is-image-right .cmsb-media-img{order:0}
  .cmsb-text p,.cmsb-media-body p,.cmsb-col-body p,.cmsb-text li,.cmsb-list li{font-size:14px}
  .cmsb-btn{width:100%;justify-content:center;padding:15px 20px}
}
