@charset "utf-8";

/* CSS Document */

/* 2025 */

/* **************************************************
Name: sbo_theme.css
Description: Setting of sbo site module

Create: 2014.02.19
Update: 2025.07.17

Copyright 2025 Hitachi Systems, Ltd.
***************************************************** */

/* ------- from sbo_2022.css ------- */

/* content===========================================

[c2] 見出し
[c3] 文章
[c5] 画像
[c11] リンクリスト
[c14] データテーブル
[c16] 枠囲み
[c20] ページ内リンク
[s2] サイトアイデンティティ
[-] フッタナビ
[-] トップページ
[-] サイトマップ
[-] 共通クラス

===================================================== */
:root {
  --color-blue: #1e60bb;
  --color-navy: #002a86;
  --color-sax: #03afeb;
  --color-lblue: #c2effb;
  --color-lgray: #ebebeb;
}

body {
  text-align: left;
}

#Contents {
  padding-bottom: 0;
}

/* [xx] 見出し
=========================================================================================== */

div.LV1CopySet {
  margin: 0 0 20px;
}

div.LV1CopySet h2 {
  padding: 0;
  margin: 0;
}

div.LV1CopySet p {
  padding: 10px 15px;
  margin: 0;
  font-size: 90%;
  font-weight: normal;
  background-color: #eee;
  border-color: #ccc;
  border-style: solid;
  border-width: 0 1px 1px;
}

div.Interview h3,
h3.Interview {
  padding: 0 0 6px 12px;
  margin: 0 0 10px;
  font-size: 90%;
  font-weight: bold;
  color: #333;
  background: url("/-/media/image/case/bg_title2_case_interview.gif") no-repeat
    0 2px;
  border-bottom: none;
  border-left: none;
}

/* [xx] お客さま写真、YouTubeボタン
=========================================================================================== */
div.CaseTitle {
  position: relative;
  margin: 0 0 15px;
}

/* キャッチ */
div.CaseTitle .catch {
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: 16px 20px;
  background: #000;
  background-color: rgb(0 0 0 / 0.8);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); /* For IE 5-7 */
  filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* For IE 8 */
}

div.CaseTitle .catch p {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5em;
  color: #fff;
}

div.CaseTitle .catch .text {
  float: left;
  width: 100%;
  margin-right: -190px;
}

div.CaseTitle .catch .text p {
  margin-right: 190px;
}

div.CaseTitle .catch .BtnMovie {
  float: right;
  width: 181px;
}

@media screen and (width <= 900px) {
  .JS div.CaseTitle .catch {
    position: relative;
  }

  div.CaseTitle .catch .text {
    float: none;
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }

  div.CaseTitle .catch .text p {
    margin-right: 0;
  }

  div.CaseTitle .catch .BtnMovie {
    float: none;
  }
}

/* [xx] お客さまの声
=========================================================================================== */
dl.CustomerVoice {
  margin: 0 0 15px;
  font-size: 90%;
}

dl.CustomerVoice dt {
  float: left;
  clear: left;
  padding: 0 3px 0 0;
}

dl.CustomerVoice dd {
  float: left;
  clear: both;
  margin: -37px 0 5px 147px;
  line-height: 1.5;
}
dl.CustomerVoice dd strong {
  line-height: 1.5;
}

/* Win IE7 & IE6 lower */
* html body dl.CustomerVoice dd {
  float: none;
  clear: none;
  display: inline-block;
  margin: 0 0 5px;
}
*:first-child + html dl.CustomerVoice dd {
  float: none;
  clear: none;
  display: inline-block;
  margin: 0 0 5px;
}

/* */

@media screen and (width <= 579px) {
  dl.CustomerVoice dt,
  dl.CustomerVoice dd {
    float: none;
    margin: 0 0 10px;
  }
}

/* [xx] お客さまの概要
=========================================================================================== */
div.CustomerProfile {
  padding: 0 20px 15px;
  margin: 0 0 15px;
  zoom: 1;
  border: 1px solid #ccc;
}

div.CustomerProfile h2 {
  padding: 6px 7px 5px;
  margin: 1px -19px 15px;
  font-size: 90%;
  font-weight: bold;
  color: #333;
  background-color: #ffe9ca;
  background-image: none;
  border-color: #ec7d3a;
  border-style: solid;
  border-width: 4px 0 0;
}

div.CustomerProfile dl.CustomerSummay {
  width: 100%;
  margin: 0 0 15px;
  font-size: 83%;
}

div.CustomerProfile dl.CustomerSummay dt {
  float: left;
  margin: 0 0 5px;
}
div.CustomerProfile dl.CustomerSummay dd {
  margin: 0 0 5px 6em;
} /* dtはmax5文字を想定 */

/* ロゴ配置 */
div.CustomerProfile p.LogoStyle {
  float: right;
  margin: 0 0 10px;
}

@media screen and (width <= 579px) {
  .JS div.CustomerProfile p.LogoStyle {
    float: none;
    text-align: center;
  }
}

/* [xx] 担当より一言
=========================================================================================== */
div.staff {
  padding: 0 20px 15px;
  margin: 0 0 15px;
  zoom: 1;
  border: 1px solid #ccc;
}

div.staff h2 {
  padding: 6px 7px 5px;
  margin: 1px -19px 15px;
  font-size: 90%;
  font-weight: bold;
  color: #333;
  background-color: #eee;
  background-image: none;
  border-color: #333;
  border-style: solid;
  border-width: 4px 0 0;
}

/* サービスメニュー Box */
.Service .ColumnSet {
  margin-bottom: 15px;
}

.Service .Box {
  padding: 20px;
}

.Service .Box:hover {
  opacity: 0.8;
}

.Service .Box a {
  display: block;
  color: #333;
  text-decoration: none;
  background-image: none;
}

.Service .Box a:hover *,
.Service .Box a:link,
.Service .Box a:visited,
.Service .award a:hover *,
.Service .award a:link,
.Service .award a:visited {
  text-decoration: none;
}

.Service .Box.yellow {
  background-color: var(--color-lblue);
  background-image: url("/-/media/ind/sbo/image/b-triangle_arrow.png");
  background-repeat: no-repeat;
  background-position: 100% 100%;
}

.Service .Box.yellow p span {
  font-weight: bold;
  color: #333;
  background: none;
  background-color: var(--color-lblue);
}

.Service .Box.yellow p {
  margin-right: 25px;
  margin-bottom: 0;
  color: #333;
  background-color: var(--color-lblue);
}

.Service .award {
  padding: 35px 20px 20px;
  background-color: #1262a1;
  background-image: url("/-/media/ind/sbo/service/image/img_award.png");
  background-repeat: no-repeat;
  background-position: right;
}

.Service .award:hover {
  opacity: 0.8;
}

.Service .award h2 {
  padding-bottom: 0;
  font-size: 150%;
  font-weight: bold;
  color: #fff;
  background: none;
}

.Service .award p {
  margin-right: 230px;
  line-height: 1.2;
  color: #fff;
}

.Service .ColumnSet.inqLink a:hover {
  opacity: 0.8;
}

.Service .case {
  position: relative;
  width: 60%;
  padding: 10px 25px;
  margin: 0 auto;
  color: #4d4d4d;
  border-radius: 5px;
}

.Service .case.Problem {
  background-color: #f2f2f2;
}

.Service .case.Solution {
  margin-top: 35px;
  margin-bottom: 30px;
  background-color: #fafaee;
  border: 2px solid #009ac6;
}

.Service .case.Problem::after {
  position: absolute;
  bottom: -25px;
  left: calc((100% - 15px) / 2);
  width: 0;
  height: 0;
  content: "";
  border-top: 15px solid #009ac6;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}

.Service .case > div {
  margin-bottom: 5px;
  font-size: 110%;
  font-weight: bold;
  text-align: center;
}

.Service .case.Solution > div {
  color: #009ac6;
}

.Service .case ul.ListStyle1 li {
  position: relative;
  background: none;
}

.Service .case ul.ListStyle1 li::after {
  position: absolute;
  top: 0.4em;
  left: 0;
  display: block;
  width: 8px;
  height: 8px;
  content: "";
  background-color: #666;
  border-radius: 100%;
}

.Service .case.Problem ul.ListStyle1 li::after {
  background-color: #666;
}

.Service .case.Solution ul.ListStyle1 li::after {
  background-color: #009ac6;
}

.Grid3 .BiggerList {
  list-style-type: none;
}

.Grid3 .BiggerList li {
  position: relative;
  min-height: 1em;
  padding: 1em 0 1em 2.75em;
  margin: 0 0 1em;
  font-size: 1.05em;
  font-weight: bold;
  line-height: 1.3;
  color: #555;
  background: transparent url("/-/media/ind/sbo/service/image/icon_list.png")
    no-repeat left 35%;
}

.Service .Column1andHalf p.TextStyle1 {
  padding-left: 10px;
}

.Section.sec_fv {
  width: 100%;
  padding: 0;
  margin: 0 0 1em;
  background: url("/-/media/ind/sbo/image/img_fv_top.jpg") no-repeat center /
    cover;
}

.Section.sec_fv .Inner {
  display: flex;
  align-items: center;
  max-width: 965px;
  padding: 2em 0;
  margin: 0 auto;
}

.Section.sec_fv .Inner h1 {
  font-size: 2em;
  font-weight: bold;
  color: #fff;
}

.Section.LocalNavi .LocalNaviContainer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em;
  align-items: stretch;
}

.Section.LocalNavi .LocalNaviContainer ul li {
  display: flex;
  align-items: stretch;
  width: calc((100% / 3) - 1em);
  color: #fff;
}

.Section.LocalNavi .LocalNaviContainer ul li a:link,
.Section.LocalNavi .LocalNaviContainer ul li a:visited {
  width: 100%;
  padding: 1em;
  color: #000;
  background: linear-gradient(
    136deg,
    var(--color-lgray) 10%,
    var(--color-lblue) 94%,
    var(--color-blue) 10%
  );
  opacity: 1;
  transition: opacity 0.08s;
}

.Section.LocalNavi .LocalNaviContainer ul li a:hover,
.Section.LocalNavi .LocalNaviContainer ul li a:active,
.Section.LocalNavi .LocalNaviContainer ul li a:focus {
  opacity: 0.9;
}

.Grid4.Why .ImgOnlyStyle {
  text-align: center;
}

.Grid4 .hasOverImage.Effects {
  transition: 0.5s ease-in;
  animation: hasOverOut ease-in 2s 1 normal;
}

/*  */
.Grid4 .hasOverImage.Effects:hover {
  animation: hasOver ease-out 1.5s 1 normal;
  animation: Zoomer ease-in 0.2s 1 normal;
}

/****************  */

/* hasOverImage Effects */

/* END */

/****************  */

/* ================================================== */

/*
/* sap.css mod
/*
/*================================================== */

.Grid4 table th,
table td {
  padding: 15px 10px;
  font-size: 83%;
}

.Grid4 .Func table.TableStyleGen02 th {
  width: 20%;
  padding: 0;
}

.Grid4 table.TableStyleGen02 td {
  padding: 15px;
  background-color: var(--color-lgray);
}

.Grid4 table.TableStyleGen01 th,
.Grid4 table.TableStyleGen02 th {
  width: 24%;
  text-align: center;
  background-color: var(--color-lgray);
}

.Grid4 .Super .ListStyle1 {
  width: 285px;
}

.Grid4 .Super .ListStyle1 + .ImgOnlyStyle::after {
  float: none;
  clear: both;
  display: block;
  content: "";
}

.Grid4 .Super .ListStyle1 li {
  float: left;
  padding: 0 0.5em 0.5em 1em;
  margin: 0 0 1em;
  line-height: 1.4;
  border-bottom: 1px dotted #006b9e;
}

.Grid4 .Super .ListStyle1 li + li + li + li {
  border: none;
}

.Grid4 h3 {
  padding: 16px 8px;
  font-size: 1.1em;
  background: none var(--color-lgray);
  border-bottom: none;
  border-left: 4px solid var(--color-blue);
}

.Grid4.Why table.TableStyleGen02 thead th {
  color: #fff;
  background-color: #0175ad;
}

.Grid4.Why table.TableStyleGen02 tbody th {
  background-color: var(--color-lblue);
}

.Grid4 .SmallList li {
  position: relative;
  min-height: 1em;
  padding: 0.25em 0 0.25em 2em;
  margin: 0 0 1em;
  font-size: 1.05em;
  font-weight: bold;
  line-height: 1.3;
  color: #555;
  background: transparent url("/-/media/ind/sbo/service/image/icon_list.png")
    no-repeat 10px 48% / 20px;
}

.Grid4 .BiggerList {
  list-style-type: none;
}

.Grid4 .BiggerList li {
  position: relative;
  min-height: 1em;
  padding: 1em 0 1em 2.75em;
  margin: 0 0 1em;
  font-size: 1.05em;
  font-weight: bold;
  line-height: 1.3;
  color: #555;
  background: transparent url("/-/media/ind/sbo/service/image/icon_list.png")
    no-repeat left 35%;
}

/* Case */
.CaseTitle p img {
  width: 100%;
}

@media screen and (width <= 994px) {
  .JS .Section.sec_fv .Inner {
    padding: 2em 1em;
  }

  /** サービス **/
  .JS .Grid4 .Super .ListStyle1 {
    width: 100%;
  }

  .JS .Grid4 .Column1andHalf {
    padding-left: 10px;
  }

  /** FAQ **/
  .JS .Grid4 div.FAQSetStyle div.ImgSet {
    width: calc(100% - 30px);
  }

  .JS .Grid4 div.FAQSetStyle div.ImgSet h3 {
    padding-left: 10px;
  }

  .JS .Grid4 div.FAQSetStyle div.ImgSet p {
    margin-left: 10px;
  }
}

/* [c2] 見出し
=========================================================================================== */

/* ---[c2-1-1] 見出し > レベル1--- */
h2.TitleStyleGen01 {
  padding: 16px 15px 12px 18px;
  margin: 0 0 10px;
  font-weight: bold;
  line-height: 1.35;
  background: url("/-/media/ind/sbo/image/bg_title_marker.gif") repeat-y 0 0
    #f5f4ef;
  border: none;
}

h2.TitleStyleGen01 a {
  display: block;
  line-height: 1.35;
}

/* 解除 */
h2.TitleStyleGen01 span {
  display: inline;
  padding: 0;
  background: none;
}

/* ---[c2-1-1] 見出し > レベル1 > 画像--- */
h2.LinkSet01 {
  position: relative;
}

h2.LinkSet01 a.LinkBtn01 {
  position: absolute;
  top: 16px;
}
h2.LinkSet01 a.LinkBtn01 {
  left: 593px;
}

