@charset "utf-8";
/*************************************************

  Styles info 2024.11

**************************************************/


/*************************************************
  top
**************************************************/

.pagenation-count{
  font-size: 65%;
  display: inline-block;
}
.pagenation-count > span::before{
  content: attr(data-num);
}
.pagenation-count > .current{padding-left: 1em;}
.info .info-lists{
  border-top: 1px dotted var(--color-gray);
  position: relative;
  min-height: calc((26px + (14px * 1.8 + 1px)) * 10 + 1px);
}

.info .info-lists li{display: flex;padding: 1em 0;border-bottom: 1px dotted var(--color-gray);}
.info .info-lists .date{flex: 1;max-width: 10em;display: inline-block;font-size: 14px;font-size: var(--px14);}
.info .info-lists .title{flex: 1;display: inline-block;}
.info .info-lists .title a{font-weight: var(--font-bold);}
.info .info-lists .title a:hover{text-decoration: underline;}

.info .info-lists li.hide{
  opacity: 0;
  transition: opacity 0.5s ease;
  height: 0;
  overflow: hidden;
  padding: 0;
  border: none;
}

.show {
  display: flex;
  opacity: 1;
  transition: opacity 1s ease;
}

.fade {
  will-change: opacity; /* パフォーマンス向上のため */
}

.info .pagenation.lists{display: flex;}
.info .pagenation.lists a{
  padding: 20px;
  padding: var(--px20);
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-top: 1px dotted var(--color-gray);
  border-bottom: 1px dotted var(--color-gray);
  margin-top: 30px;
  margin-top: var(--px30);
  line-height: 1;
}
.info .pagenation.lists a.prev{
  padding-left: 50px;
  padding-left: var(--px50);
  background: url(/assets/img/arrow-pagenation-l.png) center left no-repeat;
}
.info .pagenation.lists a.next{
  padding-right: 50px;
  padding-right: var(--px50);
  background: url(/assets/img/arrow-pagenation-r.png) center right no-repeat;
  text-align: right;
}
.info .pagenation.lists a.top{
  text-align: center;
  border-right: 1px dotted var(--color-gray);
  border-left: 1px dotted var(--color-gray);
}
.info .pagenation.lists a.disabled{pointer-events: none;cursor: none;opacity: 0.3;}



