@charset "UTF-8";
/* 時間講師の働き方とお金情報 */

.hs-index{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  margin:0 0 40px;
}
.hs-index__link{
  display:inline-block; text-decoration:none;
  background:var(--hs-cream-50); border:2px solid var(--hs-green-600);
  color:var(--hs-green-800); font-weight:700; font-size:.92rem;
  border-radius:999px; padding:.55em 1.3em; min-height:44px;
  display:inline-flex; align-items:center;
}
.hs-index__link:hover{ background:var(--hs-green-600); color:var(--hs-cream-50); }

.hs-catlist{ display:grid; gap:34px; }
.hs-catlist__group{ scroll-margin-top:90px; }
.hs-catlist__title{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  font-family:var(--hs-font-round); font-weight:900; font-size:1.2rem;
  color:var(--hs-cream-50); background:var(--hs-green-700);
  border-radius:var(--hs-radius) var(--hs-radius) 0 0;
  margin:0; padding:.8em 1.1em;
}
.hs-catlist__title small{ font-size:.78rem; font-weight:500; opacity:.85; }

.hs-catlist__items{
  list-style:none; margin:0; padding:0;
  background:var(--hs-cream-50);
  border:2px solid var(--hs-green-700); border-top:0;
  border-radius:0 0 var(--hs-radius) var(--hs-radius);
  overflow:hidden;
}
.hs-catlist__item{ border-bottom:1px dashed var(--hs-cream-300); }
.hs-catlist__item:last-child{ border-bottom:0; }

.hs-catlist__item.is-ready a{
  display:flex; gap:14px; align-items:baseline; flex-wrap:wrap;
  padding:.85em 1.2em; text-decoration:none; color:var(--hs-text); font-weight:700;
}
.hs-catlist__item.is-ready a::before{
  content:"›"; color:var(--hs-green-600); font-size:1.2em; line-height:1;
}
.hs-catlist__item.is-ready a:hover{ background:var(--hs-cream-100); }
.hs-catlist__item.is-ready a:hover .hs-catlist__name{ text-decoration:underline; }
.hs-catlist__name{ flex:1 1 60%; }
.hs-catlist__date{ font-size:.8rem; color:var(--hs-muted); font-weight:400; }

.hs-catlist__item.is-soon{
  display:flex; gap:12px; align-items:baseline; flex-wrap:wrap;
  padding:.85em 1.2em; color:var(--hs-muted);
}
.hs-catlist__item.is-soon .hs-catlist__name{ flex:1 1 60%; }
.hs-catlist__soon{
  flex:0 0 auto; font-size:.72rem; font-weight:700;
  background:var(--hs-cream-200); color:var(--hs-muted);
  border-radius:4px; padding:.15em .7em;
}

.hs-catlist__more{ margin:.9em 0 0; text-align:right; }
.hs-catlist__more a{ font-size:.9rem; font-weight:700; color:var(--hs-green-600); text-decoration:none; }
.hs-catlist__more a:hover{ text-decoration:underline; }

/* スマホでは、カテゴリーのボタンを1行に1つずつ並べる
   （短い名前だけが横に2つ並んでしまうのを防ぐ） */
@media screen and (max-width:600px){
  .hs-index{ flex-direction:column; align-items:center; }
}