/* ---[c2-1-3-1] 見出し > レベル1 > 右側にリンク--- */

/* ---[c2-1-3-2] 見出し > レベル1 > RDFファイルへのリンク付き--- */
div.LV1LinkSetGen01 {
  padding: 16px 15px 12px 18px;
  margin: 0 0 10px;
  line-height: 1.35;
  background: url("/-/media/ind/sbo/image/bg_title_marker.gif") repeat-y 0 0
    #f5f4ef;
  border: none;
}

div.LV1LinkSetGen01 div {
  padding: 0;
  font-size: 100%;
  line-height: 1.35;
}

div.LV1LinkSetGen01 div h2 {
  float: left;
  padding: 0;
  margin: 0;
  font-size: 100%;
  font-weight: bold;
  line-height: 1.35;
  background: none;
  border: none;
}
div.LV1LinkSetGen01 div h2 a {
  line-height: 1.35;
}

div.LV1LinkSetGen01 div ul {
  float: right;
  font-size: 83%;
  line-height: 1.35;
}

div.LV1LinkSetGen01 div ul li {
  padding: 2px 17px 2px 0;
  background: url("/-/media/ind/sbo/image/icon_link_right_ontitle.gif")
    no-repeat 100% 0.25em;
}

div.LV1LinkSetGen01 div ul li a {
  line-height: 1.35;
  color: #333;
}
div.LV1LinkSetGen01 div ul li a:link {
  color: #333 !important;
}
div.LV1LinkSetGen01 div ul li a:visited {
  color: #333 !important;
}
div.LV1LinkSetGen01 div ul li a:hover {
  color: #333 !important;
}
div.LV1LinkSetGen01 div ul li a:active {
  color: #333 !important;
}

/* ---[c2-2-1] 見出し > レベル2--- */

/* ---[c2-2-2] 見出し > レベル2 > リンクあり--- */
h3.TitleStyleGen01 {
  padding: 6px 9px;
  margin: 0 0 10px;
  font-size: 90%;
  line-height: 1.35;
  color: #333;
  background: none;
  border-color: #1e60bb;
  border-style: solid;
  border-width: 0 0 2px 6px;
}

h3.TitleStyleGen01 a {
  line-height: 1.35;
}

/* 解除 */
h3.TitleStyleGen01 span {
  display: inline;
  padding: 0;
  background: none;
}

/* ---[c2-3-1] 見出し > レベル3--- */

/* ---[c2-3-2] 見出し > レベル3 > リンクあり--- */
h4.TitleStyleGen01 {
  padding: 0 0 0 14px;
  margin: 0 0 10px;
  font-size: 90%;
  line-height: 1.35;
  background: url("/-/media/ind/sbo/image/icon_title3.gif") no-repeat 0 0.25em;
  border: none;
}

h4 a {
  line-height: 1.35;
}

h4::before {
  content: none;
}

.TitleStyleGen01 a:link {
  color: #06417e;
}
.TitleStyleGen01 a:visited {
  color: #551a8b;
}

.TitleStyleGen01 a:hover,
.TitleStyleGen01 a:active {
  color: #0961bb;
  text-decoration: underline !important;
}

/* ---[cx] 見出し画像の下に破線を入れる場合--- */
h2.Image.DottedBorder-b,
h3.Image.DottedBorder-b,
h4.Image.DottedBorder-b {
  padding: 0 0 5px;
  border-bottom: 1px dotted #000;
}

/* [c3] 文章
=========================================================================================== */
p.RelatedKeyword {
  margin: 0 0 10px;
  font-size: 83%;
  font-weight: bold;
  line-height: 1.35;
  color: #676767;
}

p.RelatedKeyword img {
  margin-right: 4px;
  vertical-align: -0.3em;
}

/* [c11] リンクリスト
=========================================================================================== */

/* ---[c11-1-1] リンクリスト > 文字サイズ90% > 下破線付き--- */
ul.LinkListStyleGen01 {
  margin: 0 0 15px;
  font-size: 90%;
}

ul.LinkListStyleGen01 li {
  padding: 0 0 0 17px;
  margin: 0 0 5px;
  line-height: 1.35;
  zoom: 1;
  background-image: url("/-/media/ind/sbo/image/icon_link_right_b.gif");
  background-repeat: no-repeat;
  background-position: 0 0.1em;
}

ul.LinkListStyleGen01 li ul {
  margin: 5px 0 0;
  font-size: 100%;
  line-height: 1.35;
}
ul.LinkListStyleGen01 li a {
  line-height: 1.35;
}

/* -- 通常アイコン（フラット） -- */
ul.LinkListStyleGen01 li.Link {
  line-height: 1.35;
  zoom: 1;
  background-image: url("/-/media/ind/sbo/image/icon_link_right.gif");
  background-position: 0 0.1em;
}

/* -- 箇条書きアイコン -- */
ul.LinkListStyleGen01 li.List {
  background-image: url("/-/media/ind/sbo/image/icon_list_marker.gif");
}

/* --アイコン右寄せ-- */
ul.LinkListStyleGen01 li.IconRightJustified {
  padding: 0 17px 0 0;
  line-height: 1.35;
  background-position: 100% 50%;
}

ul.LinkListStyleGen01 li.IconRightJustified a {
  display: block;
  line-height: 1.35;
}

/* --区切り線が付く場合-- */
div.Item ul.LinkListStyleGen01 {
  margin: 0 0 10px;
}

/* ---[c11-5-1-1] リンクリスト > サムネール+説明文あり > サムネール60pix > 文字サイズ90%--- */

/* ---[c11-5-1-2] リンクリスト > サムネール+説明文あり > サムネール60pix > 文字サイズ83%--- */

/* ---[c11-5-2-1] リンクリスト > サムネール+説明文あり > サムネール120pix > 文字サイズ90%--- */

/* ---[c11-5-2-2] リンクリスト > サムネール+説明文あり > サムネール120pix > 文字サイズ83%--- */

/* ---[c11-5-3-1] リンクリスト > サムネール+説明文あり > サムネール180pix > 文字サイズ90%--- */

/* ---[c11-5-3-2] リンクリスト > サムネール+説明文あり > サムネール180pix > 文字サイズ83%--- */
div.ImgW50SetStyle p.Img,
div.ImgW60SetStyle p.Img,
div.ImgW70SetStyle p.Img,
div.ImgW80SetStyle p.Img,
div.ImgW90SetStyle p.Img,
div.ImgW100SetStyle p.Img,
div.ImgW110SetStyle p.Img,
div.ImgW120SetStyle p.Img,
div.ImgW128SetStyle p.Img,
div.ImgW130SetStyle p.Img,
div.ImgW133SetStyle p.Img,
div.ImgW140SetStyle p.Img,
div.ImgW150SetStyle p.Img,
div.ImgW160SetStyle p.Img,
div.ImgW170SetStyle p.Img,
div.ImgW180SetStyle p.Img,
div.ImgW190SetStyle p.Img,
div.ImgW200SetStyle p.Img,
div.ImgW210SetStyle p.Img,
div.ImgW220SetStyle p.Img,
div.ImgW230SetStyle p.Img,
div.ImgW240SetStyle p.Img,
div.ImgW250SetStyle p.Img,
div.ImgW260SetStyle p.Img,
div.ImgW270SetStyle p.Img,
div.ImgW280SetStyle p.Img,
div.ImgW290SetStyle p.Img,
div.ImgW300SetStyle p.Img,
div.ImgW310SetStyle p.Img,
div.ImgW320SetStyle p.Img,
div.ImgW330SetStyle p.Img,
div.ImgW340SetStyle p.Img,
div.ImgW350SetStyle p.Img,
div.ImgW360SetStyle p.Img,
div.ImgW370SetStyle p.Img,
div.ImgW380SetStyle p.Img,
div.ImgW390SetStyle p.Img,
div.ImgW400SetStyle p.Img {
  position: relative;
  z-index: 9999;
  font-size: 83%;
  line-height: 1.35;
  letter-spacing: 0;
}

div.ImgW50SetStyle p.Img img,
div.ImgW60SetStyle p.Img img,
div.ImgW70SetStyle p.Img img,
div.ImgW80SetStyle p.Img img,
div.ImgW90SetStyle p.Img img,
div.ImgW100SetStyle p.Img img,
div.ImgW110SetStyle p.Img img,
div.ImgW120SetStyle p.Img img,
div.ImgW128SetStyle p.Img img,
div.ImgW130SetStyle p.Img img,
div.ImgW133SetStyle p.Img img,
div.ImgW140SetStyle p.Img img,
div.ImgW150SetStyle p.Img img,
div.ImgW160SetStyle p.Img img,
div.ImgW170SetStyle p.Img img,
div.ImgW180SetStyle p.Img img,
div.ImgW190SetStyle p.Img img,
div.ImgW200SetStyle p.Img img,
div.ImgW210SetStyle p.Img img,
div.ImgW220SetStyle p.Img img,
div.ImgW230SetStyle p.Img img,
div.ImgW240SetStyle p.Img img,
div.ImgW250SetStyle p.Img img,
div.ImgW260SetStyle p.Img img,
div.ImgW270SetStyle p.Img img,
div.ImgW280SetStyle p.Img img,
div.ImgW290SetStyle p.Img img,
div.ImgW300SetStyle p.Img img,
div.ImgW310SetStyle p.Img img,
div.ImgW320SetStyle p.Img img,
div.ImgW330SetStyle p.Img img,
div.ImgW340SetStyle p.Img img,
div.ImgW350SetStyle p.Img img,
div.ImgW360SetStyle p.Img img,
div.ImgW370SetStyle p.Img img,
div.ImgW380SetStyle p.Img img,
div.ImgW390SetStyle p.Img img,
div.ImgW400SetStyle p.Img img {
  margin-bottom: 5px;
}

/* -- 画像右寄せ -- */
div.ImgW50SetStyle p.Img.RightAdjust,
div.ImgW60SetStyle p.Img.RightAdjust,
div.ImgW70SetStyle p.Img.RightAdjust,
div.ImgW80SetStyle p.Img.RightAdjust,
div.ImgW90SetStyle p.Img.RightAdjust,
div.ImgW100SetStyle p.Img.RightAdjust,
div.ImgW110SetStyle p.Img.RightAdjust,
div.ImgW120SetStyle p.Img.RightAdjust,
div.ImgW128SetStyle p.Img.RightAdjust,
div.ImgW130SetStyle p.Img.RightAdjust,
div.ImgW133SetStyle p.Img.RightAdjust,
div.ImgW140SetStyle p.Img.RightAdjust,
div.ImgW150SetStyle p.Img.RightAdjust,
div.ImgW160SetStyle p.Img.RightAdjust,
div.ImgW170SetStyle p.Img.RightAdjust,
div.ImgW180SetStyle p.Img.RightAdjust,
div.ImgW190SetStyle p.Img.RightAdjust,
div.ImgW200SetStyle p.Img.RightAdjust,
div.ImgW210SetStyle p.Img.RightAdjust,
div.ImgW220SetStyle p.Img.RightAdjust,
div.ImgW230SetStyle p.Img.RightAdjust,
div.ImgW240SetStyle p.Img.RightAdjust,
div.ImgW250SetStyle p.Img.RightAdjust,
div.ImgW260SetStyle p.Img.RightAdjust,
div.ImgW270SetStyle p.Img.RightAdjust,
div.ImgW280SetStyle p.Img.RightAdjust,
div.ImgW290SetStyle p.Img.RightAdjust,
div.ImgW300SetStyle p.Img.RightAdjust,
div.ImgW310SetStyle p.Img.RightAdjust,
div.ImgW320SetStyle p.Img.RightAdjust,
div.ImgW330SetStyle p.Img.RightAdjust,
div.ImgW340SetStyle p.Img.RightAdjust,
div.ImgW350SetStyle p.Img.RightAdjust,
div.ImgW360SetStyle p.Img.RightAdjust,
div.ImgW370SetStyle p.Img.RightAdjust,
div.ImgW380SetStyle p.Img.RightAdjust,
div.ImgW390SetStyle p.Img.RightAdjust,
div.ImgW400SetStyle p.Img.RightAdjust {
  text-align: left;
}
div.ImgW170SetStyle p.Img.RightAdjust + div.ImgSet {
  margin-left: -180px;
}
div.ImgW200SetStyle p.Img.RightAdjust + div.ImgSet {
  margin-left: -210px;
}
div.ImgW230SetStyle p.Img.RightAdjust + div.ImgSet {
  margin-left: -250px;
}

div.Grid3 p.Img.RightAdjust + div.ImgSet,
div.Grid4 div.Column3 p.Img.RightAdjust + div.ImgSet {
  width: 99.3%;
}

.ImgW110SetStyle .ImgSet > h4 {
  margin-left: 120px;
}
.ImgW130SetStyle .ImgSet > h4 {
  margin-left: 140px;
}

.ImgW170SetStyle .ImgSet > dl,
.ImgW170SetStyle .ImgSet > ul,
.ImgW170SetStyle .ImgSet > p,
.ImgW170SetStyle .ImgSet > h4,
.ImgW170SetStyle .ImgSet > table,
.ImgW170SetStyle .ImgSet > div {
  margin-left: 180px;
}

.ImgW170SetStyle .ImgSet > table {
  width: auto;
}

.ImgW170SetStyle .ImgSet > table ul {
  margin-left: 0;
}

/* [c14] データテーブル
=========================================================================================== */

/* ---[c14-1-1] データテーブル--- */

/* ---[c14-1-2] データテーブル > キャプションあり--- */

/* ---[c14-2-1] データテーブル > 幅100%--- */

/* ---[c14-2-2] データテーブル > 幅100%--- */

/* ---[c14-2-3] データテーブル > 幅100% > 見出し複数表示--- */

/* ---[c14-3-1] データテーブル > 上寄せ--- */

table.TableStyleGen01,
table.TableStyleGen02 {
  width: 100%;
}

table.TableStyleGen01 th,
table.TableStyleGen01 td,
table.TableStyleGen02 th,
table.TableStyleGen02 td {
  border: solid 2px #fff;
}

table.TableStyleGen01 th,
table.TableStyleGen02 th {
  background-color: var(--color-lblue);
}

table.TableStyleGen01 caption,
table.TableStyleGen02 caption {
  display: none;
}

table.TableStyleGen01 td.SubHeader {
  background-color: #ffe899;
}
table.TableStyleGen01 td {
  background-color: #fffbee;
}
table.TableStyleGen02 td.SubHeader {
  background-color: #e9e8dd;
}
table.TableStyleGen02 td {
  background-color: #f9f8f4;
}

