@charset "utf-8";
html {
  scroll-behavior: smooth;
}
#title div {
  margin-top: 30px;
  text-align: center;
}
#title div span {
  color: #B94B00;
  text-shadow: #FA9628 2px 0 10px;
}
#what-is h2,
#issues-and-solutions h2,
#merit h2,
#function h2,
#process h2,
#faq h2 {
  margin: 100px 0 30px !important;
  height: 90px !important;
  font-size: x-large !important;
  display: flex;
  align-items: center;
  background: linear-gradient(to right, #fff 15%, rgba(160,160,165,0.25));
  border-left: solid 3px #007580;
  padding-left: 5px;
  text-indent: 0;
  word-break: keep-all;
}
#what-is h2::before,
#issues-and-solutions h2::before,
#merit h2::before,
#function h2::before,
#process h2::before,
#faq h2::before {
  content: "";
  width: 3px;
  height: 80px;
  display: inline-block;
  position: relative;
  background-color: transparent;
}
#function h3 {
  margin-top: 50px;
  padding: 16px 10px 12px;
  background-color: rgba(100,175,225,0.55);
  font-size: 18px;
}
#issues-and-solutions dt {
  padding: 10px 10px 6px;
  font-weight: normal;
}
#issues-and-solutions dd {
  padding: 10px 10px 6px;
}
.issue dt {
  background-color: rgba(160,160,165,0.55);
  line-height: 24px;
  border-radius: 0px 16px 0 0;
}
.issue dt span {
  padding: 3px 10px 0px;
  border: solid 1px;
  background-color: #e7e7e8;
}
.issue dd {
  background-color: rgba(160,160,165,0.10);
}
.solution dt {
  background-color: rgba(250,150,40,0.70);
}
.solution dd {
  background-color: rgba(250,150,40,0.25);
  border-radius: 0 0 0 16px;
}
.triangle-p {
  margin: 46px auto -24px;
  text-align: center;
}
.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
  border-top: 50px solid #fde4c8;
  border-bottom: 0;
}
#merit dt {
  margin: 30px auto 16px;
  padding: 10px 10px 6px;
  border: solid 2px #64AFE1;
  font-weight: normal;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center
}
#merit li,
#function li {
  margin-top: 16px;
}
#process .field {
  margin: 30px auto 10px;
  text-align: center;
}
#process .field .customer {
  padding: 12px 0 8px;
  background-color: #50BEBE;
  color: #fff;
  font-size: 20px !important;
}
#process .field .service {
  padding: 12px 0 8px;
  background-color: #0064D2;
  color: #fff;
  font-size: 20px !important;
}
#process dl {
  padding: 3px 10px 10px;
  border-radius: 12px;
  line-height: 17px;
}
#process .flow .customer dl {
  border: solid 5px #50BEBE;
}
#process .flow .service dl {
  border: solid 5px #0064D2;
}
#process .flow .both dl {
  border: solid 5px #AF8CC8;
}
#process .flow .service-opt dl {
  border: dotted 5px #0064D2;
}
#process .flow dt {
  margin-bottom: 6px;
  font-weight: normal;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  word-break: keep-all;
}
#process .flow .customer dt {
  border-bottom: solid 3px #50BEBE;
}
#process .flow .service dt,
#process .flow .service-opt dt {
  border-bottom: solid 3px #0064D2;
}
#process .flow .both dt {
  border-bottom: solid 3px #AF8CC8;
}
#process .flow .customer .triangle {
  border-top: 50px solid #50BEBE;
}
#process .flow .service .triangle,
#process .flow .triangle-opt,
#process .flow .service-opt .triangle {
  border-top: 50px solid #0064D2;
}
#process .flow .both .triangle {
  border-top: 50px solid #AF8CC8;
}
.arrow {
  display: inline-block;
  width: 99px;
  height: 265px;
  background: #50bebe;
  clip-path: polygon(0 81.3%, 29.8% 81.3%, 29.8% 0, 70.2% 0, 70.2% 81.3%, 100% 81.3%, 50% 100%);
}

#what-is figure,
#function .figure {
  margin-top: 30px;
  padding: 10px;
  border: solid 1px #000;
}
.caption {
  margin-top: 10px;
  text-align: center;
  font-size: 14px;
}
.inquiry {
  border: solid thin #A0A0A5; 
  background-color: #f7f7f7; 
  padding: 30px 0;
  margin: 50px 0;
}
.inquiry-text {
  font-size: 20px;
  text-align: center;
  word-break: keep-all;
}
.radiusbtn {
  padding: 10px 50px; 
  border-radius: 50px; 
  font-size: large; 
  word-break: keep-all;
}

