@charset "utf-8";

.add-card{
  border: solid 2px #d6d6d6;
  padding:20px;
}
.lead{
  border-left: solid 10px #00abf4;
  font-size:1.8rem;
  padding-left: 15px;
  margin-bottom:2.5em;
}
.reg-access p{
  font-size: 1.6rem;
  line-height:1.5;
  margin-bottom:1.5em;
}
.image-container {
  position: relative; /* 画像を基準に要素を配置するために relative を指定 */
  display: inline-block; /* 画像サイズに合わせて調整 */
}
.hd-number {
  width: 37px;
  height: 37px;
  background-color: #00acf5;
  color: white;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;   /* 画像の左上からの位置 */
  left: 0;  /* 画像の左端からの位置 */
  border-right: solid 2px #fff;
  border-bottom: solid 2px #fff;
}

figcaption {
  margin-top: 2px; /* 画像とキャプションの間に少し余白を作る */
}
hr{
  margin: 1em 0 1.5em!important;
}
.cap-top{
  margin-bottom:10px;
  text-align: center;
}
@media screen and (min-width:768px) {
.add-card{
margin-right:10px;
top:10px;
position: sticky;
}
.col-left{
  padding-right:10px;
}
.col-right{
  padding-left:10px;
}
h3.hd-3{
  font-size:1.8rem!important;
}
#rwd-content figcaption {
  margin-top: 10px!important;
}
}

@media screen and (max-width:767px) {
.lead{
  border-left: solid 10px #00abf4;
  font-size:1.7rem;
  padding-left: 15px;
  margin-bottom:2em;
}
.flex-item1 { order: 2; }
.flex-item2 { order: 1; }
h3.hd-3{
  font-size:1.8rem;
  font-weight: bold;
  margin-bottom:10px
}
#rwd-content figcaption {
font-size: 1.6rem;
line-height: 1.5;
margin-top: 10px;
margin-bottom: 7px;
}
h3{
  font-size:1.8rem!important;
  font-weight: bold!important;
  margin: 0 0 20px;
}
#rwd-content:not(.rwd-top) .rwd-header-inner {
  height: auto!important;
}
.cap-top{
  margin-bottom:10px;
}
}