/* 文字上寄せ */
table.TableStyleGen01.TopAdjust th,
table.TableStyleGen01.TopAdjust td,
table.TableStyleGen02.TopAdjust th,
table.TableStyleGen02.TopAdjust td {
  vertical-align: top;
}

/* ---[c14-1-x] データテーブル > トピックス--- */
table.TableStyleTopics {
  margin: 0 0 15px;
  border-collapse: collapse;
}

table.TableStyleTopics th,
table.TableStyleTopics td {
  font-size: 90%;
  vertical-align: top;
  background-color: transparent;
  border-color: #ededed;
  border-style: solid;
  border-width: 0 0 1px;
}
table.TableStyleTopics th {
  width: 100px;
}

table.TableStyleTopics th img {
  padding: 1px 0 0;
  vertical-align: top;
}
table.TableStyleTopics td {
  padding: 10px 10px 10px 0;
}

table.TableStyleTopics td ul.LinkListStyle1,
table.TableStyleTopics td ul.LinkListStyleGen01 {
  margin: 0;
  font-size: 100%;
}
table.TableStyleTopics td.Icon {
  width: 83px;
}

/* [c16] 枠囲み
=========================================================================================== */

/* ---[c16-1-1] 枠囲み > パターンA--- */

/* ---[c16-1-2] 枠囲み > パターンA > 見出しにリンクあり--- */
div.BoxPatternA.GenBoxA01 {
  margin: 0 0 15px;
  background-color: #fff;
}

div.BoxPatternA.GenBoxA01 p.Title {
  padding: 12px 11px 11px;
  margin: 0;
  font-size: 100%;
  background-color: var(--color-sax);
  background-image: none;
  border: none;
}

div.BoxPatternA.GenBoxA01 p.Title strong {
  display: block;
  padding: 0;
  font-size: 90%;
  line-height: 1.35;
  background: none;
  border: none;
}

div.BoxPatternA.GenBoxA01 h2,
div.BoxPatternA.GenBoxA01 h3,
div.BoxPatternA.GenBoxA01 h4 {
  padding: 12px 11px 11px;
  margin: 0;
  font-size: 90%;
  font-weight: bold;
  color: #333;
  background-color: var(--color-sax);
  background-image: none;
  border: none;
}

div.BoxPatternA.GenBoxA01 h2.Catch,
div.BoxPatternA.GenBoxA01 h3.Catch,
div.BoxPatternA.GenBoxA01 h4.Catch {
  padding: 12px 11px 11px;
  margin: 0;
  font-size: 90%;
  background-color: var(--color-sax);
  background-image: none;
}

div.BoxPatternA.GenBoxA01 div.Inner {
  padding: 10px 9px 0;
  background: none;
  border-color: #e9e8dd;
  border-style: solid;
  border-width: 0 2px 2px;
}

/* ---[-] 枠囲み > パターンA > サービス（業務別テンプレート）--- */
div.BoxPatternA.GenBoxA02 {
  margin: 0 0 15px;
  background-color: #f5f4ef;
}

div.BoxPatternA.GenBoxA02 p.Title strong {
  display: block;
  padding: 0;
  line-height: 1.35;
  background: none;
  border: none;
}

div.BoxPatternA.GenBoxA02 h2,
div.BoxPatternA.GenBoxA02 h3,
div.BoxPatternA.GenBoxA02 h4 {
  padding: 0;
  margin: 0;
  background: none;
  border: none;
}

div.BoxPatternA.GenBoxA02 p.Title strong img,
div.BoxPatternA.GenBoxA02 h2 img,
div.BoxPatternA.GenBoxA02 h3 img,
div.BoxPatternA.GenBoxA02 h4 img {
  vertical-align: bottom;
}

div.BoxPatternA.GenBoxA02 div.Inner {
  box-sizing: initial;
  padding: 10px 11px 1px;
  background-color: transparent;
  background-image: none;
  border: none;
}

/* --業務別テンプレート-- */
div.BoxPatternA.GenBoxA02.BoxBusiness {
  background-color: #f6f7fb;
}

/* --業種別テンプレート-- */
div.BoxPatternA.GenBoxA02.BoxCategory {
  background-color: #f7f8f5;
}

/* --グローバルサービス-- */
div.BoxPatternA.GenBoxA02.BoxGlobal {
  background-color: #fbf5f9;
}

/* --導入後支援-- */
div.BoxPatternA.GenBoxA02.BoxSupport {
  background-color: #f3f9f8;
}

/* --クラウド-- */
div.BoxPatternA.GenBoxA02.BoxCloud {
  background-color: #f3f8fb;
}

/* ---[c16-2-1] 枠囲み > パターンB--- */

/* ---[c16-2-2] 枠囲み > パターンB > 見出しにリンクあり--- */
div.BoxPatternB.GenBoxB01 {
  margin: 0 0 15px;
  background: none;
  border: 2px solid #e9e8dd;
}

div.BoxPatternB.GenBoxB01 p.Title {
  padding: 9px 9px 2px;
  margin: 0;
  font-size: 100%;
  background: none;
  border: none;
}

div.BoxPatternB.GenBoxB01 p.Title strong {
  display: block;
  font-size: 90%;
  line-height: 1.35;
}

div.BoxPatternB.GenBoxB01 h2,
div.BoxPatternB.GenBoxB01 h3,
div.BoxPatternB.GenBoxB01 h4 {
  padding: 9px 9px 2px;
  margin: 0;
  font-size: 90%;
  background: none;
  border: none;
}

div.BoxPatternB.GenBoxB01 p.Catch strong {
  display: block;
  padding: 9px 9px 2px 23px;
  font-size: 90%;
  line-height: 1.35;
  background: url("/-/media/ind/sbo/image/icon_title_in_box_01.gif") no-repeat
    9px 0.85em;
}

div.BoxPatternB.GenBoxB01 h2.Catch,
div.BoxPatternB.GenBoxB01 h3.Catch,
div.BoxPatternB.GenBoxB01 h4.Catch {
  padding: 9px 9px 2px 14px;
  background: url("/-/media/ind/sbo/image/icon_title_in_box_01.gif") no-repeat 0
    0.3em;
}

div.BoxPatternB.GenBoxB01 div.Inner {
  padding: 10px 9px 0;
  background: none;
  border: none;
}

/* ---[c16-3-1] 枠囲み > パターンC（見出しなし）--- */
div.BoxPatternC.GenBoxC01 {
  padding: 10px 9px 0;
  margin: 0 0 15px;
  background-color: transparent;
  border: 2px solid #e9e8dd;
}

/* ---[c16-3-1-c02] 枠囲み > パターンC > サービス--- */
div.BoxPatternC.GenBoxC02 {
  padding: 0;
  margin: 0 0 15px;
  background-color: #f6fbff;
  border: none;
}
div.BoxPatternC.GenBoxC02 div.Inner {
  padding: 10px 11px 0;
}

div.BoxPatternC.GenBoxC02 p.Thumb {
  padding: 0;
  margin: 0;
  font-size: 83%;
  line-height: 1.35;
}

/* ---[c16-3-1-c03] 枠囲み > パターンC > 導入事例--- */
div.BoxPatternC.GenBoxC03 {
  padding: 0;
  margin: 0 0 15px;
  background-color: #fffdf7;
  border: none;
}
div.BoxPatternC.GenBoxC03 div.Inner {
  padding: 10px 11px 1px;
}

div.BoxPatternC.GenBoxC03 p.Thumb {
  padding: 0;
  margin: 0;
  font-size: 83%;
  line-height: 1.35;
}

div.BoxPatternC.GenBoxC03 p.CustomerName {
  padding: 0 0 6px;
  margin: 0 0 5px;
  font-size: 90%;
  line-height: 1.35;
  background: url("/-/media/ind/sbo/image/bg_dotted_separator.gif") repeat-x 0
    100%;
}

/* ---[c16-3-x] 枠囲み > パターンC > コンセプト--- */
div.BoxPatternC.BoxConcept {
  padding: 0;
  margin: 0 0 15px;
  background-color: #f6fbff;
  background-image: none;
  border: none;
}
div.BoxPatternC.BoxConcept div.Inner {
  padding: 10px 15px 0 0;
}

/* ---Boxの中身を破線で区切る場合--- */
div.Item {
  padding: 11px 0 0;
  background: url("/-/media/ind/sbo/image/bg_dotted_separator.gif") repeat-x 0 0;
}

div.Item.FirstItem {
  padding: 0;
  background: none;
}

/* [s2] サイトアイデンティティ
=========================================================================================== */

/* ---[s2] サイトアイデンティティ > ステージングユニット【トップページ用】--- */
div#SiteIdentityGen01 {
  width: 965px;
  padding: 0 15px;
  margin: 0 auto;
  font-size: 0;
}

div#SiteIdentityGen01 h1.Title {
  float: left;
  width: 853px;
  height: 60px;
  text-align: left;
  background: url("/image/h1/bg_site_id_small.gif") repeat-x 0 0 #e6e6e6;
}

div#SiteIdentityGen01 p.Statement {
  float: right;
  width: 111px;
  height: 59px;
  padding: 1px 1px 0 0;
  background: url("/image/h1/bg_corp_id_small.gif") repeat-x 0 0;
}

#SiteIdentity .Title {
  text-align: left;
}

/* [-] フッタナビ
=========================================================================================== */
div#LowerNavigationSap {
  width: 965px;
  padding: 10px;
  margin: 0 auto;
  background-color: #f3f3f3;
}

/* div#LowerNavigationSap div.ColumnSet { width: 945px; } */
div#LowerNavigationSap div.ColumnSet {
  display: flex;
  justify-content: space-between;
  width: 945px;
}

div#LowerNavigationSap div.ColumnSet div.ColumnNo1,
div#LowerNavigationSap div.ColumnSet div.ColumnNo2,
div#LowerNavigationSap div.ColumnSet div.ColumnNo3,
div#LowerNavigationSap div.ColumnSet div.ColumnNo4,
div#LowerNavigationSap div.ColumnSet div.ColumnNo5 {
  float: left;
  margin: 0 0 0 15px;
  text-align: left;
}

div#LowerNavigationSap div.ColumnSet div.FirstItem {
  margin: 0;
}
div#LowerNavigationSap div.ColumnSet div ul.LinkListStyle2 {
  margin-bottom: 0.6em;
}
div#LowerNavigationSap div.ColumnSet div ul.LinkListStyle2 li {
  margin-bottom: 0;
}
div#LowerNavigationSap div.ColumnSet div ul.LinkListStyle2 ul {
  margin-top: 0;
}

/* LowerNavigation 20150811 */

#LowerNavigationSap ul.LinkListStyle2 li {
  padding: 0;
  background-image: none;
}

#LowerNavigationSap ul.LinkListStyle2 .Important a {
  padding: 0 17px 0 0;
  margin: 0 0 4px;
  zoom: 1;
  background-image: url("/image/jp/r1/icon/icon_important_link.gif");
  background-repeat: no-repeat;
  background-position: right center;
}

#LowerNavigationSap ul.LinkListStyle2 li ul {
  padding: 5px 0 3px;
  margin-left: 15px;
}

#LowerNavigationSap ul.LinkListStyle2 li ul li {
  font-size: 83%;
}

#LowerNavigationSap ul.LinkListStyle2 li.Important ul li a {
  background-image: url("../../../image/jp/r1/icon/icon_link_right.gif");
}

/* [-] トップページ
=========================================================================================== */

/* ---コンテンツエリア--- */
div.GridSet.TopPage {
  margin: 15px auto 0;
}

.Grid3.TopPage,
.Grid1 .TopPage {
  margin-top: 15px;
}

/* --- ブランディング --- */
#BrandingAnimation {
  position: relative;
  height: 261px;
  margin: 0 0 15px;
}

#BrandingAnimation .OpeningImage {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

#BrandingImgArea {
  position: relative;
  visibility: hidden;
  width: 720px;
  height: 210px;
  margin: 0 0 5px;
}

#BrandingImgArea ul.BrandingImgList {
  position: relative;
}

#BrandingImgArea ul.BrandingImgList li {
  position: absolute;
  top: 0;
  left: 0;
}

#BrandingImgArea .ControlPanel {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 100;
}

#BrandingImgArea ul.BrandingControlBtn li {
  position: absolute;
  top: 80px;
}
#BrandingImgArea ul.BrandingControlBtn li.LeftBtn {
  left: 0;
}
#BrandingImgArea ul.BrandingControlBtn li.RightBtn {
  left: 696px;
}

#BrandingControlThumbs li {
  float: left;
  margin: 0 11px 0 0;
}
#BrandingControlThumbs {
  visibility: hidden;
}
#BrandingControlThumbs li.ThirdItem {
  margin: 0 10px 0 0;
}

#BrandingControlThumbs li.LastItem {
  float: right;
  margin: 0;
}

/* [-] SAP Business One
=========================================================================================== */
#YoutubePlayer {
  margin: 0 0 15px;
}

/* [-] サイトマップ
=========================================================================================== */

/* div#Sitemap {
	margin-bottom: 15px;
	padding-bottom: 0;
	border-bottom: 1px solid #6d64a2;
}

div#Sitemap div.ColumnSet {
	padding-top: 15px;
	border-top: 1px solid #6d64a2;
} */

/* [-] 共通クラス
=========================================================================================== */
div#SiteIdentityGen01::after {
  clear: both;
  display: block;
  visibility: hidden;
  height: 0;
  content: ".";
}
div#SiteIdentityGen01 {
  display: inline-block;
}

div.Section.Bottom0 {
  padding-bottom: 0;
}

.PTop5 {
  padding-top: 5px;
}
.PTop10 {
  padding-top: 10px;
}
.PTop15 {
  padding-top: 15px;
}

.PLeft10 {
  padding-left: 10px;
}
.PLeft50 {
  padding-left: 50px;
}
.PLeft100 {
  padding-left: 100px;
}
.PLeft150 {
  padding-left: 150px;
}
.PLeft200 {
  padding-left: 200px;
}
.PLeft250 {
  padding-left: 250px;
}
.PLeft300 {
  padding-left: 300px;
}

/* CSS MouseOver Setting(2017年10月)
=========================================================================================== */
img.hasOverImage:hover {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  filter: "alpha(opacity=100)";
  filter: alpha(opacity=100);
}

/* 調整用
=========================================================================================== */
.pStatic {
  position: static !important;
}

.catchCustom {
  margin-bottom: 0 !important;
  line-height: 135% !important;
}

/* 20171123 */

div.ColumnSet div.Column1andHalf.FirstItem h3.TitleStyleGen01 span a {
  color: #595959 !important;
}

div.Section div.ImgW170SetStyle.ClearFix div.ImgSet div.Overflow {
  margin: 0;
}