.mt20- {
  margin-top: -24px;
}
.mt30 {
  margin-top: 30px;
}
.mb00 {
  margin-bottom: 0;
}
.mb30 {
  margin-bottom: 30px;
}
.mb99 {
  margin-bottom: 100px;
}

@media screen and (max-width: 1199px) {
  .speechBubble_a,
  .speechBubble_b {
    font-size: 15px;
  }
  .position_a {
    margin: 0 auto -100px 20px;
  }
  .position_b {
    margin: -20px 0 auto 120px;
  }
}
@media screen and (max-width: 959px) {
  #process .field .customer,
  #process .flow .customer dl {
    margin-right: -10px;
    font-size: 14px;
    line-height: 15px;
  }
  #process .field .service,
  #process .flow .service dl, 
  #process .flow .service-opt dl {
    margin-left: -10px;
    font-size: 14px;
    line-height: 15px;
  }
  #process .flow .both dl {
    font-size: 14px;
    line-height: 15px;
  }
  .position_c {
    margin: -20px 0 auto 320px;
  }
}
@media screen and (max-width: 767px) {
  .position_c {
    margin: -20px 0 auto 350px;
  }
}
@media screen and (max-width: 600px) {
  .position_c {
    margin: -20px 0 auto 250px;
  }
}
@media screen and (max-width: 470px) {
  #top-image {
    height: 350px;
    margin-bottom: 0;
    padding: 10px;
    background-image: url("../images/idoperation-epm-cloud_index_00_sp.jpg");
    background-size: cover;
    background-position: center;
  }
  .sub-title {
    margin-bottom: 0;
    font-size: 18px;
    line-height: 20px;
  }
  .main-title {
    margin-top: 10px;
    font-size: 24px;
    line-height: 26px;
  }
  #what-is h2,
  #issues-and-solutions h2,
  #merit h2,
  #function h2,
  #process h2,
  #faq h2 {
    font-size: 20px !important;
  }
  .arrow {
    display: inline-block;
    width: 99px;
    height: 350px;
    background: #50bebe;
    clip-path: polygon(0 85.9%, 29.8% 85.9%, 29.8% 0, 70.2% 0, 70.2% 85.9%, 100% 85.9%, 50% 100%);
  }
  .position_c {
    margin: -20px 0 auto 150px;
  }
  .position_e {
    margin: -20px 0 auto 150px; 
}
  .inquiry-text {
    font-size: 18px;
  }
  .radiusbtn {
    padding: 10px 30px; 
    border-radius:36px; 
    ont-size: 24px; 
  }
}


/* inputのチェックボックスを非表示 */
.accordion-hidden {
  display: none;
}

/* 見出しボタン部分 */
.accordion-open {
  display: block;
  padding-right: 40px;
  cursor: pointer;
  margin: 5px 0;
  position: relative;
  border-bottom: solid 2px #0064D2;
  color: #0064D2;
  font-weight: normal;
  font-size: 20px;
}
@media screen and (max-width: 470px) {
  .accordion-open {
    font-size: 17px;
  }
}

/* ＋アイコン */
.accordion-open::before,
.accordion-open::after {
  content: '';
  width: 20px;
  height: 3px;
  background: #A0A0A5;
  position: absolute;
  top: 50%;
  right: 1%;
  transform: translateY(-50%);
}

/* アイコンのー */
.accordion-open::after {
  transform: translateY(-50%) rotate(90deg);
  transition: .7s;
}

/* アコーディオンが開いたらーに */
.accordion-hidden:checked+.accordion-open:after {
  transform: translateY(-50%) rotate(0);
}

/* アコーディオン中身部分 */
.accordion-inner {
  display: block;
  height: 0;
  overflow: hidden;
  padding: 0;
  opacity: 0;
  transition: 0.5s;
  /* 表示速度の設定 */
  
  cursor: pointer;
  font-weight: normal;
  margin-bottom: 20px;
  background-color: rgba(100,175,225,0.25);
}

/* チェックボックスにチェックが入ったら中身部分を表示する */
.accordion-hidden:checked+.accordion-open+.accordion-inner {
  height: auto;
  opacity: 1;
  padding: 10px;
}
/* ↑ここまで共通 */

