@charset "UTF-8";

/* =========================================================
   development-detail.css — 研究開発 詳細ページ共通スタイル
   ========================================================= */

/* =========================================================
   Project navigation bar (5 projects across)
   ========================================================= */
.dev-pjnav {
  background: var(--c-green);
  padding-block: 18px 14px;
  overflow-x: auto;
}
.dev-pjnav__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: clamp(12px, 1vw, 14px);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.dev-pjnav__list li {
  position: relative;
  padding: 4px clamp(14px, 1.8vw, 30px);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
}
.dev-pjnav__list li:last-child {
  border-right: 1px solid rgba(255, 255, 255, 0.5);
}
.dev-pjnav__list a {
  color: #fff;
  white-space: nowrap;
  transition: opacity .2s var(--ease);
}
.dev-pjnav__list a:hover { opacity: .75; }
.dev-pjnav__list .is-current a {
  font-weight: 700;
}
.dev-pjnav__list .is-current::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -8px;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #fff;
}

/* =========================================================
   Detail header (英字 + 短罫 + 和文 + tagline + lead)
   ========================================================= */
.dev-detail {
  padding-block: clamp(60px, 7vw, 110px) clamp(80px, 10vw, 160px);
}
.dev-detail__head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.dev-detail__en {
  font-family: var(--ff-en);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(36px, 4.5vw, 64px);
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--c-green);
  margin: 0;
}
.dev-detail__rule {
  display: inline-block;
  width: 50px;
  height: 1px;
  background: rgba(68, 106, 86, 0.5);
}
.dev-detail__jp {
  font-size: clamp(14px, 1.2vw, 17px);
  letter-spacing: 0.18em;
  color: var(--c-text);
  font-weight: 700;
  margin: 0 0 clamp(16px, 2vw, 26px);
}
.dev-detail__tagline {
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 32px);
  letter-spacing: 0.06em;
  color: var(--c-green);
  margin: 0 0 clamp(16px, 2vw, 26px);
}
.dev-detail__lead {
  max-width: 880px;
  font-size: 16px;
  line-height: 2;
  color: var(--c-text);
  letter-spacing: 0.03em;
  text-align: left;
  margin: 0;
}

/* =========================================================
   Grid: sticky image (left) + scrolling body (right)
   ========================================================= */
.dev-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 432px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 80px);
  align-items: start;
}
.dev-detail__sticky {
  position: sticky;
  top: clamp(90px, 9vw, 130px);
}
.dev-detail__media {
  margin: 0;
  border-radius: clamp(8px, 1vw, 14px);
  overflow: hidden;
  border: 1px solid rgba(68, 106, 86, 0.15);
}
.dev-detail__media img {
  width: 100%;
  height: auto;
  display: block;
}
.dev-detail__body {
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 7vw, 100px);
}

/* =========================================================
   Aim block: ! icon + title/rule/body
   → 共有部品として common.css に集約（ミュート緑#4b7660＋rule右端矢頭）。
     ここでは .ts-aim-block__icon の傾き修飾のみ残す。
   ========================================================= */

/* Inline tag pill */
.dev-tag-pill {
  display: inline-block;
  background: var(--c-green);
  color: #fff;
  padding: 14px 28px;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  align-self: flex-start;
  margin-top: 8px;
}

/* =========================================================
   Section blocks within body column
   ========================================================= */
.dev-detail__section {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.4vw, 32px);
}

/* =========================================================
   Link list (rows with arrow pill on right)
   ========================================================= */
.dev-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dev-link-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 22px;
  background: var(--c-bg-soft);
  border: 1px solid rgba(68, 106, 86, 0.18);
  border-radius: 4px;
  color: var(--c-text);
  font-size: 16px;
  letter-spacing: 0.03em;
  transition: background .2s var(--ease);
}
.dev-link-list li a:hover { background: rgba(68, 106, 86, 0.08); opacity: 1; }
.dev-link-list__arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 53px;
  height: 24px;
  border-radius: var(--r-pill);
  background: var(--c-green);
  flex-shrink: 0;
}
.dev-link-list__arrow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 1.2px;
  background: #fff;
  transform: translate(-55%, -50%);
}
.dev-link-list__arrow::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);
}

/* =========================================================
   "その他の研究・開発" — JP title + EN subtitle (centered)
   ========================================================= */
.dev-detail__section--other,
.dev-detail__other {
  margin-top: clamp(80px, 10vw, 160px);
}
.dev-other__head {
  text-align: center;
  margin-bottom: clamp(28px, 3vw, 44px);
}
.dev-other__title {
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: 0.06em;
  color: var(--c-green);
  margin: 0;
}
.dev-other__title--lg {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.4;
}
.dev-other__en {
  font-family: var(--ff-en-body);
  color: var(--c-muted);
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: 0.14em;
  margin: 6px 0 0;
}

