@charset "utf-8";


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


.top-img{
position:relative;
width:100%;
height:246px;
background:#000;
}
.top-img img{
position:absolute;
top:0;
right:0;
}
.top-img .img-text{
color: #FFF;
font-size: 30px;
font-weight: bold;
position: absolute;
top: 50%;
left: 50px;
transform: translateY(-50%);
line-height:120%;
}
.top-img .img-text.text-02{
color:#FF0000;
font-family:"Arial", sans-serif;
font-weight:900;
top: 70%;
font-size:40px;
}
.flx-ai--end{
align-items:flex-end;
}
.flx-jc--center{
justify-content:center;
}
ul.list-2column li:nth-child(2n+1) {
    width: 20%;
}
ul.list-2column li:nth-child(2n) {
    width: 80%;
}
.indent0{
text-indent:0;
padding-left:0;
}
.sigmasoft-h3-title{
font-size:16px;
font-weight:bold;
display:flex;
align-items:flex-end;
position:relative;
}
.sigmasoft-h3-title:after{
content: "";
background-color: #333; /* 線色 */
border-radius: 5px; /* 線幅の半分 */
height: 10px; /* 線幅 */
position:absolute;
bottom:5px;
left:0;
z-index:-1;
width:100%;
}
ul.dl_material li span.download-img {
    display: table-cell;
    vertical-align: middle;
    width: 140px;
    padding: 10px 40px;
}
ul.dl_material li span.download-text {
    display: table-cell;
    vertical-align: middle;
    height: 100%;
    width: calc(100% - 140px);
    font-weight: bold;
    font-size: 120%!important;
}

/*サブメニュー　グレーアウト*/
.submenu ul.pagelinks-02-list>li.disabled a{
color:#999;
cursor:default;
}
.submenu ul.pagelinks-02-list>li.disabled a:hover{
background-color: #324455!important;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
color:#999!important;
text-decoration:none!important;
}
/*//サブメニュー　グレーアウト//*/

@media screen and (max-width:767px) and (min-width:1px) {
.top-img{
height:100px;
}
.top-img .img-text{
font-size: 17px;
left: 0;
top:60px;
width:100%;
text-align:center;
text-shadow: 0px 0px 10px rgba(0,0,0,1);
}
.top-img .img-text.text-02{
font-size:20px;
text-shadow: none;
}
.sp-flx-reverse{
flex-direction:column-reverse;
}
ul.list-2column li:nth-child(2n+1) {
    width: 35%;
}
ul.list-2column li:nth-child(2n) {
    width: 60%;
}
.sigmasoft-h3-title:after{
content: "";
width:100%;
}
}

iframe{
width:100%;
aspect-ratio:16 / 9;
}
.mv_contents {
width: 100%;
text-align: center;
margin: auto;
padding: 4% 4% 1% 4%;
}
.pricesandlicenses-box1{
cursor: pointer;
flex: 1 1 auto;
background: no-repeat center / 80%, none;
border-width: 8px;
border-style: solid;
border-image-slice: 1;
border-image-source: linear-gradient(90deg, rgba(230, 51, 42, 1) 10%, rgba(252, 214, 31, 1) 90%);
padding:10px 20px 20px 20px;
}
.pricesandlicenses-box2{
cursor: pointer;
flex: 1 1 auto;
background: no-repeat center / 80%, none;
border-width: 8px;
border-style: solid;
border-image-slice: 1;
border-image-source: linear-gradient(90deg, rgba(252, 214, 31, 1) 10%, rgba(149, 193, 30, 1) 90%);
padding:10px 20px 20px 20px;
}
.pricesandlicenses-box3{
cursor: pointer;
flex: 1 1 auto;
background: none;
border-width: 8px;
border-style: solid;
border-image-slice: 1;
border-image-source: linear-gradient(90deg, rgba(149, 193, 30, 1) 10%, rgba(4, 141, 56, 1) 90%);
padding:10px 20px 20px 20px;
}
.pricesandlicenses-box4{
cursor: pointer;
flex: 1 1 auto;
background: no-repeat center / 80%, none;
border-width: 8px;
border-style: solid;
border-image-slice: 1;
border-image-source: linear-gradient(90deg, rgba(4, 141, 56, 1) 10%, rgba(3, 161, 154, 1) 90%);
padding:10px 20px 20px 20px;
}
.mLauto{
margin-left:auto;
}
a.bb-gray{
    background-color: #999 !important;
    border: 1px solid #999 !important;
}
a.bb-gray:hover{
   color:#FFF!important;
   text-decoration:none!important;
   cursor:default;
}
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.top-lineup {
width: 300px;
border-top: 5px solid #1A2792;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
margin-bottom: 1em;
}

.top-lineup:hover {
border-top: 5px solid #1A2792;
border-left:1px solid #1A2792;
border-right:1px solid #1A2792;
border-bottom:1px solid #1A2792;
}

.top-lineup a {
display: block;
height: 100%;

color: #000 !important;
}

.top-lineup a:hover {
background: #1A2792 !important;
color: #FFF !important;
text-decoration: none !important;
}

.top-lineup a span.lineup-text1 {
display: block;
color: #000;
font-weight: bold; /* テキストを太字にする */
position: relative;
padding-bottom: 5px;
padding: 10px;
}

