@charset "UTF-8";

.home .article h2{
  background-color: inherit;
  margin-bottom: 0px;
  padding: 10px;
  padding-left: 0px;
  font-size: 1.2rem;
}
.home .article .front_page_h2 h2{
  font-size: 1.5rem;
}
.more_btn a{
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
  color: black;
  background-color: #F3D45C;
  padding: 10px;
  transition: .3s;
}
.more_btn a:hover{
  color: inherit;
  opacity: .5;
}
.more_btn a p{
  margin: 0px;
  text-align: center;
}


/*--------------------------------------
サービスカード（トップページ）
--------------------------------------*/
.service-cards{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}
.service-card{
  background-color: #F3D45C;
  border-radius: 12px;
  padding: 24px 20px;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  align-items: stretch;
}
.service-card__visual{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
  width: 100%;
}
.service-card__image{
  flex-shrink: 0;
  width: 100px;
}
.service-card__image img{
  width: 100%;
  height: auto;
}
.service-card__bubble{
  position: relative;
  background-color: #fff;
  /* border: 2px solid #ccc; */
  border-radius: 12px;
  padding: 12px 14px;
  font-size: .9rem;
  line-height: 1.6;
  flex: 1;
  height: 100%;
}
.article .service-card__bubble p{
  margin-bottom: 0;
}
.service-card__bubble::before{
  content: "";
  position: absolute;
  left: -12px;
  top: 24px;
  border-width: 8px 12px 8px 0;
  border-style: solid;
  border-color: transparent #fff transparent transparent;
}
.service-card__bubble::after{
  content: "";
  position: absolute;
  left: -9px;
  top: 25px;
  border-width: 7px 11px 7px 0;
  border-style: solid;
  border-color: transparent #fff transparent transparent;
}
.service-card__bubble p{
  margin: 0;
}
.service-card__textbox{
  background-color: #fff;
  padding: 18px 20px;
  border-radius: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.service-card__title{
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.5;
  margin: 0 0 10px;
  /* text-align: center; */
  background-color: transparent;
  padding: 0;
  border: none;
}
.service-card__highlight{
  color: #009B85;
  font-weight: bold;
}
.service-card__desc{
  font-size: .9rem;
  line-height: 1.7;
  margin: 0 0 16px;
  text-align: left;
}
.service-card__btn{
  display: block;
  text-align: center;
  background-color: #F86E81;
  color: #fff;
  font-weight: bold;
  font-size: 1.3rem;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 8px;
  width: 100%;
  margin-top: auto;
  transition: .3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
.service-card__btn:hover{
  opacity: .8;
  color: #fff;
  box-shadow: none;
  transform: translateY(2px);
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*834px以下*/
@media screen and (max-width: 834px){
  .service-cards{
    grid-template-columns: 1fr;
  }
  .service-card__image{
    width: 80px;
  }
}