@charset "UTF-8";
/* トップページ */

/* こんな悩みはありませんか？ */
.hs-worry{
  display:grid;
  grid-template-columns:minmax(200px,300px) auto;
  gap:36px; align-items:center; justify-content:center;
}
.hs-worry__figure{ text-align:center; }
.hs-worry__img{
  width:100%; max-width:300px; border-radius:50%;
  border:6px solid var(--hs-cream-50); box-shadow:var(--hs-shadow);
}
/* 吹き出しは「文字の幅」に合わせてふくらませる。
   横幅いっぱいに広げると、短い文の右側が大きく空いて見えてしまうため。
   左右交互に寄せて、会話しているような並びにしている。 */
.hs-worry__list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:20px;
}
.hs-worry__list > li{ width:fit-content; max-width:100%; }
.hs-worry__list > li:nth-child(even){ margin-left:clamp(24px,6vw,80px); }

@media screen and (max-width:834px){
  .hs-worry{ grid-template-columns:1fr; gap:24px; }
  .hs-worry__img{ max-width:200px; }
  /* スマホでは交互に寄せると読みにくいので、すべて左そろえにする */
  .hs-worry__list > li:nth-child(even){ margin-left:0; }
}

/* 4つの視点のリード */
.hs-viewpoint-lead{ margin-bottom:40px; }
.hs-viewpoint-lead__list{
  list-style:none; margin:0 auto 28px; padding:0;
  display:grid; gap:10px; max-width:640px;
}
.hs-viewpoint-lead__list li{
  background:var(--hs-green-800); color:var(--hs-cream-50);
  font-family:var(--hs-font-round); font-weight:700;
  border-radius:var(--hs-radius-sm); padding:.75em 1.2em;
  text-align:center; font-size:1rem; line-height:1.6;
}

/* 狭い画面ではタブをやめてカードを並べる */
.hs-tabs.is-cards .hs-tabs__panels{
  background:transparent; border:0; padding:0;
  display:grid; gap:16px;
}
.hs-tabs.is-cards .hs-tabs__panel{
  background:var(--hs-cream-50);
  border:2px solid var(--hs-green-600);
  border-radius:var(--hs-radius);
  padding:22px;
}

/* お知らせの新着一覧 */
.hs-news-list{
  list-style:none; margin:28px auto 0; padding:0;
  max-width:820px;
}
.hs-news-list__item{ border-bottom:1px dashed var(--hs-cream-300); }
.hs-news-list__item a{
  display:flex; gap:16px; align-items:baseline; flex-wrap:wrap;
  padding:.95em .4em; text-decoration:none; color:var(--hs-text);
}
.hs-news-list__item a:hover{ background:var(--hs-cream-50); }
.hs-news-list__date{
  flex:0 0 auto; font-size:.85rem; font-weight:700; color:var(--hs-green-600);
}
.hs-news-list__title{ flex:1 1 60%; font-weight:500; }
.hs-news-list__item a:hover .hs-news-list__title{ text-decoration:underline; }

/* 自由なお知らせ（管理画面「ページ内容の編集」で入力） */
.hs-news-box{
  background:var(--hs-cream-50);
  border:3px solid var(--hs-green-600);
  border-radius:var(--hs-radius);
  padding:28px;
  box-shadow:var(--hs-shadow);
  max-width:820px; margin:0 auto 28px;
}
.hs-news-box > :first-child{ margin-top:0; }
.hs-news-box > :last-child{ margin-bottom:0; }
.hs-news-box img{ max-width:100%; height:auto; }
@media screen and (max-width:600px){
  .hs-news-box{ padding:20px; }
}