/* ==========================================================================
   B-REPORT SCOPE (B-Reportコンテンツ部分のみに適用)
   ========================================================================== */
html{scroll-behavior:smooth}
.brt-root{font-family:'Noto Sans JP',sans-serif;color:#333;line-height:1.8;overflow-x:hidden;font-size:clamp(12px, 10.34px + 0.44vw, 16px)}
.brt-root *,.brt-root *::before,.brt-root *::after{box-sizing:border-box;margin:0;padding:0}
.brt-root img{max-width:100%;height:auto;display:block;border:0}
.brt-root a{color:inherit;text-decoration:none;transition:color .3s}
.brt-root ul,.brt-root ol{list-style:none}
.brt-root button{border:none;background:none;cursor:pointer;font-family:inherit;font-size:inherit}
.brt-root :focus-visible{outline:2px solid #003C8F;outline-offset:2px;border-radius:4px}

/* ==========================================================================
   UTILITY / SHARED
   ========================================================================== */
.l-container{max-width:100%;margin:0 auto;padding:0 24px}
.l-section{padding:100px 0}
.u-center{text-align:center}

/* Section Header */
.c-sec-label{display:inline-block;font-family:'Roboto',sans-serif;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#003C8F;margin-bottom:10px}
.c-sec-label::after{content:'';display:block;width:24px;height:2px;background:#003C8F;margin:8px auto 0}
.c-sec-title{font-size:clamp(20px, 13.37px + 1.77vw, 36px);font-weight:900;line-height:1.4;margin-bottom:14px;color:#111}

/* Scroll Reveal */
.js-reveal{opacity:0;transform:translateY(30px);transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1)}
.js-reveal.is-visible{opacity:1;transform:translateY(0)}

/* ---------- Image Placeholder（モーダル初期表示用） ---------- */
.c-ph{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(135deg,#eaf0f9 0%,#f4f7fc 100%);
  border:2px dashed #bfcfe0;border-radius:12px;color:#6b84a3;
  font-size:12px;text-align:center;padding:24px 16px;position:relative;overflow:hidden;
}
.c-ph::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent,transparent 8px,rgba(255,255,255,.5) 8px,rgba(255,255,255,.5) 16px);
  opacity:.25;pointer-events:none;
}
.c-ph svg{width:36px;height:36px;fill:#9bb3cc;position:relative;z-index:1;flex-shrink:0}
.c-ph__text{position:relative;z-index:1;line-height:1.5;font-weight:500}

/* ==========================================================================
   HERO
   ========================================================================== */
.s-hero{position:relative;aspect-ratio:1376/512;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;overflow:hidden;margin-top:0}
.s-hero__bg{position:absolute;inset:0;z-index:0;overflow:visible}
.s-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;z-index:0}
.s-hero__body{position:relative;z-index:2;text-align:center;padding-top:160px;max-width:820px}
.s-hero__title{font-size:clamp(20px, 11.71px + 2.21vw, 40px);font-weight:900;color:#fff;line-height:1.4;margin-bottom:40px;letter-spacing:.02em;text-shadow: 2px 2px 4px #333;}
.s-hero__trust-logos{display:flex;justify-content:right;gap:8px;background:rgba(255,255,255,.88);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:8px;padding:6px 12px;position:absolute; top:16px; right:16px; z-index:3}
.s-hero__trust-logos img{display:block;height:auto}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.s-about{background:#fff}
.s-about__text p{margin-bottom:14px;line-height:2;font-size:clamp(12px, 10.34px + 0.44vw, 16px)}
.s-about__text strong{color:#003C8F}
/* ── ISMS 認証ロゴエリア ── */
.s-about__isms{margin-top: 48px;}
.s-about__isms-logos{display: flex;justify-content: center;align-items: center;gap: 32px;}
.s-about__isms-logos img{height: auto;display: block;}

/* === s-about レイアウト修正 === */
.s-about__grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start;margin-top:44px;}
.s-about__text,.s-about__visual{min-width:0;}
.s-about__visual{display:flex;flex-direction:column;align-items:center;gap:24px;}
.s-about__visual > img{width:100%;max-width:100%;height:auto;display:block;}
.s-about__isms-inner{width:100%;box-sizing:border-box;}


/* ==========================================================================
   SECURITY (お客様へのお願いブロックのみ)
   ========================================================================== */
.s-security__block{background:#f7f9fc;border:1px solid #e2e8f0;border-radius:16px;padding:36px 32px}
.s-security__block--caution{background:#fffbf5;border-color:#f5deb3}
.s-security__block-title{font-size:(16px, 12.69px + 0.88vw, 24px);font-weight:700;color:#1a1a2e;margin:0 0 16px}
.s-security__block-lead{font-size:clamp(12px, 10.34px + 0.44vw, 16px);line-height:1.7;color:#555;margin:0 0 20px}
.s-security__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:18px}
.s-security__list li{position:relative;padding-left:24px;font-size:clamp(12px, 10.34px + 0.44vw, 16px);line-height:1.7;color:#334155}
.s-security__list li::before{content:"";position:absolute;left:0;top:8px;width:14px;height:14px;border-radius:50%;background:#1e6dbf}
.s-security__list--caution li::before{background:#e67e22}
.s-security__list li strong{display:block;font-size:clamp(12px, 10.34px + 0.44vw, 16px);color:#1a1a2e;margin-bottom:2px}
.s-security__list li span{display:block;color:#666;font-size:clamp(12px, 10.34px + 0.44vw, 16px);line-height:1.6}

/* ==========================================================================
   FUNCTION TILES
   ========================================================================== */
.s-functions{background:#fff}
.s-functions__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.c-ftile{background:#f7f9fc;border:1px solid #e8edf5;border-radius:14px;padding:30px 18px;text-align:center;cursor:pointer;transition:box-shadow .2s,transform .2s}
.c-ftile:hover{box-shadow:0 6px 24px rgba(0,60,143,.13);transform:translateY(-3px)}
.c-ftile__icon{width:52px;height:52px;margin:0 auto 14px;background:#003C8F;border-radius:14px;display:flex;align-items:center;justify-content:center}
.c-ftile__icon svg{width:26px;height:26px;fill:#fff}
.c-ftile__name{font-size:clamp(12px, 9.51px + 0.66vw, 18px);font-weight:700;color:#222;margin-bottom:5px}
.c-ftile__desc{font-size:clamp(10px, 7.51px + 0.66vw, 16px);color:#888;line-height:1.6}

/* ==========================================================================
   MODAL (Function tile)
   ========================================================================== */
.c-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
.c-modal.is-open{opacity:1;pointer-events:auto}
.c-modal__bg{position:absolute;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.c-modal__body{position:relative;background:#fff;border-radius:16px;max-width:760px;width:92%;max-height:88vh;overflow-y:auto;padding:36px;transform:scale(.93);transition:transform .3s}
.c-modal.is-open .c-modal__body{transform:scale(1)}
.c-modal__close{position:absolute;top:12px;right:12px;width:36px;height:36px;background:#f0f0f0;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .3s}
.c-modal__close:hover{background:#ddd}
.c-modal__close svg{width:15px;height:15px;fill:#555}
.c-modal__preview{border-radius:10px;overflow:hidden;margin-bottom:22px;border:1px solid #e8edf5}
.c-modal__preview .c-ph{aspect-ratio:4/3}
.c-modal__title{font-size:clamp(12px, 9.51px + 0.66vw, 18px);font-weight:700;color:#111;margin-bottom:6px}
.c-modal__desc{font-size:clamp(10px, 7.51px + 0.66vw, 16px);color:#555;line-height:1.8;margin-bottom:18px}

/* ==========================================================================
   課題・事例セクション（ジグザグレイアウト）
   ========================================================================== */
.s-pain-solution{background:#f7f9fc;padding:40px 0 80px}

.pain__title{background:#E4F0FE;width:100%;display:inline-block;flex-direction:column;align-items:center;gap:6px;color:#003C8F;font-size:clamp(16px, 12.69px + 0.88vw, 24px);letter-spacing:.15em;text-align:center;z-index:2;}
.pain__title-sub{font-size:clamp(10px, 8.34px + 0.44vw, 14px);}
.pain__text{font-size:clamp(10px, 8.34px + 0.44vw, 14px);}

/* ── 事例セクション見出し「B-Reportがあれば…」 ── */
.s-pain-solution > .l-container > .u-center .c-ps-card__title{
  font-size:clamp(24px, 19.03px + 1.33vw, 36px);font-weight:900;line-height:1.4;
  color:#003C8F;margin-bottom:0;
}
.s-pain-solution__grid{display:grid;grid-template-columns:1fr;gap:0;margin-top:44px}

/* ── ジグザグレイアウト（各事例1行＝画像+テキスト横並び） ── */
.c-ps-card,
.c-ps-card--zigzag{display:grid;grid-template-columns:1fr 1fr;gap:0;background:#fff;border-radius:16px;overflow:hidden;margin-bottom:28px;box-shadow:0 2px 16px rgba(0,60,143,.06);transition:transform .3s,box-shadow .3s}
/* 偶数行（reverse）: 画像を左、テキストを右 */
.c-ps-card--reverse{direction:rtl}
.c-ps-card--reverse>*{direction:ltr}
/* テキスト列 */
.c-ps-card__text-col{padding:32px 28px;background:#f5f9ff;display:flex;flex-direction:column;justify-content:top}
/* 画像列 */
.c-ps-card__img-col{background:#f5f9ff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.c-ps-card__img-col .c-ps-card__img{width:100%;height:100%}
.c-ps-card__img-col .c-ps-card__img img{width:100%;height:100%;object-fit:cover}

/* タグ・説明 */
.c-ps-card__tag{font-size:clamp(16px, 12.69px + 0.88vw, 24px);font-weight:500;display:inline-block;padding:4px 16px;border-radius:50px;letter-spacing:.06em;margin-bottom:12px}
.c-ps-card__tag--solution{background:#E4F0FE;color:#003C8F}
.c-ps-card__desc{font-size:clamp(12px, 10.34px + 0.44vw, 16px);color:#555;line-height:1.85}
.c-ps-card__desc strong{color:#222}

/* ==========================================================================
   RESPONSIVE ①: 横幅フィット（コンテナ幅超過防止）
   ========================================================================== */
@media(max-width:1168px){
  .l-container{max-width:100%}
}

/* ==========================================================================
   RESPONSIVE ②: TABLET 横画面 — PCライク
   ========================================================================== */
@media(max-width:1259px) and (orientation:landscape){
  .l-container{max-width:100%;padding:0 30px}
  .s-about__grid{grid-template-columns:1fr 1fr;gap:36px}
  .s-functions__grid{grid-template-columns:repeat(3,1fr)}
  .c-ps-card,
  .c-ps-card--zigzag{grid-template-columns:1fr 1fr}
  .c-ps-card__img-col .c-ps-card__img img{height:auto;object-fit:contain}
  .c-modal__body{width:95%}
}

/* ==========================================================================
   RESPONSIVE ③: TABLET 縦画面 — スマホライク
   ========================================================================== */
@media(max-width:1259px) and (orientation:portrait){
  .l-container{max-width:100%;padding:0 20px}
  .s-hero{aspect-ratio:1376/512}
  .s-hero__body{padding-top:100px}
  .s-hero__trust-logos{padding:4px 8px;gap:6px;top:10px;right:10px}
  .s-hero__trust-logos img[width="52"]{width:40px;height:auto}
  .s-hero__trust-logos img[width="44"]{width:34px;height:auto}
  .pain__scroll{width:100%;height:auto;font-size:clamp(10px, 7.51px + 0.66vw, 16px)}
  .l-section{padding:72px 0}
  .s-pain-solution{padding:32px 0 72px}
  /* About: 1カラム化 */
  .s-about__grid{grid-template-columns:1fr;gap:32px}
  .s-about__isms-inner{flex-direction:column;text-align:center;padding:24px 20px;gap:24px}
  .s-about__isms-logos{justify-content:center}
  /* Functions */
  .s-functions__grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .c-ftile{padding:24px 14px}
  /* Security お願い */
  .s-security__block{padding:28px 24px}
  /* Pain/Solution: 1カラム化 */
  .c-ps-card,
  .c-ps-card--zigzag{grid-template-columns:1fr}
  .c-ps-card--reverse{direction:ltr}
  .c-ps-card__text-col{padding:28px 24px}
  .c-ps-card__img-col .c-ps-card__img img{height:auto;object-fit:contain}
  .c-modal__body{padding:28px;width:95%}
}

/* ==========================================================================
   RESPONSIVE ④: SMARTPHONE (<=767px)
   ========================================================================== */
@media(max-width:767px){
  .l-container{padding:0 15px}
  .s-hero__trust-logos{padding:4px 8px;gap:6px;top:10px;right:10px}
  .s-hero__trust-logos img[width="52"]{width:36px;height:auto}
  .s-hero__trust-logos img[width="44"]{width:30px;height:auto}
  .s-hero__title{font-size:clamp(16px, 14.34px + 0.44vw, 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .s-hero{aspect-ratio:1376/512}
  .s-hero__body{padding-top:60px}
  .l-section{padding:60px 0}
  .s-pain-solution{padding:24px 0 60px}
  /* About */
  .s-about__grid{grid-template-columns:1fr;gap:32px}
  .s-about__isms-inner{flex-direction:column;text-align:center;padding:24px 20px;gap:24px}
  .s-about__isms-logos{justify-content:center}
  /* Functions */
  .s-functions__grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .c-ftile{padding:22px 12px}
  /* Modal */
  .c-modal__body{padding:22px;width:95%}
  /* Pain/Solution */
  .c-ps-card,
  .c-ps-card--zigzag{grid-template-columns:1fr}
  .c-ps-card--reverse{direction:ltr}
  .c-ps-card__text-col{padding:24px 20px}
  .c-ps-card__img-col .c-ps-card__img img{height:auto;object-fit:contain}
  /* Security お願い */
  .s-security__block{padding:28px 20px}
}

/* ==========================================================================
   AI生成画像に関する注記
   ========================================================================== */
.s-ai-notice{background:#f8f9fa;border-top:1px solid #e0e0e0;padding:32px 0}
.s-ai-notice p{margin:0;font-size:clamp(10px, 7.51px + 0.66vw, 16px);line-height:1.8;color:#666}


/* ==========================================================================
   PARENT BREAKOUT: 親ページ(Liferay等)の固定幅を突き抜けて全画面幅にする
   ========================================================================== */
.brt-root{
  /* ブレイクアウト廃止: 親コンテナ幅にそのまま追従させる（左から消える不具合の対策） */
  width:100%;
  max-width:100%;
  position:relative;
  left:auto;
  right:auto;
  margin-left:0;
  margin-right:0;
  overflow-x:hidden;
}