/*
 * user.css
 *
 * Since:   2018-07-19
 * Update:  2018-07-26
 *
 */

/*
 * user.css
 *
 * Since:   2018-07-19
 * Update:  2018-07-26
 *
 */

/* ▼▼▼ ソート機能のスタイルを追記 ▼▼▼ */
.sort-container {
  text-align: right;
  margin: 0 0 20px 0;
  font-size: 14px;
}

.sort-container label {
  margin-right: 8px;
}

#sort-select {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}


/* フィルターと検索のコンテナ */
.filter-search-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 15px;
  margin-bottom: 20px;
  background-color: #f7f7f7;
  border: 1px solid #eee;
  border-radius: 8px;
}

/* 各フィルター要素 */
.filter-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
    width: 100%;
}

.filter-item label {
  font-size: 13px;
  font-weight: bold;
  color: #555;
}

/* 検索ボックスのスタイル */
.search-box {
  display: flex;
}

#search-input {
  border: 1px solid #ccc;
  padding: 5px 8px;
  border-radius: 4px 0 0 4px;
}

#search-button {
  padding: 5px 12px;
  border: 1px solid #007bff;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  margin-left: -1px; /* ボタンと入力欄の境界線を重ねる */
}
#search-button:hover {
  background-color: #0056b3;
}

/* ソートUIの調整 */
.sort-container {
  margin-bottom: 20px;
  padding: 0 10px; /* 少し余白を追加 */
}

/* select要素の共通スタイル */
#category-filter, #sort-select {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}



/* ===== Category Chips (丸ボタン) ===== */
.category-chips{
  display:flex;
    /* 修正: nowrap から wrap に変更し、折り返す */
    flex-wrap:wrap; 
    gap:20px;
  padding: 6px 0;
    /* justify-content: space-between; はPC版の4列を均等に配置するために維持 */
    justify-content: space-between;
    
}

.category-chips .chip{
    /* 修正: box-sizing を追加し、幅を調整 */
    box-sizing: border-box; 
    /* PC: 4列 (25% - gap/4 ≒ 23%) */
    width: 23%; 
  
  appearance:none; border:2px solid #08a89e;
    background:#fff;
  color:#08a89e;
    border-radius:9999px;
    font-size: 1.4rem;
  font-weight:700; letter-spacing:.08em;
  padding:14px 0.5em; line-height:1; cursor:pointer; user-select:none;
  transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
background:#08a89e;
    color:#fff;
    border-color:#08a89e;
}

/* hover/focus */
.category-chips .chip:hover{ background:#e9fbf9; }
.category-chips .chip:focus-visible{
  outline:0; box-shadow:0 0 0 3px rgba(8,168,158,.25);
}

/* active（選択中） */
.category-chips .chip.is-active{
    background:#fff;
  color:#08a89e;
  
}

/* ALLのみデフォルトゴースト、他は通常ゴーストでもOK（必要なら個別に） */
.category-chips .chip[data-value="all"]{}

/* スマホで少し詰める */
@media (max-width: 767.98px){
  .category-chips{ 
      gap:12px; 
      /* スマホでは2列にするため、中央寄せに変更 */
      justify-content: center; 
  }
  .category-chips .chip{ 
      padding:12px 28px; 
      font-size:14px; 
      /* 修正: 2列表示（48% + gap 12px） */
      width: 48%; 
  }
}



/* ===== Related Articles — 指示デザインに合わせた行スタイル ===== */
.related-articles{
  margin: 8px 0 32px;
  padding: 28px 24px 14px;
  background: #FFFFFF;               /* ミント系の背景（スクショに近い） */
  border-radius: 16px;
}

#related-articles-title{
    margin-top: 58px;
    text-align:center;
  font-weight:700;
  font-size: 2.8rem;
  color:#7A7A7A;
  letter-spacing:.06em;
}