@media (max-width: 768px) {
  .dev-detail__row { grid-template-columns: 1fr; }
  .dev-pjnav__list { font-size: 11px; gap: 0; }
  .dev-pjnav__list li { padding: 0 8px; }
}

/* =========================================================
   Traffic Scope scenario detail page
   (research-and-development/trafficscope/{scenario}/)
   ========================================================= */

/* 2-column grid: scenario nav (left) + scenario body (right) */
.ts-scenario {
  display: grid;
  grid-template-columns: minmax(0, 437px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}
.ts-scenario__nav {
  position: sticky;
  top: clamp(90px, 9vw, 130px);
}
.ts-scenario__body {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 72px);
  min-width: 0;
}

/* Scenario list (vertical pill rows with arrow chip) */
.ts-scenario-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.ts-scenario-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 55px;
  padding: 0 18px;
  background: #fff;
  border: 1px solid var(--c-green);
  color: var(--c-green);
  font-size: 15px;
  letter-spacing: 0.04em;
  line-height: 1.5;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.ts-scenario-list a:hover {
  background: rgba(68, 106, 86, 0.08);
  opacity: 1;
}
.ts-scenario-list .is-current a {
  background: var(--c-green-light);
  border-color: var(--c-green-light);
  color: #fff;
}

/* Arrow chip inside each scenario row */
.ts-scenario__pill {
  position: relative;
  display: inline-block;
  width: 53px;
  height: 24px;
  border-radius: var(--r-pill);
  background: var(--c-green);
  flex-shrink: 0;
}
.ts-scenario__pill::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 18px;
  height: 1.2px;
  background: #fff;
  transform: translateY(-50%);
}
.ts-scenario__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);
}
/* Inverted chip for current row: white pill, green arrow */
.ts-scenario-list .is-current .ts-scenario__pill { background: #fff; }
.ts-scenario-list .is-current .ts-scenario__pill::before { background: var(--c-green); }
.ts-scenario-list .is-current .ts-scenario__pill::after {
  border-top-color: var(--c-green);
  border-right-color: var(--c-green);
}

/* Aim block variant: tilted "!" icon to match design */
.ts-aim-block__icon {
  transform: rotate(15deg);
  transform-origin: 50% 60%;
}

/* Figure: full-bleed image + centered caption */
.ts-figure {
  margin: 0;
}
.ts-figure img {
  width: 100%;
  height: auto;
  display: block;
}
.ts-figure figcaption {
  margin-top: clamp(16px, 1.8vw, 24px);
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--c-text);
  line-height: 1.6;
}

/* "図の見方" subsection */
.ts-howto__title {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 700;
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: 0.04em;
  color: var(--c-green);
  margin: 0 0 clamp(14px, 1.6vw, 22px);
}
.ts-howto__title::before {
  content: "";
  display: inline-block;
  width: 1.5px;
  height: clamp(28px, 2.4vw, 38px);
  background: var(--c-green);
  flex-shrink: 0;
}
.ts-howto p {
  font-size: 16px;
  line-height: 2;
  color: var(--c-text);
  letter-spacing: 0.03em;
  margin: 0;
}

/* Back button (green pill, centered) */
.ts-back {
  display: flex;
  justify-content: center;
  margin-top: clamp(60px, 8vw, 110px);
}
.ts-back-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 343px;
  min-height: 70px;
  padding: 0 64px;
  background: var(--c-green);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: 16px;
  letter-spacing: 0.04em;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.ts-back-btn:hover {
  background: var(--c-green-dark);
  opacity: 1;
  transform: translateY(-1px);
}
.ts-back-btn__arrow {
  position: absolute;
  right: 26px;
  top: 50%;
  width: 18px;
  height: 1.4px;
  background: #fff;
  transform: translateY(-50%);
}
.ts-back-btn__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 1.4px solid #fff;
  border-right: 1.4px solid #fff;
  transform: translateY(-50%) rotate(45deg);
}

/* Responsive: collapse 2-col to 1-col on tablets */
@media (max-width: 1024px) {
  .ts-scenario {
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vw, 40px);
  }
  .ts-scenario__nav {
    position: static;
  }
}
@media (max-width: 768px) {
  .ts-scenario-list a { font-size: 14px; padding: 0 14px; }
  .ts-back-btn { min-width: 0; width: 100%; padding: 0 56px; }
}

/* =========================================================
   Nowcast detail page (extends .dev-detail__*)
   ========================================================= */

/* Large centered tagline below the head */
.dev-detail__tagline-lg {
  text-align: center;
  font-weight: 700;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--c-green);
  margin: 0 0 clamp(40px, 5vw, 72px);
}

/* Intro paragraph next to the sticky illustration */
.dev-detail__intro {
  font-size: 16px;
  line-height: 2;
  color: var(--c-text);
  letter-spacing: 0.03em;
  margin: 0;
}

