#contents{
	background: url(../img/case_topvisual.png) top left / contain no-repeat;
}
#side-bar i {
    display: block;
    margin: 6px 0px 0;
    font-style: normal;
    font-size: 14px;
}
.case_contents_wrapper {
    margin-bottom: 100px;
    margin-top : -50px;
    padding-top : 50px;
}
.career {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.case_title {
    margin: 0 0 0 0px;
    display:flex;
    align-items: baseline;
}
.case_title:before{
    margin-right:10px;
    content:"";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 10px 8px 10px;
    border-color: #dddddd #00478f #dddddd #00478f;
}

.arrow1 {
    position: relative;
    width: 5%;
    height: 20px;
    background: #00478f;
    margin: 0 2% 0 0;
}
.arrow1::after{
    content: "";
    position: absolute;
    top: -10px;
    right: -20px;
    border-left: 20px solid #00478f;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}

.case_contents_wrapper h2 i {
    float: right;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    background: #00478f;
    color: #ffffff;
    padding: 4px 20px;
}

.before_after {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 44px 0;
    font-feature-settings: "palt";
}

.before {
    width: 35%;
    margin: 0 2.5%;
    border: 1px solid #002e5b;
}
.b_01{
    background: url(../img/case_img01_before.png) center / cover no-repeat;
}
.b_02{
    background: url(../img/case_img02_before.png) center / cover no-repeat;
}
.b_03{
    background: url(../img/case_img03_before.png) center / cover no-repeat;
}
.b_04{
    background: url(../img/case_img04_before.png) center / cover no-repeat;
}
.b_05{
    background: url(../img/case_img05_before.png) center / cover no-repeat;
}
.b_06{
    background: url(../img/case_img06_before.png) center / cover no-repeat;
}
.b_07{
    background: url(../img/case_img07_before.png) center / cover no-repeat;
}
.b_08{
    background: url(../img/case_img08_before.png) center / cover no-repeat;
}

.after {
    width: 35%;
    margin: 0 2.5%;
    border: 1px solid #002e5b;
}
.a_01{
    background: url(../img/case_img01_after.png) center / cover no-repeat;
}
.a_02{
    background: url(../img/case_img02_after.png) center / cover no-repeat;
}
.a_03{
    background: url(../img/case_img03_after.png) center / cover no-repeat;
}
.a_04{
    background: url(../img/case_img04_after.png) center / cover no-repeat;
}
.a_05{
    background: url(../img/case_img05_after.png) center / cover no-repeat;
}
.a_06{
    background: url(../img/case_img06_after.png) center / cover no-repeat;
}
.a_07{
    background: url(../img/case_img07_after.png) center / cover no-repeat;
}
.a_08{
    background: url(../img/case_img08_after.png) center / cover no-repeat;
}
.before legend,.after legend {
    background: #002e5b;
    color: #ffffff;
    padding: 5px 30px;
    text-align: center;
    margin: 0 auto;
}
.disp {
    margin: 0 0 5px 0px;
    font-size: 17px;
}
.disp span{
    margin: 0;
    font-size: 19px;
    font-weight: bold;
    color: #ff4a98;
}
.b_money {
    margin: 0;
    font-size: 19px;
    font-weight: bold;
    color: #002e5b;
}
.a_money {
    margin: 0;
    font-size: 19px;
    font-weight: bold;
    color: #ff4a98;
}

/* 1100px 以下
--------------------------------------------------------------------------------*/
@media only screen and (max-width: 1100px) {
.case_contents_wrapper h2 span {
    display: block;
}
.case_contents_wrapper h2 i {
    float: none;
}
#side-bar i {
    display: block;
    margin: 6px 0px 0;
    font-style: normal;
    font-size: 10px;
}
}

/* Smart Phone 640px 以下
--------------------------------------------------------------------------------*/
@media only screen and (max-width: 640px) {
#maincontents h2 {
    display: block;
}
.case_contents_wrapper h2 i{
    display: block;
    float: none;
    background: none;
    color: #00478f;
    padding: 4px 0;
}

.before_after {
    display: block;
    justify-content: space-around;
    align-items: center;
    margin: 24px 0;
}
.before {
    width: auto;
    max-width: 300px;
    margin: 0 auto;
    border: 1px solid #002e5b;
}
.after {
    width: auto;
    max-width: 300px;
    margin: 0 auto;
    border: 1px solid #002e5b;
}
.arrow1 {
    position: relative;
    width: 5%;
    height: 20px;
    background: #00478f;
    margin: 20px auto 40px;
    transform: rotate(90deg);
}
}