@charset "UTF-8";

/* ================================================================
 main
=================================================================== */

.articleBackground {
    /* margin-top: -98px; */
    height:250px;
}

.articleWrap {
    width: 90%;
    margin-top: -230px;
}

.articleWrap h1{
  font-size: 24px;
  line-height: 36px;
  margin-bottom: 10px;
}

/* アイキャッチ */

.articleWrap img {
    width: 100%;
}

/* ================================================================
　　目次
=================================================================== */

.chapter {
    padding: 25px 25px 0;
    margin-top: 10px;
}

.chapter h2 {
    position: relative;
    right: 20px;
}

.chapter summary {
    left: 53%;
    top: -22px;
}

.chapter details {
    margin-bottom: 5px;
}

/* ================================================================
　　見出し
=================================================================== */

.ba_midashi02{
  padding-bottom: 10px;
  font-size: 24px;
}

.ba_midashi03{
  font-size: 18px;
}

.ba_midashi04{
  font-size: 16px;
}

/* ================================================================
　　コンポーネント：テキスト周り
=================================================================== */

.articleWrap p {
  font-size: 14px;
  line-height: 2;
}

.articleWrap .makerDesign{
  background-size: 100% 60%;
}


/* リストブロック */

.articleWrap ul{
  margin: 30px 0;
}

/* アイキャッチ以外の画像 08.htmlで使用 */
.articleWrap .otherImg img{
  width: 100%;
}

/* ================================================================
　コンポーネント：表（テーブル）
=================================================================== */

.articleWrap table,
.articleWrap table th,
.articleWrap table td{
  font-size: 12px;
}



.articleWrap table td,
.articleWrap table th{
  padding: 5px;
}

.articleWrap table .tableh {
  width: 30%;
}

/* テーブルブロックスクロール */

.articleWrap .overTable table{
    width: 100%;
}

.articleWrap .overTable th,
.articleWrap .overTable td {
    min-width: 100px;
}

.articleWrap .overTable .tableh {
    width: 100px;
    min-width: 100px;
    box-sizing: border-box;
}

/* ================================================================
　ボタン
=================================================================== */

.articleWrap button {
    width: 100%;
    margin: 0 auto;
}


.articleWrap button a {
    margin: 0 auto 15px;
}

.articleWrap button a span{
    width: 85%;
}

.articleWrap button.btnWhite.w360 {
    width: 100%;
}

.articleWrap button.btnWhite.w360 a span{
    width: 85%;
}

/* ================================================================
　関連記事・注目記事
=================================================================== */

.articleListBox {
    width: 90%;
    padding-top: 70px;
}

.articleListBox h2{
  font-size: 24px;
  margin-bottom: 25px;
}

.articleList{
  grid-template-columns: 1fr;
  gap: 25px;
}

.articleList .a_text {
    justify-content: flex-start;
    min-height: auto;
}

.articleList a .a_title{
  min-height: auto;
}

.detailLink{
  margin: 25px 0 40px;
}

.articleListContainer.focus{
    background-image: linear-gradient(180deg, #bdd8ec, #f5eff6);
}

.articleListContainer.focus .articleListBox{
  padding-top: 65px;
}