#news #contents{
  padding:4em 0 8em;
}
#news .wrap h1#ttl{
  background: url(../img/ph_news1.webp) no-repeat center center;
  background-size:cover;
  background-size:100% auto;
}
.footph {
  background-image:url(../img/ph_news2.webp);
  background-position: center bottom 15%;
}
@media all and (min-width: 768px) {
html {
  scroll-padding-top: 100px; 
}
#news .wrap h1#ttl{
  background-position:center top 30%;
}
}
@media all and (max-width: 767px) {
html {
  scroll-padding-top: 100px; 
}
#news .wrap h1#ttl{
  background-position:center top;
}
}

#news article {
  width: min(95%, 1200px);
  margin:0 auto 3em;
  padding:1.5em 2em 2em;
  background-image:
    linear-gradient(rgba(234, 234, 234, 0.7), rgba(234, 234, 234, 0.7)),
    url('./img/vivant_bg.svg');
  background-color:#EAEAEA;
  border-radius:4px;
}
#news article h2{
  color:#fff;
  line-height:140%;
  font-weight:500;
  font-size:140%;
  border-radius:4px;
  background-color:#d71718;
  padding:.5em;
  margin:0 auto;
}
#news article h3{
  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;
}
#news article h4{padding:.5em 0; font-weight:bold; line-height:140%;}

h2 + p {padding:1em 0 1em !important;}
h3 + p {padding:.5em 0 1em !important;}
h4 + p {padding:.5em 0 1em !important;}
h5 + p {padding:.5em 0 1em !important;}
h2 + h3 {padding:.5em 0;}
#news span.f85{line-height:160% !important; padding:.3em 0; display:inline-block;}

#news article p{word-break: break-all;
  padding:1em 0;
  line-height:160%;
  color:#111;
}
#news article p.f85{padding:0 !important;}
#news article p a,ul.dotlist li a{
  color:#d71718;
  transition: 0.3s;
  text-decoration:underline;
}
#news article h2 span.line {background: linear-gradient(transparent 70%, rgba(193,175,30,0.4) 70%); padding:0 0 .2em;}

#news article span.date {
  color:#d71718;
  padding:.1em .25em .1em;
  display:inline-block;
  margin:0 0 .2em 0;
  letter-spacing:0;
  position:relative;
  font-weight:600;
}

#news article a.btn_2{
  margin:2em auto 1em;
}

#news .bdr{padding:1em 1.2em; margin:1em 0 1em; border:1px solid #d71718; background-color:rgba(45,45,45,0);}
#news .bdr p{padding:0 0 .5em; font-size:100%;}
#news .bdr h3{padding:.3em 0 .3em; font-size:150%; font-weight:600; color:#7d4189; background-color:rgba(255,255,255,0.5); margin:.5em 0;}
#news20230917 p.bdr {padding:1em !important;}

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

.cap{padding:0 0 .8em !important; line-height:1; margin:-1em 0 0; text-align:center; font-size:85%;}

ul.dotlist{margin:.8em 0;}
ul.asterisk{margin:.8em 0 0 .8em;}
ul.dotlist li,ul.asterisk li {
    color: #111;
    list-style-type: none; 
    position: relative;
    padding-left:.8em;
    font-size:95%;
    margin:0 0 .5em;
    line-height:150%;
}
ul.asterisk li {
    font-size:90%;
    margin:0 0 .5em;
    line-height:140%;
}

ul.dotlist li:before {
    border-radius: 50%;
    width: 4px;
    height: 4px;
    display: block;
    position: absolute;
    left: 0;
    top: 0.6em;
    content: "";
    background: #fff;
}
ul.asterisk li:before {
    display: block;
    position: absolute;
    content: "※";
    left: -.5em;
    top: 0;
}

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

@media all and (max-width: 767px) {
#news #contents{
  padding:5vw 0 12vw;
}
#news article{
  margin:0 auto 5%;
  padding:2% 3.25% 4%;
}
#news article h2{line-height:120%; font-size:4.5vw; padding:1.5% 1.5% !important;}
#news article h3{font-size:4.3vw; line-height:120%;}
#news article h4{padding:.5em 0 0; font-size:3.6vw;}
#news article p {padding:1em 0 .5em !important; line-height:160%;}
#news article p.f85{font-size:85%; line-height:160%;}
h2 + p {padding:.5em 0 1em !important;}
#news article h3 + p {padding:.5em 0 !important;}
#news article h4 + p {padding:.2em 1em 1em !important;}
h2 + h3 {padding:.2em 0 0;}
.cap{margin:-1em 0 0; line-height:150% !important; font-size:85%;}

#news article a.btn_2{
  margin:2vw auto 2vw;
}

#news .bdr{width:100%; margin:5% auto 4%; padding:2.5% 3% !important;}
#news .bdr + p{padding:0 0 1em !important;}
#news article span.date{
  margin:0 0 .3em;
  padding:.5% 1% .3% 0;
}
#news article span.date:before{
width:3.7vw;
height:1px;
}

#news ul.ph2row{justify-content:space-between;}
#news ul.ph2row li{margin:1% 0;
width: -webkit-calc(100% / 2 - 1%) ;
width: calc(100% / 2 - 1%);
}
#news figure.ph_1{width:80%;}
#news figure.ph_1_l{width:100%;}