@charset "utf-8";

.mt200 {
    margin-top:200px;
}

.text-center {
    text-align:center;
}

.header {
    text-align:center;
    margin:0 auto;
}

header {
    background:var(--primary-inverse-color);
}

/*「NEW」アイコン
---------------------------------------------------------------------------*/
.newicon {
    background: #F00;  /*背景色*/
    color: #FFF;    /*文字色*/
    font-size: 70%;    /*文字サイズ*/
    line-height: 1.5;
    padding: 2px 5px;
    border-radius: 2px;
    margin: 0px 5px;
    vertical-align:top;
}

/*カテゴリーアイコン
---------------------------------------------------------------------------*/
.categoryicon {
    background: #000000;  /*背景色*/
    color: #FFFFFF;        /*文字色*/
    font-size: 70%;        /*文字サイズ*/
    line-height: 1.5;
    padding: 4px 10px;
    border-radius: 2px;
    margin: 0px 0px 0px 10px;
}

a span.categoryicon {
    vertical-align:middle;
    white-space:nowrap;
}

a:has(span.categoryicon) {
  text-decoration: none;
}

.category_button_box {
    display:inline-flex;
    flex-wrap:wrap;
    gap:5px;
}

/* フォーム用
--------------------------------------------------------------------------*/
form#form {
    margin-bottom: 30px;  /*ボックス同士の上下間に空けるスペース*/
    padding: 20px;      /*ボックス内の余白*/
    background: #fff;    /*背景色*/
    box-shadow: 5px 5px 20px rgba(0,0,0,0.1);  /*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.1は色が10%出た状態。*/
}

/* しきい値は各テンプレートで調整すること */
@media screen and (min-width:900px){

.header {
    width:80%;
}

form#form {
    width:80%;
}

/*画像ブロック共通*/
.list-half .image-l, .list-half .image-r {
    width: 38%;      /*幅。下のテキストブロックのwidthと調整して下さい。*/
}

/*テキストブロック*/
.list-half .text{
    width: 62%;      /*幅。上の「画像ブロック共通」のwidthと調整して下さい。*/
}

}

/*btn用
---------------------------------------------------------------------------*/
p .btn {
  padding: 5px 10px;    /*上下、左右へのボタン内の余白*/
  border: 1px solid #ccc;  /*枠線の幅、線種、色*/
  border-radius: 3px;    /*角丸のサイズ*/
  background: #eee;    /*背景色*/
}
/*マウスオン時の設定*/
p .btnbtn:hover {
  border: 1px solid #999;  /*枠線の幅、線種、色*/
  background: #fff;    /*背景色*/
}

/*tr（１行分）タグ設定*/
.ta1 tr {
    border-bottom: 1px solid #ccc;  /*テーブルの下線。幅、線種、色*/
}

/* 2025-05-23 */
.list figure {
  width: 100%;                /* 親要素 .list にフィット */
  max-width: 100%;
  height: 280px;              /* 高さ固定（必要に応じてmax-height化も可） */
  background-color: #fff;     /* 余白部分を白に */
  display: flex;
  align-items: center;        /* 縦中央揃え */
  justify-content: center;    /* 横中央揃え */
  overflow: hidden;
  margin: 0;
}

.list figure img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;        /* 念のため：トリミング防止 */
}

/* 2025-06-02 */
.list figure.header {
  height: 500px;
}