html, body {
  overflow-x: hidden; }

img {
  width: 100%;
  display: block; }

.P20 {
  padding: 20px 0; }

.l__underlayer {
  padding-top: 80px; }

.p__list {
  background: #f7f7f7;
  padding: 20px; }
  .p__list li {
    font-size: 16px;
    display: inline;
    margin-left: 20px;
    color: #707070; }
    .p__list li:after {
      content: "/";
      width: 20px;
      height: 20px;
      margin-left: 20px;
      vertical-align: middle; }
    .p__list li:last-child:after {
      content: "";
      width: 20px;
      height: 20px;
      margin-left: 20px;
      vertical-align: middle; }
    .p__list li a {
      font-weight: bold; }

.main__picturebox {
  height: 400px;
  background: url(../img/about/sub-about.png) no-repeat top center;
  background-size: cover;
  position: relative; }
  .main__picturebox::after {
    content: "";
    background: rgba(0, 0, 0, 0.5) url(../img/about/mask.png) repeat;
    position: absolute;
    width: 3000px;
    height: 400px; }
  .main__picturebox h2 {
    color: white;
    text-align: center;
    font-size: 32px;
    z-index: 1;
    font-weight: bold;
    letter-spacing: 0.25em;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    padding: 0; }

.main__picturebox-construction {
  background: url(../img/construction/sub_construction.png) no-repeat top left; }

.main__picturebox-about {
  background: url(../img/about/sub_about.png) no-repeat top center; }

.l__under-contentbox {
  margin: 80px auto;
  max-width: 1000px; }
  .l__under-contentbox h3 {
    font-size: 42px;
    text-align: center;
    font-weight: bold; }
  .l__under-contentbox p {
    font-size: 16px;
    text-align: center;
    width: 80%;
    margin: 0 auto;
    padding: 20px 0; }

.l__title {
  margin: 40px auto;
  text-align: center; }
  .l__title h3 {
    font-size: 32px;
    font-weight: bold;
    margin: 0 auto;
    text-align: center;
    position: relative;
    display: inline-block; }
    .l__title h3:before {
      content: "";
      border-top: 5px solid #910000;
      position: absolute;
      width: 34px;
      left: -44px;
      top: 50%;
      margin-top: -2.5px; }

.l__aboutbox {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px; }
  .l__aboutbox .border {
    border-top: 1px solid #ccc; }
  .l__aboutbox dl {
    border-bottom: 1px solid #ccc;
    display: block;
    padding: 20px 0px;
    font-size: 16px; }
    .l__aboutbox dl dt {
      width: 150px;
      display: inline-block; }
    .l__aboutbox dl dd {
      display: inline-block;
      width: 69%;
      vertical-align: top; }

.l__partnerbox {
  max-width: 1000px;
  margin: 0 auto 80px;
  padding: 0 20px; }
  .l__partnerbox ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-flex-direction: horizontal;
    -webkit-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    .l__partnerbox ul li {
      width: 18.8%;
      margin: 5px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-box-shadow: 0px 0px 10px 0px #ccc;
      box-shadow: 0px 0px 10px 0px #ccc; }

.l_workflow {
  max-width: 1000px; }
  .l_workflow ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-direction: horizontal;
    -webkit-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    .l_workflow ul li {
      width: 32%;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-box-shadow: 0px 0px 10px 0px #ccc;
      box-shadow: 0px 0px 10px 0px #ccc; }
  .l_workflow .l__innnerbox {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: horizontal;
    -webkit-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    position: relative;
    max-width: 1000px;
    margin: 20px 0; }
  .l_workflow .l__description {
    width: 50%; }
    .l_workflow .l__description h4 {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 20px;
      text-align: left; }
    .l_workflow .l__description p {
      font-size: 16px;
      text-align: left;
      margin-right: 20px; }
  .l_workflow .l_reviewbox {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: horizontal;
    -webkit-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    background: #FCF7F7;
    padding: 20px;
    -webkit-border-radius: 10px;
    border-radius: 10px; }
    .l_workflow .l_reviewbox figure {
      width: 120px; }
    .l_workflow .l_reviewbox .l_reviewbox-text h4 {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 20px;
      text-align: left; }
    .l_workflow .l_reviewbox .l_reviewbox-text p {
      font-size: 16px;
      text-align: left;
      width: 335px; }

.l__img100 {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto; }

section {
  margin: 80px auto; }

@media screen and (max-width: 768px) {
  .main__picturebox {
    height: 200px; }
    .main__picturebox::after {
      height: 200px; }
    .main__picturebox h2 {
      font-size: 18px; }
  section {
    margin: 40px auto; }
  .l__img100 {
    padding: 0 20px; }
  .l__partnerbox {
    margin: 0 auto 40px; }
  .l__partnerbox ul li {
    width: 21.7%; }
  .l__underlayer {
    padding-top: 80px; }
  .p__list {
    background: #f7f7f7;
    padding: 10px; }
    .p__list li {
      margin-left: 10px; }
  .l__under-contentbox {
    margin: 40px auto; }
    .l__under-contentbox h3 {
      font-size: 24px; }
    .l__under-contentbox p {
      font-size: 14px; }
  .l__title {
    margin: 40px auto 20px; }
    .l__title h3 {
      font-size: 20px; }
      .l__title h3:before {
        border-top: 3px solid #910000;
        margin-top: -1.5px;
        width: 25px;
        left: -32px; }
  .l__aboutbox dl {
    font-size: 12px; }
    .l__aboutbox dl dt {
      width: 80px; }
    .l__aboutbox dl dd {
      width: 75%; }
  .l_workflow {
    margin: 0 20px; }
    .l_workflow ul {
      -webkit-flex-direction: vertical;
      -webkit-flex-direction: column;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column; }
      .l_workflow ul li {
        width: 100%;
        margin-bottom: 20px; }
        .l_workflow ul li:last-child {
          margin-bottom: 0px; }
    .l_workflow .l__innnerbox {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-direction: vertical;
      -webkit-flex-direction: column;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: justify;
      -moz-box-pack: justify;
      -ms-flex-pack: justify;
      -webkit-justify-content: space-between;
      justify-content: space-between; }
    .l_workflow .l__description {
      width: 100%; }
      .l_workflow .l__description h4 {
        font-size: 16px;
        margin-bottom: 10px; }
      .l_workflow .l__description p {
        font-size: 14px;
        text-align: left;
        margin-right: 0px; }
    .l_workflow .l_reviewbox {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-direction: horizontal;
      -webkit-flex-direction: row;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-box-pack: justify;
      -moz-box-pack: justify;
      -ms-flex-pack: justify;
      -webkit-justify-content: space-between;
      justify-content: space-between;
      background: #FCF7F7;
      padding: 20px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      margin-top: 20px; }
      .l_workflow .l_reviewbox figure {
        width: 30%;
        margin-right: 20px; }
      .l_workflow .l_reviewbox .l_reviewbox-text h4 {
        font-size: 16px;
        margin-bottom: 10px; }
      .l_workflow .l_reviewbox .l_reviewbox-text p {
        font-size: 12px;
        text-align: left;
        width: 200px; } }

@media screen and (max-width: 480px) {
  .l__underlayer {
    padding-top: 54px; } }