/* トップページ
=========================================================================================== */
.BrandingImgArea.TopPage {
  position: relative;
  height: 560px;
  margin-bottom: 50px;
  overflow: hidden;
  background: url("/-/media/ind/sbo/image/new_fig01.jpg") no-repeat center
    center/cover;
  border-bottom: solid 35px #333;
}

.BrandingImgArea.TopPage .Wrapper {
  position: relative;
  width: 965px;
  margin: 0 auto;
}

.BrandingImgArea.TopPage .Inner {
  position: absolute;
  top: 120px;
  left: 0;
  width: 500px;
  height: 250px;
  padding: 10px 30px;
  background-color: #333;
  background-color: rgb(51 51 51 / 0.7);
}

.BrandingImgArea.TopPage h1,
.BrandingImgArea.TopPage h1 span {
  padding: 30px 0 5px;

  /* text-shadow: 0 1px 5px rgba(0,0,0,0.5), 0 -1px 5px rgba(0,0,0,0.5), 0 1px 5px rgba(0,0,0,0.5);  */
  font-weight: bold;
  color: var(--color-sax);
}

.BrandingImgArea.TopPage h1 span {
  line-height: 1.05em;
}

.BrandingImgArea.TopPage h1 span.PageTitle {
  font-size: 300%;
}

.BrandingImgArea.TopPage p.Lead {
  font-size: 90%;
  color: #fff;
}

.Concept1,
.Concept2 {
  position: relative;
  width: 1400px;
  height: 300px;
  margin: auto;
}

.Concept1 .BackGround,
.Concept2 .BackGround {
  position: absolute;
  top: 0;
  z-index: 1;
  width: 1400px;
  height: 400px;
  background-color: #fff;
}

.Concept1 .BackGround {
  left: 0;
}

.Concept2 .BackGround {
  left: 0;
}

.Concept1 .Img {
  position: absolute;
  z-index: 2;
}

.Concept2 .Img {
  position: absolute;
  z-index: 2;
}

.Concept1 .Img img,
.Concept2 .Img img {
  width: 1400px;
  height: auto;
}

.Concept1 .Text,
.Concept2 .Text {
  position: absolute;
  top: 5px;
  z-index: 3;
  width: 480px;
  height: 175px;
  padding: 20px;
  background: rgb(43 43 43 / 0);
}

.Concept1 .Text {
  left: 700px;
}

.Concept2 .Text {
  left: 180px;
}

.Concept1 .Text p.Title,
.Concept2 .Text p.Title {
  font-size: 90%;
  font-weight: bold;
  color: #fff;
}

.Concept1 .Text h2,
.Concept2 .Text h2 {
  float: inherit;
  width: 945px;
  width: 710px;
  padding-top: 4px;
  font-size: 162.5%;
  font-weight: bold;
  line-height: 100%;
  color: var(--color-sax);
}

.Concept1 .Text p.text,
.Concept2 .Text p.text {
  font-size: 80%;
  font-weight: bold;
  color: #fff;
}

#inline {
  display: inline;
}

.Concept1 .Text h3,
.Concept2 .Text h3 {
  font-size: 90%;
  font-weight: bold;
  color: #fff;
}

.UserVoice {
  padding-bottom: 120px;
  background-color: #333;
}

.UserVoice h2 {
  padding-top: 120px;
  font-size: 250%;
  font-weight: bold;
  color: #fff;
  text-align: center;
}

.UserVoice .Text {
  width: 965px;
  margin: 0 auto;
}

.UserVoice .Text p {
  padding: 30px 0 50px;
  font-size: 90%;
  color: #fff;
}

.UserVoice .IntroductionExampleButton {
  display: table;
  width: 320px;
  margin: 0 auto;
  text-align: center;

  /*	height:30px; */
  background-image: url("/-/media/ind/sbo/image/y-triangle.png");
  background-repeat: no-repeat;
  background-position: 100% 100%;
}

.UserVoice .IntroductionExampleButton a {
  display: table-cell;
  vertical-align: middle;
  text-decoration: none;
}

.UserVoice .IntroductionExampleButton a .Inner {
  padding: 20px 0;
  color: #fff !important;
  border: solid 1px #fff;
}

.UserVoice .IntroductionExampleButton a .Inner:hover {
  /*
	background-color:#fff;
	color:#333!important;
	transition:0.4s;
*/
  text-decoration: none;
}

.UserVoice .IntroductionExampleButton a .Inner ul {
  text-decoration: none;
  list-style-type: none;
}

.UserVoice .IntroductionExampleButton a .Inner ul li {
  padding-right: 10px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  background-image: url("/-/media/ind/sbo/image/arrow.png");
  background-repeat: no-repeat;
  background-position: 75% center;
  background-size: 19px 19px;
  background-size: 19px 19px;
}

/*
.UserVoice .IntroductionExampleButton a .Inner ul li:hover {
	color:#333;
	text-decoration: none;
}
*/
.UserVoice .Img1 {
  height: 400px;
  background: url("/-/media/ind/sbo/image/fig5.jpg") no-repeat center
    center/cover;
}

.UserVoice .Img2 {
  height: 125px;
  margin-bottom: 30px;
  background: url("/-/media/ind/sbo/image/fig6.jpg") no-repeat center
    center/cover;
}

.Trisection {
  height: 500px;
  padding: 100px 0 200px;
  margin: 0 auto;
  background: url("/-/media/ind/sbo/image/fig7.jpg") no-repeat center
    center/cover;
}

.Trisection .TrisectionBox {
  width: 965px;
  margin: 0 auto;
}

.Trisection .TrisectionBox .portalColumn {
  margin-bottom: 15px;
}

.Trisection .TrisectionBox .portalColumn .card {
  background-color: #fff;
  box-shadow: 3px 3px 10px #ccc;
}

.ColumnSet .Column1andthird {
  float: left;
  width: 32.642487%;
  margin: 0 0 0 1.0362694%;
}

.Column1andthird.FirstItem,
.Column2andhalf.FirstItem {
  margin: 0;
}

.Trisection .TrisectionBox .portalColumn .card .Inner {
  padding: 40px;
  background-image: url("/-/media/ind/sbo/image/b-triangle_arrow.png");
  background-repeat: no-repeat;
  background-position: 100% 100%;
}

.Trisection .TrisectionBox .portalColumn .card .Inner h2 {
  font-size: 150%;
  font-weight: bold;
}

.Trisection .TrisectionBox .portalColumn .card a h2,
.Trisection .TrisectionBox .portalColumn .card a p {
  color: #333;
  text-decoration: none;
}

.Trisection .TrisectionBox .portalColumn .card a {
  text-decoration: none;
}

.Trisection .TrisectionBox .portalColumn .card a .Inner {
  text-decoration: none;
}

.Trisection .TrisectionBox .portalColumn .card a .Inner:hover {
  opacity: 0.7;
  transition: 0.4s;
}

/* トップページ配下
=========================================================================================== */

/* h1 */
.PageTitleStyle3 h1 {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 100px;
  padding-left: 25px;
  font-size: 188%;
  font-weight: bold;

  /* padding: 20px 25px; */
  line-height: 1;
  color: #fff;
  background: url("/-/media/ind/sbo/image/bg_h1.png") no-repeat -1px;
}

h1 a:hover {
  color: #fff;
  text-decoration: none;
}

/* h2 */
h2.sbo {
  padding: 13px 20px;
  margin-bottom: 15px;
  font-size: 130%;
  font-weight: bold;
  line-height: 2;
  color: #fff;
  background: linear-gradient(142deg, #1e60bb 5%, #002a86 92%, #03afeb 10%);
}

/****************  */

/* hasOverImage Effects */

/* IE8 notWork */

/****************  */

@keyframes hasOver {
  0% {
    opacity: 0.9;
  }
  100% {
    opacity: 1;
  }
}

@keyframes Zoomer {
  0% {
    transform: scale(0.999);
  }
  30% {
    transform: scale(1.008);
  }
  80% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes hasOverOut {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 0.9;
  }
  100% {
    opacity: 1;
  }
}

.Grid3 .hasOverImage.Effects {
  transition: 0.5s ease-in;
  animation: hasOverOut ease-in 2s 1 normal;
}

/*  */
.Grid3 .hasOverImage.Effects:hover {
  animation: hasOver ease-out 1.5s 1 normal;
  animation: Zoomer ease-in 0.2s 1 normal;
}

/****************  */

/* hasOverImage Effects */

/* END */

/****************  */

/* ================================================== */

/*
/* sap.css mod
/*
/*================================================== */

.Grid3 table th,
table td {
  padding: 15px 10px;
  font-size: 83%;
}

.Grid3 .Func table.TableStyleGen02 th {
  width: 20%;
  padding: 0;
}

.Grid3 table.TableStyleGen02 td {
  padding: 15px;
  background-color: var(--color-lgray);
}

.Grid3 table.TableStyleGen01 th,
.Grid3 table.TableStyleGen02 th {
  width: 24%;
  text-align: center;
  background-color: var(--color-lgray);
}

.Grid3 .Super .ListStyle1 {
  width: 285px;
}

.Grid3 .Super .ListStyle1 + .ImgOnlyStyle::after {
  float: none;
  clear: both;
  display: block;
  content: "";
}

.Grid3 .Super .ListStyle1 li {
  float: left;
  padding: 0 0.5em 0.5em 1em;
  margin: 0 0 1em;
  line-height: 1.4;
  border-bottom: 1px dotted #006b9e;
}

.Grid3 .Super .ListStyle1 li + li + li + li {
  border: none;
}

.Grid3 h3 {
  padding: 10px 8px;
  font-size: 1.1em;
  background: none transparent;
  border-bottom: none;
  border-left: 4px solid #f0ab00;
}

/* ------- from sbo_2022.css ------- */

/* -------------- */
.BrandingImgArea.TopPage {
  position: relative;
}

br.ShowSP {
  display: none;
}

br.HideSP {
  display: inline;
}

.PageTitleStyle3 {
  background-color: #333;
}

.BrandingImgArea.TopPage .Wrapper {
  position: relative;
  display: flex;
  flex-flow: column;
  align-items: flex-end;
  justify-content: space-between;
  width: 965px;
  height: 560px;
  margin: 0 auto;
}

.BrandingImgArea.TopPage .Inner {
  position: absolute;
  top: 90px;
  left: 0;
  width: 500px;
  height: 250px;
  padding: 10px 30px;
  margin: 2em 0;
  background-color: rgb(51 51 51 / 0.7);
}

.BrandingImgArea.TopPage .Info {
  margin: 28em 0;
}

.BrandingImgArea.TopPage .Info a img {
  border-radius: 4px;
  box-shadow: 0 0 0 rgb(0 0 0 / 0);
  opacity: 1;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.BrandingImgArea.TopPage .Info a:hover img {
  box-shadow: 0 0 20px rgb(0 0 0 / 0.5);
  opacity: 0.9;
  transform: scale(1.02);
}

.Grid3.Why table.TableStyleGen02 thead th {
  color: #fff;
  background-color: #0175ad;
}

.Grid3.Why table.TableStyleGen02 tbody th {
  background-color: #f5f1e0;
}

.Grid3 .SmallList li {
  position: relative;
  min-height: 1em;
  padding: 0.25em 0 0.25em 2em;
  margin: 0 0 1em;
  font-size: 1.05em;
  font-weight: bold;
  line-height: 1.3;
  color: #555;
  background: transparent url("/-/media/ind/sbo/service/image/icon_list.png")
    no-repeat 10px 48% / 20px;
}

.BrandingImgArea.TopPage {
  margin-bottom: 0;
}

#Contents .Top .MovieArea {
  padding-bottom: 120px;
  margin-bottom: 50px;
  background: #eee;
}

#Contents .Top .MovieArea h2 {
  padding-top: 50px;
  font-size: 250%;
  font-weight: bold;
  color: #444;
  text-align: center;
}

.MovieArea .IntroductionExampleButton {
  display: table;
  width: 320px;
  margin: 0 auto;
  text-align: center;
  background: #626262 url("/-/media/ind/sbo/image/y-triangle.png") no-repeat
    100% 100%;
}

.MovieArea .IntroductionExampleButton a:link,
.MovieArea .IntroductionExampleButton a:visited {
  display: table-cell;
  vertical-align: middle;
  color: #fff;
  text-decoration: none;
}

.MovieArea .IntroductionExampleButton a:link *,
.MovieArea .IntroductionExampleButton a:visited * {
  color: #fff;
}

.MovieArea .IntroductionExampleButton a:link .Inner,
.MovieArea .IntroductionExampleButton a:visited .Inner {
  padding: 20px 0;
  color: #fff;
  border: solid 1px #444;
}

.MovieArea .IntroductionExampleButton a .Inner ul {
  text-decoration: none;
  list-style-type: none;
}

.MovieArea .IntroductionExampleButton a .Inner ul li {
  padding-right: 10px;
  font-weight: bold;
  text-decoration: none;
  background: url("/-/media/ind/sbo/image/arrow.png") no-repeat 75% center /
    19px 19px;
}

.MovieArea .Rotation {
  width: auto;
}

.MovieArea .Rotation .slick-list {
  overflow: visible;
}

.MovieArea .Rotation .slick-dots li button {
  font-size: 1em;
}

.MovieArea .Rotation li {
  margin: auto;
  text-align: center;
}

.MovieArea .Rotation li a:link,
.MovieArea .Rotation li a:visited {
  font-weight: bold;
  color: #444;
}

.MovieArea .Rotation li img {
  margin: auto;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 5px;
  transform: scale(1);
  transition: 0.08s ease-in;
}

.MovieArea .Rotation li img:hover {
  transform: scale(1.1);
}

.MovieArea .slick-prev {
  left: 0;
}

.MovieArea .slick-prev {
  left: 0;
}

.MovieArea .slick-next {
  right: 0;
}

.Movie .Thumbnail {
  margin: 0 25px;
}

.Movie .Slide img {
  margin: 1em auto;
  border-radius: 5px;
}

.Movie .Slide li.slick-slide {
  display: flex;
  flex-flow: column;
  justify-content: space-around;
}

