@charset "utf-8";
/* ************************************************** 
Name: add_manufacture.css
Description: Main CSS
Create: 2025.1.27
***************************************************** */
/* ================================================== 
BreakPoint
-994
-767
-579
-399
===================================================== */
@media screen and (min-width: 995px) and (max-width: 1304px) {
 body > #Contents.OptionWideRWD .GridSet {
        width: auto;
        max-width: 1300px;
        margin: 0 5px 0 5px;
    }
}
.topManufacture .inner {
    background-image: url(/assets/image/en/products/vcim/mainvisual.png);
    padding: 50px 0;
}
@media screen and (max-width: 767px) {
 .topManufacture .inner {
	 background-image: url(/assets/image/en/products/vcim/mainvisual.png);
	 background-position: center;
	 padding: 30px 30px 0;
	 }}
/*--------------------------------------------------------------------------------------- 
元のCSS打ち消しや流用
---------------------------------------------------------------------------------------*/
@media (max-width: 1307px) {
	    body > #Contents .hht-wrap {
			padding-right: 0 !important;
			padding-left: 0 !important;
			}}
h2 {
  background: none ;
  font-weight: bold;
  position: relative;
}
h2 span {
  background: none;
  line-height: 190%;
  color: #333;
  font-size: 100%;
  padding: 0;
}
h3 {
  font-size: 1rem;
  color: var(--black);
  position: relative;
}
.topBlockMv .inner {
  margin-bottom: 0;
}
.download .pdf {
  text-decoration: none;
  background-image: url(../../../image/jp/r1/icon/icon_pdf_hd.gif);
  background-size: 16px 16px;
  -moz-background-size: 16px 16px;
  -webkit-background-size: 16px 16px;
  -o-background-size: 16px 16px;
  -ms-background-size: 16px 16px;
  padding: 0 17px 0 0;
  background-repeat: no-repeat;
  background-position: right center;
}
.link_arrow p {
  color: #c02;
}
.link_arrow a p {
  text-decoration: none;
  background-image: url(../../../image/jp/r1/icon/icon_link_right_xl_hd.gif);
  padding: 0 20px 0 0;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 16px 16px;
  -moz-background-size: 16px 16px;
  -webkit-background-size: 16px 16px;
  -o-background-size: 16px 16px;
  -ms-background-size: 16px 16px;
}
.link_arrow a:hover p {
  color: #b1000e;
  text-decoration: underline;
  background-image: url(../../../image/jp/r1/icon/icon_link_right_xl_hover_hd.gif);
}
.link_arrow a, .link_arrow a:hover, .link_arrow a:visited {
  text-decoration: none;
  color: var(--black);
}
dd {
    display: block;
    margin-inline-start: 20px;
    unicode-bidi: isolate;
}
@media screen and (max-width: 994px) {
  .JS #Contents {
    padding: 0;
  }
  .JS .GridSet {
    margin-left: 0;
  }
  .JS .Grid4, .JS .Grid3, .JS .Grid1 {
    padding: 0;
  }
}
@media (min-width: 768px) and (max-width: 994px) {
  main .GridSet {
    padding: 24px;
  }
}
@media (min-width: 995px) and (max-width: 1274px) {
	footer {
		padding-right: 24px;
	}}
@media screen and (max-width: 767px) {
  .JS h2 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .JS .topBlockMv .inner {
    margin-bottom: 0;
  }
  .JS .topBlockMv .catch {
    margin-bottom: 0;
  }
  .JS .topManufacture .catch {
    background-image: url(/assets/image/en/products/vcim/bg_mv_manufacture.png);
    background-position: center;
  }
}
/*------------------------------------------------------------------元のCSS打ち消しや流用*/
/*--------------------------------------------------------------------------------------- 
汎用
---------------------------------------------------------------------------------------*/ :root {
  --point: #253cbe; /*背景色：申し込みボタン、フロー図内、三つの四角、三つの丸　文字色：飾り英字、課題解決の要所、数値（ビビットブルー）*/
  --point2: #6bbafd; /*文字色：リストマーク（水色）*/
  --point3: #a5cdfa; /*文字色：導入事例丸の中の文字（水色）*/
  --pale: #dfedfd; /*背景色：特長、システム導入までの流れとサービス、システム構成事例、ニュース　文字色：困りごと（薄いブルー）*/
  --dark: #142346; /*背景色：メニュー（ダークブルー）*/
  --gray: #f2f2f2; /*背景色：困りごと、導入事例（薄いグレー）*/
  --buluegray: #b4c5cf; /*背景色：ニュースリリース（濃いグレー）*/
  --black: #333; /*背景色：ダウンロードボタン（濃いグレー）*/
}
/*---テキスト関連---*/
@media screen and (min-width: 768px) and (max-width: 1304px) {
    .OptionWideRWD .Grid4, .OptionWideRWD .Grid3, .OptionWideRWD .Grid1 {
        padding: 0 0 0 25px !important;
		}}
		
}
.flexbox .col_3 .circle dl {
	padding-left: 0 !important;
}
#vcim h3 {
	margin-top: 30px;
	padding-left: 16px;
}
dd p {
	margin-left: 17px !important;
	}
