/* ===== カスタムプロパティ（変数）の定義 ===== */
:root {
  --main-blue: #5F7FB3;  /* メインの青色 */
  --highlight-orange: #E39A4C; /* アクセントのオレンジ色 */
  --accent-green: #5BA7A6; /* 青寄りの緑色 */
  --highlight-purple: #6A86C8; /* 紫系アクセント */
  --light-gray: #f5f7fa; /* 背景用の明るいグレー */
}

body {
  font-family: "Noto Sans JP", sans-serif;
  background: var(--light-gray); /* 明るいグレー背景 */

}

/* ===== 全体 ===== */
.achievement {
  max-width: 960px;
  margin: 80px auto;
}

.achievement-title {
  text-align: center;
  font-size: 28px;
  margin-bottom: 30px;
}

/* ===== 製品 ===== */
.product {
  border-radius: 18px;
  margin-bottom: 26px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  overflow: hidden;
}

.product-header {
  padding: 20px 28px;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}

/* ===== 製品カラー ===== */
.sensor   { background: var(--main-blue); } /* メイン青 */
.mimamori { background: var(--highlight-purple); } /* 紫系 */
.qr       { background: var(--highlight-purple); }
.ic       { background: var(--accent-green); } /* 青寄りの緑 */
.morido   { background: var(--highlight-purple); }
.paneru   { background: var(--accent-green); }
.kasoku   { background: var(--accent-green); }
.hukan   { background: var(--highlight-orange); } /* アクセントオレンジ */
.kanri   { background: var(--accent-green); }
.kaisu   { background: var(--main-blue); } /* メイン青 */

.product-content {
  background: #fff;
  max-height: 0;
  overflow: hidden;
  padding: 0 28px;
  transition: max-height .6s ease, padding .4s ease;
}

.product-content.is-open {
  max-height: 1200px;
  padding: 10px 28px 20px;
}


/* ===== 年 ===== */
.year {
  border-bottom: 1px solid #eee;
}

.year-header {
  padding: 16px 0;
  cursor: pointer;
  display: flex;
  gap: 14px;
  align-items: center;
}

.year-badge {
  background: #ffedd5;
  color: #c2410c;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
}

.year-count {
  color: #666;
}

.year-content {
  max-height: 0;
  overflow: hidden;
  padding-left: 28px;
 display: none;   /* 中身解禁するとき外す */
  transition: max-height .3s ease;
}

.year-content.is-open {
  max-height: 600px;
  padding-bottom: 16px;
display: block;
}


/* ===== 県 ===== */
.pref {
  margin-bottom: 12px;
}

.pref-title {
  font-weight: bold;
  margin-bottom: 6px;
}

/* ===== 実績 ===== */
.record {
  font-size: 15px;
  padding: 4px 0 4px 10px;
  border-left: 3px solid #ddd;
}

/* ===== アニメーション ===== */
@keyframes fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* ===== 開閉アニメーション ===== */
.product-content,
.year-content {
  background: #fff;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height 0.45s ease,
    opacity 0.3s ease;
}

/* 開いた状態 */
.product-content.is-open,
.year-content.is-open {
  max-height: 2000px; /* 中身に合わせて十分大きく */
  opacity: 1;
}
.product-header,
.year-header {
  transition: transform 0.15s ease, filter 0.15s ease;
}

.product-header:active,
.year-header:active {
  transform: scale(0.985);
  filter: brightness(0.95);
}
.product-header span {
  font-size: 14px;
  opacity: 0.85;
  transition: transform 0.3s ease;
}

.product-header.is-open span {
  transform: translateX(-4px);
}
.year-content.is-open .pref {
  animation: fadeUp 0.3s ease both;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.product-header::after {
  content: "▼";
  font-size: 14px;
  opacity: 0.8;
  transition: transform .3s ease;
}

.product-header.is-open::after {
  transform: rotate(180deg);
}
.product-header span {
  display: none;
}
.product {
  transition: transform .25s ease, box-shadow .25s ease;
}

.product:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0,0,0,.12);
}
.year-header {
  transition: opacity .2s ease;
}

.year-header:hover {
  opacity: .7;
}
.record {
  animation: recordFade .25s ease both;
}

@keyframes recordFade {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ===== 県名がない場合だけ余白を調整 ===== */
.pref:not(:has(.pref-title)) {
  margin-top: 14px;
  padding-left: 6px;
}

/* ===== 県名がない場合の実績を見やすく ===== */
.pref:not(:has(.pref-title)) .record {
  border-left: 3px solid #e0e6ee;
  padding-left: 14px;
  margin-top: 6px;
}

/* ===== 使用実績など最初の行に余白 ===== */
.pref:not(:has(.pref-title)) .record:first-child {
  margin-top: 10px;
}
.new-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  background: #e5533d;
  border-radius: 999px;
  vertical-align: middle;
  animation: pop .4s ease;
}

@keyframes pop {
  0%   { transform: scale(.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.year-header.is-private {
  opacity: .65;
  cursor: default;
}

/*
.year-header.is-public::after {
  content: "公開中";
  font-size: 11px;
  margin-left: 8px;
  color: #16a34a;
}
*/