@charset "UTF-8";

/* =========================================================
   references.css — 技術資料ページ専用
   (/index/references/)
   ========================================================= */

/* =========================================================
   Section + 2-column layout
   ========================================================= */
.docs {
  padding-block: clamp(60px, 7vw, 110px) clamp(80px, 10vw, 160px);
}
.docs__grid {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}
.docs__nav {
  position: sticky;
  top: clamp(90px, 9vw, 130px);
}
.docs__body {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 44px);
  min-width: 0;
}
/* Slimmer category buttons in the left nav (360px in Figma) */
.docs-nav-list a {
  font-size: 15px;
}

/* =========================================================
   References list (numbered with green circle)
   ========================================================= */
.docs-refs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2vw, 30px);
}
.docs-refs > li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.docs-refs__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-green-light);
  color: #fff;
  font-family: var(--ff-en);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
  line-height: 1;
  flex-shrink: 0;
}
.docs-refs__text {
  font-size: 15px;
  line-height: 1.85;
  color: var(--c-text);
  letter-spacing: 0.04em;
  padding-top: 4px;
}
.docs-refs__title {
  color: var(--c-green-light);
  font-style: normal;
  font-weight: 500;
}

/* =========================================================
   Seminar/講演会 sub-page: section groups + card list
   ========================================================= */
.docs-group {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 32px);
}
.docs-group + .docs-group {
  margin-top: clamp(28px, 3vw, 44px);
}
.docs-group__title {
  font-weight: 700;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: 0.04em;
  color: var(--c-green-light);
  line-height: 1.4;
  margin: 0;
}
.docs-group__title::after {
  content: "";
  display: block;
  width: 35px;
  height: 1px;
  background: var(--c-green-light);
  margin-top: clamp(12px, 1.4vw, 18px);
}

.docs-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 1.8vw, 26px);
}

/* Card with corner-fold accent */
.docs-card {
  position: relative;
  background: #f9f9f9;
  padding: clamp(28px, 3vw, 36px) clamp(28px, 3vw, 36px) clamp(20px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.docs-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, var(--c-green-light) 50%, transparent 50%);
}
.docs-card__title {
  font-weight: 700;
  font-size: clamp(16px, 1.4vw, 20px);
  letter-spacing: 0.04em;
  color: var(--c-green-light);
  line-height: 1.5;
  margin: 0;
}
.docs-card__divider {
  border: 0;
  border-top: 1px solid rgba(68, 106, 86, 0.25);
  margin: 6px 0 4px;
  height: 0;
}
.docs-card__desc {
  font-size: 15px;
  line-height: 1.85;
  color: var(--c-text);
  letter-spacing: 0.04em;
  margin: 0;
}
.docs-card__link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  align-self: flex-start;
  margin-top: clamp(10px, 1.2vw, 16px);
  color: var(--c-text);
  font-size: 15px;
  letter-spacing: 0.04em;
  transition: opacity .2s var(--ease);
}
.docs-card__pill {
  position: relative;
  display: inline-block;
  width: 53px;
  height: 24px;
  border-radius: var(--r-pill);
  background: var(--c-green);
  flex-shrink: 0;
}
.docs-card__pill::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 18px;
  height: 1.2px;
  background: #fff;
  transform: translateY(-50%);
}
.docs-card__pill::after {
  content: "";
  position: absolute;
  right: 11px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 1.2px solid #fff;
  border-right: 1.2px solid #fff;
  transform: translateY(-50%) rotate(45deg);
}

/* =========================================================
   Books table (書籍 — 3-column grid with gray cells)
   ========================================================= */
.docs-books {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.docs-books__row {
  display: grid;
  grid-template-columns: minmax(0, 332fr) minmax(0, 235fr) minmax(0, 128fr);
  gap: 8px;
  align-items: stretch;
}
.docs-books__cell {
  background: #f7f7f7;
  padding: 16px 18px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-green);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
}
.docs-books__date {
  justify-content: center;
  font-weight: 400;
  text-align: center;
}

/* =========================================================
   Essay list (タイトル + メタ + 下罫線)
   ========================================================= */
.docs-essays {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.docs-essays > li {
  padding: clamp(16px, 1.6vw, 22px) 0;
  border-bottom: 1px solid rgba(68, 106, 86, 0.25);
}
.docs-essays > li:first-child {
  padding-top: 6px;
}
.docs-essays > li:last-child {
  border-bottom: 0;
}
.docs-essays__title {
  font-weight: 700;
  font-size: clamp(16px, 1.4vw, 20px);
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--c-green-light);
  margin: 0 0 10px;
}
.docs-essays__meta {
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-text);
  letter-spacing: 0.04em;
  margin: 0;
}

/* =========================================================
   BM detail page (本郷地区 etc.) — long article layout
   ========================================================= */
