@charset "utf-8";
/*section#top-svex {
	background-image: url(../image/bcg_svex.jpg) !important;
}	*/
/*業務自動化システムのマーク*/
.toptxt {
 font-size: 1.1em;
}
.mark {
 color: #FFFFFF;
 padding: 0 10px 2px;
 margin: 0 6px 0 0;
 border-radius: 2px;
 font-size: 0.9em;
}
.mark-shiwake {
 background-color: #53906D;
}
.mark-kansa {
 background-color: #0B8896;
}
.mark-print {
 background-color: #B6A94B;
}
.mark-public {
 background-color: #915E9A;
}
.mark-sa {
 background-color: #5F67AE;
}
.detail {
 font-size: 1.5em;
}
/*特許マーク*/
.tokkyo {
 background: #FDF495;
 color: #FF4500;
 font-size: 0.8em;
 font-weight: bold;
 padding: 0 8px;
 margin: 0 6px;
 border: solid #944D40 1px;
 border-radius: 10px;
}
/*あとで、cssに移動する*/
/*SERVER EXの「AI特集」ボタン*/
.ai-sp {
 background: #ffffff;
 color: #0066cc;
 text-align: center;
 border: solid 1px #0066cc;
 border-radius: 50px;
 position: relative;
 margin-left: 10px;
 padding: 4px 30px 6px 0;
 width: 50%;
 word-break: keep-all;
 overflow-wrap: anywhere;
 box-sizing: border-box;
 font-size: 1em;
 font-weight: 700;
}
.ai-sp::before {
 background: #fff;
 width: 9px;
 height: 10px;
 position: absolute;
 content: "";
 top: 50%;
 transform: translateY(-50%);
 right: 13px;
 clip-path: polygon(0 0, 100% 50%, 0 100%);
 z-index: 1;
}
.ai-sp::after {
 background: #0066cc;
 width: 20px;
 height: 20px;
 position: absolute;
 content: "";
 top: 50%;
 right: 9px;
 transform: translateY(-50%);
 border-radius: 50px;
}
#dir_top {
 main {
  background-position: top;
  background-size: cover;
  background-color: rgba(255, 255, 255, .3);
  background-image: url("../image/bcg_lib3.jpg");
  background-blend-mode: overlay;
  section#top {
   background: initial;
  }
 }
}
@media (max-width: 768px) {
 #dir_top {
  main {
   background-image: none;
   section#top {
    background-image: url("../image/bcg_lib3.jpg");
    background-size: contain;
   }
  }
 }
 .ai-sp {
  width: 70%;
  font-size: .9em;
  margin: 0 auto;
 }
}
.check-list2 li {
 display: flex;
 align-items: flex-start;
 gap: 6px;
 line-height: 1.6;
}
.check-list2 li::before {
 content: "・";
 color: #555;
 font-weight: bold;
 flex-shrink: 0;
}
/*サポート*/
.container {
 display: flex;
 /* align-items: center;*/
 padding: 30px 0px;
}
.left-content {
 flex: 1;
}
.check-list {
 list-style: none;
 display: flex;
 flex-direction: column;
 gap: 10px;
}
.check-list li {
 display: flex;
 align-items: flex-start;
 gap: 6px;
 line-height: 1.6;
}
.check-list li::before {
 content: "✓";
 color: #333;
 font-weight: bold;
 flex-shrink: 0;
}
.right-image {
 width: 600px;
 flex-shrink: 0;
}
.image-placeholder {
 width: 100%;
 /*height: 300px;*/
 display: flex;
 align-items: center;
 justify-content: center;
}

article:has(h5) article.grid-container {
align-items: flex-start !important;
}

#contents article.grid-container.supp01 {
 grid-template-columns: 1fr 40%;
 max-width: 1000px;
 align-items: flex-start;
 img {
  max-width: 500px;
  margin: 0 auto;
 }

@media (max-width: 768px) {
  #contents article.grid-container.supp01 {
  grid-template-columns: 1fr;
 } 
}



main {
 & #contents {
  & article {
   &.grid-container {
    align-items: initial;
    padding: 1em;
   }
  }
 }
}
/* ── 768px以下：縦並びに変更 ── */
@media (max-width: 768px) {
 .container {
  width: 100%;
  flex-direction: column; /* 縦並び */
  align-items: stretch;
  padding: 20px 16px;
  gap: 24px;
 }
 .right-image {
  width: 100%; /* 横幅いっぱいに広げる */
 }
	#kikan .mark {
    display: block;
    width: fit-content;
}
}
@media (min-width: 769px) {
 main {
  & #contents {
   & article {
    &.grid-container {
     .text-content > h3:has(> img) {
      padding: 0 2em;
     }
    }
   }
  }
 }
}