/* Body paragraph used inside dev-detail__section */
.dev-detail__body-text {
  font-size: 15px;
  line-height: 2;
  color: var(--c-text);
  letter-spacing: 0.03em;
  margin: 0;
}

/* Section heading with short rule below — used in nowcast & others */
.dev-section-title {
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: 0.04em;
  color: var(--c-green);
  line-height: 1.4;
  margin: 0;
}
.dev-section-title::after {
  content: "";
  display: block;
  width: 35px;
  height: 1px;
  background: var(--c-green);
  margin-top: clamp(12px, 1.4vw, 18px);
}

/* Full-width figure inside the right body column */
.dev-detail__media-wide {
  margin: clamp(20px, 2.4vw, 32px) 0 0;
  border-radius: clamp(6px, 0.8vw, 10px);
  overflow: hidden;
}
.dev-detail__media-wide img {
  width: 100%;
  height: auto;
  display: block;
}

/* Inline bullet link list: ● text →pill arrow */
.dev-bullet-list {
  list-style: none;
  margin: clamp(14px, 1.6vw, 22px) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dev-bullet-list a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--c-green);
  font-size: 15px;
  letter-spacing: 0.04em;
  transition: opacity .2s var(--ease);
}
.dev-bullet-list__dot {
  font-size: 10px;
  line-height: 1;
  color: var(--c-green);
  flex-shrink: 0;
}
.dev-bullet-list__label {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(68, 106, 86, 0.4);
}
.dev-bullet-list a:hover .dev-bullet-list__label {
  text-decoration-color: var(--c-green);
}
.dev-bullet-list__arrow {
  position: relative;
  display: inline-block;
  width: 17.5px;
  height: 14.5px;
  margin-left: 4px;
  flex-shrink: 0;
}
.dev-bullet-list__arrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1.2px;
  background: var(--c-green);
  transform: translateY(-50%);
}
.dev-bullet-list__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 1.2px solid var(--c-green);
  border-right: 1.2px solid var(--c-green);
  transform: translateY(-50%) rotate(45deg);
}

@media (max-width: 1024px) {
  .dev-detail__grid { grid-template-columns: 1fr; }
  .dev-detail__sticky { position: static; }
  .dev-detail__media { max-width: 480px; margin-inline: auto; }
}

/* =========================================================
   Countrywide simulation detail page (extends .dev-detail__*)
   ========================================================= */

/* Centered lead under the large tagline */
.dev-detail__lead-center {
  max-width: 800px;
  margin: 0 auto clamp(40px, 5vw, 72px);
  text-align: center;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.03em;
  color: var(--c-text);
}

/* Split row inside the body column: image left + text right */
.dev-detail__split {
  display: grid;
  grid-template-columns: minmax(0, 341fr) minmax(0, 347fr);
  gap: clamp(20px, 2.4vw, 38px);
  margin-top: clamp(20px, 2.4vw, 32px);
  align-items: start;
}
.dev-detail__split-media {
  margin: 0;
  border-radius: clamp(6px, 0.8vw, 10px);
  overflow: hidden;
}
.dev-detail__split-media img {
  width: 100%;
  height: auto;
  display: block;
}
.dev-detail__split-media figcaption {
  margin-top: 10px;
  text-align: center;
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-text);
  letter-spacing: 0.04em;
}
.dev-detail__split-text {
  font-size: 15px;
  line-height: 2;
  color: var(--c-text);
  letter-spacing: 0.03em;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 2.4vw, 36px);
}

/* Sub-section inside a split layout: 交通流モデル / 経路選択モデル */
.dev-subsection-title {
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: 0.04em;
  color: var(--c-green);
  line-height: 1.4;
  margin: 0;
}
.dev-subsection-title::after {
  content: "";
  display: block;
  width: 100%;
  max-width: 346px;
  height: 1px;
  background: var(--c-green);
  margin-top: clamp(10px, 1.2vw, 14px);
}

/* Check-style bullet list */
.dev-check-list {
  list-style: none;
  margin: clamp(14px, 1.6vw, 20px) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dev-check-list li {
  position: relative;
  padding-left: 32px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-text);
  letter-spacing: 0.03em;
}
.dev-check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-green);
}
.dev-check-list li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 9px;
  width: 10px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

@media (max-width: 768px) {
  .dev-detail__split { grid-template-columns: 1fr; }
  .dev-detail__lead-center { text-align: left; }
}

/* Coming-soon placeholder used on pages with no body content yet */
.dev-detail__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(280px, 30vw, 460px);
  border: 1px dashed rgba(68, 106, 86, 0.3);
  border-radius: clamp(12px, 1.6vw, 20px);
  background: rgba(68, 106, 86, 0.03);
  text-align: center;
}
.dev-detail__placeholder p {
  font-size: 15px;
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--c-muted);
  margin: 0;
}

