@charset "utf-8";


/*
*	Title: SCSK サービス詳細用
*	URI: 
*	Last Modified: 
*	Description: メインカラム（サービス詳細内容）
*/

.detailLink a {
width: 100px;
height: 25px;
display: block;
overflow: hidden;
text-indent: -1000em;
background: url(../img/bt_pro_shousai.gif) no-repeat left top;
}

.detailLink a:hover {
background: url(../img/bt_pro_shousai02.gif) no-repeat left top;
text-indent: -1000em;
}

.detailLink {
    width: 100px;
}

.flx-direction--reverse{
flex-direction: row-reverse;
}

.title-border-with-arrow {
    padding-bottom: 21px;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 28px;
    color: #0da5b3;
    text-align: center;
    background: url(../img/border-bottom-with-arrow.png) no-repeat 50% 100%;
}
.title-dark-blue {
    margin: 0 0 13px;
    font-size: 28px;
    font-weight: normal;
    line-height: 1.3;
    text-align: center;
    color: #041e52;
}
.arrow-1 {
width: 0;
border: solid 50px transparent;
border-top-color: #4472C4;
border-left: 375px solid transparent;
border-right: 375px solid transparent;
border-bottom: 0;
display: inline-block;
}
ul.link-list-dot.checked>li:before {
    content: "\f00c" !important;
    font-size: 100%;
}
.height-67{
height:67px;
}
.height-210{
height:210px;
}
.height-300{
height:300px;
}
div.flex-table .ft-th{
justify-content:center;
}
.bd-tr-radius{
border-top-right-radius:50px 50px;
}
.bd-bl-radius{
border-bottom-left-radius:50px 50px;
}
@media screen and (max-width:767px) and (min-width:1px) {
.arrow-1 {
border: solid 30px transparent;
border-top-color: #4472C4;
border-left: 120px solid transparent;
border-right: 120px solid transparent;
border-bottom: 0;
}
.sp-font15{
font-size:15px!important;
}
.height-67,
.height-210,
.height-300{
height:auto;
}
}

/*
2024/09/10
***********************************************/
.grid-container {
display: grid;
grid-template-columns: 240px 240px 240px 240px;
grid-template-rows: auto;
row-gap: 10px;
}
.grid-container .item-01{
grid-row: 1 / 2;
grid-column: 1 / 2;
}
.grid-container .item-02{
grid-row: 1 / 2;
grid-column: 2 / 3;
}
.grid-container .item-03{
grid-row: 1 / 2;
grid-column: 3 / 4;
}
.grid-container .item-04{
grid-row: 1 / 2;
grid-column: 4 / 5;
}
.grid-container .item-05{
grid-row: 2 / 3;
grid-column: 1 / 2;
}
.grid-container .item-06{
grid-row: 3 / 4;
grid-column: 1 / 3;
}
.grid-container .item-07{
grid-row: 4 / 5;
grid-column: 2 / 4;
}
.grid-container .item-08{
grid-row: 5 / 6;
grid-column: 4 / 5;
}
.arrow-box {
margin: 0;
padding: 5px 10px;
//width: 225px;
height: 50px;
position: relative;
color:#FFF
}
.arrow-box span {
font-size: 16px;
line-height: 40px;
text-align: center;
display: block;
color: #FFF;
font-weight:bold;
}