.related-articles .related-title{
  text-align:left;
  font-weight:700;
  font-size: 1.4rem;
  color:#7a8b86;
  letter-spacing:.06em;
  margin: 0 0 8px;
}

/* 2カラムの行リスト */
.related-list{
  display:flex;
  flex-wrap:wrap;
  gap:24px 4%;
  list-style:none;
  margin:0; padding:4px 6px 0;       /* 内側の余白で左右に空気感 */
}
.related-item{ flex:0 0 48%; }       /* 2カラム */

.related-link{
  display:grid;
  grid-template-columns:auto 1fr auto;  /* #番号 | テキスト | › */
  column-gap:14px;
  align-items:flex-start;
  text-decoration:none;
  border-radius:12px;                 /* 角丸は親背景に溶ける */
  background: transparent;            /* カード背景は無し（行スタイル） */
}

/* 左の #番号（大きめ・オレンジ） */
.related-num{
  font-size: 3rem;
  line-height:1;
  color:#f9b233;                      /* オレンジ */
  margin-top: 4px;
  flex-shrink:0;
    min-width: 2em;
}

/* 中央のテキスト */
.related-texts{ position:relative; min-width:0; }
.related-title{
  margin:0 0 8px;
  font-weight:700;
  line-height:1.6;
  color:#516060;                      /* やや濃いグレーグリーン */
  word-break:break-word;
}
.related-author{
  margin:0;
  font-size: .92rem;
  color:#7a8b86;                      /* 薄めのグレーグリーン */
}

/* 右の矢印（グリーン） */
.related-arrow{
  margin-left:12px;
  font-size: 20px;
  color:#08a89e;
  line-height:1;
  transform: translateY(2px);
}

/* 区切り線：各行下に細線（左右に余白あり） */
.related-link::after{
  content:"";
  grid-column: 1 / -1;
  border-bottom:1px solid #e6efed;
  margin: 14px 0 0;
}
.related-item:nth-child(2n) .related-link::after{
  /* 右列の線長をそろえる微調整が必要ならここで margin を調整 */
}

/* hover は軽く矢印をスライド */
.related-link:hover .related-arrow{ transform: translate(2px,2px); }

/* スマホ：1カラム化 */
@media (max-width: 767.98px){
  .related-item{ flex-basis:100%; }
  .related-list{ gap:10px 0; padding: 4px 0 0; }
}



/* 1) リストを Flex → Grid に */
.related-list{
  display: grid;                          /* ← ここを grid に */
  grid-template-columns: repeat(2, minmax(0,1fr));
  column-gap: 4%;
  row-gap: 24px;
  list-style: none;
  margin: 0;
  padding: 4px 6px 0;
}

/* 2) Flex前提の幅指定を解除（高さは行で自動的に揃う） */
.related-item{
  min-width: 0;                           /* 文字折返しの保険 */
  /* flex-basis: 48%; は削除 */
}

/* 3) リンクを行の“器”にして下線を底に固定 */
.related-link{
  position: relative;                     /* 下線を絶対配置するため */
  display: grid;
  grid-template-columns: auto 1fr auto;   /* #番号 | テキスト | › */
  column-gap: 14px;
  align-items: flex-start;
  text-decoration: none;
  background: transparent;
  border-radius: 12px;
  padding-bottom: 16px;                 /* ← 下線分の余白を確保（下18px） */
  height: 100%;                           /* 行の高さにフィット */
}

/* 4) 下線：各行の“底”に固定（左右はお好みで調整） */
.related-link::after{
  content: "";
  position: absolute;
  left: 0;                                /* 例：左右に余白を付けたいなら 8px などに */
  right: 0;
  bottom: 0;
  border-bottom: 1px solid #e6efed;
  margin: 0;                               /* 以前の margin は不要 */
}

/* スマホ：1カラム */
@media (max-width: 767.98px){
  .related-list{ grid-template-columns: 1fr; row-gap: 10px; padding: 4px 0 0; }
}