/* Q&A追加ここから */
.accordion_qa .Q,
.accordion_qa .A {
  position: relative;
}
.accordion_qa .Q::before,
.accordion_qa .A::before {
  display: block;
  position: absolute;
}
.accordion_qa .accordion-open {
  padding-left: 10px;
}
.accordion_qa .accordion-hidden:checked+.accordion-open+.accordion-inner {
  height: auto;
  opacity: 1;
  padding: 10px;
}
/* Q&A追加ここまで */


/* ランサムウェア対策トータルソリューション リンクバナー ここから */
aside a {
  text-decoration: none !important;
}
#banner {
  height: 180px;
  padding: 5px;
  background-image: url("/system/anti-ransomware-solutions/images/anti-ransomware-solutions_banner_pc.jpg");
  background-repeat: no-repeat;
  background-position: right center;
  position: relative;
}
#banner::before,
#banner::after {
  position:absolute;
  display:block;
  box-sizing:border-box;
  width:0;
  height:0;
  content:"";
  opacity:0;
  transition:width 0.7s, height 0.7s, opacity 0.7s;
}
#banner::before {
  top:0;
  left:0;
  border-top:5px solid #FAD737;
  border-left:5px solid #FAD737;
}
#banner::after {
  right:0;
  bottom:0;
  border-right:5px solid #FA9628;
  border-bottom:5px solid #FA9628;
}
#banner:hover::before,
#banner:hover::after {
  width:100%;
  height:100%;
  opacity:1;
}
.banner-title {
  margin-bottom: 5px;
  padding: 8px 20px 5px 10px;
/* 子要素に合わせて親要素の横幅を可変 */
  display: inline-block;
/* 子要素に合わせて親要素の横幅を可変 */
/*  padding: 7px 50px 3px 10px; */
  background: linear-gradient(to right, rgba(0,0,0,0.35) 90%, transparent); 
}
.banner-sub-title {
  font-size: 24px;
  line-height: 24px;
  color: #FAD737;
  text-shadow: #FA9628 2px 0 10px;
  word-break: keep-all;
}
.catchcopy {
  margin: 10px auto 5px;
  color: #fff;
  font-size: 20px;
  line-height: 20px;
  word-break: keep-all;
}
.banner-main-title {
  color: #fff;
  font-size: 28px;
  line-height: 30px;
  font-weight: bold;
  word-break: keep-all;
}
.banner-lower {
  display: flex;
  align-items: center;
}
.banner-circle {
  margin: auto 16px;
  padding-top: 7px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: rgba(80,190,190,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}
.banner-button {
  margin: auto auto auto 30px;
  padding: 7px 0 0;
  width: 160px;
  height: 32px;
  background-color: rgba(255,255,255,0.70);
  border-radius: 5px;
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 959px) {
  #banner {
    height: 190px;
  }
  .banner-sub-title {
    font-size: 18px;
    line-height: 18px;
  }
  .catchcopy {
    font-size: 16px;
    line-height: 18px;
  }
  .banner-main-title {
    font-size: 22px;
    line-height: 24px;
  }
  .banner-button {
    margin: auto;
  }
}
@media screen and (max-width: 600px) {
  #banner {
    height: 190px;
  }
  .banner-button {
    margin: auto;
  }
}
@media screen and (max-width: 470px) {
  #banner {
    height: 250px;
    background-image: url("/system/anti-ransomware-solutions/images/anti-ransomware-solutions_banner_sp.jpg");
  }
  .banner-title {
    margin-bottom: 20px;
    background: linear-gradient(to right, rgba(0,0,0,0.40) 90%, transparent);
  }
  .catchcopy {
    margin: 16px auto 10px;
  }
  .banner-circle {
    margin: auto 3px;
    padding-top: 5px;
    width: 50px;
    height: 50px;
    font-size: 16px;
  }
  .banner-button {
    margin: auto auto auto 6px;
    width: 100px;
    font-size: 15px;
  }
}
/* ランサムウェア対策トータルソリューション リンクバナー ここまで */