.Grid4 {
	color: #fff !important;
}
@media screen and (max-width: 767px) {
.JS [class^=hht-] .LV1LinkSet, .JS [class^=hht-] h2, .JS [class^=hht-] h3, .JS [class^=hht-] h4 {
	display: block !important;
	}}
	
main {
  font-size: 90%;
  overflow: hidden;
}
dt {
  font-weight: bold;
}
@media (min-width: 768px) {
body>.where-not dl, body>.where-not ol, body>.where-not ul .flexbox .col_3 .inc_whitebox .inc_roundbox {
	margin-bottom: 4rem;
	}}
/*---構造---*/
.GridSet > p, article > p {
  padding: 0 36px;
}
@media (min-width: 768px) {
  article {
    padding: 32px 0 20px 0;
  }
}
section {
  padding: 80px 0;
}
@media (max-width: 767px) {
  main section {
    padding: 80px 8px;
  }
  .problem {
    margin: -8px;
  }
}
@media (min-width: 1024px) {
.flexbox, .inc_flexbox > *, .inc-grand_flexbox > * > * {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 965px;
  margin: auto;
	
}}
@media (max-width: 1023px) {
.flexbox, .inc_flexbox > *, .inc-grand_flexbox > * > * {
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
	margin: auto;
		}}

.col_2 {
  gap: 24px;
}
.col_2 > * {
  width: calc((100% - 24px) / 2);
}
.col_4, .col_3 {
  gap: 16px;
}
.col_4 > *, .col_3 > * {
  flex: 1;
}
@media (max-width: 767px) {
  .col_4 > *, .col_3 > * {
    flex: none;
    flex-basis: 100%;
    box-sizing: border-box;
  }
  .col_3 > * {
    max-width: 295px;
  }
}
figure {
  text-align: center;
  margin: 0;
}
figcaption {
  margin: 8px 0;
}
/*---装飾---*/
h2 {
  text-align: center;
  font-size: 1.75rem;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-color: var(--black);
  padding: 16px;
}
.FMTitleLinkStyle2 {
	border-bottom: none !important;
}
.hht-local-navigation__list1 {
	margin-bottom: 0 !important;
}
@media screen and (max-width: 578px) {
  section:not(.news) > * > h2 {
    font-size: 1.5rem;
  }
}
section > * > h2::before {
  font-size: 20px;
  color: var(--point);
  display: block;
  position: absolute;
}
section:not(.news) > * > h2::before {
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 350px;
}
#feature h2::before {
  content: 'Features';
}
@media screen and (max-width: 578px) {
  #feature p {
    text-align: left;
  }
}
#service h2::before {
  content: 'Service';
}
#example1 h2::before {
  content: 'System Configuration Examples';
}
@media screen and (max-width: 578px) {
  #example1 h2::before {
    line-height: 1.3;
  }
}
#example2 h2::before {
  content: 'Deployment Examples';
}
#solutions h2::before {
  content: 'solutions';
}
.news h2::before {
  content: 'News';
  right: 0;
}
section:not(#feature, .news) h2 {
  margin-bottom: 40px !important;
}
section:not(#vcim, #solutions) h3 {
  font-size: 1.5rem;
  margin: 24px 0 32px !important;
}
@media screen and (max-width: 767px) { /*SP用*/
  section:not(#vcim) h3 {
    font-size: 1.25rem;
  }
}
section:is(#feature, #service) h3 {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: center;
}
section:is(#feature, #service) h3::before, section:is(#feature, #service) h3::after {
  content: '';
  height: 1px;
  background-color: #d4d4d4;
  flex-grow: 1;
}
section#feature h3::before, section#feature h3::after {
  background-color: #fff;
}
.roundbox {
  border-radius: 32px;
}
@media screen and (max-width: 767px) {
  .roundbox {
    border-radius: 16px;
  }
}
.inc_roundbox > * {
  border-radius: 16px;
}
.roundbox, .inc_roundbox > * {
  overflow: hidden;
}
.inc_whitebox_bubble > * {
  border: 1px solid;
  box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 0.18);
}
.li_normal li {
  text-indent: -1em;
  padding-left: 1em;
}
.li_normal li::before {
  content: '・';
}
/*---レスポンシブ対応---*/
@media screen and (max-width: 767px){
 .ipadonly {
 display: none;
}}
@media screen and (min-width: 817px){
 .ipadonly {
 display: none;
}}

