@charset "utf-8";
/* ぱたぱたアニメ館 */
/* Plate metal-style */
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  1. SATIN-SILVER
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

.satin-silver {
  box-sizing: border-box;
  display: table;
  margin: 20px auto;
  min-width: 280px;
  max-width: 95%;
  position: relative;
  padding: 40px 80px;
  text-align: center;
  border-radius: 4px;
  font-size: 32px;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.2;
  color: #444444;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);
  background: linear-gradient(135deg, #eeeeee, #cccccc);
  border: 1px solid #888888;
  box-shadow: inset 1px 1px 0 #ffffff, 2px 2px 7px rgba(0,0,0,0.4);
}
.satin-silver .screw {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #cccccc 40%, #444444 90%);
  filter: drop-shadow(1px 1px 1.5px rgba(0,0,0,0.5));
}
@media (max-width: 768px) {
  .satin-silver { font-size: 24px; padding: 25px 45px; min-width: 240px; }
  .satin-silver .screw { width: 10px; height: 10px; }
}
.satin-silver .screw-tl { top: 12px; left: 12px; }
.satin-silver .screw-tr { top: 12px; right: 12px; }
.satin-silver .screw-bl { bottom: 12px; left: 12px; }
.satin-silver .screw-br { bottom: 12px; right: 12px; }

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  2. SATIN-GOLD
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

.satin-gold {
  box-sizing: border-box;
  display: table;
  margin: 20px auto;
  min-width: 280px;
  max-width: 95%;
  position: relative;
  padding: 40px 80px;
  text-align: center;
  border-radius: 4px;
  font-size: 32px;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.2;
  color: #7a5901;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);
  background: linear-gradient(135deg, #f3e5ab, #eaddca, #c2b280);
  border: 1px solid #9e842a;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.9), 2px 2px 8px rgba(0,0,0,0.45);
}
.satin-gold .screw {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #d4af37 40%, #7a5901 90%);
  filter: drop-shadow(1px 1px 1.5px rgba(0,0,0,0.5));
}
@media (max-width: 768px) {
  .satin-gold { font-size: 24px; padding: 25px 45px; min-width: 240px; }
  .satin-gold .screw { width: 10px; height: 10px; }
}
.satin-gold .screw-tl { top: 12px; left: 12px; }
.satin-gold .screw-tr { top: 12px; right: 12px; }
.satin-gold .screw-bl { bottom: 12px; left: 12px; }
.satin-gold .screw-br { bottom: 12px; right: 12px; }

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  3. SATIN BRASS
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

.satin-brass {
  box-sizing: border-box;
  display: table;
  margin: 20px auto;
  min-width: 280px;
  max-width: 95%;
  position: relative;
  padding: 40px 80px;
  text-align: center;
  border-radius: 4px;
  font-size: 32px;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.2;
  color: #3d3020;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.6);
  background: linear-gradient(135deg, #eaddca, #bda470);
  border: 1px solid #8b4513;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.8), 2px 2px 6px rgba(0,0,0,0.4);
}
.satin-brass .screw {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #bda470 40%, #4a3924 90%);
  filter: drop-shadow(1px 1px 1.5px rgba(0,0,0,0.5));
}
@media (max-width: 768px) {
  .satin-brass { font-size: 24px; padding: 25px 45px; min-width: 240px; }
  .satin-brass .screw { width: 10px; height: 10px; }
}
.satin-brass .screw-tl { top: 12px; left: 12px; }
.satin-brass .screw-tr { top: 12px; right: 12px; }
.satin-brass .screw-bl { bottom: 12px; left: 12px; }
.satin-brass .screw-br { bottom: 12px; right: 12px; }

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  4. ANTIQUE-COPPER
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

.antique-copper {
  box-sizing: border-box;
  display: table;
  margin: 20px auto;
  min-width: 280px;
  max-width: 95%;
  position: relative;
  padding: 40px 80px;
  text-align: center;
  border-radius: 4px;
  font-size: 32px;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.2;
  color: #3a1a00;
  text-shadow: 1px 1px 0px rgba(255, 245, 230, 0.4);
  background: linear-gradient(135deg, #e4b491, #a05a2c);
  border: 1px solid #5d2e0d;
  box-shadow: inset 1px 1px 0 rgba(253, 245, 230, 0.5), 2px 2px 7px rgba(0,0,0,0.5);
}
.antique-copper .screw {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fdf5e6 0%, #b87333 40%, #4d260a 90%);
  filter: drop-shadow(1px 1px 1.5px rgba(0,0,0,0.5));
}
@media (max-width: 768px) {
  .antique-copper { font-size: 24px; padding: 25px 45px; min-width: 240px; }
  .antique-copper .screw { width: 10px; height: 10px; }
}
.antique-copper .screw-tl { top: 12px; left: 12px; }
.antique-copper .screw-tr { top: 12px; right: 12px; }
.antique-copper .screw-bl { bottom: 12px; left: 12px; }
.antique-copper .screw-br { bottom: 12px; right: 12px; }


/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  5. OLD-BRONZE
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

.old-bronze {
  box-sizing: border-box;
  display: table;
  margin: 20px auto;
  min-width: 280px;
  max-width: 95%;
  position: relative;
  padding: 40px 80px;
  text-align: center;
  border-radius: 4px;
  font-size: 32px;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.2;
color: #0e0a05; /* ぼやけを完全に消す、鉄のような深い黒茶 */
  text-shadow: 0.5px 0.5px 0px rgba(255, 255, 255, 0.2); /* 輪郭を際立たせる最小限の光 */
  background: linear-gradient(135deg, #c5b398, #6d5a42);
  border: 1px solid #1a120b; /* 枠も締めて全体をくっきりさせる */
  box-shadow: inset 1px 1px 0 rgba(238, 232, 170, 0.3), 2px 2px 8px rgba(0,0,0,0.6);
}
.old-bronze .screw {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #eee8aa 0%, #a8957c 40%, #2a2010 90%);
  filter: drop-shadow(1px 1px 1.5px rgba(0,0,0,0.6));
}
@media (max-width: 768px) {
  .old-bronze { font-size: 24px; padding: 25px 45px; min-width: 240px; }
  .old-bronze .screw { width: 10px; height: 10px; }
}
.old-bronze .screw-tl { top: 12px; left: 12px; }
.old-bronze .screw-tr { top: 12px; right: 12px; }
.old-bronze .screw-bl { bottom: 12px; left: 12px; }
.old-bronze .screw-br { bottom: 12px; right: 12px; }

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  6. VINTAGE-IRON
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

.vintage-iron {
  box-sizing: border-box;
  display: table;
  margin: 20px auto;
  min-width: 280px;
  max-width: 95%;
  position: relative;
  padding: 40px 80px;
  text-align: center;
  border-radius: 4px;
  font-size: 32px;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.2;
  color: #eeeeee;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.8);
  background: linear-gradient(135deg, #8b6b4d, #3a2510);
  border: 1px solid #1a0f00;
  box-shadow: inset 1px 1px 0 rgba(220, 220, 220, 0.2), 3px 3px 10px rgba(0,0,0,0.7);
}
.vintage-iron .screw {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #dcdcdc 0%, #5d3914 40%, #1a0f00 90%);
  filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.7));
}
@media (max-width: 768px) {
  .vintage-iron { font-size: 24px; padding: 25px 45px; min-width: 240px; }
  .vintage-iron .screw { width: 10px; height: 10px; }
}
.vintage-iron .screw-tl { top: 12px; left: 12px; }
.vintage-iron .screw-tr { top: 12px; right: 12px; }
.vintage-iron .screw-bl { bottom: 12px; left: 12px; }
.vintage-iron .screw-br { bottom: 12px; right: 12px; }