@charset "utf-8";
/* CSS Document */

.tkb_body{
  line-height: 1.5;
  padding: 0 16px 120px;
  background: url(../img/il_headerbg.png) center top no-repeat;
}
.tkb_wrap{
  max-width: 1200px;
  margin: auto;
}
a{text-decoration: none;}
img{max-width: 100%;}

.tkb_adpc{
  width:fit-content;
  height:90px;
  margin: 0 auto 24px;
}

.tkb_header{
  margin-bottom: 40px;
  padding-top: 48px;
}



.tkb_colm{
  padding-top:16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px 0;
}
.tkb_mainblock{width: calc(100% - 380px);}
.tkb_content{margin-bottom: 112px;}
.tkb_datetime{margin-bottom: 8px;}
.tkb_content h2{
  margin-bottom: 14px;
  font-size: 1.375rem;
  font-weight: bold;
}
.tkb_image{margin-bottom: 32px;}
.tkb_comment{
  line-height: 1.75;
  font-size: 1.125rem;
}
.tkb_backnumber{
  margin-bottom: 8px;
  padding: 22px 16px;
  text-align: center;
  border-top: 1px solid #B9CBD6;
  border-bottom: 1px solid #B9CBD6;
}
.tkb_backnumber a{
  text-decoration: underline;
  font-size: 0.875rem;
  font-weight: bold;
  color: #3C799E;
}



.tkb_rightblcok{width: 300px;}
.tkb_categorylist{
  margin-bottom: 24px;
  padding: 16px 12px;
  background-color: rgba(225, 238, 246, 0.8);
}
.tkb_categorylist h3{
  margin-bottom: 8px;
  font-size: 0.875rem;
  font-weight: bold;
  color: #666666;
}
.tkb_categorylist ul{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}
.tkb_categorylist ul li a{
  display: block;
  padding: 8px;
  font-size: 0.875rem;
  font-weight: bold;
  color: #2F7098;
  border-radius: 8px;
  background-color: #FFFFFF;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.16);
}
.tkb_categorylist ul li a[selected]{
  color: #FFFFFF;
  background-color: #2F7098;
}

.tkb_backnumberblock{margin-bottom: 16px;}
.tkb_backnumberblock h2{
  margin-bottom: 6px;
  padding-bottom: 6px;
  font-size: 0.875rem;
  font-weight: bold;
  color: #666666;
  border-bottom: 2px solid #B9CBD6;
}
.tkb_backnumberblock ul{margin-bottom: 16px;}
.tkb_backnumberblock ul li a{
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 80px;
  border-bottom: 1px solid #DFDEDE;
}
.tkb_backnumberblock ul li a .tkb_backnumberhead{width: 170px;padding-right:1em;}
.tkb_backnumberblock ul li a .tkb_backnumberimage{width: 130px;}
.tkb_backnumberhead span{
  display: block;
  margin-bottom: 10px;
  font-size: 0.625rem;
  color: #7B7B7B;
}
.tkb_backnumberhead h3{
  font-size: 0.875rem;
  color: #166BB5;
}
.tkb_tolist{text-align: right;}
.tkb_tolist a{
  text-decoration: underline;
  font-size: 0.875rem;
  font-weight: bold;
  color: #666666;
}

.tkb_menu h2{
  padding: 14px 10px;
  font-size: 0.875rem;
  font-weight: bold;
  color: #FFFFFF;
  background-color: #919090;
}
.tkb_menu ul{
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.tkb_menu ul li{
  width: 50%;
  font-size: 0.875rem;
  background: #ffffff;
  border-left: 1px solid #DFDEDE;
  border-bottom: 1px solid #DFDEDE;
}
.tkb_menu ul li.note a{
  padding-left: 32px;
  background-image: url("../img/icon_rain.svg");
  background-position: 4px center;
  background-repeat: no-repeat;
  background-size: 24px auto;
}
.tkb_menu ul li.tkb_full{
  width: 100%;
  border-left: none;
}
.tkb_menu ul li:nth-of-type(odd){border-left: none;}
.tkb_menu ul.tkb_listunique li:nth-of-type(even){
  border-left: none;
  border-right: 1px solid #DFDEDE;
}
.tkb_menu ul.tkb_listunique li.tkb_full{border-right: none;}
.tkb_menu ul.tkb_listunique li:last-of-type{width: 50%;}
.tkb_menu a{
  display: block;
  padding: 14px 10px;
  text-decoration: none;
  color: #166BB5;
}




/*一覧ページ*/
.tkb_contentlist{
  display: flex;
  flex-wrap: wrap;
  gap: 32px 3.9%;
  margin-bottom: 40px;
}
.tkb_contentblock{width: 30.5%;}
.tkb_contentblock a{display: block;}
.tkb_listimage{
  aspect-ratio: 25/14;
  margin-bottom: 8px;
}
.tkb_listimage img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.tkb_listdatetime{
  font-size: 0.75rem;
  color: #000000;
}
.tkb_contentblock h2{
  text-decoration: underline;
  font-weight: bold;
  color: #2F7098;
}

.tkb_pager,
.tkb_archive{
  padding: 22px 16px;
  text-align: center;
  border-top: 1px solid #B9CBD6;
}
.tkb_pager ul,
.tkb_archive ul{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px 16px;
}
.tkb_pager ul li a,
.tkb_archive ul li a{
  display: inline-block;
  padding: 4px 8px;
  text-decoration: underline;
  font-size: 0.875rem;
  font-weight: bold;
  color: #3C799E;
}


/*.tkb_pager{margin-bottom: 24px;}*/
.tkb_archive{border-top: 1px solid #B9CBD6;}
.tkb_archive ul{flex-wrap: wrap;}


.tss_footer{background-color:#0097E8;}
.tss_gotop{
  width: 80px;
  z-index:99999;
}

/*-- AD関連 --*/
.tkb_ad_flexbox{
  width: fit-content;
  margin:40px auto;
}
.tkb_ad_flexbox .halfway .dummy-ad-box{
  display:flex;
  justify-content: space-around;
  gap:32px;
}




@media screen and (min-width: 821px) {
  .tss_wrap{margin-bottom:100px;}
  .tkb_backnumber a:hover{text-decoration: none;}

  .tkb_pager ul li a:hover,
  .tkb_archive ul li a:hover{text-decoration: none;}

  .tkb_menu a:hover{
    color: #868686;
    background-color: #FFF6D4;
  }
  .tkb_backnumberblock ul li a:hover .tkb_backnumberhead h3{color: #2DCC7D;}
  .tkb_tolist a:hover{text-decoration: none;}
  .tkb_menu{margin-top:30px;}
}






@media screen and (max-width:820px){
  .tkb_body{padding-bottom: calc(17.5vw + 120px);}

  .tkb_colm{
    flex-wrap: wrap;
    justify-content: center;
  }
  .tkb_mainblock{width: 100%;}
  .tkb_contentblock h2{font-size: clamp(0.875rem, 0.737rem + 0.51vw, 1rem);}/*14-16 430-820*/
  .tkb_rightblcok{width: 100%;}
  .tkb_backnumberblock ul li a .tkb_backnumberhead{
    width:80%;
    padding-right:1em;
  }

}
@media screen and (max-width:430px){
  .tkb_contentlist{gap: 32px 2%;}
  .tkb_contentblock{width: 49%;}

  /*-- AD --*/
  .tkb_ad_flexbox{
    width:fit-content;
    margin:24px auto;
  }
}