@media screen and (min-width: 1304px) {
 .responsivemenu {
 display: none;
}}
span.block {
  display: block;
}
span.PCblock {
  display: block;
}
@media (max-width: 579px) {
  span.PCblock {
    display: inline;
  }
}
span.PC_Lblock {
  display: block;
}
@media (max-width: 994px) {
  span.PC_Lblock {
    display: inline;
  }
}
span.SPblock {
    display: inline;
}
@media (max-width: 579px) {
  span.SPblock {
    display: block;
  }
}
/*---レスポンシブ用クラス---*/
@media (min-width: 995px) { /*↑↑↑995px以上↑↑↑*/
  .without_pc { /*PCだけ除外*/
    display: none;
  }
}
@media (max-width: 579px) { /*↓↓↓579px以下↓↓↓*/
  .without_sp-L { /*SPだけ除外*/
    display: none;
  }
}
@media (max-width: 399px) { /*↓↓↓399px以下↓↓↓*/
  .without_sp { /*SPだけ除外*/
    display: none;
  }
}
@media (max-width: 994px) { /*↓↓↓994px以下↓↓↓*/
  .for_pc-L { /*PCだけ表示*/
    display: none;
  }
}
@media (max-width: 767px) { /*↓↓↓767px以下↓↓↓*/
  .for_pc { /*PCだけ表示*/
    display: none;
  }
}
@media (min-width: 580px) { /*↑↑↑580px以上↑↑↑*/
  .for_sp-L { /*SPだけ表示*/
    display: none;
  }
}
@media (min-width: 400px) { /*↑↑↑400px以上↑↑↑*/
  .for_sp { /*SPだけ表示*/
    display: none;
  }
}
/*----------------------------------------------------------------------------------汎用*/
/*--------------------------------------------------------------------------------------- 
背景
---------------------------------------------------------------------------------------*/
nav {
  background: var(--dark);
}
#feature, .palebox, #example1, #solutions {
  background: var(--pale);
}
.maintenance dl {
  background: var(--point);
}
.number dt {
  background: var(--point);
}
.cta {
  background: url(/assets/image/en/products/vcim/bg_cta.png) no-repeat;
  background-size: cover;
}
.graybox, .description {
  background: var(--gray);
}
.whitebox, .inc_whitebox > *, .inc_whitebox_bubble > * {
  background: #fff;
}
/*----------------------------------------------------------------------------------背景*/
/*--------------------------------------------------------------------------------------- 
メインビジュアル
---------------------------------------------------------------------------------------*/
@media (min-width: 768px) {
  .topBlockMv .inner {
    min-height: 316px;
    box-sizing: border-box;
    background-position: center;
  }
}
@media (max-width: 767px) {
  .JS .topManufacture {
    position: relative;
  }
  .JS .topManufacture p {
    position: absolute;
    bottom: 58px;
    left: 24px;
    font-size: 0.875rem;
  }
  .JS .topManufacture .catch {
    min-height: 241px;
    box-sizing: border-box;
    font-size: 1.25rem;
  }
}
/*----------------------------------------------------------------------メインビジュアル*/
/*--------------------------------------------------------------------------------------- 
メニュー
---------------------------------------------------------------------------------------*/
.for_pc.fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}
#menu {
  height: 60px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.18);
}
#menu .flexbox {
  flex-wrap: nowrap;
  width: 1275px;
}
#menu li {
  height: 60px;
  padding-top: 15px;
  box-sizing: border-box;
  cursor: pointer;
  transition: .3s all;
  width: 255px;
}
#menu li:hover {
  background: #253cbe94;
}
#menu li.current, #menu li:focus {
  background: var(--point);
}
#menu li.current:hover {
  background: var(--point);
}
#menu a {
  border-left: 1px solid #3c4865;
  height: 32px;
  padding: 0 0 0 12px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  position: relative;
  line-height: 15px;
  color: #fff !important;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.96rem;
}
#menu a::after {
  content: '';
  display: block;
  background: url(/assets/image/en/products/vcim/ico_arrow.svg);
  width: 12px;
  height: 8px;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}
