:root{
  --intro-card-h: 386px;
  --intro-media-w: 582px;
  --intro-img-ratio: 582 / 386;
  --intro-text-max: 520px;
  --intro-text-w: 696px;
}
.introSectionPage .introOnlySection{ padding: 0; }
.introSectionPage .introOnlySection .container{
  width:min(100vw, calc(var(--intro-media-w) + var(--intro-text-w)));
  max-width:none;
  margin-inline:auto;
  padding:0;
}
.introSectionPage .introRow{
  display:grid;
  gap:0;
  margin:0;
  align-items:stretch;
  overflow:clip;
  width:min(100vw, calc(var(--intro-media-w) + var(--intro-text-w)));
}
.introSectionPage .introRow--first{ grid-template-columns: minmax(0,var(--intro-media-w)) minmax(0,var(--intro-text-w)); }
.introSectionPage .introRow--second{ grid-template-columns: minmax(0,var(--intro-text-w)) minmax(0,var(--intro-media-w)); }
.introSectionPage .introMediaCol,
.introSectionPage .introTextCol{ min-width:0; }

.introSectionPage .introMediaCol{
  display:grid;
  grid-template-rows: repeat(2, var(--intro-card-h));
}
.introSectionPage .introTextCol{
  display:grid;
  grid-template-rows: repeat(2, var(--intro-card-h));
  background:#f5f5f5;
}

.introSectionPage .introRow--first .introMediaCol,
.introSectionPage .introRow--second .introMediaCol{
  background:transparent;
}

.introMediaItem{
  width:100%;
  min-height:0;
  overflow:hidden;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
}
.introMediaItem img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center;
}