.top-lineup a:hover span.lineup-text1 {
color: #FFF !important;
}

.top-lineup a span.lineup-text1:after {
font-family: "Font Awesome 5 Free";
content: "\f105";
font-weight: 900 !important;
position: absolute;
top: 100%;
right: 0;
margin-top: -33px;
color: #666;

width: 20px;
height: 20px;

}

.top-lineup a:hover span.lineup-text1:after {
background: #1A2792 !important;
color: #FFF;
}
.top-lineup a img {
width: 298px;
height: 170px;
object-fit: cover;
}
a.bb-bluegray {
    background-color: #106287 !important;
    border: 1px solid #106287 !important;
    padding: .5em
}

a.bb-bluegray.btn-rev {
    background-color: #fff !important;
    color: #106287 !important
}

a.bb-bluegray.btn-rev:hover {
    background-color: #106287 !important;
    color: #fff !important
}

a.bb-bluegray:hover {
    color: #106287 !important;
    background-color: #fff !important
}

.d-ml--auto {
    margin-left: auto
}

.txt-indent-0 {
    text-indent: 0 !important;
    padding-left: 0 !important
}


.d-bd-radius--30 {
    border-radius: 30px !important;
}

/* =================================================
   共通パーツ（解決カード・FAQ・汎用クラス）
   ================================================= */
.solution-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    max-width: 980px;
    width: 100%;
    margin: 2em auto;
}

.solution-card {
    width: 310px;
    background: #f5fafd;
    border-radius: 8px;
    padding: 20px 16px 16px 16px;
    position: relative;
    border: 1px solid #e2f0fa;
    box-shadow: 0 1px 4px rgba(0, 80, 130, .1);
    box-sizing: border-box;
}

.solution-badge {
    position: absolute;
    left: 16px;
    top: 10px;
    background: #2196f3;
    color: #fff;
    font-size: 1em;
    font-weight: bold;
    padding: 3px 16px 3px 8px;
    border-radius: 6px 16px 16px 0;
    z-index: 2;
    letter-spacing: .05em;
    box-shadow: 0 2px 4px rgba(0, 80, 130, .08);
}

.solution-card-title {
    color: #1565c0;
    font-weight: bold;
    font-size: 1.08em;
    margin-left: 0;
    margin-top: 34px;
    margin-bottom: 8px;
}

.solution-card-body {
    color: #222;
    font-size: 1em;
    line-height: 1.7;
}

/* FAQ・アコーディオン */
ul.faq>li { padding: .5em .5em .5em 5em; border-bottom: 1px solid #ccc; }
ul.faq>li:nth-child(2n) { margin-bottom: 2em; }
ul.faq li span.text { display: table-cell; vertical-align: middle; padding-top: .7em; font-size: 100%; }
ul.faq li span.mark-A, ul.faq li span.mark-Q { display: table-cell; vertical-align: top; font-size: 190%; font-weight: bold; }
ul.faq li span.mark-A { color: crimson !important; }
ul.faq li span.mark-Q { color: #007aff !important; }
.acMenu dt li { cursor: pointer; }

/* 汎用クラス */
.d-bd--blue01 { border: 1px solid #005fab !important; }
.d-bd-radius--5 { border-radius: 5px !important; }
.d-h--210 { height: 210px; }
.box-Line1 { border: 1px solid #f3f3f3; display: flex; align-items: center; justify-content: center; }

/* =================================================
   上段：お悩みセクション（画像拡大・横並び・高さ揃え）
   ================================================= */

/* 3つのボックスを強制的に横並びにする */
.ap-problem-flex-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 20px !important;
    margin: 2em auto 3em !important;
    max-width: 1000px !important;
    align-items: stretch !important; /* 青枠の高さを自動で揃える */
}

/* 各ボックスの幅設定 */
.ap-problem-box {
    flex: 1 !important;
    max-width: 320px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 画像エリア：210pxの高さで固定して揃える */
.ap-img-wrapper {
    height: 210px !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 15px !important;
}

/* 画像自体のサイズ：大きく表示 */
.ap-img-wrapper img {
    max-width: 100% !important;
    max-height: 200px !important; /* 以前の120pxから拡大 */
    width: auto !important;
    height: auto !important;
}

/* テキスト青枠部分（中身の量に関わらず高さを揃える） */
.ap-problem-box-inner {
    width: 100% !important;
    background: #fff !important;
    padding: 20px 15px !important;
    flex-grow: 1 !important; /* これで高さが揃います */
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

.ap-problem-box-inner ul {
    margin: 0 !important;
    padding-left: 1.2em !important;
    text-align: left !important;
}

.ap-problem-box-inner ul li {
    font-size: 14px !important;
    line-height: 1.6 !important;
    list-style-type: disc !important;
    color: #333 !important;
}

/* =================================================
   スマホ対応（SP）
   ================================================= */
@media screen and (max-width: 767px) {
    /* お悩みエリアを縦並びに戻す */
    .ap-problem-flex-row {
        flex-direction: column !important;
        align-items: center !important;
    }
    .ap-problem-box {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 30px !important;
    }
    .ap-img-wrapper {
        height: auto !important;
    }
    .ap-img-wrapper img {
        max-height: 180px !important;
    }
    /* 解決カードの幅調整 */
    .solution-card {
        width: 100% !important;
    }
}