@media (min-width: 768px) and (max-width: 1274px) {
  #menu a {
    padding: 0 0 0 12px;
    font-size: 0.8rem;
  }
  #menu a::after {
    right: 8px;
  }
}
#menu li:last-child a {
  border-right: 1px solid #3c4865;
}
#menu small {
  position: absolute;
  top: 0;
}
@media (min-width: 768px) and (max-width: 1274px) {
#menu .flexbox {
    width: 768px;
}
}

/*-------------------------------------------------------------------------------メニュー*/
/*--------------------------------------------------------------------------------------- 
製造ソリューション『VCIM』
---------------------------------------------------------------------------------------*/
/*---導入部分---*/
#vcim {
  padding: 0;
}
@media (min-width: 994px) {
  #vcim article {
    padding: 80px 0;
  }
  #vcim article.description {
    padding-bottom: 40px;
	padding-left: 16px;
    padding-right: 16px;
  }
}
@media screen and (max-width: 767px) {
  #vcim article {
    padding: 24px;
  }
  .description {
    margin-bottom: 16px;
  }
}
.TrademarkTxt {
  margin-top: 50px;
}
/*---こんな困りごとはありませんせんか？---*/
article.problem {
  padding-top: 80px;
}
.problem {
  text-align: center;
}
.problem .inc_whitebox > * {
  max-width: 295px;
}
.problem h2 {
  font-size: 1.5rem;
}
@media screen and (max-width: 578px) {
  section:not(#feature, .news) .problem h2 {
    margin-bottom: 0;
  }
}
.problem h2 strong {
  display: block;
  padding: 8px 8px 4px 8px;
  margin: 0 8px;
  font-size: 2.0625rem;
}
.problem h2 em {
  display: inline-block;
  padding: 8px 8px 4px 8px;
  margin: 0 8px;
  background: #666;
  color: var(--pale) !important;
  font-size: 2.0625rem;
}
.problem .inc_roundbox {
  position: relative;
}
.problem .inc_roundbox::before {
  content: '';
  display: block;
  background: url(/assets/image/en/products/vcim/bg_arrow.png) no-repeat;
  background-position: center;
  width: 100%;
  height: 112px;
  position: absolute;
  bottom: -60px;
}
@media screen and (max-width: 767px) {
.problem .inc_roundbox::before {
    bottom: -80px;
    background-size: 140%;
    background-position: center;
    background-repeat: no-repeat;
}
}
@media (max-width: 579px) {
.problem .inc_roundbox::before {
    bottom: -70px;
    background-size: 166%;
}
}
.problem .inc_roundbox li {
  border: solid #ccc 1px;
}
.problem h3 {
  font-size: 1.5rem;
  margin: 80px 0 40px 0 !important;
  line-height: 1.4;
}
@media screen and (max-width: 767px) {
.problem h3 {
  font-size: 1.24rem;
}
}
.problem strong {
  color: var(--point) !important;
}
.problem h3 strong {
  font-size: 2.0625rem;
}
@media screen and (max-width: 767px) {
.problem h3 strong {
  font-size: 1.8rem;
}
}
/*---課題解決---*/
.problem .inc_whitebox_bubble li {
  max-width: 380px;
  font-size: 1.125rem;
  padding: 16px 0 10px 0;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  .problem .inc_whitebox_bubble li {
    width: 100%;
  }
  #vcim article.problem {
    padding-top: 40px;
    padding-bottom: 56px;
  }
}
/*-------------------------------------------------------------製造ソリューション『VCIM』*/
/*--------------------------------------------------------------------------------------- 
CTA
---------------------------------------------------------------------------------------*/
.cta .whitebox {
  padding: 40px 0;
  position: relative;
  gap: 0;
}
.cta .whitebox::after {
  content: '';
  display: block;
  width: 1px;
  height: 220px;
  background: #ddd;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.cta .whitebox div {
  width: 50%;
  margin: 0 auto;
  box-sizing: border-box;
}
.cta .whitebox h3 {
  text-align: center;
}
@media screen and (max-width: 578px) {
  .cta .whitebox {
    padding-top: 0;
    margin: 0 8px;
  }
  .cta .whitebox::after {
    content: none;
  }
  .cta .whitebox div {
    width: 80%;
  }
  section:not(#vcim).cta h3 {
    margin-top: 40px;
  }
  .cta .whitebox .inquiry {
    border-bottom: 1px solid #ddd;
    ;
    padding-bottom: 40px;
  }
}
a.productsForm {
  width: 80%;
  max-width: 100%;
  border-radius: 0;
  background-color: var(--point);
  margin-bottom: 10px;
  padding: 16px 0;
}
@media screen and (max-width: 767px) {
  a.productsForm {
    width: 100%;
  }
}
.leaflet a.productsForm {
  background-color: var(--black);
}
a:hover.productsForm {
  background-color: #2442ed;
}
.leaflet a:hover.productsForm {
  background-color: #000;
}
.cta p.text {
  width: 84%;
  margin: 0 auto;
}
@media screen and (max-width: 578px) {
  .cta p.text {
    width: 100%;
  }
}
.cta .PlugInBanner {
  padding: 0;
  background: none;
  width: 88%;
  display: block;
  margin: 0 auto;
}
.SP .cta .PlugInBanner {
  display: none;
}
.leaflet a.productsForm span::before {
  background: url(/assets/image/en/products/vcim/ico_pdf.svg) no-repeat 50% 50%;
}
/*----------------------------------------------------------------------------------CTA*/
/*--------------------------------------------------------------------------------------- 
特長
---------------------------------------------------------------------------------------*/
#feature {
  text-align: center;
}
@media (min-width: 768px) {
  #feature article:not(:last-child) {
    padding-bottom: 80px;
  }
}
/*---投資計画に基づいて拡張が可能---*/
/*---現場特有の作業に柔軟に対応---*/
/*---製造現場の自動化・少人化・効率化を実現---*/
/*----------------------------------------------------------------------------------特長*/
/*--------------------------------------------------------------------------------------- 
サービス内容
---------------------------------------------------------------------------------------*/
/*---システム導入までの流れとサービス---*/
.flow_1 .palebox {
  padding: 40px 40px 40px 56px;
  position: relative;
}
@media screen and (max-width: 578px) {
  .flow_1 .palebox {
    padding: 24px;
  }
}
.headnote {
  justify-content: flex-end;
}
.headnote li {
  position: relative;
  font-size: 0.75rem;
}
li.ico_01 {
  margin-right: 80px;
}
.headnote [class*="ico_"]::before {
  content: ':';
  display: inline-block;
  width: 61px;
  height: 21px;
  position: absolute;
  left: -70px;
  top: 0;
  padding-left: 63px;
}
.headnote .ico_01::before {
  background: url(/assets/image/en/products/vcim/ico_arrow_w.svg)no-repeat;
}
.headnote .ico_02::before {
  background: url(/assets/image/en/products/vcim/ico_arrow_b.svg)no-repeat;
  background: url(/assets/image/en/products/vcim/ico_arrow_b.svg)no-repeat;
}
@media screen and (max-width: 578px) {
  .headnote {
    display: block;
    position: absolute;
    right: 8px;
    top: 8px;
  }
  .headnote li {
    margin-right: 0;
    margin-bottom: 4px;
  }
}
.flow_1 .inc-grand_flexbox > * > * {
  justify-content: flex-start;
  align-items: center;
  margin-top: 16px;
  flex-wrap: nowrap;
  gap: 24px;
}
@media screen and (max-width: 578px) {
  .flow_1 .inc-grand_flexbox > * > * {
    flex-wrap: wrap;
    gap: unset;
    margin-top: 40px;
  }
}
.inc-grand_flexbox dd {
  top: -8px;
}
@media screen and (max-width: 578px) {
  .inc-grand_flexbox dd {
    top: 5px;
  }
}
.inc-grand_flexbox li:last-child dd {
  top: 5px;
}
.inc-grand_flexbox dt {
  min-width: 200px;
  text-align: center;
  font-size: 0.875rem;
  margin-top: 15px;	
}
dt .line02 {
	margin-top: 4px !important;
}
dt .line01 {
	margin-top: 17px !important;
}
dt.ico_02 {
  color: #fff;
}
dt.ico_01 {
  color: var(--point);
}
.flow_1 .inc-grand_flexbox > * > * dt {
  height: 68px;
  line-height: 48px !important;
}
.flow_1 .inc-grand_flexbox > * > * .ico_01 {
  background: url(/assets/image/en/products/vcim/ico_arrow_w.svg)no-repeat;
}
.flow_1 .inc-grand_flexbox > * > * .ico_02 {
  background: url(/assets/image/en/products/vcim/ico_arrow_b.svg)no-repeat;
}
.flow_1 dt {
  position: relative;
}
.flow_1 dt::before {
  content: '';
  display: block;
  background: url(/assets/image/en/products/vcim/ico_circle.png);
  width: 34px;
  height: 34px;
  position: absolute;
  top: -20px;
  left: -20px;
  filter: drop-shadow(0 0 5px #0619843d);
}
.flow_1 dt::after {
  content: '1';
  position: absolute;
  top: -26px;
  left: -8px;
  color: var(--black);
}
.flow_1 .inc-grand_flexbox li:nth-child(2) dt::after {
  content: '2';
}
.flow_1 .inc-grand_flexbox li:nth-child(3) dt::after {
  content: '3';
}
.flow_1 .inc-grand_flexbox li:nth-child(4) dt::after {
  content: '4';
}
.flow_1 .inc-grand_flexbox li:nth-child(5) dt::after {
  content: '5';
}
.flow_1 .inc-grand_flexbox li:nth-child(6) dt::after {
  content: '6';
}
.flow_1 .inc-grand_flexbox li:nth-child(7) dt::after {
  content: '7';
}
.flow_1 .inc-grand_flexbox li:nth-child(8) dt::after {
  content: '8';
}
.flow_1 .inc-grand_flexbox li:nth-child(9) dt::after {
  content: '9';
}
/*---保守・運用サービス---*/
.maintenance dt {
  text-align: center;
  font-size: 1rem;
  margin-bottom: 16px;
}
.maintenance dl {
  color: #fff;
  padding: 24px 8px 0;
  position: relative;
  min-height: 260px;
}
.maintenance figure {
  position: absolute;
  right: 16px;
  bottom: 16px;
}
.maintenance .flexbox + ul {
  max-width: 90%;
  width: 810px;
  margin: 56px auto 0;
}
@media screen and (max-width: 578px) {
  .maintenance .flexbox + ul {
    margin-top: 40px;
  }
}
.maintenance .flexbox + ul li:not(:last-child) {
  margin-bottom: 16px;
}
.maintenance .flexbox + ul li::before {
  content: '';
  background: var(--point2);
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 50%;
  margin-right: 8px;
}
.maintenance .flexbox + ul li {
  text-indent: -1.2em;
  padding-left: 1.2em;
}
@media screen and (max-width: 767px) {
  .maintenance .col_3 {
    padding: 0 24px;
  }
}
@media screen and (max-width: 578px) { /*SP用*/
  .maintenance figure {
    max-width: 90px;
  }
}
/*--------------------------------------------------------------------------サービス内容*/
/*--------------------------------------------------------------------------------------- 
システム構成事例
---------------------------------------------------------------------------------------*/
#example1 .flexbox {
  flex-wrap: nowrap;
}
#example1 .flexbox div:first-child figure:not(:last-child) {
  margin-bottom: 30px;
}
#example1 .flexbox div:first-child figure::after {
  content: '';
  width: 74px;
  height: 206px;
  display: inline-block;
  background: url(/assets/image/en/products/vcim/ico_arrow01.png) no-repeat;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
