/* widthサイズにpadding,marginを含める設定 */
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

/*--------------------------------------------------------------------------------*/

/*  フォント  */

.font_ss {font-size: 0.7rem}
.font_s {font-size: 0.85rem}
.font_l {font-size: 1.15rem}
.font_ll {font-size: 1.5rem}

.center{text-align:center}

.blue_txt {color:#1d56a5}

.orange_txt {color:#FF5000}

.em_yellow {
  color: #b8860b; /* 落ち着いた金色 */
  font-weight: bold;
}

.em_pink {
  color: #e65b77; /* 優しいピンクレッド */
  font-weight: bold;
}

.em_blue {  /* 青系強調 */
  color: #005faf;
  font-weight: bold;
}

.em_green {
  color: #2e8b57; /* シーグリーン */
  font-weight: bold;
}


/*.hanten {color:transparent;}*/
.hanten {color:rgba(255,255,255,0)}

.underline{
    background: linear-gradient(transparent 70%, #f5ff80 30%);
  }

.underline_red{
    background: linear-gradient(transparent 70%, #F99 30%);
  }


/*  表示    */
.pc_view{display: block}
.mobile_view{display: none}

/*  スクロール制御  */
html {
	scroll-behavior: smooth;
}

/*  全体を中央揃え  */
body {
    display: flex;
    justify-content: center;
    align-items: center;

    /*  背景色  */
    background-color: #E7E7FF;

    /*  自動挿入される広告を下に出す    */
    flex-direction: column;

}

/*  ボタン  */
.btn{
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    color: #fff;
    opacity: 0.9;
    background-image: linear-gradient(#44F 0%, #DDF 100%);
    transition: .4s;
}

.btn:hover {
    opacity: 1;
    background-image: linear-gradient(#22F 0%, #BBF 70%);
}

/*--------------------------------------------------------------------------------*/

/*  HGレイアウト基本設定    */
.hg__header { grid-area: header; }
.hg__footer { grid-area: footer; }
.hg__main { grid-area: main; }
.hg__left { grid-area: navigation; }
.hg__right { grid-area: ads; }

.hg {
    width: min(1500px,100%);
    display: grid;
    grid-template-areas: "header header header"
                         "navigation main ads"
                         "footer footer footer";
    grid-template-columns: 200px minmax(0, 1fr) 180px;
    grid-template-rows: 160px
                        1fr
                        auto;
    min-height: 100vh;
}
/*--------------------------------------------------------------------------------*/


/*後で消す枠表示*/
.hg{
    border: 1px solid;
    background-color: #FFF;
}

.hg__header,
.hg__footer,
.hg__main,
.hg__left,
.hg__right,
.header_left,
.header_right { border: 1px solid; }

/*--------------------------------------------------------------------------------*/
/*  ヘッダー関連    */
.hg__header {
    display: flex;
    flex-wrap: nowrap;

}

.header_left {
    min-width: 300px;
    /*min-width: 0;*/

    /* 外側距離 */
    margin: 2px;

    /* 内側距離 */
    padding: 2px;

}

.header_right{
    flex-grow:1;
    min-width: 0;
}


/* バナー下の小メニュー 大枠 */
#header_nav{
    /* 子要素を横並び */
    display: flex;

    /* 子要素の配置 中央揃え */
    justify-content: center;

    /* 背景色を設定 */
    background: #C7C7FF;

    /* 枠線 */
    border-width: 1px;
    border-style: solid;

    /* リスト文頭の点表示 */
    list-style: none;

    /* 表示位置を左に詰める */
    padding-left: 0;
}

/* バナー下の小メニュー */
#header_nav li{

    /*  外側余白    */
    margin:3px;

    /* 文字中央揃え */
    text-align: center;

    /* 横幅 */
	width: min(50px,30%);
    min-width: 0;
}

/*--------------------------------------------------------------------------------*/
/*  左サイドバー関連    */

/*  左サイドバー文字間隔*/
.hg__left{
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 2px;
    padding-right: 2px;
}

/*  左サイドバー検索ボックス    */
#search_container{
    display: block;
    padding: 2px;
    width: 100%;
    overflow: hidden;
    align-items: center;
}

    /* 左サイドバーの大項目 */
.hg__left h3{
    /*  文字間隔    */
    margin-left: 8px;
    margin-right: 8px;
    /* 下線 */
    border-bottom: solid 2px #88F;
}

/* 左サイドバーの項目 */
.hg__left ul{
    /* マーカーなし */
    list-style-type: none;
}

.side_menu_child{
  margin: 4px 0 0 14px;   /* ここでインデント */
  padding: 0;
  list-style: none;
}

.side_menu_child li{
  margin: 2px 0;
}

.side_menu_child a{
  font-size: 90%;         /* 小さめ文字 */
}

.side_menu_child a::before{
  content: "└ ";
}

/*  左サイドバースティッキー項目    */
.left_sticky{
    position: sticky;
    top: 0px;
	background: #fff;
}

.left_sticky{
    position: sticky;
    top: 0px;
	background: #fff;
}

/*  左サイドバー更新履歴    */
.left_kousin{

    /*  枠線 破線   */
    border-top: dashed 1px #000;
    border-bottom: dashed 1px #000;


    /*  スクロール設定  */
    overflow-y:scroll;
    overflow-x:hidden;

    /*  サイズ設定  */
    padding: 10px;
    width: 100%;
    height: 600px;
}

/*--------------------------------------------------------------------------------*/
/*  メイン関連  */

/*  中央大枠    */
.hg__main{

    /*  flex-box    */
    display:flex;

    /*  縦並び  */
    flex-direction: column;

    /*  1行1要素    */
    flex-wrap: nowrap;

    /*  開始位置 フレックスアイテムを起点に配置 */
    align-self: flex-start;

    /*  並び間隔    */
    justify-content:flex-start;

    /*  高さ    */
    height: 100%;
}

/*  メインエリアの最小幅設定    */
.hg__main>*{
    min-width:0;
}

/*  タイトル    */
/*.hg__main h1{background-color: #C7C7FF}*/
.hg__main h1{background: linear-gradient(#B7B7FF,#D7D7FF)}

/*
.main_title{
    flex-grow:1;
}

.main_middle{
    flex-grow:1;
}
*/

/*  メニュー    */
.main_menu{
    display:flex;
    flex-wrap: wrap;
}

/*  メニューアイテム    */
.main_menu .item{
    width: max(300px,100%);
    padding: 8px;
}

/*  メニューアイテム題目    */
.main_menu .item h2{
    font-size: 1rem;
    /*  下線    */
    border-bottom: solid 2px #88F;
}

/*  ピックアップエリアグリッド表示  */
.main_subtitle{
    font-size: 1rem;

    padding-left: 3px;
    /*  下線    */
    border-bottom: solid 2px #88F;
}

.main_pickup{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px,100%),1fr));
}
.main_pickup p{
    border: 1px solid;
}

/*  中央スティッキー    */
.main_sticky{
    position: sticky;
    top: 0px;
	background: #ffffff;
}

/*--------------------------------------------------------------------------------*/
/*  右サイドバー関連  */

/*  右側エリア設定  */
.hg__right{
    display: flex;

    /*  縦並び  */
    flex-direction: column;

    /*  左右余白    */
    padding-left: 8px;
    padding-right: 8px;
}

/*  アンダーライン  */
.hg__right b{
        border-bottom: solid 2px #88F;
}

/*  右側スティッキー設定    */
.right_sticky{
    position: sticky;
    top: 0px;
	background: #ffffff;
}

/*--------------------------------------------------------------*/
/*  抽出一覧専用    */

.listpage .hg__main{
    padding-left: 10px;
    padding-right: 10px;
}

.list_title {
    TEXT-ALIGN:CENTER;
    BACKGROUND-COLOR:#E7E7FF;
}

.sortbar {
  margin: 8px 0 12px;
  font-size: 14px;
}
.sortbar__label {
  margin-right: 6px;
}
.sortlink {
  display: inline-block;
  padding: 2px 8px;
  margin-right: 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  text-decoration: none;
}
.sortlink:hover {
  text-decoration: underline;
  border-color: #ccc;
}
.sortlink.is-active {
  text-decoration: underline;
  border-color: #bbb;
  background: #fafafa;
}

.listpage .listcount{
  margin: 0 0 10px;
  font-size: 12px;
  color: #666;
}

.listpage .meta{
  margin-left: 6px;
  font-size: 12px;
  color: #666;
  white-space: nowrap;
}


/* テーブルが既存デザインと衝突するなら list_table を使って調整 */
.list_table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
}
.list_table th, .list_table td {
    border: 1px solid #ccc;
    padding: 6px 10px;
    word-break: break-word;
}


/*検索用*/
.listpage .listsearch{
  margin: 8px 0 10px;
}
.listpage .listsearch__input{
  width: 60%;
  max-width: 420px;
  padding: 4px 8px;
}
.listpage .listsearch__btn{
  padding: 4px 10px;
  margin-left: 6px;
}
.listpage .listsearch__clear{
  margin-left: 10px;
  font-size: 12px;
}

/*--------------------------------------------------------------*/
/*  更新履歴  */

.latest_updates{
  margin: 12px 0;
}

.latest_updates__title{
  margin: 0 0 6px;
  font-size: 14px;
}

.latest_updates__list{
  /*list-style: none;*/
  padding: 0;
  margin-left: 10px;
  margin-right: 10px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.latest_updates__item{
  margin: 4px 0;
  line-height: 1.4;
}

.latest_updates__date{
  display: inline-block;
  width: 6.5em; /* 2026-01-14 くらいを想定 */
  font-size: 12px;
  color: #666;
}

.latest_updates .meta{
  margin-left: 6px;
  font-size: 12px;
  color: #666;
  white-space: nowrap;
}

.latest_updates__badge{
  display: inline-block;
  margin-right: 8px;
  padding: 1px 6px;
  border: 1px solid #f0b4b4;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #c43d3d;
  background: #fff5f5;
}


/*--------------------------------------------------------------*/
/*  フッター関連  */


.hg__footer{

    text-align: right;
}


/*  右側ボタンエリア    */
.hg__footer .footer_link{

    /*  重なり  */
    z-index: 1000000;

    /*  常時表示  */
    position: fixed;

    /*  横幅    */
    /*width: 180px;*/

    /*  縦幅    */
    height: 100px;

    /*  表示位置    */
    bottom: 10px;
    right: 0px;

    /*  透明度  */
    opacity: 0.7;

    /*  flex-box    */
    display: flex;

    /*  縦並び  */
    /*flex-direction: column;*/
    flex-direction: row;

    /*  両端配置 均等割り*/
    justify-content: space-around;
}

/*  ボタン本体  */
.hg__footer .footer_link span{

    /*  横幅    */
    width: 70px;

    /* 枠線 */
    border-width: 1px;
    border-style: solid;
}

/*--------------------------------------------------------------------------------*/
/*  スマートフォン用設定      */
@media screen and (max-width: 800px) {

    /*  再表示  */
    .mobile_view{display: block}
    .pc_view{display: none}

    .hg {
        grid-template-areas: "header"
                             "main"
                             "navigation"
                             "ads"
                             "footer";
        grid-template-columns: 100%;
        grid-template-rows: auto
                            auto
                            auto
                            auto
                            auto;
    }

    .hg__header {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .header_left {
        /*width: 100%;*/
        flex-grow:1;
    }

    .header_right {
        /*width: 100%;*/
        flex-grow:1;
    }

    .pickup_item {
        flex-grow:1;
    }


}





/*--------------------------------------------------------------*/


/* ▼ コピー枠スタイル ▼ */
.copy-block {
  position: relative;
  border: 2px dashed #9aa0a6;
  border-radius: 10px;
  padding: 1rem 3.5rem 1rem 1rem;
  background: #fbfbfc;
  overflow: auto;
  margin: 1.2em 0;
}

.copy-block .copy-target {
  margin: 0;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 0.35rem 0.65rem;
  font-size: 0.85rem;
  border: 1px solid #c6cbd1;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.copy-btn:hover { background: #f3f4f6; }
.copy-btn.is-copied {
  border-color: #34c759;
  box-shadow: 0 0 0 3px rgba(52,199,89,.15);
}
/* ▲ コピー枠スタイルここまで ▲ */