#about .wrap h1#ttl{
  background:url(../img/ph_about1.webp) no-repeat center center;
  background-size:cover;
  background-size:100% auto;
}
.footph {
  background-image:url(../img/ph_about2.webp);
  background-position: center center;
}
@media all and (min-width: 768px) {
#about .wrap h1#ttl{
  background-position:center top 25%;
}
}
@media all and (max-width: 767px) {
#about .wrap h1#ttl{
  background-position:center top;
  background-size:cover;
}
}

#about h2{
  color:#fff;
  line-height:160%;
  font-weight:500;
  font-size:150%;
  text-align:center;
  padding:2em 0;
}
#about h3{
  color:#fff;
  line-height:140%;
  font-weight:600;
  font-size:140%;
  border-radius:4px;
  background-color:#d71718;
  padding:.5em;
  margin:0 auto;
}
#about h4{
  color:#111;
  line-height:140%;
  font-weight:500;
  font-size:120%;
  border-left:4px solid #d71718;
  padding:0 0 0 .5em;
  margin:1em 0 0;
}
#contents article{
  margin:0 auto 3em;
  background-color:#EAEAEA;
  padding:2em;
  color:#111;
}
#contents article p{
  line-height:160%;
  padding:1em 0;
}

ul.ph2row{
  width:100%;
  margin:.5em auto;
  display:flex;
  flex-flow: row wrap;
  align-items: stretch;
  justify-content:center;
}
ul.ph2row li{
  margin:1% 1%;
  width: -webkit-calc(100% / 2 - 2%) ;
  width: calc(100% / 2 - 2%);
}
figure.ph_1{width:60%; margin:1em auto 0;}
figure.ph_1_l{width:100%; margin:1em auto 0;}

.cap,.cap2{padding:0 0 .8em !important; line-height:1; margin:-1em 0 0; text-align:center; font-size:85%;}
.cap2{margin:-1.2em 0 0; line-height:135% !important;}
.cap3{padding:0 0 .8em !important; line-height:1; margin:-.25em 0 0; text-align:center; font-size:90%;}
.cap4{padding:0 0 .8em !important; line-height:1; margin:.3em 0 0; text-align:center; font-size:85%;}
.cap3 + .btn_df{margin:.5em auto 1.8em !important;}
.btn_df + .cap{margin:-1.5em 0 .5em !important;}

ul.dotlist{margin:.8em 0;}
ul.dotlist li {
    list-style-type: none; 
    position: relative;
    padding-left:.8em;
    font-size:95%;
    margin:0 0 .5em;
    line-height:150%;
    }
ul.dotlist li:before {
    border-radius: 50%;
    width: 4px;
    height: 4px;
    display: block;
    position: absolute;
    left: 0;
    top: 0.6em;
    content: "";
    background: #fff;
}

@media all and (min-width: 768px) {
}

@media all and (max-width: 767px) {
#about h2{
  font-size:4vw;
}
#about h3{
  font-size:4vw;
}
#about h4{
  font-size:4vw;
}
#contents article{
  margin:0 auto 5vw;
  padding:2vw 4vw;
}
ul.ph2row{justify-content:space-between;}
ul.ph2row li{margin:1% 0;
width: -webkit-calc(100% / 2 - 1%) ;
width: calc(100% / 2 - 1%);
}
figure.ph_1{width:70%;}
figure.ph_1_l{width:100%;}
}