/* だものの白い500px幅・緑の見出し・中央フォームを、この7メーカー内だけに適用する。 */
body.rescued-maker { margin: 0; background: #fcfcfc; color: #000; font: 13px/1.6 Arial, sans-serif; text-align: center; overflow-wrap: anywhere; }
#rescue { box-sizing: border-box; width: 500px; max-width: 100%; margin: 10px auto 0; border: 1px solid; border-color: #ccc #999 #999 #ccc; background: #fff; }
#rescue * { box-sizing: border-box; }
#rescue p, #rescue h1, #rescue h2, #rescue h3, #rescue ul, #rescue figure { margin: 0; padding: 0; }
#rescue a { color: #00f; text-decoration: none; }
#rescue a:hover { color: #e27d72; text-decoration: underline; }
#rescue .site-header { padding: 5px 8px; background: #5bad00; }
#rescue h1 { font-size: 18px; line-height: 1.5; }
#rescue h1 a { color: #fff; font-weight: bold; }
#rescue .site-nav { padding: 10px 8px; font-size: 12px; }
#rescue .description { margin: 22px 12px 10px; }
#rescue .name-form { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: end; margin: 12px 14px 6px; }
#rescue .name-field { flex: 1 1 200px; min-width: 0; text-align: left; }
#rescue .name-field > span { display: block; margin-bottom: 4px; }
#rescue input[type=text] { display: block; width: 100%; min-width: 0; min-height: 46px; padding: 8px; border: 1px solid #888; border-radius: 2px; background: #fff; font: 16px Arial, sans-serif; }
#rescue button { min-height: 46px; max-width: 100%; padding: 8px 12px; border: 1px solid #888; border-radius: 2px; background: #efefef; color: #000; font: 16px Arial, sans-serif; cursor: pointer; }
#rescue input:focus-visible, #rescue button:focus-visible, #rescue a:focus-visible { outline: 3px solid #215eae; outline-offset: 2px; }
#rescue .parent-form { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: end; }
#rescue .parent-connector { padding-bottom: 12px; }
#rescue .parent-form button { grid-column: 1 / -1; justify-self: center; }
#rescue .input-note { margin: 6px 12px 22px; font-size: 12px; color: #555; }
#rescue .input-error, #rescue .lab-note { margin: 12px; color: #b00020; }
#rescue .parent-form .input-error { grid-column: 1 / -1; margin: 0; }
#rescue .maker-story { margin: 26px 14px 30px; }
#rescue .maker-story h2 { margin-bottom: 4px; color: #f30; font-size: 14px; }
#rescue .maker-story p { line-height: 1.6; }
#rescue .archive-note { margin-top: 14px; font-size: 12px; color: #555; }
#rescue .movie-banner { display: block; width: 235px; max-width: 100%; height: auto; margin: 12px auto 0; }
#rescue .result { margin: 28px 12px 24px; }
#rescue .result-title { margin: 0 0 16px; font-size: 21px; line-height: 1.5; }
#rescue img[data-rescued-result] { display: block; max-width: 100%; height: auto; margin: 0 auto; }
#rescue .image-summary, #rescue .image-note { margin: 16px 0; }
#rescue .image-note { font-size: 12px; }
#rescue .result-data { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 0; width: 400px; max-width: 100%; margin: 20px auto; border: 1px solid #ccc; font-size: 13px; text-align: left; }
#rescue .result-data dt, #rescue .result-data dd { margin: 0; padding: 7px; border-bottom: 1px solid #ddd; }
#rescue .result-data dt { background: #eae7d5; font-weight: bold; }
#rescue .result-data :nth-last-child(-n+2) { border-bottom: 0; }
#rescue .materials, #rescue .members, #rescue .machines { list-style: none; }
#rescue .share { margin: 24px 0 14px; line-height: 2; }
#rescue .back-to-top { margin-top: 12px; }
/* 月ごとの色は旧/gracale/css/style1.cssの定義を引き継ぐ。 */
#rescue .calendar { width: 300px; max-width: 100%; margin: 0 auto; border: 1px solid #ccc; border-spacing: 1px; background: #ffffec; table-layout: fixed; font-weight: bold; font-size: 13px; }
#rescue .calendar caption { padding: 8px; background: #eae7d5; color: #600; font-weight: bold; font-size: 16px; }
#rescue .calendar th { width: 34px; padding: 5px 2px; border: 1px solid #000; text-align: center; color: #fff; background: var(--month); }
#rescue .calendar .month-number { display: block; font-size: 19px; line-height: 1.3; }
#rescue .calendar td { padding: 8px 6px; border: 1px solid #000; background: var(--month-light); text-align: left; }
#rescue .calendar tr:nth-child(1) { --month: #fb043c; --month-light: #fdd2dc; }
#rescue .calendar tr:nth-child(2) { --month: #3160ce; --month-light: #dae2f6; }
#rescue .calendar tr:nth-child(3) { --month: #3399cc; --month-light: #daecf5; }
#rescue .calendar tr:nth-child(4) { --month: #ff3399; --month-light: #ffdaec; }
#rescue .calendar tr:nth-child(5) { --month: #ff6c00; --month-light: #ffe4d1; }
#rescue .calendar tr:nth-child(6) { --month: #4374bc; --month-light: #dde6f2; }
#rescue .calendar tr:nth-child(7) { --month: #29a394; --month-light: #d3f3ef; }
#rescue .calendar tr:nth-child(8) { --month: #669933; --month-light: #e3f1d6; }
#rescue .calendar tr:nth-child(9) { --month: #cc6600; --month-light: #ffe3c8; }
#rescue .calendar tr:nth-child(10) { --month: #993300; --month-light: #fed4c0; }
#rescue .calendar tr:nth-child(11) { --month: #ff3300; --month-light: #ffdad1; }
#rescue .calendar tr:nth-child(12) { --month: #ec1359; --month-light: #fbd4e1; }
/* 状態の背景画像・赤い見出し・クレジットは旧結果カードに合わせる。 */
#rescue .meaning { width: 300px; max-width: 100%; margin: 0 auto; padding: 15px 20px 8px 25px; border: 1px solid #000; background: #fff url('/makers/joutai-bg-result.png'); text-align: left; font-weight: bold; }
#rescue .meaning-header { margin-bottom: 10px; font-size: 12px; text-align: center; }
#rescue .meaning h2 { margin: 5px 0 10px; color: #c00; font-size: 22px; }
#rescue .meaning-text { margin: 0 0 20px 12px; font-size: 14px; line-height: 20px; }
#rescue .meaning-credit { font-size: 10px; text-align: center; }
/* 戦隊は旧版の項目順・色・ロボ表・歌詞のまとまりを維持する。 */
#rescue.maker-sentai .result-title { color: #f00; }
#rescue .sentai-result h3 { margin: 24px 0 8px; font-size: 20px; color: #69f; }
#rescue .members li { margin: 4px 0; }
#rescue .sentai-result em { color: #f60; font-style: normal; font-weight: bold; }
#rescue .robot { width: 400px; max-width: 100%; margin: 0 auto; border: 1px solid #ccc; table-layout: fixed; font-size: 13px; }
#rescue .robot th { width: 100px; padding: 8px 5px; background: #eae7d5; }
#rescue .robot td { padding: 8px 6px; text-align: left; color: #666; }
#rescue .robot-stat { display: inline-block; }
#rescue .machines li { margin: 4px 0; }
#rescue .song { width: 270px; max-width: 100%; margin: 0 auto; border: 1px solid #000; padding: 10px; color: #600; background: #ffc; font-size: 14px; font-weight: bold; }
#rescue .song p + p { margin-top: 1em; }
#rescue .maker-news { margin: 28px 12px; }
#rescue .maker-news p + p { margin-top: 14px; }
#rescue .sister-makers > p { margin: 12px; }
#rescue .sister-makers h2, #rescue .related-makers h2 { padding: 10px 12px; color: #fff; text-shadow: 1px 1px 2px #0004; font-size: 16px; background: #75d966 linear-gradient(315deg,#75d966 23%,#a6d99f 100%); background-size: 12px 12px; text-align: left; }
#rescue .maker-menu { list-style: none; text-align: left; }
#rescue .maker-menu li { border-bottom: 1px solid #879c18; }
#rescue .maker-menu a { display: block; position: relative; padding: 15px 36px 15px 14px; color: #000; font-size: 14px; font-weight: bold; }
#rescue .maker-menu a::after { content: '›'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: #000; font-size: 23px; }
#rescue.is-top .maker-menu { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
#rescue footer { padding: 26px 12px 12px; }
#rescue footer p + p { margin-top: 18px; }
#rescue .fiction-note { font-size: 11px; }
#rescue .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 600px) {
  body.rescued-maker { font-size: 14px; -webkit-text-size-adjust: 100%; }
  #rescue { margin: 0 auto; }
  #rescue .name-form { margin-left: 12px; margin-right: 12px; }
  #rescue .name-field { flex-basis: 170px; }
  #rescue input[type=text], #rescue button { min-height: 50px; }
  #rescue button { flex: 1 1 auto; }
  #rescue .parent-form button { justify-self: stretch; }
  #rescue .result-title { font-size: 20px; }
  #rescue .calendar { font-size: 14px; }
  #rescue .robot th { width: 76px; }
  #rescue .maker-story { margin-left: 12px; margin-right: 12px; }
}