.bm-detail__title {
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--c-green-light);
  margin: 0 0 clamp(40px, 5vw, 60px);
}
.bm-detail__section {
  margin-top: clamp(36px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.4vw, 22px);
}
.bm-detail__section:first-of-type { margin-top: 0; }
.bm-detail__section-title {
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: 0.04em;
  color: var(--c-green-light);
  line-height: 1.5;
  margin: 0;
}
.bm-detail__section-title::after {
  content: "";
  display: block;
  width: 35px;
  height: 1px;
  background: var(--c-green-light);
  margin-top: clamp(12px, 1.4vw, 18px);
}
.bm-detail__sub {
  margin-top: clamp(20px, 2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bm-detail__sub-title {
  font-weight: 700;
  font-size: clamp(16px, 1.4vw, 20px);
  letter-spacing: 0.04em;
  color: var(--c-green-light);
  line-height: 1.5;
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(68, 106, 86, 0.3);
}
.bm-detail__section p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--c-text);
  letter-spacing: 0.04em;
  margin: 0;
}

/* Green banner (file naming convention etc.) */
.bm-detail__banner {
  background: var(--c-green-light);
  color: #fff !important;
  text-align: center;
  padding: 12px 20px;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  margin: 6px 0;
}
.bm-detail__banner--tall {
  padding: 16px 20px;
  line-height: 1.7;
}

/* Figure grid: 2-column responsive image grid */
.bm-detail__figgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.6vw, 22px);
  margin: clamp(16px, 2vw, 24px) 0;
}
.bm-detail__figgrid--2col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bm-detail__figgrid-item {
  margin: 0;
  border-radius: clamp(6px, 0.8vw, 10px);
  overflow: hidden;
}
.bm-detail__figgrid-item img {
  width: 100%;
  height: auto;
  display: block;
}
.bm-detail__figcap {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 14px;
  color: var(--c-text);
  letter-spacing: 0.04em;
  line-height: 1.6;
}
.bm-detail__figcell {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bm-detail__figcell img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: clamp(6px, 0.8vw, 10px);
}
.bm-detail__figcell figcaption {
  text-align: center;
  font-size: 14px;
  color: var(--c-text);
  letter-spacing: 0.04em;
  line-height: 1.6;
}
.bm-detail__fig-center {
  margin: clamp(16px, 2vw, 24px) auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.bm-detail__fig-center img {
  max-width: 100%;
  height: auto;
  border-radius: clamp(6px, 0.8vw, 10px);
}
.bm-detail__fig-center figcaption {
  font-size: 14px;
  color: var(--c-text);
  letter-spacing: 0.04em;
  line-height: 1.6;
}

/* Download list (rounded pill rows) */
.bm-detail__dl-list {
  list-style: none;
  margin: clamp(14px, 1.6vw, 22px) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bm-detail__dl-list a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 26px;
  background: #fff;
  border: 1px solid var(--c-green-light);
  border-radius: var(--r-pill);
  color: var(--c-green);
  font-size: 15px;
  letter-spacing: 0.04em;
  max-width: 505px;
  transition: background .2s var(--ease);
}
.bm-detail__dl-list a:hover {
  background: rgba(68, 106, 86, 0.08);
  opacity: 1;
}
.bm-detail__dl-pill {
  position: relative;
  display: inline-block;
  width: 53px;
  height: 24px;
  border-radius: var(--r-pill);
  background: var(--c-green);
  flex-shrink: 0;
}
.bm-detail__dl-pill::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 18px;
  height: 1.2px;
  background: #fff;
  transform: translateY(-50%);
}
.bm-detail__dl-pill::after {
  content: "";
  position: absolute;
  right: 11px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 1.2px solid #fff;
  border-right: 1.2px solid #fff;
  transform: translateY(-50%) rotate(45deg);
}