#example1 .flexbox div:first-child figure {
  position: relative;
  margin-right: 56px;
}
@media screen and (max-width: 767px) {
  #example1 .flexbox div:first-child figure::after {
    width: 35px;
    height: 103px;
    background-size: contain;
  }
  #example1 .flexbox div:first-child figure {
    margin-right: 24px;
  }
  #example1 .flexbox div:first-child figure:not(:last-child) {
    margin-bottom: 24px;
  }
}
/*-----------------------------------------------------------------------システム構成事例*/
/*--------------------------------------------------------------------------------------- 
導入実績・事例
---------------------------------------------------------------------------------------*/
.number {
  position: relative;
  margin-bottom: 80px;
  padding-top: 40px;
}
.number footer {
  position: absolute;
  bottom: 0;
  right: 0;
}

body>.where-not h3 {
  font-size: 24px !important;
 }
@media screen and (max-width: 767px) {
  .number footer {
    text-align: center;
    position: unset;
  }
}
section#example2 .number h3 {
  text-align: center;
  margin-bottom: 72px !important;
  font-size: 1.75rem;
  font-weight: normal;
}
@media screen and (max-width: 767px) {
  section#example2 .number h3 {
    margin-bottom: 40px;
  font-size: 1.2rem;
  }
}
.number h3 strong {
  font-size: 2.5rem;
  color: var(--point) !important;
}
.circle dt {
  border-radius: 50%;
  width: 275px;
  height: 275px;
  margin: auto;
  text-align: center;
  color: #fff;
  font-size: 1rem;
  padding-top: 48px;
  box-sizing: border-box;
}
.circle dt p {
  margin-bottom: 16px;
}
.circle dt span {
  display: block;
}
.circle strong {
  color: var(--point3) !important;
  font-size: 1.5rem;
  margin-right: 4px;
}
.circle ul {
  margin: 24px 16px 0 8px !important;
}
@media screen and (max-width: 767px) {
  .circle ul {
    width: 300px;
    max-width: 90%;
    margin: 24px auto 8px;
  }
}
@media screen and (max-width: 767px) {
  .number .col_3 {
    gap: 56px;
  }
}
/*---導入事例---*/
section#example2 h3 {
  margin: 0;
}
.journal h3 {
  text-align: center;
  font-weight: normal;
}
.journal {
  padding: 48px 0 40px;
}
.download {
  margin-top: 40px;
}
.download li {
  max-width: 350px;
  width: 90%;
}
.download li div {
  text-align: center;
  padding-top: 16px;
}
.download li dl {
  text-align: left;
  padding-left: 16px;
  padding-bottom: 16px;
  margin-bottom: 16px;
}
.PC .journal .PlugInBanner {
  text-align: center;
  margin: 24px auto 0;
  display: block;
  background: #f7f7f7;
  max-width: 60%;
  padding: 8px 0;
}
@media screen and (max-width: 578px) {
  .PC .journal .PlugInBanner {
    max-width: 90%;
  }
}
.download dt {
  margin-top: 8px;
}
/*-------------------------------------------------------------------------導入実績・事例*/
/*--------------------------------------------------------------------------------------- 
関連ソリューション
---------------------------------------------------------------------------------------*/
section#solutions h3 {
  font-size: 1.25rem;
  margin: 0 25px 10px;
}
@media screen and (max-width: 579px) {
  section#solutions h3 {
    font-size: 1rem;
    margin: 0;
  }
}
#solutions .LinkUnit {
  margin: 74px 0 0;
}
#solutions .LinkUnit .ImgOnlyStyle {
  width: 40%;
}
#solutions .LinkUnit .Inner {
  width: 60%;
}
#solutions .ImgBoxStyle1 {
  background: #fff;
}
@media screen and (max-width: 579px) {
  #solutions .LinkUnit .ImgOnlyStyle, #solutions .LinkUnit .Inner {
    width: 100%;
  }
}
#solutions .LinkUnit .TextStyle1 {
  font-size: 100%;
  margin: 0 20px 10px;
}
/*------------------------------------------------------------------------------関連ソリューション*/
/*--------------------------------------------------------------------------------------- 
ニュース
---------------------------------------------------------------------------------------*/
section.news {
  padding: 70px 8px 90px;
}
section.news h2 {
  font-size: 1.2rem;
}
.news li {
  padding: 20px 10px 45px 10px;
  position: relative;
  border: 2px solid #E8EAEC;
}
.news time {
  font-size: 12px;
}
.headline {
  margin-bottom: 16px;
  font-size: 0.96rem;
}
@media screen and (max-width: 767px) {
  headline {
    padding: 24px 16px 36px 16px;
  }
}
.news .link_arrow p {
  text-align: right;
  position: absolute;
  bottom: 8px;
  right: 8px;
}
/*------------------------------------------------------------------------------ニュース*/
/*--------------------------------------------------------------------------------------- 
ページトップ
---------------------------------------------------------------------------------------*/
footer.mainfooter {
  margin-top: 20px;
}
@media screen and (max-width: 578px) { /*SP用*/
	footer.mainfooter {
	  margin-right: 18px;
	  }
	
}
/*---------------------------------------------------------------------------ページトップ*/