/*--------------------------------------------
メインイメージ
--------------------------------------------*/

.responsibility-mv {
    background: url(/responsibility/images/responsibility_mv.png) no-repeat;
    background-size: cover;
    background-position: center bottom;
    overflow: hidden;
    position: relative;
    height: 560px;
    width: 100%;
}


/********* sp *********/

@media only screen and (max-width: 750px) {
    .responsibility-mv {
        background: url(/responsibility/images/responsibility_mv_sp.png) no-repeat;
        background-size: cover;
        background-position: left top;
        height: 450px;
    }
}

.responsibility-mv--inner {
    max-width: 1100px;
    margin: 0 auto;
    height: 560px;
    width: 86%;
    position: relative;
}

.responsibility-mv--txtbox {
    padding-top: 200px;
}

.responsibility-mv--txtbox_not {
    padding-top: 200px;
}


/********* sp *********/

@media only screen and (max-width: 750px) {
    .responsibility-mv--txtbox {
        padding-top: 140px;
    }
    .responsibility-mv--txtbox_not {
        padding-top: 85px;
    }
}

.responsibility-mv p {
    color: #fff;
    letter-spacing: 0.35em;
    padding: 0 15px 30px 15px;
    position: relative;
    text-transform: uppercase;
    text-shadow: 1px 1px 3px #73767a;
}

.responsibility-mv-sm {
    font-size: 18px;
}


/********* sp *********/

@media only screen and (max-width: 750px) {
    .responsibility-mv p {
        padding: 0 0 20px 0;
    }
}

.responsibility-mv p::before {
    position: absolute;
    left: 0;
    bottom: 0;
    content: "";
    display: inline-block;
    height: 1px;
    background: #d23056;
    width: 400px;
}


/********* sp *********/

@media only screen and (max-width: 750px) {
    .responsibility-mv p::before {
        position: absolute;
        left: 0;
        bottom: 0;
        content: "";
        display: inline-block;
        height: 1px;
        background: #d23056;
        width: 90%;
    }
}

.responsibility-mv p::after {
    position: absolute;
    left: 400px;
    bottom: 0;
    content: "";
    display: inline-block;
    height: 1px;
    background: #fff;
    width: 40px;
}


/********* sp *********/

@media only screen and (max-width: 750px) {
    .responsibility-mv p::after {
        position: absolute;
        left: 90%;
        bottom: 0;
        content: "";
        display: inline-block;
        height: 1px;
        background: #fff;
        width: 10%;
    }
}

.responsibility-mv h1 {
    padding: 0 15px;
}


/********* sp *********/

@media only screen and (max-width: 750px) {
    .responsibility-mv h1 {
        padding: 0;
    }
}


/*--------------------------------------------
CONTENT
--------------------------------------------*/
.responsibility-content {
background-position: left top 340px;
padding: 60px 0 100px 0;
}
/********* sp *********/
@media only screen and (max-width: 750px) {
.responsibility-content {
background: none;
padding: 40px 0 0 0;
}
}
.responsibility-content.contact-content--noback {
background: none;
}
.responsibility-content--inner {
margin: 0 auto;
max-width: 1110px;
width: 86%;
}
.responsibility-tt h2 {
color: #000;
/*letter-spacing: 0.35em;*/
padding: 0 15px 30px 0px;
position: relative;
text-transform: uppercase;
}
.responsibility-tt h2::before {
position: absolute;
left: 0;
bottom: 0;
content: "";
display: inline-block;
height: 1px;
background: #d23056;
width: 190px;
}
/********* sp *********/
@media only screen and (max-width: 750px) {
.responsibility-tt h2::before {
position: absolute;
left: 0;
bottom: 0;
content: "";
display: inline-block;
height: 1px;
background: #d23056;
width: 90%;
}
}
.responsibility-tt h2::after {
position: absolute;
left: 190px;
bottom: 0;
content: "";
display: inline-block;
height: 1px;
background: #cccccc;
width: 40px;
}
/********* sp *********/
@media only screen and (max-width: 750px) {
.responsibility-tt h2::after {
position: absolute;
left: 90%;
bottom: 0;
content: "";
display: inline-block;
height: 1px;
background: #cccccc;
width: 10%;
}
}

ol.responsibility {
  list-style: none;
  counter-reset: my-awesome-counter;
  display: flex;
  flex-wrap: wrap;
  margin-top: 30px;
  padding: 0;
}
ol.responsibility li {
  counter-increment: my-awesome-counter;
  display: flex;
  width: 50%;
  margin-bottom: 0.5rem;
  padding: 15px;
  margin-top: 1em;
  margin-bottom: 1em;
}
ol.responsibility li::before {
  content: "0" counter(my-awesome-counter);
  font-weight: bold;
  font-size: 2.8rem;
  margin-right: 0.8rem;
  font-family: 'Abril Fatface', serif;
  line-height: 1;
  color: #d23056;
  font-weight: 300;
}

ol.responsibility li span {
  display: block;
  font-size: 22px;
  color: #000;
  padding-bottom: 10px;
  border-color:#FFF; 
  border-bottom-color:#d23056;
  border-style:solid;
  border-width: 1px;
}

@media only screen and (max-width: 750px) {
    ol.responsibility li { width: 100%; padding: 0px;}
    ol.responsibility li::before { font-size: 2rem; }
    ol.responsibility li span { font-size: 18px; }
}

@media only screen and (max-width: 990px) {
    .tab__responsibility .w40 {
        width: 70%;
        display: inherit;
    }
}
.tab__responsibility {
    background-color: #cad0d1;
    border: none;
    width: 100%;
    padding: 5px 30px 5px 20px;
    font-size: 18px;
    margin-top: 50px;
    /*margin: 50px 20px -49px 25px;*/
    position: relative;
}

.detail {
padding: 5px 30px 5px 20px;
margin-top: 20px;
}

@media only screen and (max-width: 750px) {
  .tab__responsibility { padding: 5px; }
  .detail { padding: 0px;  }
}


.responsibility_detail {
    background-color: #eceeee;
    padding: 30px;
    margin: 50px 0px 20px 0px;
}

.mt_20 {
margin-top: 20px;
}
.mt_50 {
margin-top: 50px;
}
.mt_80 {
margin-top: 80px;
}