@media screen and (width <= 1200px) {
  .JS br.ShowRWD {
    display: inline;
  }

  .JS .BoxContact_small {
    padding-right: 5px;
    padding-left: 5px;
  }

  .JS #Contents .Top {
    margin-right: -15px;
    margin-left: -15px;
  }

  /** top Branding **/
  .JS .BrandingImgArea.TopPage {
    width: 100%;
  }

  .JS .BrandingImgArea.TopPage .ImgAreaSP {
    position: relative;
    background: url("/-/media/ind/sbo/image/new_fig01.jpg") no-repeat center
      center/cover;
  }

  .JS .BrandingImgArea.TopPage .Wrapper {
    width: 100%;
  }

  .JS .BrandingImgArea.TopPage .Inner {
    box-sizing: border-box;
    width: auto;
    height: auto;
    padding: 10px 30px 30px;
  }

  /* .JS .BrandingImgArea.TopPage h1 {
		padding: 30px 0 15px 0;
	} */
  .JS .BrandingImgArea.TopPage h1 span.PageTitle {
    font-size: 250%;
  }

  .JS .BrandingImgArea.TopPage p.Lead {
    font-size: 80%;
  }

  .JS .BrandingImgArea.TopPage .Info {
    margin: 28em 0;
  }

  /** h1 **/
  .JS .PageTitleStyle3 h1 {
    background: url("/-/media/ind/sbo/image/g-triangle.png") no-repeat #333
      right bottom;
  }

  .JS .Concept1 {
    background-image: url("/-/media/ind/sbo/image/concept01_a.jpg");
  }

  .JS .Concept2 {
    background-image: url("/-/media/ind/sbo/image/concept02_a.jpg");
  }

  .JS .Concept1.Concept3 {
    background-image: url("/-/media/ind/sbo/image/concept03_a.jpg");
  }

  .JS .Concept1,
  .JS .Concept2 {
    width: 100%;
    height: auto;
    padding-bottom: 270px;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: auto 400px;
  }

  .JS .Concept1 .BackGround,
  .Concept2 .BackGround {
    top: 400px;
    left: 0;
    width: 100%;
    height: 60px;
  }

  .JS .Concept1 .Text h2,
  .Concept2 .Text h2 {
    width: 100%;
    font-size: 213.5%;
  }

  .JS .Concept1 .Text p.TextStyle1 {
    font-size: 100%;
  }

  .JS .Concept1 .Text,
  .Concept2 .Text {
    position: relative;
    top: 230px;
    left: 0;
    width: auto;
    height: auto;
    margin-right: 40px;
    margin-left: 40px;
    background: rgb(51 51 51 / 0.8);
  }

  .JS .Trisection {
    height: auto;
    padding: 100px 15px;
  }

  .JS .Trisection .TrisectionBox {
    width: 100%;
  }

  .JS .Trisection .TrisectionBox .ColumnSet {
    margin: 0 0 15px;
  }

  /* .JS .Top div.Section {
		margin-left: -15px;
		margin-right: -15px;
	} */
  .JS .Concept1 .Img,
  .JS .Concept2 .Img {
    /* position: relative;
		right: 0;
		left: 0; */
    display: none;
  }

  .JS #Contents .Concept1 .Img img,
  .JS .Concept2 .Img img {
    width: auto;
    max-width: max-content;
    height: 100%;
  }

  .JS .UserVoice {
    padding-right: 30px;
    padding-bottom: 80px;
    padding-left: 30px;
  }

  .JS .UserVoice h2 {
    padding-top: 80px;
  }

  .JS .UserVoice .Text {
    width: 100%;
  }

  .JS .UserVoice .Img2 {
    margin-right: -30px;
    margin-left: -30px;
  }

  /* .JS .UserVoice .IntroductionExampleButton {
		margin-top: 70px;
	} */

  /** サービス **/
  .JS .Grid3 .Super .ListStyle1 {
    width: 100%;
  }

  .JS .Service .Box.yellow {
    margin-bottom: 15px;
  }

  .JS .Service .ColumnSet {
    margin-bottom: 0;
  }

  .JS .Grid3 .Column1andHalf {
    padding-left: 10px;
  }

  /** FAQ **/
  .JS .Grid3 div.FAQSetStyle div.ImgSet {
    width: calc(100% - 30px);
  }

  .JS .Grid3 div.FAQSetStyle div.ImgSet h3 {
    padding-left: 10px;
  }

  .JS .Grid3 div.FAQSetStyle div.ImgSet p {
    margin-left: 10px;
  }

  /** ホワイトペーパー **/
  .JS div.ImgW200SetStyle p.Img.RightAdjust + div.ImgSet {
    float: none;
    margin-left: -200px;
  }
}

@media screen and (width <= 767px) {
  /** top Branding **/
  .JS .BrandingImgArea.TopPage {
    width: 100%;
  }

  .JS .BrandingImgArea.TopPage .ImgAreaSP {
    position: relative;
    background: url("/-/media/ind/sbo/image/new_fig01_s.jpg") no-repeat center
      center/cover;
  }

  .JS .BrandingImgArea.TopPage h1 span.PageTitle {
    font-size: 200%;
  }

  .JS .BrandingImgArea.TopPage p.Lead {
    font-size: 80%;
  }

  /** h1 **/
  .JS .PageTitleStyle3 h1 {
    padding-right: 57px;
  }

  .JS .inqLink .Column1andHalf {
    float: left;
    width: 50%;
  }

  .JS .UserVoice h2 {
    font-size: 200%;
  }

  /** サービス **/
  .JS .Grid3 .Column1andHalf {
    float: left;
    width: 50%;
  }

  /** 事例 **/
  .JS .Case .Column1andHalf {
    float: left;
    width: 50%;
  }

  .JS .Grid1 p.ImgOnlyStyle {
    text-align: center;
  }
}

@media screen and (width <= 579px) {
  .JS br.HideRWD2 {
    display: none;
  }

  .JS br.ShowSP {
    display: inline;
  }

  .JS .BrandingImgArea.TopPage {
    height: auto;
    padding-bottom: 260px;
    margin-bottom: 0;
    background: none;
    border-bottom: none;
  }

  .JS .BrandingImgArea.TopPage .ImgAreaSP {
    position: relative;
    height: 360px;
    background: url("/-/media/ind/sbo/image/new_fig01_s.jpg") no-repeat center
      center/cover;
  }

  .JS .BrandingImgArea.TopPage .Wrapper {
    position: absolute;
    top: 250px;
    text-align: center;
    background-color: #fff;
  }

  .JS .BrandingImgArea.TopPage .Wrapper {
    display: block;
  }

  .JS .BrandingImgArea.TopPage .Inner {
    position: static;
    top: 250px;
    display: inline-block;
    width: auto;
    height: auto;
    padding: 30px;
    margin: auto;
    text-align: left;
    background-color: rgb(51 51 51 / 0.7);
  }

  .JS .BrandingImgArea.TopPage .Info {
    margin: 1em 0;
  }

  .JS .BrandingImgArea.TopPage h1 span.PageTitle {
    font-size: 200%;
  }

  .JS .BrandingImgArea.TopPage h1,
  .BrandingImgArea.TopPage h1 span {
    padding-top: 0;
  }

  .JS .Concept1,
  .JS .Concept2 {
    padding-bottom: 145px;
    background-size: auto 200px;
  }

  .JS .Concept1 .Text h2,
  .Concept2 .Text h2 {
    margin-bottom: 0;
    font-size: 200.5%;
  }

  .JS .Concept1 .Text,
  .Concept2 .Text {
    top: 108px;
    padding: 25px;
  }

  .JS .Concept1 .Text p.TextStyle1 {
    font-size: 95%;
  }

  .JS .Concept1 .BackGround,
  .Concept2 .BackGround {
    background-color: transparent;
  }

  .JS .ColumnSet .Column1andthird {
    width: 100%;
  }

  .JS .Column1andthird {
    float: none;
    margin-bottom: 15px;
    margin-left: 0;
  }

  .JS .Trisection .TrisectionBox .portalColumn .card a p.ImgOnlyStyle {
    text-align: left;
  }

  .JS .Trisection .TrisectionBox .portalColumn .card .Inner h2 {
    margin-top: -67px;
    margin-left: 75px;
    text-align: left;
  }

  .JS .Trisection .TrisectionBox .portalColumn .card .Inner {
    padding: 20px;
  }

  .JS .UserVoice {
    padding-bottom: 40px;
  }

  /* .JS .UserVoice .IntroductionExampleButton {
		margin-top: 40px;
	} */

  /** サービス **/
  .JS .Service .Column1andHalf {
    float: none;
    width: 100%;
    text-align: center;
  }

  .JS .Service .Box.yellow {
    margin-bottom: 10px;
  }

  .JS .Service .Box.yellow p span {
    margin-bottom: 0;
    font-size: 120%;
  }

  .JS .Service .Box.yellow p {
    font-size: 85%;
  }

  /* .JS .inqLink .Column1andHalf {
		float: none;
		width: 100%;
		text-align: center;
	} */
  .JS .Service .award {
    background-image: url("/-/media/ind/sbo/service/image/img_award_sp.png");
  }

  .JS .Service .award h2 {
    font-size: 196%;
    text-shadow: 1px 1px 6px #40363a;
  }

  /** 事例 **/
  .JS .Case .Column1andHalf {
    float: none;
    width: auto;
    max-width: 353px;
    margin-right: auto;
    margin-left: auto;
  }

  /** ホワイトペーパー **/
  .JS .Library div.ImgW170SetStyle p.Img {
    float: none;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  .JS .Library .ImgW170SetStyle .ImgSet {
    margin-left: 0;
  }

  .JS .Library .ImgW170SetStyle .ImgSet .TableStyleGen02 {
    margin-left: 0;
  }

  .JS div.ImgW200SetStyle p.Img.RightAdjust {
    float: none;
  }

  .JS div.ImgW200SetStyle p.Img.RightAdjust + div.ImgSet {
    float: none;
    margin-left: 0;
  }

  .JS .ImgW200SetStyle .ImgSet p {
    margin-left: 0;
  }
}

@media screen and (width <= 700px) {
  .JS br.HideSP {
    display: none;
  }

  .JS .BrandingImgArea.TopPage h1 span.PageTitle {
    font-size: 160%;
  }

  .JS .BrandingImgArea.TopPage p.Lead {
    font-size: 80%;
  }

  .JS .Concept1 .Text h2,
  .Concept2 .Text h2 {
    font-size: 190%;
  }

  .JS .Concept1 .Text p.TextStyle1 {
    font-size: 90%;
  }

  .JS .Trisection .TrisectionBox .portalColumn .card a p.ImgOnlyStyle img {
    width: 45px;
  }

  .JS .Trisection .TrisectionBox .portalColumn .card .Inner h2 {
    margin-top: -58px;
    margin-left: 56px;
  }

  .JS .UserVoice {
    padding-right: 15px;
    padding-left: 15px;
  }

  .JS .UserVoice .IntroductionExampleButton {
    width: 90%;
  }

  .JS .UserVoice .IntroductionExampleButton a .Inner ul li {
    background-position: 80% center;
  }

  .JS .UserVoice h2 {
    padding-top: 60px;
    font-size: 200%;
  }

  .JS .PageTitleStyle3 h1 {
    padding: 20px 25px;
    font-size: 140%;
  }

  .JS h2.sbo {
    font-size: 115%;
  }

  .JS .Grid3 h3 {
    font-size: 1em;
  }

  .JS .BrandingImgArea.TopPage .Inner {
    padding: 40px 20px;
  }

  /** サービス **/
  .JS .Service .award h2 {
    font-size: 150%;
  }
}

/* ------------------------ */

/* 20240228 add */
#Contents br.pc {
  display: inline;
}

#Contents br.sp {
  display: none;
}

.GridSet.sbo_top {
  width: 100%;

  /* margin-bottom: -65px; */
}

.GridSet.sbo_top .Section {
  padding: 120px 0;
}

.GridSet.sbo_top .Section.bgcol1 {
  background-color: #f2f2f2;
}

.GridSet.sbo_top .Inner {
  display: block;
  max-width: 965px;
  margin: 0 auto;
}

.GridSet.sbo_top .btn {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 60px;
  margin: 0 auto;
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  background-color: #333;
  background-image: url("/-/media/ind/sbo/image/icon_btnarrow_wt.svg");
  background-repeat: no-repeat;
  background-position: calc(100% - 20px) center;
}

.GridSet.sbo_top .btn:hover {
  text-decoration: none;
  opacity: 0.6;
}

.GridSet.sbo_top .btn.doc {
  color: #333;
  background-color: #fff;
  background-image: url("/-/media/ind/sbo/image/icon_btnarrow_bk.svg");
}

.GridSet.sbo_top .btn.inquiry {
  color: #333;
  background-color: var(--color-sax);
  background-image: url("/-/media/ind/sbo/image/icon_btnarrow_bk.svg");
}

.GridSet.sbo_top .btn.detail {
  box-sizing: border-box;
  width: 142px;
  height: 40px;
  margin: 0 0 0 auto;
  font-size: 14px;
  color: #333;
  background-color: transparent;
  background-image: url("/-/media/ind/sbo/image/icon_btnarrow_sax.svg");
	background-size: 7px 12px;
  background-position: calc(100% - 15px) center;
  border: 1px solid var(--color-sax);
}

.GridSet.sbo_top h2 {
  position: relative;
  padding-bottom: 30px;
  margin-bottom: 60px;
  font-size: 32px;
  font-weight: bold;
  line-height: 2;
  color: #333;
  text-align: center;
}

.GridSet.sbo_top h2::after {
  position: absolute;
  bottom: 0;
  left: calc(50% - 40px);
  width: 80px;
  height: 3px;
  content: "";
  background-color: #b1000e;
}

/* sec_fv */
.sbo_top .Section.sec_fv {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 565px;
  padding: 0;
  color: #fff;
  text-align: center;
  background-color: #333;
  background-image: url("/-/media/ind/sbo/image/img_fv_top.jpg");
  background-position: center center;
  background-size: cover;
}

.sbo_top .Section.sec_fv h1 {
  font-size: 54px;
  font-weight: bold;
}

.sbo_top .Section.sec_fv h1 .subtit {
  display: block;
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
}

.sbo_top .Section.sec_fv .lead {
  margin-bottom: 60px;
  font-size: 18px;
  line-height: 2;
}

.sbo_top .Section.sec_fv .cta_btns {
  display: flex;
  justify-content: center;
}

.sbo_top .Section.sec_fv .cta_btns .btn {
  margin: 0 20px;
  letter-spacing: 0.1em;
}

/* sec_award */
.sbo_top .Section.sec_award {
  padding: 60px 0;
  color: #fff;
}

.sbo_top .Section.sec_award .layoutbox {
  display: flex;
  justify-content: center;
}

.sbo_top .Section.sec_award .layoutbox .img {
  /* max-width: 240px; */
  width: 100%;
}

.sbo_top .Section.sec_award .layoutbox .texts {
  /* padding-left: 15px; */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 2em;
  color: #333;
}

.texts span {
  /* トピックのラベル */
  font-size: 1rem;
  font-weight: bold;
  color: var(--color-blue);
}

.sbo_top .Section.sec_award .layoutbox .texts p {
  /* line-height: 2; */
  font-size: 14px;
}

