@charset "utf-8";

/* PDS用 */

.common-pr-area {
  padding-top: 10px; /*section上部の空き調整*/
  margin-bottom: 30px;
}

.pds-pr-h2-wrap {
text-align: left;
margin:40px 0;
}


.pds-pr-h2 {
  background-color: #000;
  color: #fff !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  margin: 20px 0 !important;
  padding:0.6em 1.0em 0.4em !important;
  text-align: left !important;
  width: 100% !important;
  position: relative;
  place-self: initial;
  display: flex !important;

  /* font-feature-settings: "palt";
  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif; */
  
}
.pds-pr-h2::before {
  content: none !important;
}
.pds-pr-h2::after {
  content: none !important;
}
.pds-pr-h2 span {
  align-self: center;
}

/* HTML: <div class="ribbon">Your text content</div> */
.pds-pr-h2-ribbon {
  font-size: 32px;
  font-weight: bold;
  color: #000;
  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
}
.pds-pr-h2-ribbon {
  --r: .4em;
  border-inline: .5em solid #0000;
  padding: .2em .4em calc(var(--r) + .1em);
  clip-path: polygon(0 0,100% 0,100% 100%,calc(100% - .5em) 100%,50% calc(100% - var(--r)),.5em 100%,0 100%);
  background: border-box,
 #ffffff padding-box;
  width: fit-content;
  display: inline-block;
  align-self: flex-start;

}

.pds-pr-h2-kpd {
  background-color: #144997;
}
.pds-pr-h2-kpd .pds-pr-h2-ribbon {
  color: #144997;
}

.pds-pr-h2-srt {
  background-color: #12813c;
}
.pds-pr-h2-srt .pds-pr-h2-ribbon {
  color: #12813c;
}

.pds-pr-h2-spd {
  background-color: #b61c26;
}
.pds-pr-h2-spd .pds-pr-h2-ribbon {
  color: #b61c26;
}

.pds-pr-h2-pde {
  background-color: #e79319;
}
.pds-pr-h2-pde .pds-pr-h2-ribbon {
  color: #e79319;
}

.pds-pr-text {
  width:70%;
  margin: 40px 0;
}
.pds-pr-text p {
  font-size: 15px;
  color: #000;
  padding:0 1.0em 1.0em;
  margin: 0;
}
.pds-pr-text a {
  font-weight: 400;
}

.pds-pr-h2 img {
  z-index: 2;
  position:absolute;
  top:0;
  right: 0;
  font-size: 1.0em;
  font-weight: 400;
}



/*-------------------------- レスポンシブ用CSS ここから -----------------------------------------*/


@media screen and (max-width:1050px) {




}


@media screen and (max-width:640px) {
	/* ↓ここに個別のスマホ用スタイルを指定 */

.common-pr-area ul {
  margin:10px 0;
}
  
.pds-pr-h2 {
  font-size: 21px !important;
  font-weight: 700 !important;
  margin: 20px 0 !important;
  padding:0.8em .1em 0.6em !important;
  text-align: left !important;
  width: 100% !important;
  position: relative;
  place-self: initial;
  display: flex !important;
}
.pds-pr-h2-ribbon {
  font-size: 28px;
  font-weight: bold;
}
.pds-pr-h2-ribbon {
  --r: .4em;
  border-inline: .5em solid #0000;
  padding: .2em .4em calc(var(--r) + .1em);
  clip-path: polygon(0 0,100% 0,100% 100%,calc(100% - .5em) 100%,50% calc(100% - var(--r)),.5em 100%,0 100%);
  background: border-box,
 #ffffff padding-box;
  width: fit-content;
  display: inline-block;
  align-self: flex-start;

}



  .pds-pr-text {
    width:100%;
    margin: 60px 0 40px;
  }
  .pds-pr-text p {
    font-size: 15px;
    font-weight: 400;
    color: #000;
    padding:0 1.0em 1.0em;
    margin: 0;
  }
  .pds-pr-h2 img {
    z-index: 2;
    position:absolute;
    top:30px;
    right: 0;
    font-size: 1.0em;
    font-weight: 400;
    width:100px;
  }

}

/*-------------------------- レスポンシブ用CSS ここまで ----------------------*/