@charset "UTF-8";

/*下層ページ用cssです。上書きしてデザインの変更を行っています*/

/* 写真は角丸 */
.p-entry__body img{
  border-radius: 6px;
}

/*サイドバーの見出し*/
h2.p-widget__title{
  border-radius: 3px;
  padding: 8px;
}

/*h1の見出し*/
.l-main .p-header-band__item.is-active{
  border-radius: 4px 4px 0 0;
}

.l-main .p-entry__body .tcd-pb-widget h6:not(.no-design){
background: #55C44F;
background: linear-gradient(90deg, rgba(85, 196, 79, 1) 0%, rgba(52, 178, 111, 1) 100%);
color: #fff;
border:none;
padding: 8px 12px;
border-radius: 3px;
font-size: 15px;
font-weight: normal;
}

/*一部の見出しに背景ピンクが入っているのを消す*/
.tcd-pb-row.row1 .tcd-pb-col.col1 .tcd-pb-widget.widget1{
  background: none;
}

.bt_green{
  background-color: #209652;
}


#site_wrap .p-entry__body h3, .pb-widget-headline h3.pb_headline{
  background-color: #fff;
color: #222 !important;
border: 2px solid #27ae60;
border-radius: 4px;
width: 100%;
padding: 19px 16px;
display: flex;
flex-wrap: wrap;
align-items: center;
font-size: 16px !important;
font-weight: 700;

 position: relative; /* 疑似要素を配置する基準 */
  padding-left: 44px; /* 円とテキストが重ならないように余白を追加 */
}

@media screen and (min-width: 768px) {
#site_wrap .p-entry__body h3, .pb-widget-headline h3.pb_headline{
font-size: 20px !important;;
}
}

/* 疑似要素で円を作成 */
.p-entry__body h3::before, 
.pb-widget-headline h3.pb_headline::before {
  content: '';
  display: block;
  position: absolute;
  left: 20px; /* 左からの位置 */

  /* 円のスタイル */
  width: 12px;
  height: 12px;
  border: 3px solid #27ae60; /* 緑色の線の円 */
  border-radius: 50%; /* 正円にする */
}

/* 導線リンクボタン */
.q_button{
  border-radius:4px;
  padding: .8em 2.4em .7em;
  position: relative;
}

.q_button::after {
  content: '';
  display: block;
  width: 8px;           /* 大きさ */
  height: 8px;          /* 大きさ */
  border-top: 2px solid #fff;   /* 線の太さと色 */
  border-right: 2px solid #fff;  /* 線の太さと色 */
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 14px;          /* 右からの位置 */
  margin-top: -5px;     /* 上下の位置を微調整 */
}

body:not(.home) main{
  margin-bottom: 120px;
}

/*tableスマホ時横スクロール*/
.table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1em 0;
}

.l-main table{
    width: 100%;
    min-width: fit-content;
    border-collapse: collapse;
}

@media screen and (max-width: 480px) { 
   .table-scroll-wrapper table{
    /*width: 600px !important;*/
   }
}

#gallery-1 .gallery-item img,
#gallery-2 .gallery-item img{
  border:none;
  border-radius: 0;
}