.sbo_top .Section.sec_award .layoutbox p.TextStyle1 {
  position: absolute;
  right: 1em;
  bottom: 1em;
  margin: 0;
}

.sbo_top .Section.sec_award .layoutbox p.TextStyle1 a:link,
.sbo_top .Section.sec_award .layoutbox p.TextStyle1 a:visited {
  padding-right: 20px;
  font-size: 14px;
  font-weight: bold;
  color: #333;
  background-image: url("/-/media/ind/sbo/image/icon_btnarrow_sax.svg");
	background-size: 7px 12px;
  background-repeat: no-repeat;
  background-position: right center;
}

.sbo_top .Section.sec_award .layoutbox p.TextStyle1 a:hover {
  text-decoration: none;
}

.sbo_top .Section.sec_award .layoutbox .texts .caption {
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
}

.sbo_top .Section.sec_award .layoutbox .texts .award {
  /* font-size: 16px; */
  font-weight: bold;
}

.Section.sec_award .Inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.GridSet.sbo_top .sec_award .tile3 {
  position: relative;
  width: calc((100% / 3) - 1rem);
  background: #fff;
  border: 1px solid #f2f2f2;
  box-shadow: 2px 2px 0 0 rgb(0 0 0 / 0.16);

  /* #5f5f5f; */
}

.GridSet.sbo_top .sec_award .Inner .layoutbox {
  flex-direction: column;
  padding: 1em;
}

.GridSet.sbo_top .sec_award .Inner .layoutbox .img {
  margin: 0 0 1em;
}

.sbo_top .Section.sec_case .cards a.card {
  position: relative;
}

.sbo_top .Section.sec_case .cards a.card img.NEW {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: auto;
  transform: rotate(90deg);
}

@media screen and (width <= 994px) {
  .GridSet.sbo_top .sec_award .tile3 {
    width: 100%;
  }

  .sbo_top .Section.sec_case .cards a.card img.NEW {
    width: 10vw;
    height: auto;
  }
}

/* sec_achievement */
.sbo_top .Section.sec_achievement .Inner {
  max-width: 893px;
}

.sbo_top .Section.sec_achievement h2 {
  display: table;
  padding: 80px 40px 20px;
  margin: 0 auto 10px;
  font-size: 54px;
  line-height: 1;
  background-image: url("/-/media/ind/sbo/image/img_achievement_h2.svg");
  background-repeat: no-repeat;
  background-position: center top;
}

.sbo_top .Section.sec_achievement h2::after {
  left: 0;
  width: 100%;
  background-color: transparent;
  background-image: url("/-/media/ind/sbo/image/img_achievement_h2_dots.svg");
}

.sbo_top .Section.sec_achievement .lead {
  margin-bottom: 60px;
  font-size: 14px;
  line-height: 2;
  text-align: center;
}

.sbo_top .Section.sec_achievement ul.records {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 40px;
}

.sbo_top .Section.sec_achievement ul.records li {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 242px;
  height: 153px;
  color: var(--color-sax);
  text-align: center;
  background-repeat: no-repeat;
  background-position: center center;
}

.sbo_top .Section.sec_achievement ul.records li p {
  font-size: 48px;
  font-weight: bold;
  line-height: 1;
}

.sbo_top .Section.sec_achievement ul.records li p.qty {
  display: block;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1;
  color: #333;
}

.sbo_top .Section.sec_achievement ul.records li.record_client {
  background-image: url("/-/media/ind/sbo/image/img_achievement_sax_01.svg");
}

.sbo_top .Section.sec_achievement ul.records li.record_site {
  background-image: url("/-/media/ind/sbo/image/img_achievement_02.svg");
}

.sbo_top .Section.sec_achievement ul.records li.record_countory {
  background-image: url("/-/media/ind/sbo/image/img_achievement_sax_03.svg");
}

.sbo_top .Section.sec_achievement ul.records li.record_countory p.qty {
  margin-bottom: 10px;
}

.sbo_top .Section.sec_achievement ul {
  margin-bottom: 20px;
}

.sbo_top .Section.sec_achievement ul.clients {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.sbo_top .Section.sec_achievement ul.clients li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33.3333%;
}

.sbo_top .Section.sec_achievement ul.clients li img {
  transform: scale(0.5);
}

.sbo_top .Section.sec_achievement .note1 {
  margin-bottom: 30px;
  font-size: 14px;
  text-align: right;
}

.sbo_top .Section.sec_achievement .note2 {
  font-size: 16px;
  text-align: center;
}

/* sec_solve */
.sbo_top .Section.sec_solve ul.problems {
  position: relative;
  padding: 40px;
  margin-bottom: 110px;
  background-color: #fff;
}

.sbo_top .Section.sec_solve ul.problems::after {
  position: absolute;
  bottom: -70px;
  left: 0;
  width: 100%;
  height: 30px;
  content: "";
  background: url("/-/media/ind/sbo/image/icon_down_sax.svg") center bottom
    no-repeat;
}

.sbo_top .Section.sec_solve ul.problems li {
  padding-left: 45px;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: bold;
  background: url("/-/media/ind/sbo/image/icon_checked_blue.svg") left center
    no-repeat;
		background-size: 38px;
}

.sbo_top .Section.sec_solve ul.problems li:last-child {
  margin-bottom: 0;
}

.sbo_top .Section.sec_solve .solve {
  text-align: center;
}

.sbo_top .Section.sec_solve .solve p {
  display: inline;
  font-size: 31px;
  font-weight: bold;
  line-height: 1.2;
  background-image: linear-gradient(
    180deg,
    rgb(255 255 255 / 0) 55%,
    rgb(253 184 20 / 0.2) 55%
  );
}

/* sec_about */
.sbo_top .Section.sec_about {
  padding-top: 0;
  padding-bottom: 60px;
  overflow: visible;
  background-color: #def5fc;
}

.sbo_top .Section.sec_about h2 {
  position: relative;
  top: -24px;
  padding-bottom: 0;
  margin-bottom: 30px;
  font-size: 54px;
  line-height: 1;
  color: var(--color-blue);
}

.sbo_top .Section.sec_about h2::after {
  content: none;
}

.sbo_top .Section.sec_solve {
  margin-bottom: 0;
}

.sbo_top .Section.sec_about .layoutbox {
  display: flex;
}

.sbo_top .Section.sec_about .layoutbox .texts {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 80px;
}

.sbo_top .Section.sec_about .layoutbox .texts p {
  margin-bottom: 2em;
  line-height: 2;
}

.sbo_top .Section.sec_about .layoutbox .texts p:last-child {
  margin-bottom: 0;
}

/* sec_feature */
.sbo_top .Section.sec_feature ol.features {
  padding: 0;
  margin-top: 0;
  list-style: none;
}

.sbo_top .Section.sec_feature ol.features li {
  padding-bottom: 60px;
  margin-bottom: 40px;
  border-bottom: 3px solid #e5e5e5;
}

.sbo_top .Section.sec_feature ol.features li:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.sbo_top .Section.sec_feature ol.features li h3 {
  padding: 0;
  margin: 0;
 color: #595959;
  margin-bottom: 30px;
  font-size: 24px;
  background-color: transparent;
  border: none;
}

.sbo_top .Section.sec_feature ol.features li h3 em {
  font-style: normal;
  color: #b1000e;
}

.sbo_top .Section.sec_feature ol.features li h3 .index {
  display: inline-block;
  width: 180px;
  margin-right: 10px;
  font-size: 22px;
  line-height: 50px;
  text-align: center;
  background-color: var(--color-sax);
  border-radius: 5px;
color: #fff;
}

.sbo_top .Section.sec_feature ol.features .layoutbox {
  display: flex;
}

.sbo_top .Section.sec_feature ol.features .img {
  text-align: center;
}

.sbo_top .Section.sec_feature ol.features .layoutbox .img {
  width: 455px;
}

.sbo_top .Section.sec_feature ol.features .layoutbox .texts {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 40px;
}

.sbo_top .Section.sec_feature ol.features li p {
  margin-bottom: 2em;
  line-height: 2;
}

.sbo_top .Section.sec_feature ol.features li p:last-of-type {
  margin-bottom: 0;
}

/* sec_cta */
.sbo_top .Section.sec_cta {
  padding: 60px 0;
  color: #fff;
  background-color: #333;
}

.sbo_top .Section.sec_cta .lead {
  margin-bottom: 40px;
  font-size: 18px;
  font-weight: bold;
  line-height: 2;
  text-align: center;
}

.sbo_top .Section.sec_cta h2 {
  padding: 0;
  margin: 0;
  margin-bottom: 60px;
  font-size: 36px;
  color: var(--color-sax);
}

.sbo_top .Section.sec_cta h2::after {
  content: none;
}

.sbo_top .Section.sec_cta h2 span {
  padding: 0;
  font-size: 18px;
  font-weight: normal;
  background-color: transparent;
}

.sbo_top .Section.sec_cta .cta_btns {
  display: flex;
  justify-content: center;
}

.sbo_top .Section.sec_cta .cta_btns .btn {
  margin: 0 20px;
  letter-spacing: 0.1em;
}

/* sec_case */
.sbo_top .Section.sec_case .cards {
  margin-bottom: 80px;
}

.sbo_top .Section.sec_case .cards a.card {
  position: relative;
  display: flex;
  padding: 20px;
  padding-bottom: 60px;
  margin-bottom: 40px;
  color: #333;
  background-color: #fff;
}

.sbo_top .Section.sec_case .cards a.card::after {
  position: absolute;
  right: 20px;
  bottom: 20px;
  padding-right: 20px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  content: "詳しく観る";
  background-image: url("/-/media/ind/sbo/image/icon_btnarrow_sax.svg");
	background-size: 7px 12px;
  background-repeat: no-repeat;
  background-position: right center;
}

.sbo_top .Section.sec_case .cards a.card * {
  color: inherit;
}

.sbo_top .Section.sec_case .cards a.card:hover,
.sbo_top .Section.sec_case .cards a.card:hover * {
  text-decoration: none;
}

.sbo_top .Section.sec_case .cards a.card:hover {
  opacity: 0.6;
}

.sbo_top .Section.sec_case .cards .card .img {
  width: 320px;
}

.sbo_top .Section.sec_case .cards .card .texts {
  padding-left: 40px;
}

.sbo_top .Section.sec_case .cards .card .texts h3 {
  padding: 0;
  margin: 0;
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: bold;
  background: none;
  border: none;
}

.sbo_top .Section.sec_case .cards .card .texts ul.tags {
  margin-bottom: 20px;
}

.sbo_top .Section.sec_case .cards .card .texts ul.tags li {
  display: inline-block;
  padding: 10px;
  margin-right: 10px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  background-color: var(--color-sax);
  border-radius: 100vw;
}

.sbo_top .Section.sec_case .cards .card .texts p {
  line-height: 2;
}

/* sec_useful */
.sbo_top .Section.sec_useful .cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 20px;
}

.sbo_top .Section.sec_useful .cards a.card {
  position: relative;
  box-sizing: border-box;
  display: block;
  width: 300px;
  padding-bottom: 60px;
  margin-bottom: 40px;
  color: #333;
  background-color: #fff;
  border: 1px solid #f2f2f2;
  box-shadow: 2px 2px 0 0 rgb(0 0 0 / 0.16);
}

.sbo_top .Section.sec_useful .cards::after {
  width: 300px;
  content: "";
}

.sbo_top .Section.sec_useful .cards a.card::after {
  position: absolute;
  right: 20px;
  bottom: 20px;
  padding-right: 30px;
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
  content: "資料をダウンロード";
  background-image: url("/-/media/ind/sbo/image/icon_download_sax.svg");
  background-repeat: no-repeat;
  background-position: right center;
}

.sbo_top .Section.sec_useful .cards a.card * {
  color: inherit;
}

.sbo_top .Section.sec_useful .cards a.card:hover,
.sbo_top .Section.sec_useful .cards a.card:hover * {
  text-decoration: none;
}

.sbo_top .Section.sec_useful .cards a.card:hover {
  opacity: 0.6;
}

.sbo_top .Section.sec_useful .cards .card .img {
  max-width: 100%;
}

.sbo_top .Section.sec_useful .cards .card .texts {
  padding: 20px;
  padding-bottom: 0;
}

.sbo_top .Section.sec_useful .cards .card .texts h3 {
  padding: 0;
  margin: 0;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.5;
  background: none;
  border: none;
}

/* sec_column */
.sbo_top .Section.sec_column {
  background-color: #fff8e7;
}

.sbo_top .Section.sec_column .cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 20px;
}

.sbo_top .Section.sec_column .cards a.card {
  position: relative;
  box-sizing: border-box;
  display: block;
  width: 300px;
  padding-bottom: 60px;
  margin-bottom: 40px;
  color: #333;
  background-color: #fff;
  border: 1px solid #f2f2f2;
  box-shadow: 2px 2px 0 0 rgb(0 0 0 / 0.16);
}

.sbo_top .Section.sec_column .cards::after {
  width: 300px;
  content: "";
}

.sbo_top .Section.sec_column .cards a.card::after {
  position: absolute;
  right: 20px;
  bottom: 20px;
  padding-right: 20px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  content: "詳しく読む";
  background-image: url("/-/media/ind/sbo/image/icon_btnarrow_sax.svg");
  background-repeat: no-repeat;
  background-position: right center;
}

.sbo_top .Section.sec_column .cards a.card * {
  color: inherit;
}

.sbo_top .Section.sec_column .cards a.card:hover,
.sbo_top .Section.sec_column .cards a.card:hover * {
  text-decoration: none;
}

.sbo_top .Section.sec_column .cards a.card:hover {
  opacity: 0.6;
}

.sbo_top .Section.sec_column .cards .card .img {
  max-width: 100%;
}

.sbo_top .Section.sec_column .cards .card .texts {
  padding: 20px;
  padding-bottom: 0;
}

.sbo_top .Section.sec_column .cards .card .texts h3 {
  padding: 0;
  margin: 0;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.5;
  background: none;
  border: none;
}

/* sec_movie */
.sbo_top .Section.sec_movie .cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.sbo_top .Section.sec_movie .cards a.card {
  box-sizing: border-box;
  display: block;
  width: 300px;
  margin-top: 40px;
  color: #333;
  background-color: #fff;
  border: 1px solid #f2f2f2;
  box-shadow: 2px 2px 0 0 rgb(0 0 0 / 0.16);
}

.sbo_top .Section.sec_movie .cards a.card:nth-child(1),
.sbo_top .Section.sec_movie .cards a.card:nth-child(2),
.sbo_top .Section.sec_movie .cards a.card:nth-child(3) {
  margin-top: 0;
}

.sbo_top .Section.sec_movie .cards::after {
  width: 300px;
  content: "";
}

