@charset 'utf-8';

/* ------------------------------
 トップページ
------------------------------ */


/* メイン */

#main {
    background-color: #eaecf0;
    border-bottom: 2px solid #d3d3d3;
}


/* 青背景 */

.blue_back {
    background-color: #eff8ff;
}

.blue_gray {
    background-color: #f7f7f7;
}


/* トップ用中見出し */

.tl_top {
    position: relative;
}

.tl_top:after {
    display: block;
    content: '';
    background-color: #0098e6;
    width: 80px;
    height: 6px;
    margin: 20px auto -4px;
}


/* 当サイトの特徴 */

#feature {
    padding: 60px 30px;
}

.feature {
    background-color: #fff;
}

#feature_3_box {
    padding: 30px;
    border-radius: 5px;
    background-color: #f4f4f4;
}

#feature_3_box p {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: #d4d4d4 solid 2px;
}

#feature_3_box figure {
    position: relative;
    margin: 0 -8px;
}

.feature h3 {
    cursor: pointer;
    position: relative;
}

.feature h3:after {
    position: absolute;
    right: 20px;
    top: 51px;
    width: 38px;
    height: 0;
    padding-top: 38px;
    overflow-y: hidden;
    content: '';
    background: url(/img/sp/top/tg_feature.png) no-repeat;
}

.feature h3.on:after {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
}


/* 弊社取扱いサービス */

#service {
    padding: 60px 0 40px;
}

#service dd {
    border-top: 6px solid #a9d3e9;
}


/* ご相談の流れ */

#flow {
    padding: 60px 0 40px;
}

#flow ol {
    list-style-type: none;
    border: 2px solid #e1e1e1;
    background-color: #fff;
    padding: 28px;
    box-sizing: border-box;
}

#flow li {
    padding-top: 20px;
}

#flow li:not(:last-child) {
    padding-bottom: 60px;
    background: url(/img/sp/top/bg_flow.png) no-repeat center bottom;
}

#flow li p {
    min-height: 147px;
    padding-left: 160px;
}

#flow li:nth-child(1) p {
    background: url(/img/sp/top/bg_flow_1.png) no-repeat;
}

#flow li:nth-child(2) p {
    background: url(/img/sp/top/bg_flow_2.png) no-repeat;
}

#flow li:nth-child(3) p {
    background: url(/img/sp/top/bg_flow_3.png) no-repeat;
}

#flow li:nth-child(4) p {
    background: url(/img/sp/top/bg_flow_4.png) no-repeat;
}


/* お約束 */

#promise {
    width: 640px;
}

#promise_inner {
    background: url(/img/sp/top/bg_promise.png) no-repeat;
}

#promise_inner p {
    padding: 20px;
    background: rgba(188, 203, 231, .4);
}


/* 選ばれる理由 */

#reason ol {
    list-style-type: none;
}

#reason li {
    background-color: #eff8ff;
}

#reason li:not(:last-child) {
    margin-bottom: 40px;
}

#reason h3 {
    cursor: pointer;
    position: relative;
}

#reason h3:after {
    position: absolute;
    right: 20px;
    top: 51px;
    width: 38px;
    height: 0;
    padding-top: 38px;
    overflow-y: hidden;
    content: '';
    background: url(/img/sp/top/tg_reason.png) no-repeat;
}

#reason li:first-child h3:after {
    top: 31px;
}

#reason h3.on:after {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.reason {
    padding: 40px 20px;
}

.reason p img {
    margin: 7px 20px 20px 0;
    width: 200px;
    float: left;
}


/* お悩み */

#trouble {
    background-color: #e8e8e8;
    padding-bottom: 40px;
}

.trouble {
    padding: 26px 20px 30px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: right bottom;
}

.trouble:not(:last-child) {
    margin-bottom: 40px;
}

.trouble:nth-child(1) {
    background-image: url(/img/sp/top/bg_trouble_1.png);
}

.trouble:nth-child(2) {
    background-image: url(/img/sp/top/bg_trouble_2.png);
}

.trouble:nth-child(3) {
    background-image: url(/img/sp/top/bg_trouble_3.png);
}

.trouble h3 {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dotted #c0c0c0;
}


/* ご提案実績例 */

.case {
    background-color: #f7f7f7;
}

.case:not(:last-child) {
    margin-bottom: 60px;
}

.case_inner {
    border: 2px solid #dadada;
    border-top: none;
}

.btn_case {
    cursor: pointer;
    z-index: 2;
    position: relative;
    padding-bottom: 40px;
}

.case_cont {
    z-index: 1;
    margin-top: -80px;
    position: relative;
}

.case:nth-child(3) .case_cont {
    margin-top: 0;
}

.case_header {
    background-color: #eff8ff;
    border-bottom: 2px solid #d8e8f0;
    padding: 40px 0;
}

.case_footer {
    position: relative;
    padding: 40px 0;
    background: #fffff1 url(/img/sp/top/bg_case_footer.png) no-repeat 419px 50px;
}

.case_footer:before {
    content: '';
    height: 0;
    overflow: hidden;
    padding-top: 31px;
    width: 142px;
    position: absolute;
    top: -2px;
    left: 217px;
    background: url(/img/sp/top/bg_case_arrow.png) no-repeat center top;
}

.case_hp {
    padding: 0 20px 40px;
    background-color: #fff;
}

.case_hp ol li {
    list-style-type: none;
}

.case_hp ol li:not(:first-child) {
    margin-top: 40px;
}

.case_hp ol li h5 {
    background-color: #eff8ff;
    padding: 20px;
    cursor: pointer;
    border-bottom: 6px solid #d6ddeb;
    justify-content: space-between;
    display: flex;
    align-items: center;
}

.case_hp ol li h5:after {
    width: 34px;
    height: 0;
    padding-top: 22px;
    overflow-y: hidden;
    content: '';
    background: url(/img/sp/top/tg_case_hp.png) no-repeat;
}

.case_hp ol li h5.on:after {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.case_hp ul li {
    list-style-type: none;
}

.case_hp ul li:not(:last-child) {
    margin-bottom: 50px;
    padding-bottom: 50px;
    border-bottom: 2px dotted #d2d2d2;
}


/* よくあるご質問 */

#qa {
    padding: 60px 0;
}

#qa dt {
    font-size: 28px;
    line-height: 36px;
    cursor: pointer;
    font-weight: bold;
    padding: 20px 20px 20px 110px;
    border: 2px solid #d9d9d9;
    border-bottom-width: 6px;
    justify-content: space-between;
    display: flex;
    align-items: center;
}

#qa dt:not(:first-child) {
    margin-top: 30px;
}

#qa dt:after {
    width: 38px;
    height: 0;
    padding-top: 38px;
    overflow-y: hidden;
    content: '';
    background: url(/img/sp/top/tg_qa.png) no-repeat;
}

#qa dt.on:after {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

#qa dt:nth-child(1) {
    background: #fff url(/img/sp/top/ico_qa_q1.png) no-repeat 20px center;
}

#qa dt:nth-child(3) {
    background: #fff url(/img/sp/top/ico_qa_q2.png) no-repeat 20px center;
}

#qa dt:nth-child(5) {
    background: #fff url(/img/sp/top/ico_qa_q3.png) no-repeat 20px center;
}

#qa dt:nth-child(7) {
    background: #fff url(/img/sp/top/ico_qa_q4.png) no-repeat 20px center;
}

#qa dd {
    padding: 30px 20px;
}


/*
--------------------------------------------------------------------------------
 END OF CSS
--------------------------------------------------------------------------------
*/