/* CTA button (e.g., 調査地点撮影) */
.bm-detail__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 265px;
  min-height: 52px;
  padding: 0 28px;
  background: var(--c-green);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: 16px;
  letter-spacing: 0.04em;
  align-self: flex-start;
  margin-top: clamp(10px, 1.2vw, 16px);
  transition: background .25s var(--ease);
}
.bm-detail__cta:hover {
  background: var(--c-green-dark);
  opacity: 1;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px) {
  .docs__grid {
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 40px);
  }
  .docs__nav { position: static; }
}
@media (max-width: 768px) {
  .docs-refs > li { grid-template-columns: 28px minmax(0, 1fr); gap: 14px; }
  .docs-refs__num { width: 28px; height: 28px; font-size: 14px; }
  .docs-card { padding: 22px 20px 18px; }
  .docs-books__row { grid-template-columns: 1fr; gap: 0; }
  .docs-books__row > * + * { border-top: 1px solid #fff; }
  .docs-books__date { justify-content: flex-start; text-align: left; }
}

/* ===== 技術文献タブ：デザイン合わせ ミュート緑 #4b7660 ＋ 丸矢印アイコン（Figma 10-10491） ===== */
.docs__body .br-acc__head { background: #4b7660; }
.docs__body .br-acc__head:hover { background: #3f6553; }
.docs__body .br-acc__icon { width: 30px; height: 30px; border: 1.5px solid #fff; border-radius: 50%; }
.docs__body .br-acc__icon::before {
  content: ""; position: absolute; left: 50%; top: 44%;
  width: 8px; height: 8px; background: none;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff; border-top: 0; border-left: 0;
  transform: translate(-50%, -50%) rotate(45deg); transition: transform .25s var(--ease);
}
.docs__body .br-acc__icon::after { display: none; }
.docs__body .br-acc[open] .br-acc__icon::before { top: 56%; transform: translate(-50%, -50%) rotate(-135deg); }
.docs-refs__num { background: #4b7660; }
.docs-refs__title { color: #4b7660; }

/* ===== 技術資料 左ナビ 箱＋矢印ピル（デザイン #4b7660 / Figma 10-10491） ===== */
.docs-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.docs-nav-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 55px; padding: 8px 12px 8px 20px;
  background: #fff; border: 1px solid #4b7660; color: #333;
  font-weight: 500; letter-spacing: 0.02em; line-height: 1.4;
  transition: background .2s var(--ease);
}
.docs-nav-list a:hover { background: #f3f7f4; opacity: 1; }
.docs-nav-list .is-current a { background: #4b7660; color: #fff; }
.docs-nav-list .ts-scenario__pill { position: relative; display: inline-block; flex-shrink: 0; width: 53px; height: 24px; border-radius: 200px; background: #446a56; }
.docs-nav-list .ts-scenario__pill::before { content: ""; position: absolute; left: 15px; top: 50%; width: 22px; height: 1.5px; background: #fff; transform: translateY(-50%); }
.docs-nav-list .ts-scenario__pill::after { content: ""; position: absolute; right: 15px; top: 50%; width: 7px; height: 7px; border-top: 1.5px solid #fff; border-right: 1.5px solid #fff; transform: translateY(-50%) rotate(45deg); }
.docs-nav-list .is-current .ts-scenario__pill { background: #fff; }
.docs-nav-list .is-current .ts-scenario__pill::before { background: #4b7660; }
.docs-nav-list .is-current .ts-scenario__pill::after { border-color: #4b7660; }


/* ===== シミュレーション検証用BM（bmdata） ===== */
.docs-bm { list-style:none; margin:0; padding:0; max-width:900px; }
.docs-bm__item { padding:clamp(20px,2.4vw,28px) 0; border-bottom:1px solid rgba(75,118,96,0.25); }
.docs-bm__item:first-child { border-top:1px solid rgba(75,118,96,0.25); }
.docs-bm__title { font-size:clamp(16px,1.4vw,19px); font-weight:700; color:#4b7660; margin:0 0 10px; }
.docs-bm__title a { color:#4b7660; }
.docs-bm__title a:hover { opacity:.75; }
.docs-bm__desc { font-size:15px; line-height:1.9; color:var(--c-text); margin:0; }


/* ===== 移植リンク（引用・書籍）は下線＋緑で明示 ===== */
.docs-refs a, .docs-essays a { color:#4b7660; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
.docs-refs a:hover, .docs-essays a:hover { opacity:.7; }

/* == websupport 2026-07-22 batch2 (#5851/5859/5860/5865) == */
/* #5860 技術資料タイトルの絞り込みファインダー */
.ref-finder { position: relative; margin: 0 0 clamp(20px, 3vw, 32px); max-width: 560px; }
.ref-finder__input {
  width: 100%; box-sizing: border-box;
  padding: 13px 16px; font-size: 15px; line-height: 1.4;
  border: 1px solid rgba(0,0,0,.18); border-radius: 10px; background: #fff; color: var(--c-text, #24312b);
}
.ref-finder__input:focus { outline: none; border-color: var(--c-green, #00893d); box-shadow: 0 0 0 3px rgba(0,137,61,.12); }
.ref-finder__list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px);
  margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid rgba(0,0,0,.12); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12); max-height: 320px; overflow-y: auto;
}
.ref-finder__opt {
  display: block; width: 100%; text-align: left; box-sizing: border-box;
  padding: 10px 12px; font-size: 14px; line-height: 1.5; color: var(--c-text, #24312b);
  background: transparent; border: 0; border-radius: 7px; cursor: pointer;
}
.ref-finder__opt:hover, .ref-finder__opt:focus { background: rgba(0,137,61,.08); outline: none; }
.br-acc.is-flash { box-shadow: 0 0 0 3px rgba(0,137,61,.35); border-radius: 8px; transition: box-shadow .3s; }

/* == references finder tweaks #6912-6914 == */
/* #6913 検索ボックスを中央寄せ / #6914 docs body の余白を半分に */
.ref-finder { margin-left: auto; margin-right: auto; }
.ref-finder__input { text-align: center; }
.docs__body { gap: clamp(14px, 1.5vw, 22px); }

/* == #6915 ref-finder width/margin == */
/* #6915 検索ボックスの横幅を2.2倍(560->1232px)・下の余白を半分に */
.ref-finder {
  width: min(1232px, 100%);
  max-width: none;
  align-self: center;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: clamp(10px, 1.5vw, 16px);
}