/* 主な機能　吹き出し　ここから */
.speechBubble_a {
  position: relative;
  display: inline-block;
  width: 265px;
  padding: 10px 5px 5px 10px;
  border: 3px solid #fa9628;
  border-radius: 12px;
  background-color: #ffffff;
  text-align: left;
  font-size: 15px;
  font-weight: 100;
  line-height: 1.25;
}
.speechBubble_a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20%;
  border-style: solid;
  border-width: 145px 0 0 24px;
  border-color: #fa9628 transparent transparent;
  translate: -50% 100%;
}
.speechBubble_a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20%;
  border-style: solid;
  border-width: 108.5px 0 0 18px;
  border-color: #ffffff transparent transparent;
  translate: -50% 100%;
}
.position_a {
  margin: 0 auto -5px 84px;  
}
@media screen and (max-width: 1199px) {
  .speechBubble_a::before {
    border-width: 120px 0 0 24px;
  }
  .speechBubble_a::after {
    border-width: 89.7px 0 0 17.9px;
  }
  .position_a {
    margin: 0 auto -100px 65px;  
  }
}
@media screen and (max-width: 959px) {
  .speechBubble_a::before {
    border-width: 85px 0 0 24px;
  }
  .speechBubble_a::after {
    border-width: 63.3px 0 0 17.9px;
  }
  .position_a {
    margin: 0 auto -100px 35px;  
  }
}
@media screen and (max-width: 470px) {
  .speechBubble_a::before {
    border-width: 55px 0 0 24px;
  }
  .speechBubble_a::after {
    border-width: 40.6px 0 0 17.7px;
  }
  .position_a {
    margin: 0 auto -100px 5px;  
  }
}
.speechBubble_b {
  position: relative;
  display: inline-block;
  width: 300px;
  padding: 10px 5px 5px 10px;
  border: 3px solid #fa9628;
  border-radius: 12px;
  background-color: #ffffff;
  text-align: left;
  font-size: 15px;
  font-weight: 100;
  line-height: 1.25;
  color: #000000;
}
.speechBubble_b::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  border-style: solid;
  border-width: 0 16px 16px 0;
  border-color: transparent transparent #fa9628;
  translate: -50% -100%;
  transform: skew(-10deg);
  transform-origin: bottom;
}
.speechBubble_b::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  border-style: solid;
  border-width: 0 8.8px 8.8px 0;
  border-color: transparent transparent #ffffff;
  translate: calc(-50% - 0.6px) -100%;
  transform: skew(-10deg);
  transform-origin: bottom;
}
.speechBubble_c {
  position: relative;
  display: inline-block;
  width: 285px;
  padding: 10px 5px 5px 10px;
  border: 3px solid #fa9628;
  border-radius: 12px;
  background-color: #ffffff;
  text-align: left;
  font-size: 15px;
  font-weight: 100;
  line-height: 1.25;
  color: #000000;
}
.speechBubble_c::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20%;
  border-style: solid;
  border-width: 16px 0 0 16px;
  border-color: #fa9628 transparent transparent;
  translate: -50% 100%;
  transform: skew(-10deg);
  transform-origin: top;
}
.speechBubble_c::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20%;
  border-style: solid;
  border-width: 8.8px 0 0 8.8px;
  border-color: #ffffff transparent transparent;
  translate: calc(-50% + 0.6px) 100%;
  transform: skew(-10deg);
  transform-origin: top;
}
.speechBubble_d {
  position: relative;
  display: inline-block;
  width: 250px;
/*  margin-top: 70px; */
  padding: 10px 9px;
  border: 3px solid #fa9628;
  border-radius: 12px;
  background-color: #ffffff;
  text-align: left;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.25;
  color: #000000;
}
.speechBubble_d::before {
  content: "";
  position: absolute;
  top: 0;
  left: 60%;
  border-style: solid;
  border-width: 0 0 70px 24px;
  border-color: transparent transparent #fa9628;
  translate: -50% -100%;
  transform: skew(-10deg);
  transform-origin: bottom;
}
.speechBubble_d::after {
  content: "";
  position: absolute;
  top: 0;
  left: 60%;
  border-style: solid;
  border-width: 0 0 52px 17.8px;
  border-color: transparent transparent #ffffff;
  translate: calc(-50% + 0.1px) -100%;
  transform: skew(-10deg);
  transform-origin: bottom;
}
.speechBubble_e {
  position: relative;
  display: inline-block;
  width: 310px;
  margin-bottom: 45px;
  padding: 10px 9px;
  border: 3px solid #fa9628;
  border-radius: 12px;
  background-color: #ffffff;
  text-align: left;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.25;
  color: #000000;
}
.speechBubble_e::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 45%;
  border-style: solid;
  border-width: 45px 0 0 16px;
  border-color: #fa9628 transparent transparent;
  translate: -50% 100%;
  transform: skew(10deg);
  transform-origin: top;
}
.speechBubble_e::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 45%;
  border-style: solid;
  border-width: 27.6px 0 0 9.8px;
  border-color: #ffffff transparent transparent;
  translate: calc(-50% + 0.1px) 100%;
  transform: skew(10deg);
  transform-origin: top;
}
@media screen and (max-width: 1199px) {
  .speechBubble_e::before {
    left: 25%;
    border-width: 30px 0 0 16px;
    transform-origin: top;
  }
  .speechBubble_e::after {
    left: 25%;
    border-width: 18px 0 0 9.6px;
    translate: calc(-50% + 0.2px) 100%;
    transform: skew(10deg);
    transform-origin: top;
  }
}
@media screen and (max-width: 470px) {
  .speechBubble_e::before {
    left: 20%;
    border-width: 16px 16px 0 0;
  }
  .speechBubble_e::after {
    left: 20%;
    border-width: 8.8px 8.8px 0 0;
  }
}
.speechBubble_f {
  position: relative;
  display: inline-block;
  width: 340px;
  margin-top: 185px;
  padding: 10px 9px;
  border: 3px solid #fa9628;
  border-radius: 12px;
  background-color: #ffffff;
  text-align: left;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.25;
  color: #000000;
}
.speechBubble_f::before {
  content: "";
  position: absolute;
  top: 0;
  left: 40%;
  border-style: solid;
  border-width: 0 12px 185px 12px;
  border-color: transparent transparent #fa9628;
  translate: -50% -100%;
  transform: skew(10deg);
  transform-origin: bottom;
}
.speechBubble_f::after {
  content: "";
  position: absolute;
  top: 0;
  left: 40%;
  border-style: solid;
  border-width: 0 9px 138.7px 9px;
  border-color: transparent transparent #ffffff;
  translate: -50% -100%;
  transform: skew(10deg);
  transform-origin: bottom;
}
@media screen and (max-width: 1199px) {
  .speechBubble_f::before {
    border-width: 0 24px 130px 0;
  }
  .speechBubble_f::after {
    border-width: 0 17.9px 97.2px 0;
  }
}
@media screen and (max-width: 430px) {
  .speechBubble_f::before {
    left: 40%;
    border-width: 0 12px 70px 12px;
  }
  .speechBubble_f::after {
    left: 40%;
    border-width: 0 9px 52.2px 9px;
  }
}