/* ===== その他の研究・開発 デザイン合わせ（Figma 10-8390 / ミュート緑 #446a56） =====
 * member-dl の土台は member.css にあり dev詳細では未enqueue＝ここで自己完結定義（崩れ防止）
 */
.dev-other__title { color: #446a56; font-size: clamp(28px, 3.4vw, 40px); letter-spacing: 0.08em; }
.dev-other__en { font-family: var(--ff-en); color: #446a56; letter-spacing: 0.1em; }

.dev-detail__other .member-dl__list {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
  border-top: 1px solid rgba(68, 106, 86, 0.3);
}
.dev-detail__other .member-dl__list li { border-bottom: 1px solid rgba(68, 106, 86, 0.3); }
.dev-detail__other .member-dl__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(20px, 2vw, 28px) 16px;
  color: var(--c-text);
  transition: background .2s var(--ease);
}
.dev-detail__other .member-dl__item:hover { background: rgba(68, 106, 86, 0.04); opacity: 1; }
.dev-detail__other .member-dl__label {
  font-size: clamp(15px, 1.15vw, 16px);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.dev-detail__other .member-dl__arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 53px;
  height: 24px;
  border-radius: 200px;
  background: #446a56;
  flex-shrink: 0;
}
.dev-detail__other .member-dl__arrow::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  width: 22px;
  height: 1.5px;
  background: #fff;
  transform: translateY(-50%);
}
.dev-detail__other .member-dl__arrow::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);
}
.dev-detail__other .member-dl__item:hover .member-dl__arrow { background: #37543f; }

/* ===== 東京トラフィックスコープ 詳細（Figma 10-8684） ===== */
.ts-daylist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ts-daylist a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 13px 13px 20px; border: 1px solid #4b7660; background: #fff;
  font-size: 14px; font-weight: 500; color: #333; letter-spacing: 0.02em; line-height: 1.5;
  transition: background .2s var(--ease);
}
.ts-daylist a:hover { background: #f3f7f4; opacity: 1; }
.ts-daylist .is-current a { background: #4b7660; color: #fff; }
.ts-daylist__arrow { position: relative; flex-shrink: 0; width: 53px; height: 24px; border-radius: 200px; background: #446a56; }
.ts-daylist__arrow::before { content: ""; position: absolute; left: 15px; top: 50%; width: 22px; height: 1.5px; background: #fff; transform: translateY(-50%); }
.ts-daylist__arrow::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); }
.ts-daylist .is-current .ts-daylist__arrow { background: #fff; }
.ts-daylist .is-current .ts-daylist__arrow::before { background: #4b7660; }
.ts-daylist .is-current .ts-daylist__arrow::after { border-color: #4b7660; }

.ts-figure { margin: clamp(24px, 3vw, 36px) 0 0; }
.ts-figure img { width: 100%; height: auto; display: block; border: 1px solid var(--c-border); }
.ts-figure figcaption { margin-top: 12px; text-align: center; font-size: 13px; color: var(--c-muted); letter-spacing: 0.04em; }

.ts-note { margin-top: clamp(32px, 4vw, 52px); }
.ts-note__title { position: relative; padding-left: 16px; margin-bottom: 16px; font-size: clamp(18px, 2vw, 24px); font-weight: 700; color: var(--c-text); letter-spacing: 0.04em; }
.ts-note__title::before { content: ""; position: absolute; left: 0; top: 5px; bottom: 5px; width: 3px; background: #446a56; }
.ts-note p { font-size: 15px; line-height: 1.95; color: var(--c-text); letter-spacing: 0.03em; margin: 0; }

.ts-back-wrap { margin-top: clamp(40px, 5vw, 64px); text-align: center; }
.ts-back { display: inline-flex; align-items: center; gap: 16px; padding: 20px 48px; border-radius: 200px; background: #446a56; color: #fff; font-size: 15px; font-weight: 500; letter-spacing: 0.04em; transition: background .2s var(--ease); }
.ts-back:hover { background: #3a5c4a; opacity: 1; }
.ts-back__arrow { position: relative; flex-shrink: 0; width: 22px; height: 12px; }
.ts-back__arrow::before { content: ""; position: absolute; right: 0; top: 50%; width: 22px; height: 1.5px; background: #fff; transform: translateY(-50%); }
.ts-back__arrow::after { content: ""; position: absolute; right: 0; top: 50%; width: 7px; height: 7px; border-top: 1.5px solid #fff; border-right: 1.5px solid #fff; transform: translateY(-50%) rotate(45deg); }

/* トラフィックスコープ詳細：!アイコンを外した解説ブロック（本文と下の画像の頭を揃える） */
.dev-aim-block--noicon { grid-template-columns: 1fr; }