/*************************************************
  記事詳細 style属性、埋め込みCSS、Class等の調整
**************************************************/
.aligncenter{
  /* max-width: 100%; */
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.wp-block-table.aligncenter, .wp-block-table.alignleft, .wp-block-table.alignright {
  display: table;
  width: auto;
}

.info.detail .content img{width: 100%;max-width: 500px;height: auto;}

.info.detail .content p:not(:last-child){margin-bottom: 15px;margin-bottom: var(--px15);}
.info.detail .content table{
  display: table;
  width: auto !important;
  line-height: 2;
  margin-bottom: 25px;
  margin-bottom: var(--px25);
}
.info.detail .content table th,
.info.detail .content table td{padding: 0.15em 0.5em;width: auto !important;}


/*************************************************
  記事詳細
**************************************************/
/* check用 */
/* section{min-height: 100vh;}  */

.info.detail .sec-info > header{line-height: 1.5;}
.info.detail .sec-title{
  margin-bottom: 10px;
  margin-bottom: var(--px10);
}
.info.detail .sec-info .date{
  text-align: right;
  margin-bottom: 5px;
  margin-bottom: var(--px5);
}
.info.detail .sec-info .tags{
  display: flex;
  flex-wrap: wrap;
}
.info.detail .sec-info .tags > span,
.info.detail .sec-info .tag{
  background-color: var(--key-color);
  color: #fff;
  display: inline-block;
  font-size: 11px;
  font-size: var(--px11);
  text-align: center;
  border-radius: 4px;
  padding: 1px 10px;
  padding: var(--px1) var(--px10);
}
.info.detail .sec-info .tags > span{
  background-color: var(--color-gray);
  color: #fff;
  margin-right: 10px;
  margin-right: var(--px10);
}
.info.detail .sec-info .tags > span{
  margin-top: 10px;
  margin-top: var(--px6);
}
.info.detail .sec-info .tag:hover{text-decoration: underline;}
.info.detail .content{
  margin-top: 25px;
  margin-top: var(--px25);
  border-bottom: 1px dotted var(--color-gray);
  padding-bottom: 25px;
  padding-bottom: var(--px25);
}


/*************************************************
  ユーティリティ
**************************************************/

/*flex*/
.info.detail .flex{display: flex;gap: 1rem;flex-wrap: wrap;}
.info.detail .flex > *{flex: 1;margin-bottom: 0 !important;}
.info.detail .flex.left{justify-content: flex-start;}
.info.detail .flex.left > *{flex: initial;}

.info.detail .flex2{display: flex;gap: 1rem;flex-wrap: wrap;}
.info.detail .flex2 > *{margin-bottom: 0 !important;}
.info.detail .flex2.left{justify-content: flex-start;}
.info.detail .flex2.left > *{flex: initial;}

/*横サイズ*/
.info.detail .w100,
.info.detail .w100 > img{width: 100%;max-width: none;}
.info.detail .w90{width: 90%;max-width: none;}
.info.detail .w90 > img{width: 100%;max-width: none;}
.info.detail .w80{width: 80%;max-width: none;}
.info.detail .w80 > img{width: 100%;max-width: none;}
.info.detail .w70{width: 70%;max-width: none;}
.info.detail .w70 > img{width: 100%;max-width: none;}
.info.detail .w60{width: 60%;max-width: none;}
.info.detail .w60 > img{width: 100%;max-width: none;}
.info.detail .w50{width: 50%;max-width: none;}
.info.detail .w50 > img{width: 100%;max-width: none;}
.info.detail .w40{width: 40%;max-width: none;}
.info.detail .w40 > img{width: 100%;max-width: none;}
.info.detail .w30{width: 30%;max-width: none;}
.info.detail .w30 > img{width: 100%;max-width: none;}
.info.detail .w20{width: 20%;max-width: none;}
.info.detail .w20 > img{width: 100%;max-width: none;}
.info.detail .w10{width: 10%;max-width: none;}
.info.detail .w10 > img{width: 100%;max-width: none;}

/*table*/
.info.detail table.w100{width: 100% !important;}
.info.detail table.center{margin-left: auto;margin-right: auto;}
.info.detail table.right{margin-left: auto;margin-right: 0;}

.info.detail table th.w10,
.info.detail table td.w10{width: 10% !important;}
.info.detail table th.w20,
.info.detail table td.w30{width: 20% !important;}
.info.detail table th.w30,
.info.detail table td.w30{width: 30% !important;}
.info.detail table th.w40,
.info.detail table td.w40{width: 40% !important;}
.info.detail table th.w50,
.info.detail table td.w50{width: 50% !important;}
.info.detail table th.w60,
.info.detail table td.w60{width: 60% !important;}
.info.detail table th.w70,
.info.detail table td.w70{width: 70% !important;}
.info.detail table th.w80,
.info.detail table td.w80{width: 80% !important;}
.info.detail table th.w90,
.info.detail table td.w90{width: 90% !important;}

@media screen and (max-width: 785px) {
  .info.detail .sp100{
    width: 100% !important;
  }
}

/*見出し*/
.info.detail h3{font-weight: var(--font-bold);font-size: 18px;font-size: var(--px18);margin-bottom: 1em;}

/*textalign*/
.info.detail .tx-center{text-align: center;}
.info.detail .tx-right{text-align: right;}

/*textdecolation*/
.info.detail .tx-red{color: var(--attention-color);}
.info.detail .tx-underline{text-decoration: underline;}
.info.detail .tx-bold{font-weight: bold;}