@charset "utf-8";


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

.flx-direction--r_reverse{
flex-direction:row-reverse;
}
.flx-wrap--wrap{
flex-wrap:wrap;
}
.arwList li.no-link{
background-image:none;
}

#main_contents2 .ttl-List li{
    width: 980px;
}
.ttl-List li.narrow {
    min-height: 4em;
    height: 4em;
}

@media screen and (max-width:767px) and (min-width:1px) {
#main_contents2 .ttl-List li{
    width: 100%;
}
}
/* --- ここから BankSaviorページ改修用デザイン --- */

/* 1. 大見出し：左に黒い棒 ＋ 20pxの隙間を空けて薄紫の下線 */
.h-ttl-bar {
    display: block !important;
    position: relative !important;
    border-left: 10px solid #000 !important; /* 左の黒棒 */
    /* 背景グラデーションで「隙間のある下線」を表現 */
    background: linear-gradient(to right, transparent 20px, #aeb5d7 20px) no-repeat bottom !important;
    background-size: 100% 1px !important; /* 線の太さ */
    
    padding: 0.2em 0 0.5em 0.8em !important;
    font-size: 26px !important;
    font-weight: bold !important;
    line-height: 1.2 !important;
    margin-top: 40px !important;
    margin-bottom: 30px !important;
    color: #000 !important;
    border-bottom: none !important; /* 既存の下線を上書き消去 */
    clear: both;
}

/* 2. 製品名：左端からの薄紫の下線 */
.product-item-title {
    display: block !important;
    border-bottom: 1px solid #aeb5d7 !important; /* シンプルな下線 */
    padding-bottom: 10px !important;
    margin-bottom: 25px !important;
    font-size: 2.2em !important;
    font-weight: bold !important;
    font-family: sans-serif !important;
    color: #000 !important;
}

/* 3. 詳細ボタン（黒背景・角丸4pxに変更） */
.btn-blue-detail {
    display: inline-block !important;
    background-color: black !important; /* 青から黒に変更 */
    color: #fff !important;
    padding: 12px 40px !important;
    text-decoration: none !important;
    font-weight: bold !important;
    border-radius: 4px !important; /* 2pxから4pxに変更 */
    font-size: 16px !important;
    text-align: center !important;
    transition: opacity 0.2s;
}
.btn-blue-detail:after {
    content: " \2197" !important; /* 右上矢印 */
}
.btn-blue-detail:hover {
    opacity: 0.8 !important;
    text-decoration: none !important;
}

/* 4. サービス概要内のアピールポイント */
.appeal-point-list {
    margin-top: 30px !important;
    list-style: none !important;
    padding: 0 !important;
}
.appeal-point-list li {
    margin-bottom: 25px !important;
    line-height: 1.8 !important;
    color: #333 !important;
}
.appeal-point-list .point-title {
    display: block !important;
    font-weight: bold !important;
    font-size: 1.15em !important;
    margin-bottom: 5px !important;
    color: #000 !important;
}
.appeal-point-list .point-title:before {
    content: "■ " !important;
}

/* 5. 各種テキストスタイル */
.product-main-visual-text {
    color: #000 !important;
    font-weight: bold !important;
    font-size: 1.45em !important;
    line-height: 1.5 !important;
}
.product-item-lead {
    font-size: 1.5em !important;
    font-weight: bold !important;
    line-height: 1.4 !important;
    margin-bottom: 20px !important;
    color: #000 !important;
}

/* 6. スマホ表示（レスポンシブ） */
@media screen and (max-width: 767px) {
    .h-ttl-bar {
        font-size: 20px !important;
        margin-top: 30px !important;
        background: linear-gradient(to right, transparent 15px, #aeb5d7 15px) no-repeat bottom !important; /* 隙間を少し狭く */
        background-size: 100% 1px !important;
    }
    .product-item-title {
        font-size: 1.8em !important;
    }
    .product-main-visual-text {
        font-size: 1.2em !important;
    }
    .product-item-lead {
        font-size: 1.2em !important;
    }
    .btn-blue-detail {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 12px 10px !important;
    }
}