.subpage { background: #080808; }
.subpage a:focus-visible, .subpage button:focus-visible, .subpage input:focus-visible, .subpage textarea:focus-visible, .subpage [tabindex]:focus-visible { outline: 2px solid #fff000; outline-offset: 4px; }
.subpage header .line { background: #333; }
.subpage header .menu-pop-wrap { background: #080808f5; }
.subpage .page-intro { color: #bbb; font-size: 18px; line-height: 1.7; margin: -16px 0 40px; }
.subpage .page-intro a { display: inline; text-decoration: underline; text-underline-offset: 4px; }
.subpage .project-wrap .tab-box { gap: 10px; }
.subpage .project-wrap .tab-box button { margin: 0; color: #ccc; }
.subpage .project-wrap .tab-box button.active { background: #fff000; color: #080808; }
.subpage .project-wrap .project-list { align-items: stretch; }
.subpage .project-wrap .project-list li a .img-box { width: 100%; height: auto; aspect-ratio: 365 / 243; }
.subpage .project-wrap .project-list li a .tag-box { flex-wrap: wrap; }
.subpage .project-detail-wrap .desc { overflow-wrap: anywhere; min-width: 0; }
.subpage .project-detail-wrap .img-wrapper img { max-width: min(900px, 100%); height: auto; }
.subpage .detail-actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; padding: 0 20px 60px; }
.subpage .detail-actions a { font-size: 16px; padding: 14px 22px; border: 1px solid #555; }
.subpage .contact-wrap .contact-group .list-box label { color: #bbb; }
.subpage .contact-wrap .contact-group .agree-box { gap: 12px; flex-wrap: wrap; }
.subpage .contact-wrap .contact-group .agree-box label { width: auto; color: #bbb; line-height: 1.5; }
.subpage .contact-wrap .contact-group .agree-box .read-btn { color: #ccc; margin: 0; }
.subpage .contact-wrap .send-btn { background: #fff000; color: #080808; font-weight: 600; }
.subpage .contact-wrap .send-btn:hover { background: #e6d800; }
.subpage .contact-wrap .agree-modal .modal-title { font-size: 18px; margin-bottom: 16px; line-height: 1.5; }
.subpage .contact-wrap .agree-modal .close-btn { width: 32px; height: 32px; padding: 4px; }
@media (max-width: 600px) {
  .subpage .page-intro { font-size: 16px; }
  .subpage .contact-wrap .contact-group .list-box input, .subpage .contact-wrap .contact-group .list-box textarea { padding-inline: 10px; font-size: 16px; }
  .subpage .contact-wrap .contact-group .list-box input::placeholder { font-size: 14px; }
  .subpage .contact-wrap .contact-group .agree-box label { font-size: 16px; }
}

.email-contact{max-width:760px;padding:36px;border:1px solid #333;background:#141414}
.email-contact p{font-size:18px;line-height:1.7;color:#bbb}
.email-contact .email-address{display:inline-block;font-size:clamp(24px,4vw,40px);font-weight:700;color:#fff000;margin:18px 0 28px;overflow-wrap:anywhere}
.email-contact ul{margin-bottom:30px}
.email-contact li{font-size:16px;line-height:1.8;color:#ccc;padding:4px 0}
.email-contact li::before{content:'· ';color:#fff000}
.email-contact .email-button{display:inline-block;padding:16px 24px;background:#fff000;color:#080808;font-size:16px;font-weight:700}
.email-contact .email-help{font-size:14px;margin-top:20px;color:#aaa}
@media(max-width:600px){.email-contact{padding:24px}.email-contact p{font-size:16px}.email-contact .email-button{width:100%;text-align:center;padding-inline:12px}}