@charset "utf-8";


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

#seals .concept{
display:flex;
justify-content:space-between;
align-items :stretch;
margin-top:1em;
}
#seals .concept .concept-box{
width:30%;
}
#seals .concept .concept-box .num{
background:#000080;
color:#FFF;
text-align:center;
padding:10px;
width:100%;
}
#seals .concept .concept-box .title{
background:#9acefc;
color:#333;
text-align:center;
padding:10px;
width:100%;
height:7em;
display: flex;
justify-content: center;
align-items: center;
}
#seals .concept .concept-images{
width:68%;
text-align:center;
}
#seals .concept .concept-images p{
color:#000080;
}
#seals .concept .concept-images .arrow_01{
	width:100%;
	height:2px;
	background-color:#9acefc;
	position:relative;
	margin-top:9px;
}
#seals .concept .concept-images .arrow_01:after {
	content:'';
	display:inline-block;
	position:absolute;
	top:-7px;
	right:-8px;
	border:8px solid transparent;
	border-left:8px solid #9acefc;
}
#seals .concept .concept-images .arrow_01 div {
	position:absolute;
	left:0;
	right:0;
	top:-8px;
	margin:auto;
	width:9em;
	text-align:center;
	background-color:white;
	font-weight:bold;
	color:#333;
}


#seals .concept .concept-images .arrow_02{
	width:99.99%;
	height:4px;
	background-color:#f36464;
	position:relative;
	margin-top:9px;
}
#seals .concept .concept-images .arrow_02:before {
	content:'';
	display:inline-block;
	position:absolute;
	top:-6px;
	left:-10px;
	border:8px solid transparent;
	border-right:8px solid #f36464;
}
#seals .concept .concept-images .arrow_02:after {
	content:'';
	display:inline-block;
	position:absolute;
	top:-6px;
	right:-10px;
	border:8px solid transparent;
	border-left:8px solid #f36464;
}


#seals .concept .concept-images .arrow{
     position:relative;
     height:14px;
     width:50px;
     background-color:#f36464;
     display:inline-block;
     margin-top:1em;
     }
#seals .concept .concept-images .arrow::after {
     position:absolute;
     content:"";
     border:solid 14px transparent;
     border-left:solid 14px #f36464;
     top:-7px;
     left:50px;
}
#seals .concept .concept-images .arrow + p{
     display:inline;
     margin:1em 0 0 1em;
     }

/* フロー */
.concept .concept-images .flow {
    margin: 1em 0 0 0;
    width: 95%;
}
/* clearfix */
#seals .concept .concept-images .flow:after {
    height: 0;
    visibility: hidden;
    content: ".";
    display: block;
    clear: both;
}
#seals .concept .concept-images .flow .box {
    padding-top: 15px; /* テキストの位置調整 */
    width: 20%; /* ウィンドウの幅が広くなった時のために％で指定 */
   height: 50px;
    background: #9acefc; /* １番目のボックスの色指定 */
    float: left; /* 横並び */
    position: relative;
    font-weight: bold; /* テキストの指定 */
    color:#333;
    line-height: 1.4; /* テキストの指定 */
}
#seals .concept .concept-images .flow .box02,
#seals .concept .concept-images .flow .box04{ background: #f39800; } /* ２番目のボックスの色指定*/
#seals .concept .concept-images .flow .box03,
#seals .concept .concept-images .flow .box05{ background: #9acefc; } /* ３番目のボックスの色指定*/
/* ボックスの左側に三角形を作る */
#seals .concept .concept-images .flow .box:before {
    border-left: 20px solid #FFF; /* １番目の三角形は背景色と同じ色を指定 */
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    content: "";
    position: absolute;
    left: 0; /* ボックスの左に合わせて三角形を作る */
    top: 0;
}
#seals .concept .concept-images .flow .box02:before,
#seals .concept .concept-images .flow .box04:before { border-left-color: #9acefc; } /* ２番目の三角形は１番目のボックスと同じ色を指定 */
#seals .concept .concept-images .flow .box03:before,
#seals .concept .concept-images .flow .box05:before { border-left-color: #f39800; } /* ３番目の三角形は２番目のボックスと同じ色を指定 */
 { border-left-color: #78E4FE; } /* ４番目の三角形は３番目のボックスと同じ色を指定 */
/* 最後のボックスにだけ、右側に付ける三角形を作成する */
#seals .concept .concept-images .flow .box05:after {
    border-left: 20px solid #9acefc; /* 最後の三角形は最後のボックスと同じ色を指定 */
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    content: "";
    position: absolute;
    right: -20px; /* 三角形の幅の分だけ右にずらす */
    top: 0;
}
#seals .concept .concept-images .flow .box span {
    padding-left: 20px; /* テキストの位置調整 */
}
#seals .concept .concept-images .concept1{
border:none;
padding:0;
margin:-1em 0 0 0;
width:100%;
}
#seals .concept .concept-images .concept1 th{
background:#9acefc;
}
#seals .concept .concept-images .concept1 th.bg_orange{
background:#f39800;
}
#seals .concept .concept-images .concept1 td{
}
@media screen and (max-width:767px) and (min-width:1px) {
#seals .concept .concept-images .concept1 td{
border:1px solid #9acefc;
}
#seals .concept .concept-box .title{
height:10em;
}
#seals .concept .concept-images .concept1{
border:1px solid #9acefc;
}
#seals .concept .concept-images .concept1 th,
#seals .concept .concept-images .concept1 td{
font-size:11px;
}
#seals .concept .concept-images .flow .box{
font-size:12px;
}
#seals .concept .concept-images .flow .box span{
    padding: 0;
    margin: -5px 0 -20px 15px;
    display: block;
}
#seals .concept .concept-images .arrow{
     height:8px;
     width:20px;
     margin-top:1em;
     }
#seals .concept .concept-images .arrow::after {
     border:solid 8px transparent;
     border-left:solid 8px #f36464;
     top:-4px;
     left:20px;
}
#seals .concept .concept-images .arrow + p{
     margin:0;
     }

}