.sbo_top .Section.sec_movie .cards a.card * {
  color: inherit;
}

.sbo_top .Section.sec_movie .cards a.card:hover,
.sbo_top .Section.sec_movie .cards a.card:hover * {
  text-decoration: none;
}

.sbo_top .Section.sec_movie .cards a.card:hover {
  opacity: 0.6;
}

.sbo_top .Section.sec_movie .cards .card .img {
  max-width: 100%;
}

.sbo_top .Section.sec_movie .cards .card .texts {
  padding: 20px;
}

.sbo_top .Section.sec_movie .cards .card .texts h3 {
  padding: 0;
  margin: 0;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.5;
  background: none;
  border: none;
}

/* sec_faq */
.sbo_top .Section.sec_faq .faq_list {
  margin-bottom: 60px;
  font-size: 18px;
}

.sbo_top .Section.sec_faq .faq_list > li {
  padding: 30px 0 30px 30px;
  border-bottom: 1px solid #757374;
}

.sbo_top .Section.sec_faq .faq_list .question,
.sbo_top .Section.sec_faq .faq_list .answer {
  position: relative;
  display: flex;
  justify-content: space-between;
}

.sbo_top .Section.sec_faq .faq_list .question {
  cursor: pointer;
}

.sbo_top .Section.sec_faq .faq_list .question::before,
.sbo_top .Section.sec_faq .faq_list .answer::before {
  position: absolute;
  left: 0;
  padding-right: 10px;
  font-size: 24px;
  font-weight: bold;
}

.sbo_top .Section.sec_faq .faq_list .question::before {
  content: "Q.";
}

.sbo_top .Section.sec_faq .faq_list .answer::before {
  color: var(--color-sax);
  content: "A.";
}

.sbo_top .Section.sec_faq .faq_list .answer {
  display: none;
  padding-top: 30px;
  overflow: hidden;
}

.sbo_top .Section.sec_faq .faq_list .answer a {
  text-decoration: underline;
}

.sbo_top .Section.sec_faq .faq_list .answer a.btn {
  display: table;
  width: auto;
  height: auto;
  padding-right: 35px;
  text-decoration: none;
  border: none;
}

.sbo_top .Section.sec_faq .faq_list .body {
  padding-left: 60px;
}

.sbo_top .Section.sec_faq .faq_list .question .body {
  padding-right: 10px;
  font-weight: bold;
}

.sbo_top .Section.sec_faq .faq_list .answer .body {
  padding-right: 40px;
}

.sbo_top .Section.sec_faq .faq_list .body ol li {
  list-style: decimal;
}

.sbo_top .Section.sec_faq .faq_list .body ol li {
  margin-bottom: 1em;
}

.sbo_top .Section.sec_faq .faq_list .body p {
  margin-bottom: 1em;
  line-height: 2;
}

.sbo_top .Section.sec_faq .faq_list .body ol li:last-child,
.sbo_top .Section.sec_faq .faq_list .body p:last-child {
  margin-bottom: 0;
}

.sbo_top .Section.sec_faq .faq_list .icon {
  position: relative;
  width: 30px;
  min-width: 30px;
  height: 30px;
}

.sbo_top .Section.sec_faq .faq_list .icon::before,
.sbo_top .Section.sec_faq .faq_list .icon::after {
  position: absolute;
  content: "";
  background-color: var(--color-sax);
}

.sbo_top .Section.sec_faq .faq_list .icon::before {
  top: 14px;
  left: 0;
  width: 30px;
  height: 2px;
}

.sbo_top .Section.sec_faq .faq_list .icon::after {
  top: 0;
  left: 14px;
  width: 2px;
  height: 30px;
  transition: transform 0.6s ease;
}

.sbo_top .Section.sec_faq .faq_list .open .icon::after {
  transform: rotate(270deg);
}

/* sec_topics */
.sbo_top .Section.sec_topics ul.news_list {
  margin-bottom: 60px;
}

.sbo_top .Section.sec_topics ul.news_list li {
  display: flex;
  align-items: baseline;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #b1b1b1;
}

.sbo_top .Section.sec_topics ul.news_list li p {
  line-height: 2;
}

.sbo_top .Section.sec_topics ul.news_list li .date {
  flex-shrink: 0;
  padding-top: 2px;
  margin-right: 15px;
  font-size: 14px;
}

.sbo_top .Section.sec_topics ul.news_list li .category {
  flex-shrink: 0;
  padding: 2px 12px;
  margin-right: 30px;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  background-color: #333;
  border-radius: 100vw;
}

.sbo_top .Section.sec_topics ul.news_list li .category.category_news {
  background-color: #06417e;
}

.sbo_top .Section.sec_topics ul.news_list li .category.category_seminar {
  background-color: #b1000e;
}

.sbo_top .Section.sec_topics ul.news_list li .body {
  position: relative;
  padding-right: 80px;
}

.sbo_top .Section.sec_topics ul.news_list li .body a {
  display: block;
}

.sbo_top .Section.sec_topics ul.news_list li .body a::after {
  position: absolute;
  top: 6px;
  right: 0;
  width: 18px;
  height: 18px;
  content: "";
  background: url("/-/media/ind/sbo/image/icon_link.svg") center center
    no-repeat;
  background-size: contain;
}

/* sec_navi */
.sbo_top .Section.sec_navi {
  background-color: #fff8e7;
}

.sbo_top .Section.sec_navi .cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.sbo_top .Section.sec_navi .cards a.card {
  position: relative;
  box-sizing: border-box;
  display: block;
  width: 226px;
  padding-bottom: 60px;
  color: #333;
  background-color: #fff;
  border: 1px solid #f2f2f2;
  box-shadow: 2px 2px 0 0 rgb(0 0 0 / 0.16);
}

.sbo_top .Section.sec_navi .cards::after {
  width: 226px;
  content: "";
}

.sbo_top .Section.sec_navi .cards a.card::after {
  position: absolute;
  right: 20px;
  bottom: 20px;
  padding-right: 20px;
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
  content: "詳しくはこちら";
  background-image: url("/-/media/ind/sbo/image/icon_btnarrow_sax.svg");
  background-repeat: no-repeat;
  background-position: right center;
	background-size: 7px 12px;
}

.sbo_top .Section.sec_navi .cards a.card * {
  color: inherit;
}

.sbo_top .Section.sec_navi .cards a.card:hover,
.sbo_top .Section.sec_navi .cards a.card:hover * {
  text-decoration: none;
}

.sbo_top .Section.sec_navi .cards a.card:hover {
  opacity: 0.6;
}

.sbo_top .Section.sec_navi .cards .card .img {
  display: block;
  max-width: 100%;
  margin: 20px auto 0;
}

.sbo_top .Section.sec_navi .cards .card .texts {
  padding: 20px;
  padding-bottom: 0;
}

.sbo_top .Section.sec_navi .cards .card .texts h3 {
  padding: 0;
  margin: 0;
  margin-bottom: 15px;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  background: none;
  border: none;
}

.sbo_top .Section.sec_navi .note {
  margin-top: 40px;
  font-size: 12px;
  text-align: center;
}

/* sbo_column */
.GridSet.sbo_column {
  width: 100%;
}

.sbo_column .Section {
  padding-bottom: 0;
}

.sbo_column .Section .Inner {
  max-width: 768px;
  padding: 60px 0;
  margin: 0 auto;
}

.sbo_column .Section .Inner img {
  max-width: 100%;
}

/* column_head */
#Contents .Section.column_head {
  background: url("/-/media/ind/sbo/column/image/img_column_head.jpg") center
    center no-repeat #000;
  background-size: cover;
}

#Contents .Section.column_head .Inner {
  display: flex;
  align-items: center;
  max-width: 965px;
  min-height: 115px;
  padding: 0;
}

#Contents .Section.column_head .title {
  font-size: 2em;
  font-weight: bold;
  line-height: 1;
  color: #fff;
}

/* column_body */
#Contents .Section.column_body.bgcol1 {
  background-color: #f2f2f2;
}

#Contents .Section.column_body h1 {
  margin-bottom: 20px;
  font-size: 28px;
  font-weight: bold;
  line-height: 2;
  text-align: inherit;
}

#Contents .Section.column_body .releasedate {
  padding-bottom: 0;
  margin-bottom: 20px;
  font-size: 14px;
  color: #757374;
  text-align: right;
}

#Contents .Section.column_body .main_img {
  margin-bottom: 40px;
}

#Contents .Section.column_body .main_img img {
  width: 100%;
}

#Contents .Section.column_body h2 {
  position: relative;
  padding: 0;
  padding-left: 20px;
  margin-top: 60px;
  margin-bottom: 40px;
  font-size: 24px;
  font-weight: bold;
  line-height: 2;
  text-align: inherit;
}

#Contents .Section.column_body h2::before {
  position: absolute;
  left: 0;
  width: 8px;
  height: 100%;
  content: "";
  background: linear-gradient(180deg, var(--color-sax), var(--color-sax));
}

#Contents .Section.column_body h2.sec_title {
  padding: 0 0 20px;
  margin: 0 0 40px;
  font-size: 24px;
  text-align: center;
}

#Contents .Section.column_body h2.sec_title::before {
  bottom: 0;
  left: calc(50% - 40px);
  width: 80px;
  height: 3px;
  background: #b1000e;
}

#Contents .Section.column_body h3 {
  position: relative;
  padding: 0;
  padding-bottom: 10px;
  margin-top: 1em;
  margin-bottom: 1em;
  font-size: 20px;
  font-weight: bold;
  line-height: 2;
  text-align: inherit;
  background-color: transparent;
  border: none;
}

#Contents .Section.column_body h3::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 5px;
  content: "";
  background: linear-gradient(90deg, var(--color-sax), var(--color-sax));
}

#Contents .Section.column_body h4 {
  padding: 0;
  margin-top: 1em;
  margin-bottom: 0.5em;
  font-size: 18px;
  font-weight: bold;
  line-height: 2;
  color: inherit !important;
  text-align: inherit;
}

#Contents .Section.column_body p {
  padding-bottom: 1em;
  line-height: 2;
  text-align: inherit;
}

#Contents .Section.column_body p:last-child {
  margin-bottom: 0;
}

#Contents .Section.column_body li {
  margin-top: 0.5em;
  line-height: inherit;
}

#Contents .Section.column_body li:first-child {
  margin-top: 0;
}

#Contents .Section.column_body li li:first-child {
  margin-top: 0.5em;
}

#Contents .Section.column_body ul {
  margin-bottom: 40px;
  line-height: 1.5;
}

#Contents .Section.column_body ul ul {
  margin-bottom: 0;
}

#Contents .Section.column_body ul > li {
  padding-left: 1.4em;
  text-indent: -1.5em;
}

#Contents .Section.column_body ul > li::before {
  padding-right: 0.6em;
  padding-left: 0.3em;
  color: var(--color-sax);
  content: "●";
}

#Contents .Section.column_body ol {
  padding-left: 1.5em;
  margin: 0 auto;
  margin-bottom: 40px;
  line-height: 1.5;
  list-style: decimal;
}

#Contents .Section.column_body ol li::marker {
  font-weight: bold;
  color: var(--color-sax);
}

#Contents .Section.column_body strong {
  font-weight: bold;
}

#Contents .Section.column_body a {
  color: #0071bc;
}

#Contents .Section.column_body table {
  width: 100%;
  margin-bottom: 80px;
  font-size: 16px;
}

#Contents .Section.column_body table th {
  padding: 8px 10px;
  font-size: inherit;
  color: #333;
  background-color: var(--color-sax);
  border: 1px solid #fff;
}

#Contents .Section.column_body table td {
  padding: 8px 10px;
  font-size: inherit;
  background-color: #f2f2f2;
  border: 1px solid #fff;
}

#Contents .Section.column_body table.color_gray th {
  color: #fff;
  background-color: #757374;
}

#Contents .Section.column_body figure {
  margin: 0;
  margin-bottom: 10px;
}

#Contents .Section.column_body figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: #757374;
}

/* block_strong */
#Contents .Section.column_body .block_strong {
  padding: 40px;
  margin-bottom: 80px;
  background: linear-gradient(90deg, #fff8e7, #fff8e7);
}

#Contents .Section.column_body .block_strong p:last-child {
  padding-bottom: 0;
}

/* block_index */
#Contents .Section.column_body .block_index {
  padding: 40px;
  margin-bottom: 80px;
  border: 1px solid var(--color-sax);
  border-radius: 10px;
}

#Contents .Section.column_body .block_index .title {
  padding-bottom: 10px;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  border-bottom: 1px solid var(--color-sax);
}

#Contents .Section.column_body .block_index ol#index ol,
#Contents .Section.column_body .block_index ol#index {
  padding: 0;
  margin: 0;
  margin-left: 0;
  list-style: none;
}

#Contents .Section.column_body .block_index ol#index li {
  display: table;
  margin-top: 1em;
  font-weight: bold;
}

#Contents .Section.column_body .block_index ol#index li li {
  padding-left: 2em;
  font-weight: normal;
}

#Contents .Section.column_body .block_index ol#index li a {
  display: inline-block;
}

/* block_layout */
#Contents .Section.column_body .texts {
  margin-bottom: 40px;
}

#Contents .Section.column_body .block_layout {
  margin-bottom: 80px;
}

#Contents .Section.column_body .block_layout.col2 {
  display: flex;
  justify-content: space-between;
}

#Contents .Section.column_body .block_layout.col2.rev {
  flex-direction: row-reverse;
}

#Contents .Section.column_body .block_layout.col2 .image {
  width: calc(50% - 20px);
  margin-bottom: 0;
}

#Contents .Section.column_body .block_layout.col2 .texts {
  width: calc(50% - 20px);
}
.Library table.TableStyleGen02 {
	width: auto;
}
.Library table.TableStyleGen02 th { 
	background-color: var(--color-lblue);
	width: auto;
	white-space: nowrap;
}
.Library table.TableStyleGen02 td {
	border: solid 2px #ffffff;
}
.Library div.ImgW170SetStyle p.Img {
	font-size: 83%;
	line-height: 1.35;
	letter-spacing: 0;

	position: relative;
	z-index: 9999;
}
.Library .ImgW170SetStyle .ImgSet .TableStyleGen02 {
	margin-left: 180px;
}
.Library .ImgW170SetStyle .ImgSet .TableStyleGen02 ul {
	margin-left: 0;
}
.Library div.ImgW170SetStyle p.Img.RightAdjust + div.ImgSet {
	margin-left: -182px;
}
.Library .ImgW170SetStyle .ImgSet > p {
	margin-left: 182px;
}
@media screen and (max-width: 579px) {
	.JS .Library .ImgW170SetStyle .ImgSet > p {
		text-align: center;
		width: 100%;
	}
	.JS .Library .ImgW170SetStyle .ColumnSet {
		width: 100%;
	}
	.JS .Library .Column1andHalf {
		width: 100%;
	}
}
/* sns_btns */
#Contents .Section.column_body .sns_btns {
  display: flex;
  justify-content: center;
  margin-top: 80px;
}