.introTextCard{
  display:flex;
  align-items:center;
  background:transparent;
  padding:72px 66px;
  box-sizing:border-box;
}
.introTextCard--white{ background:#ffffff; }
.introTextInner{
  width:100%;
  max-width:none;
}
.introTextCard .gdH2{
  margin:0 0 24px;
  font-size:30px;
  line-height:1.4;
}
.introTextCard .gdP{
  font-size:20px;
  line-height:1.7;
}

/* テンプレート利用：PDF出力セクションの商標注記 */
.introTextCard--pdfPrint .gdP{
  margin-bottom:0;
}
.introTextCard--pdfPrint .introNote{
  margin:12px 0 0;
  color:#666666;
  font-size:13px;
  line-height:1.6;
  font-weight:400;
}

/* 見出し末尾の外部リンク記号：文字色は見出しのまま、↗ だけ青にする */
.introTextCard .gdH2Link{
  color:inherit;
  text-decoration:none;
}

.introTextCard .gdExternalMark{
  color:#0098d8;
}

@media (max-width:1278px){
  :root{
    --intro-media-w: min(45.54vw, 582px);
    --intro-text-w: min(54.46vw, 696px);
    --intro-card-h: calc(var(--intro-media-w) * 386 / 582);
  }
  .introTextCard{ padding:64px 56px; }
  .introTextCard .gdH2{ font-size: clamp(28px, 2.35vw, 30px); }
  .introTextCard .gdP{ font-size: clamp(18px, 1.56vw, 20px); }
}

@media (max-width:980px){
  :root{ --intro-card-h: 340px; --intro-media-w: 460px; --intro-text-w: calc(100vw - 460px); }
  .introSectionPage .introOnlySection .container,
  .introSectionPage .introRow{ width:100%; }
  .introTextCard{ padding:48px 40px; }
  .introTextCard .gdH2{ font-size:28px; }
  .introTextCard .gdP{ font-size:18px; }
}

@media (max-width:820px){
  :root{ --intro-card-h: auto; }
  .introSectionPage .introOnlySection .container{ width:calc(100% - 40px); padding:0; }
  .introSectionPage .hero{ display:block; }
  .introSectionPage .hero--static .heroTrack--static{ display:block; height:auto; overflow:visible; }
  .introSectionPage .hero--static .heroTrack--static > .heroSlide{ height:auto; }

  .introSectionPage .introRow{
    grid-template-columns:1fr;
  }
  .introSectionPage .introMediaCol,
  .introSectionPage .introTextCol{
    display:contents;
    margin:0;
    padding:0;
    background:transparent;
  }
  .introSectionPage .introMediaItem,
  .introSectionPage .introTextCard{ order:initial; }
  .introSectionPage .introMediaItem:nth-child(1){ order:1; }
  .introSectionPage .introTextCol .introTextCard:nth-child(1){ order:2; }
  .introSectionPage .introMediaItem:nth-child(2){ order:3; }
  .introSectionPage .introTextCol .introTextCard:nth-child(2){ order:4; }

  .introMediaItem img{
    width:100%;
    height:auto;
    aspect-ratio: 335 / 222;
    object-fit:contain;
    object-position:center;
    background:#ffffff;
    border:1px solid #b2b2b2;
    box-sizing:border-box;
  }
  .introRow--first .introMediaItem:first-child{
    margin-top:20px;
  }
  .introTextCard{
    padding:20px 20px 40px;
  }
  .introTextCard .gdH2{
    margin-bottom:16px;
    font-size:24px;
    line-height:1.35;
  }
  .introTextCard .gdP{
    font-size:15px;
    line-height:1.6;
  }
  .introTextCard--pdfPrint .introNote{
    margin-top:12px;
    font-size:12px;
    line-height:1.6;
  }
  .introPcBreak{
    display:none;
  }
}


/* 1件だけの行は、画像列・文字列ともに1段構成にする */
.introSectionPage .introRow--single .introMediaCol,
.introSectionPage .introRow--single .introTextCol{
  grid-template-rows: var(--intro-card-h);
}

/* 以前の last-of-type + second 前提では、1件だけの最終行に効かないため不使用 */

/* デモテンプレート動画：静止画と同じ枠に、動画を変形させずに表示する */
.introMediaItem video,
.introDemoVideo{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center;
  background:#ffffff;
}

@media (max-width:820px){
  .introMediaItem video,
  .introDemoVideo{
    width:100%;
    height:auto;
    aspect-ratio:3190 / 2040;
    object-fit:contain;
    object-position:center;
    background:#ffffff;
  }
}


/* Edition PriBiz解説動画：縦長に近い動画を、既存のイントロ枠内で変形させずに表示する */
.introAssetManagementVideo{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center;
  background:#ffffff;
}

@media (max-width:820px){
  .introMediaItem .introAssetManagementVideo{
    width:100%;
    height:auto;
    aspect-ratio:736 / 768;
    object-fit:contain;
    object-position:center;
    background:#ffffff;
  }
}


/* Edition PriBiz リリースノートへの導線：静かな見た目のまま、行全体もクリック可能にする */
.introReleaseArea{
  cursor:pointer;
}
.introReleaseTextLink,
.introReleaseTextLink:visited,
.introReleaseTextLink:hover,
.introReleaseTextLink:focus{
  color:inherit;
  text-decoration:none;
}
.introReleaseTextLink{
  user-select:text;
}
.introReleaseImageLink{
  display:block;
  width:100%;
  height:100%;
}
.introReleaseImageLink img{
  user-select:none;
}
.introReleaseTextLink:focus-visible{
  outline:3px solid rgba(0,152,216,.45);
  outline-offset:4px;
}

/* イントロセクション内の外部導線：静かな見た目のまま、説明文と領域全体もクリック可能にする */
.introLinkArea{
  cursor:pointer;
}
.introAreaTextLink,
.introAreaTextLink:visited,
.introAreaTextLink:hover,
.introAreaTextLink:focus{
  color:inherit;
  text-decoration:none;
}
.introAreaTextLink{
  user-select:text;
}
.introAreaImageLink{
  display:block;
  width:100%;
  height:100%;
}
.introAreaImageLink img{
  user-select:none;
}
.introAreaTextLink:focus-visible,
.introAreaImageLink:focus-visible{
  outline:3px solid rgba(0,152,216,.45);
  outline-offset:4px;
}

/* =================================================
   Static product hero: mobile / tablet visibility fix
   - The shared slider CSS absolutely positions hero slides.
   - On narrow screens the static hero track switches to auto height,
     so the slide must return to normal document flow.
   ================================================= */
@media (max-width: 820px){
  .introSectionPage .hero--static .heroTrack--static{
    position:relative;
    width:100%;
    height:auto;
    overflow:visible;
  }

  .introSectionPage .hero--static .heroTrack--static > .heroSlide{
    position:relative;
    inset:auto;
    width:100%;
    height:auto;
    min-height:0;
    visibility:visible;
    pointer-events:auto;
    transform:none;
    will-change:auto;
    backface-visibility:visible;
  }
}

/* 対象3ページ：PC／タブレットのヒーロー文字領域を左端から66pxに統一 */
@media (min-width: 821px){
  .introSectionPage .hero--left66 .heroLeft{
    padding-left:66px;
  }
}

/* イントロ項目間の区切り線：画像側から文章側まで横断して表示 */
@media (min-width: 821px){
  .introSectionPage .introRow{
    position:relative;
  }

  /* 同じintroRow内の1件目と2件目の間 */
  .introSectionPage .introRow:not(.introRow--single)::after{
    content:"";
    position:absolute;
    z-index:5;
    top:var(--intro-card-h);
    right:0;
    left:0;
    height:1px;
    background:#e6e6e6;
    pointer-events:none;
  }

  /* 前後するintroRowの間 */
  .introSectionPage .introRow + .introRow::before{
    content:"";
    position:absolute;
    z-index:5;
    top:0;
    right:0;
    left:0;
    height:1px;
    background:#e6e6e6;
    pointer-events:none;
  }
}