/**
 * おすすめロボット診断の用途選択・質問・結果カードを表示する。
 * 既存ページへ影響しないよう診断の枠内にスタイルを限定する。
 */
.roboa-diagnosis {
  --diagnosis-blue: #0068bd;
  max-width: 960px;
  margin: 32px auto 64px;
  padding: 44px 48px;
  border: 1px solid #dce9f4;
  border-radius: 20px;
  background: #fff;
  color: #253b4c;
  box-shadow: 0 16px 48px rgb(20 62 104 / 6%);
  line-height: 1.8;
}
.roboa-diagnosis *, .roboa-diagnosis *::before, .roboa-diagnosis *::after { box-sizing: border-box; }
/* SWELLの本文先頭・末尾の余白リセットより優先する。 */
.post_content > .roboa-diagnosis { margin-top: 32px !important; margin-bottom: 64px !important; }
.roboa-diagnosis .roboa-diagnosis__heading {
  margin: 0 0 24px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: #253b4c;
  font-size: clamp(23px, 2.6vw, 32px);
  line-height: 1.65;
}
.roboa-diagnosis .roboa-diagnosis__heading::before,
.roboa-diagnosis .roboa-diagnosis__heading::after,
.roboa-diagnosis .roboa-diagnosis__robot-name::before,
.roboa-diagnosis .roboa-diagnosis__robot-name::after { display: none; }
.roboa-diagnosis .roboa-diagnosis__heading:focus { outline: none; }
.roboa-diagnosis__eyebrow { color: var(--diagnosis-blue); font-size: 12px; font-weight: 700; letter-spacing: .16em; margin: 0 0 16px; }
.roboa-diagnosis__intro { color: #526675; margin: 0 0 28px; }
.roboa-diagnosis__step { color: #496c88; font-size: 14px; font-weight: 700; margin: 0 0 16px; }
.roboa-diagnosis__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; }
.roboa-diagnosis .roboa-diagnosis__choice {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 110px;
  padding: 24px 52px 24px 24px;
  border: 2px solid #9bc6e8;
  border-radius: 12px;
  background: #f5faff;
  color: #164b76;
  font: inherit;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.7;
  text-align: left;
  cursor: pointer;
}
.roboa-diagnosis__choice::after { content: '→'; position: absolute; right: 22px; color: var(--diagnosis-blue); }
.roboa-diagnosis__choice:hover:not(:disabled) { border-color: var(--diagnosis-blue); background: #eaf5ff; }
.roboa-diagnosis .roboa-diagnosis__choice:disabled { background: #f4f6f7; border-color: #dce3e8; color: #62747f; padding-right: 24px; cursor: default; }
.roboa-diagnosis__choice:disabled::after { display: none; }
.roboa-diagnosis__badge { flex-shrink: 0; border-radius: 4px; background: #e4e9ed; padding: 3px 8px; font-size: 12px; white-space: nowrap; }
.roboa-diagnosis__navigation { display: flex; flex-wrap: wrap; gap: 12px 32px; border-top: 1px solid #e5edf3; margin-top: 36px; padding-top: 20px; }
.roboa-diagnosis .roboa-diagnosis__back, .roboa-diagnosis .roboa-diagnosis__reset { border: 0; padding: 8px 0; background: none; color: #46657c; font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 5px; cursor: pointer; }
/* 矢印を独立したインラインボックスにして、文字だけに下線を付ける。 */
.roboa-diagnosis__back::before { content: '←'; display: inline-block; margin-right: 4px; text-decoration: none; }
.roboa-diagnosis__results { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 24px; margin-top: 32px; }
.roboa-diagnosis__robot { display: flex; flex-direction: column; min-width: 0; border: 1px solid #dae6ef; border-radius: 14px; padding: 24px; text-align: center; }
.roboa-diagnosis__media { display: grid; place-items: center; height: 220px; }
.roboa-diagnosis .roboa-diagnosis__image { display: block; width: 100%; height: 220px; max-width: 100%; object-fit: contain; }
.roboa-diagnosis__placeholder { width: 100%; height: 100%; display: grid; place-items: center; background: #f4f7f9; color: #6c7e8a; border-radius: 10px; margin: 0; font-size: 14px; }
.roboa-diagnosis .roboa-diagnosis__robot-name { margin: 22px 0 18px; padding: 0; background: none; border: 0; color: #253b4c; font-size: 25px; line-height: 1.5; }
.roboa-diagnosis .roboa-diagnosis__detail { display: block; margin-top: auto; padding: 13px 18px; border-radius: 7px; background: var(--diagnosis-blue); color: #fff; font-weight: 700; text-decoration: none; }
.roboa-diagnosis__detail::after { content: ' →'; }
.roboa-diagnosis__detail:hover { opacity: .85; }
.roboa-diagnosis .roboa-diagnosis__document {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--diagnosis-blue);
  border-radius: 7px;
  background: #fff;
  color: var(--diagnosis-blue);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}
.roboa-diagnosis__document-icon {
  display: inline-flex;
  flex-shrink: 0;
}
.roboa-diagnosis__document-icon .__icon {
  width: 1.2em;
  height: 1.2em;
}
.roboa-diagnosis__document:hover { background: #eaf5ff; }
.roboa-diagnosis__pending { margin: auto 0 0; padding: 13px; border-radius: 7px; background: #f4f6f7; color: #62747f; font-size: 14px; }
.roboa-diagnosis__notice { font-size: 14px; overflow-wrap: anywhere; }
.roboa-diagnosis button:focus-visible, .roboa-diagnosis a:focus-visible { outline: 3px solid #ec9c1c; outline-offset: 4px; }
@media (max-width: 959px) {
  .roboa-diagnosis { padding: 36px 32px; }
  .roboa-diagnosis .roboa-diagnosis__choice { font-size: 19px; }
}
@media (max-width: 599px) {
  .roboa-diagnosis { margin: 20px auto 40px; padding: 28px 20px; border-radius: 14px; }
  .post_content > .roboa-diagnosis { margin-top: 20px !important; margin-bottom: 40px !important; }
  .roboa-diagnosis__choices { grid-template-columns: 1fr; gap: 14px; margin-top: 24px; }
  .roboa-diagnosis .roboa-diagnosis__choice { min-height: 88px; padding-top: 18px; padding-bottom: 18px; }
  .roboa-diagnosis__results { grid-template-columns: 1fr; gap: 20px; }
  .roboa-diagnosis__robot { padding: 20px; }
  .roboa-diagnosis__navigation { gap: 12px 24px; margin-top: 28px; }
}