#Contents .Section.column_body .sns_btns .sns_btn {
  margin: 0 20px;
}

/* block_writer */
#Contents .Section.column_body .block_writer {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 384px;
  padding: 40px 26px;
  margin: 80px auto 0;
  border: 2px solid var(--color-sax);
  border-radius: 10px;
}

#Contents .Section.column_body .block_writer .photo {
  max-width: 120px;
}

#Contents .Section.column_body .block_writer .profile {
  padding-left: 15px;
}

#Contents .Section.column_body .block_writer .profile p {
  padding-bottom: 0;
  line-height: 1.5;
}

#Contents .Section.column_body .block_writer .writer_head {
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: bold;
}

#Contents .Section.column_body .block_writer .writer_name {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: bold;
}

#Contents .Section.column_body .block_writer .writer_title {
  font-size: 16px;
}

/* btn */
#Contents .Section.column_body .btn {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 60px;
  margin: 0 auto;
  margin-top: 40px;
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  background-color: #333;
  background-image: url("/-/media/ind/sbo/image/icon_btnarrow_wt.svg");
  background-repeat: no-repeat;
  background-position: calc(100% - 20px) center;
}

#Contents .Section.column_body .btn:hover {
  text-decoration: none;
  opacity: 0.6;
}

/* related_wp */
#Contents .Section.column_body .related_wps {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-bottom: 120px;
}

#Contents .Section.column_body .related_wp {
  padding: 30px;
  background-color: #fff;
}

#Contents .Section.column_body .related_wp .layout {
  display: flex;
  gap: 30px;
}

#Contents .Section.column_body .related_wp .layout .image {
  min-width: calc(300 / 708 * 100%);
}

#Contents .Section.column_body .related_wp .layout .image img {
  width: 100%;
}

#Contents .Section.column_body .related_wp .layout .texts {
  margin: 0;
}

#Contents .Section.column_body .related_wp .layout .texts > p {
  padding-bottom: 0;
  line-height: 1.5;
}

#Contents .Section.column_body .related_wp .layout .title {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: bold;
}

#Contents .Section.column_body .related_wp .layout .targets {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 20px;
}

#Contents .Section.column_body .related_wp .layout .target {
  display: inline-block;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border: 1px solid #ccc;
  border-radius: 100px;
}

#Contents .Section.column_body .related_wp .layout .summary {
  font-size: 16px;
}

#Contents .Section.column_body .related_wp .btn {
  display: flex;
  justify-content: flex-start;
  padding-left: 25px;
  color: #333;
  background-color: var(--color-sax);
  background-image: url("/-/media/ind/sbo/image/icon_btnarrow_bk.svg");
}

/* cards */
#Contents .Section.column_body .cards {
  display: flex;
  gap: 30px;
}

#Contents .Section.column_body .cards a {
  padding-bottom: 60px;
}

#Contents .Section.column_body .cards a * {
  color: #333;
}

#Contents .Section.column_body .cards a:hover {
  opacity: 0.6;
}

#Contents .Section.column_body .cards a:hover,
#Contents .Section.column_body .cards a:hover * {
  text-decoration: none;
}

#Contents .Section.column_body .cards .card {
  position: relative;
  box-sizing: border-box;
  background-color: #fff;
}

#Contents .Section.column_body .cards .card .image img {
  width: 100%;
}

#Contents .Section.column_body .cards .card .texts {
  margin-bottom: 0;
}

#Contents .Section.column_body .cards .card .texts p {
  padding: 0;
  line-height: 1.5;
}

#Contents .Section.column_body .cards a.card::after {
  position: absolute;
  right: 20px;
  bottom: 20px;
  padding-right: 20px;
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
  color: #333;
  content: "もっと";
  background: right center no-repeat;
}

#Contents .Section.column_body .cards.other_wp .card {
  border: 1px solid #f2f2f2;
  box-shadow: 2px 2px 0 0 rgb(0 0 0 / 0.16);
}

#Contents .Section.column_body .cards.other_wp .card .texts {
  padding: 20px 20px 0;
}

#Contents .Section.column_body .cards.other_wp a.card::after {
  padding-right: 30px;
  content: "資料をダウンロード";
  background-image: url("/-/media/ind/sbo/image/icon_download_sax.svg");
}

#Contents .Section.column_body .cards.other_column .card {
  padding-top: 20px;
  padding-right: 20px;
  padding-left: 20px;
  border: 2px solid var(--color-sax);
}

#Contents .Section.column_body .cards.other_column .card .texts {
  padding-top: 20px;
}

#Contents .Section.column_body .cards.other_column a.card::after {
  content: "もっと読む";
  background-image: url("/-/media/ind/sbo/image/icon_btnarrow_sax.svg");
	background-size: 7px 12px;
}

#Contents .Section.column_body .cards.col3 {
  flex-wrap: wrap;
}

#Contents .Section.column_body .cards.col3 .card {
  width: calc((100% - 60px) / 3);
}

/* block_cta */
#Contents .Section.column_body .block_cta {
  padding: 60px;
  margin-bottom: 120px;
  color: #fff;
  text-align: center;
  background: url("/-/media/ind/sbo/column/image/img_column_cta.jpg") center
    center no-repeat #000;
  background-size: cover;
}

#Contents .Section.column_body .block_cta h3 {
  padding: 0;
  margin: 0;
  margin-bottom: 20px;
  font-size: 36px;
  font-weight: bold;
  line-height: 1;
  color: var(--color-sax);
}

#Contents .Section.column_body .block_cta h3::before {
  content: none;
}

#Contents .Section.column_body .block_cta .description {
  padding-bottom: 0;
  font-size: 18px;
  font-weight: bold;
  line-height: 2;
}

#Contents .Section.column_body .block_cta .cta_btns {
  display: flex;
  margin-top: 40px;
}

#Contents .Section.column_body .block_cta .cta_btns .btn {
  margin-top: 0;
  color: #333;
  background-color: #fff;
  background-image: url("/-/media/ind/sbo/image/icon_btnarrow_bk.svg");
}

#Contents .Section.column_body .block_cta .cta_btns .btn.contact {
  background-color: var(--color-sax);
}

@media screen and (width <= 994px) {
  #Contents br.pc {
    display: none;
  }

  #Contents br.sp {
    display: inline;
  }

  .Under995 #Contents,
  .Under995 .Grid4 {
    padding: 0;
  }
	.JS .sbo_top .clients {
		padding: 1rem;
	}
  .JS .GridSet {
    margin-left: 0;
		padding: 1rem;
  }
	.JS .GridSet.sbo_top {
		padding: 0;;
	}

  .JS .Grid4.Service.Case {
    padding: 1rem;
  }
  .Under995 #Contents .Section .Inner {
    width: auto;
    max-width: 100%;
    padding: 0 15px;
  }
	.Under995 #Contents	div.BoxPatternA.BoxA03 div.Inner {
			padding: 10px 7px 0;
	}
  .GridSet.sbo_top {
    margin-bottom: 0;
  }

  .GridSet.sbo_top h2 {
    font-size: 28px;
    line-height: 1.5;
  }

  #FloatingContacts ul {
    display: block !important;
  }

  /* sec_cta */
  .sbo_top .Section.sec_cta .cta_btns {
    display: block;
  }

  .sbo_top .Section.sec_cta .cta_btns .btn {
    width: auto;
    margin: 0 0 15px;
  }

  .sbo_top .Section.sec_cta .cta_btns .btn:last-child {
    margin-bottom: 0;
  }

  /* sec_fv */
  .sbo_top .Section.sec_fv {
    background-image: url("/-/media/ind/sbo/image/img_fv_top_sp.jpg");
  }

  .sbo_top .Section.sec_fv h1 {
    font-size: 36px;
  }

  .sbo_top .Section.sec_fv h1 .subtit {
    font-size: 20px;
  }

  .sbo_top .Section.sec_fv .lead {
    font-size: 16px;
  }

  .sbo_top .Section.sec_fv .cta_btns {
    display: block;
  }

  .sbo_top .Section.sec_fv .cta_btns .btn {
    width: auto;
    margin: 0;
    margin-bottom: 20px;
  }

  /* sec_award */
  .sbo_top .Section.sec_award .layoutbox {
    display: block;
  }

  .sbo_top .Section.sec_award .layoutbox .img {
    width: 100%;
    margin-bottom: 20px;
  }

  .sbo_top .Section.sec_award .layoutbox .texts {
    padding-left: 0;
  }

  .sbo_top .Section.sec_award .layoutbox .texts .caption {
    margin-bottom: 10px;
  }

  /* sec_achievement */
  .sbo_top .Section.sec_achievement h2 {
    font-size: 36px;
  }

  .sbo_top .Section.sec_achievement ul.records {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }

  .sbo_top .Section.sec_achievement ul.records li {
    width: calc(160 / 345 * 100%);
    height: 110px;
    margin-bottom: 20px;
    background-size: contain;
  }

  .sbo_top .Section.sec_achievement ul.records li p {
    font-size: 28px;
  }

  .sbo_top .Section.sec_achievement ul.records li p.qty {
    margin-bottom: 10px;
  }

  .sbo_top .Section.sec_achievement ul.clients {
    display: flex;
  }

  .sbo_top .Section.sec_achievement ul.clients li {
    width: 48%;
    margin-top: 40px;
    margin-right: 4%;
  }

  .sbo_top .Section.sec_achievement ul.clients li:nth-child(1),
  .sbo_top .Section.sec_achievement ul.clients li:nth-child(2) {
    margin-top: 0;
  }

  .sbo_top .Section.sec_achievement ul.clients li:nth-child(2n) {
    margin-right: 0;
  }

  .sbo_top .Section.sec_achievement ul.clients li img {
    transform: none;
  }

  /* sec_about */
  .sbo_top .Section.sec_about h2 {
    top: -14px;
    font-size: 28px;
  }

  .sbo_top .Section.sec_about .layoutbox {
    display: block;
  }

  .sbo_top .Section.sec_about .layoutbox .img {
    width: 100%;
    margin-bottom: 20px;
  }

  .sbo_top .Section.sec_about .layoutbox .texts {
    padding-left: 0;
  }

  /* sec_feature */
  .sbo_top .Section.sec_feature ol.features li h3 .index {
    display: block;
    margin-bottom: 10px;
  }

  .sbo_top .Section.sec_feature ol.features .layoutbox {
    display: block;
  }

  .sbo_top .Section.sec_feature ol.features .layoutbox .img {
    width: 100%;
    margin-bottom: 20px;
  }

  .sbo_top .Section.sec_feature ol.features .layoutbox .texts {
    padding-left: 0;
  }

  /* sec_case */
  .sbo_top .Section.sec_case .cards a.card {
    display: block;
  }

  .sbo_top .Section.sec_case .cards .card .img {
    width: 100%;
    margin-bottom: 20px;
  }

  .sbo_top .Section.sec_case .cards .card .texts {
    padding-left: 0;
  }

  /* sec_useful */
  .sbo_top .Section.sec_useful .cards {
    display: block;
  }

  .sbo_top .Section.sec_useful .cards a.card {
    width: auto;
  }

  .sbo_top .Section.sec_useful .cards .card .img {
    width: 100%;
  }

  /* sec_column */
  .sbo_top .Section.sec_column .cards {
    display: block;
  }

  .sbo_top .Section.sec_column .cards a.card {
    width: auto;
  }

  .sbo_top .Section.sec_column .cards a.card:last-child {
    margin-bottom: 0;
  }

  .sbo_top .Section.sec_column .cards .card .img {
    width: 100%;
  }

  /* sec_movie */
  .sbo_top .Section.sec_movie .cards {
    display: block;
  }

  .sbo_top .Section.sec_movie .cards a.card {
    width: auto;
  }

  .sbo_top .Section.sec_movie .cards .card .img {
    width: 100%;
  }

  .sbo_top .Section.sec_movie .cards a.card:nth-child(1),
  .sbo_top .Section.sec_movie .cards a.card:nth-child(2),
  .sbo_top .Section.sec_movie .cards a.card:nth-child(3) {
    margin-bottom: 40px;
  }

  /* sec_topics */
  .sbo_top .Section.sec_topics ul.news_list li {
    flex-wrap: wrap;
  }

  .sbo_top .Section.sec_topics ul.news_list li .body {
    padding-right: 20px;
  }

  .sbo_top .Section.sec_navi .cards {
    display: block;
  }

  .sbo_top .Section.sec_navi .cards a.card {
    width: auto;
    margin-bottom: 20px;
  }

  /* sbo_column */
  #Contents .Section.column_body .btn {
    width: 100%;
  }

  #Contents .sbo_column .Section.column_body .Inner {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  #Contents .Section.column_body h1 {
    font-size: 24px;
  }

  #Contents .Section.column_body h2 {
    font-size: 20px;
  }

  #Contents .Section.column_body h3 {
    font-size: 18px;
  }

  #Contents .Section.column_body .Overflow {
    margin-bottom: 80px;
  }

  #Contents .Section.column_body .Overflow table {
    min-width: 200vw;
    margin-bottom: 10px;
  }

  #Contents .Section.column_body .block_layout.col2 {
    display: block;
  }

  #Contents .Section.column_body .block_layout.col2 .image {
    width: 100%;
    margin-bottom: 20px;
  }

  #Contents .Section.column_body .block_layout.col2 .texts {
    width: 100%;
  }

  /* block_writer */
  #Contents .Section.column_body .block_writer {
    width: 100%;
  }

  /* related_wp */
  #Contents .Section.column_body .related_wp {
    padding: 20px;
  }

  #Contents .Section.column_body .related_wp .layout {
    display: block;
  }

  #Contents .Section.column_body .related_wp .layout .image {
    margin-bottom: 20px;
  }

  /* cards */
  #Contents .Section.column_body .cards {
    flex-flow: column nowrap;
  }

  #Contents .Section.column_body .cards.col3 {
    flex-wrap: nowrap;
  }

  #Contents .Section.column_body .cards.col3 .card {
    width: auto;
  }

  /* block_cta */
  #Contents .Section.column_body .block_cta {
    padding-right: 15px;
    padding-left: 15px;
  }

  #Contents .Section.column_body .block_cta .cta_btns {
    flex-direction: column;
    gap: 20px;
  }

  #Contents .Section.column_body .block_cta h3 {
    font-size: 30px;
  }

  #Contents .Section.column_body .block_cta .description {
    text-align: left;
  }
}