/*
 * cockpit.css
 * 資格管理Cockpit 告知用（2026-10-20 追加）
 * ・トップバナー（index.php）
 * ・差し込みブロック（page-license.php / page-iso.php）
 *   ※差し込みブロックは株式会社ワン・オー・ワン支給「01_差し込みブロック.html」のCSSそのまま
 */

/* ==========================================================
トップバナー
========================================================== */
.sc-topbnr {
  max-width: 1200px;
  margin: 40px auto 0;
  padding: 0 20px;
  box-sizing: content-box;
}
.sc-topbnr a {
  display: block;
  transition: opacity .2s;
}
.sc-topbnr a:hover {
  opacity: .85;
}
.sc-topbnr img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 767px) {
  .sc-topbnr {
    margin-top: 24px;
    padding: 0 16px;
  }
}

/* ==========================================================
差し込みブロック
========================================================== */
.sc-bnr{
  background:linear-gradient(100deg,#0432B0 0%,#1C4FD0 55%,#3280EF 100%);
  border-radius:8px; overflow:hidden; position:relative;
  display:flex; align-items:center; min-height:250px;
  max-width:1200px; margin:34px auto;
  text-align:left; /* 親（.fea-sec2 等）の中央揃えを打ち消す */
  font-family:'Hiragino Kaku Gothic ProN','Yu Gothic UI','Noto Sans JP',sans-serif;
}
/* 幅は割合指定（固定640pxだと幅が狭いときに画面写真と重なるため） */
.sc-bnr__body{ padding:30px 24px 30px 38px; flex:0 1 54%; max-width:640px; box-sizing:border-box; position:relative; z-index:2; }
.sc-bnr__new{
  display:inline-flex; background:rgba(255,255,255,.2); color:#fff;
  font-size:11.5px; font-weight:800; letter-spacing:.06em;
  padding:4px 12px; border-radius:3px; margin-bottom:12px;
}
.sc-bnr__ttl{ font-size:27px; font-weight:800; color:#fff; line-height:1.42; margin:0 0 11px; }
.sc-bnr__lead{ font-size:13.5px; line-height:1.8; color:rgba(255,255,255,.9); margin:0 0 17px; }
.sc-bnr__row{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.sc-bnr__btn{
  display:inline-flex; background:#fff; color:#0432B0; text-decoration:none;
  font-size:14.5px; font-weight:700; padding:13px 26px; border-radius:5px;
}
.sc-bnr__link{ font-size:13.5px; color:#fff; text-decoration:underline; font-weight:700; }
.sc-bnr__shot{
  position:absolute; right:-28px; top:26px; width:46%; max-width:560px; border-radius:8px;
  transform:rotate(-2deg); box-shadow:0 16px 40px rgba(0,0,0,.32);
  border:1px solid rgba(255,255,255,.25);
}
/* タブレット〜スマホ：縦積み、画面写真は下へ */
@media (max-width:1023px){
  .sc-bnr{ flex-direction:column; align-items:stretch; min-height:0; }
  .sc-bnr__body{ flex:none; max-width:none; padding:28px 32px 24px; }
  .sc-bnr__shot{
    position:static; width:calc(100% - 32px); max-width:none; margin:4px 0 0 32px; transform:none;
    border-radius:8px 0 0 0; border-right:none; border-bottom:none;
    box-shadow:0 -8px 26px rgba(0,0,0,.26);
  }
}
/* スマホ */
@media (max-width:767px){
  .sc-bnr{ margin:26px 16px; }
  /* ISO運用ページ：親（.p-pageContents__wrap）に左右余白があるため二重にしない */
  .section-box > .sc-bnr{ margin-left:0; margin-right:0; }
  .sc-bnr__body{ padding:24px 22px 22px; }
  .sc-bnr__ttl{ font-size:21px; }
  .sc-bnr__row{ gap:14px; }
  .sc-bnr__btn{ width:100%; justify-content:center; box-sizing:border-box; }
  .sc-bnr__shot{ width:calc(100% - 22px); margin:4px 0 0 22px; }
}