﻿/* Asia/Tokyo, 2025-11-27 17:22(UTC+09:00) profile.css */
#profile {
  padding: var(--section-space) 0;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(0, 117, 201, 0.08) 0, transparent 55%),
    radial-gradient(120% 120% at 100% 0, rgba(17, 119, 19, 0.05) 0, transparent 55%),
    #f9fafb;
}

.profile-table {
  width: 100%;
  max-width: 880px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-16);
  line-height: 2.6rem;
  margin: 1.6rem auto 0;
  background-color: #fff;
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}
.profile-table tbody tr {
  transition: background-color 0.2s ease;
}
.profile-table tbody tr:hover {
  background-color: #f9fbff;
}
.profile-table th,
.profile-table td {
  padding: 1.6rem 2.4rem;
  vertical-align: top;
  border: 0;
}
.profile-table th {
  width: 26%;
  background-color: #f3f7fb;
  font-weight: 600;
  font-size: var(--fs-16);
  letter-spacing: 0.12em;
  color: #006a99;
  text-align: left;
  white-space: nowrap;
  border-right: 1px solid #e5e7eb;
}
.profile-table td {
  width: 74%;
  font-weight: 400;
  color: #111827;
}
.profile-table tbody tr + tr th,
.profile-table tbody tr + tr td {
  border-top: 1px solid #e5e7eb;
}
.profile-table a {
  color: #0075c9;
  text-decoration: none;
  font-weight: 500;
  position: relative;
}
.profile-table a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.2rem;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0.24;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.18s ease-out, opacity 0.18s ease-out;
}
.profile-table a:hover::after,
.profile-table a:focus-visible::after {
  transform: scaleX(1);
  opacity: 0.56;
}
.profile-table a:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
.profile-table .note {
  font-size: var(--fs-16);
  color: #4b5563;
  margin: 0.8rem 0 0;
}
.profile-table .asterisk-note {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px dashed #d1d9e6;
  font-size: var(--fs-16);
  color: #4b5563;
  line-height: 1.6;
}
@media (max-width: 960px) {
  .profile-table {
    font-size: var(--fs-15);
    margin-top: 1.2rem;
  }
}
@media (max-width: 768px) {
  .profile-table {
    max-width: 100%;
    border-radius: 1rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  }
  .profile-table tbody,
  .profile-table tr,
  .profile-table th,
  .profile-table td {
    display: block;
    width: 100%;
  }
  .profile-table tbody tr:hover {
    background-color: transparent;
  }
  .profile-table tbody tr + tr th,
  .profile-table tbody tr + tr td {
    border-top: 0;
  }
  .profile-table th {
    border-right: 0;
    background-color: #f9fafb;
    padding: 1.2rem 1.6rem 0.4rem;
    font-size: var(--fs-16);
    letter-spacing: 0.16em;
    color: #6b7280;
  }
  .profile-table td {
    padding: 0 1.6rem 1.8rem;
  }
  .profile-table tbody tr + tr {
    border-top: 1px solid #e5e7eb;
  }
}
@media (max-width: 480px) {
  .profile-table {
    margin-top: 1rem;
    border-radius: 0.8rem;
  }
  .profile-table td,
  .profile-table th {
    padding-left: 1.4rem;
    padding-right: 1.4rem;
  }
}