.arrow-box.box-01{background: #9EADD8;}
.arrow-box.box-01:after {
border-left: 15px solid #9EADD8;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
content: "";
position: absolute;
right: -15px;
top: 0;
}

.arrow-box.box-02{background: #7C94CD;}
.arrow-box.box-02:after {
border-left: 15px solid #7C94CD;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
content: "";
position: absolute;
right: -15px;
top: 0;
}

.arrow-box.box-03{background: #587BC3;}
.arrow-box.box-03:after {
border-left: 15px solid #587BC3;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
content: "";
position: absolute;
right: -15px;
top: 0;
}
.arrow-box.box-04{background: #3D67B1;}
.arrow-box.box-04:after {
border-left: 15px solid #3D67B1;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
content: "";
position: absolute;
right: -15px;
top: 0;
}
.bd-color-blue{border-color:#8FAADC;}
.bd-radius-10{border-radius:10px;}
.color-blue{color:#0070C0;}
.font18px{font-size:18px;}
.font20px{font-size:20px;}
.height44px{height:44px;}
.height85px{height:85px;}
.height100per{height:100%;}

/*
202411/21
-------------------------------------------------*/
.speechBubble {
  position: relative;
  display: inline-block;
  width: 900px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom: 20px;
  padding: 20px;
  border: 2px solid #08a3b1;
  border-radius: 20px;
  background-color: #ffffff;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: #000000;
  filter:drop-shadow(5px 5px 2px #a2cacd);
}

.speechBubble::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 20px 10px 0 10px;
  border-color: #08a3b1 transparent transparent;
  translate: -50% 100%;
}

.speechBubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 15.5px 7.8px 0 7.8px;
  border-color: #ffffff transparent transparent;
  translate: -50% 100%;
}
.stepBubble {
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 20px;
  text-align: center;
  font-weight: 900;
  line-height: 1.5;
}

.stepBubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 20px 10px 0 10px;
  translate: -50% 100%;
}

.step-text{
font-family:Arial Black, "san-serif";
}
.stepBubble.step1::after{
border-color: #EEF7FD transparent transparent;
}
.stepBubble.step2::after{
border-color: #DEF0FA transparent transparent;
}
.stepBubble.step3::after{
border-color: #BFE4F5 transparent transparent;
}
.stepBubble.step4::after{
border-color: #91D1ED transparent transparent;
}

.arrow{
position:relative;
display: block;
width: 30px;
height: 30px;
}
.arrow-bottom{
border:3px solid;
border-color:transparent #0aa4b2 #0aa4b2 transparent;
width:30px;
height:30px;
transform:rotate(45deg);
position:absolute;
top:-15px;
left:0;
}

.copilot-service{
width:270px;
height:270px;
background:#fbe3d6;
border-radius:50%;
box-shadow: -10px 10px 5px 0px rgba(230, 185, 161, 1);
margin-left: auto;
margin-right: 0;
padding:30px 20px 20px 20px;
}

.copilot-usecase{
position:relative;
width:960px;
border:3px dotted #106287;
padding:20px;
margin:20px 0 0 20px;
}
.copilot-usecase .case{
width:100px;
padding:10px;
background:#106287;
color:#FFF;
text-align:center;
font-weight:bold;
font-size:18px;
transform:rotate(-10deg);
position:absolute;
top:-20px;
left:-10px;
box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.4);
}

.bd-radius--20{border-radius:20px;}
.bd-bottom--1{border-bottom:1px solid #000}
.bd-bottom-dotted-blue{border-bottom:3px dotted #43A2CA;}
.bd-bottom-dotted-red{border-bottom:3px dotted #F98184;}
.bg-blue10{background:#215F9A;}
.bg-blue09{background:#F2F7FC;}
.bg-blue08{background:#0070C0;}
.bg-blue07{background:#91D1ED;}
.bg-blue06{background:#BFE4F5;}
.bg-blue05{background:#DEF0FA;}
.bg-blue04{background:#EEF7FD;}
.col-blue04{color:#4E95D8!important;}
.col-blue05{color:#498DCE!important;}
.col-blue06{color:#3B78B2!important;}
.col-blue07{color:#22517D!important;}
.height55{height:55px;}
.height100{height:100px;}
.height140{height:140px;}
.height220{height:220px;}
.p-relative{position:relative;}
.p-absolute{
position:absolute;
top:0;
left:0;
}
.vertical--rl {writing-mode: vertical-rl;}
.dtl-mk-blue {
    background: linear-gradient(transparent 50%, #D7EEF9 0);
}

.flx-ai--center{align-items:center;}
.flx-wp--nowrap{flex-wrap:nowrap;}
.box-shadow{box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.4);}
.scroll{width:900px!important;}

@media screen and (max-width:767px) and (min-width:1px) {
.speechBubble{
width:100%;
}

.copilot-service{
margin-left:auto;
margin-right:auto;
}
.copilot-usecase{
width:calc(100% - 20px)!important;
}

.sp-img-rotate--90{transform:rotate(90deg);}

.height55,
.height100,
.height140,
.height220{height:auto;}

.sp-vertical--tb {writing-mode: vertical-tb;}

.flx-sp-ai--start{align-items:start;}
.flx-sp-wp--nowrap{flex-wrap:nowrap;}
.scroll{width:calc(100% - 60px)!important;}

}