.speechBubble_g {
  position: relative;
  display: inline-block;
  width: 300px;
  padding: 10px 5px 5px 10px;
  border: 3px solid #fa9628;
  border-radius: 12px;
  background-color: #ffffff;
  text-align: left;
  font-size: 15px;
  font-weight: 100;
  line-height: 1.25;
  color: #000000;
}
.speechBubble_g::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  border-style: solid;
  border-width: 0 16px 16px 0;
  border-color: transparent transparent #fa9628;
  translate: -50% -100%;
  transform: skew(-10deg);
  transform-origin: bottom;
}
.speechBubble_g::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  border-style: solid;
  border-width: 0 8.8px 8.8px 0;
  border-color: transparent transparent #ffffff;
  translate: calc(-50% - 0.6px) -100%;
  transform: skew(-10deg);
  transform-origin: bottom;
}


.position_b {
  margin: -50px auto auto 380px;
}
.position_c {
  margin: 0 auto -5px 110px;  
}
.position_d {
  margin: -28px auto auto 350px;  
}
.position_e {
  margin: 0 auto -5px 0;
}
.position_f {
  margin: -45px auto auto 210px;
}
.position_g {
  margin: -30px auto auto 250px;  
}
@media screen and (max-width: 1199px) {
  .position_f {
    margin: -45px auto auto 160px;
  }
}
@media screen and (max-width: 959px) {
  .position_b {
    margin: -50px auto auto 230px;
  }
  .position_d {
    margin: -600px auto auto 280px;
  }
  .position_f {
    margin: -45px auto auto 90px;
  }
}
@media screen and (max-width: 767px) {
  .position_b {
    margin: -60px auto auto 210px;
  }
  .position_d {
    margin: -600px auto auto 315px;
  }
}
@media screen and (max-width: 600px) {
  .position_b {
    margin: -60px auto auto 150px;
  }
  .position_d {
    margin: -60px auto auto 200px;
  }
  .position_f {
    margin: -45px auto auto 110px;
  }
}
@media screen and (max-width: 470px) {
  .position_b {
    margin: -20px auto auto 40px;
  }
  .position_c {
    margin: 0 auto 0px 30px;
  }
  .position_d {
    margin: -20px auto auto 90px;
  }
  .position_f {
    margin: -20px auto auto 0px;
  }
  .position_g {
    margin: -20px auto auto 0px;
  }
}
/* 主な機能　吹き出し　ここまで */