/* =========================================================
   /training 専用
   見出し・本文・ボタンは treatment.css の tx-* を使う。
   FVは写真を全面に敷き、ヘッダーは写真とつなぐ。
========================================================= */

.training-page {
  padding-top: 0;
  position: relative;
  z-index: 0;
}

/* ページ背景の手前、本文の背面。header は z-index:1000 のまま上。白地のJPGは乗算で抜く。 */
.training-page::before {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: min(62vw, 700px);
  aspect-ratio: 1133 / 1108;
  transform: translate(-50%, -50%);
  background-color: transparent;
  background-image: url("../images/logoname.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.18;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.training-page > section,
.training-page > footer {
  position: relative;
  z-index: 1;
}

.training-page .header {
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0) 100%);
  box-shadow: none;
  border-bottom: none;
  transition:
    background-color 0.4s ease,
    background-image 0.4s ease,
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}

.training-page.is-past-hero .header {
  background-color: #ffffff;
  background-image: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(30, 58, 95, 0.08);
}

.training-page .tx-hero {
  grid-template-columns: 1fr;
  grid-template-areas: "copy";
  min-height: 100svh;
  overflow: hidden;
  background-color: #f6f4f1;
}

.training-page .tx-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  grid-area: auto;
  z-index: 0;
}

.training-page .tx-hero-media img {
  object-position: 64% 46%;
  -webkit-mask-image: none;
  mask-image: none;
}

.training-page .tx-hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.85) 16%, transparent 42%);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.85) 16%, transparent 42%);
}

.training-page .tx-hero-media::after {
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(255, 255, 255, 0.58) 18%,
    rgba(255, 255, 255, 0.22) 36%,
    rgba(255, 255, 255, 0.04) 52%,
    transparent 68%
  );
}

.training-page .tx-hero-copy {
  z-index: 1;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: none;
  padding: 120px 40% 88px 8%;
}

.training-page .tx-eyebrow {
  text-align: left;
}

.training-page .tx-hero-copy-inner {
  width: auto;
}

.training-page .tx-hero-title {
  display: block;
  max-width: 100%;
  font-family: "Noto Serif JP", "Playfair Display", serif;
  font-weight: 500;
}

.training-page .tr-en {
  margin: 0 0 12px;
  font-family: "Playfair Display", "Noto Sans JP", serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #c0a062;
}

.training-page .tr-flow {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 0;
  margin: 32px 0 0;
  padding: 0;
  text-align: left;
}

.training-page .tr-flow li {
  box-sizing: border-box;
  margin: 0;
  padding: 0 16px;
  border-left: 1px solid rgba(192, 160, 98, 0.45);
}

.training-page .tr-flow li:first-child {
  padding-left: 0;
  border-left: none;
}

.training-page .tr-flow li:last-child {
  padding-right: 0;
}

.training-page [aria-labelledby="tr-flow-heading"] .tx-section-lead {
  margin-top: 8px;
}

.training-page .tr-flow h3 {
  margin: 0 0 8px;
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: #1E3A5F;
}

.training-page .tr-flow li > p:not(.tx-pillar-name):not(.tr-en):not(.tr-links) {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 2;
  color: #1E3A5F;
  opacity: 0.82;
}

.training-page .tr-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin: 22px 0 0;
}

.training-page .tr-links a {
  color: #1E3A5F;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-bottom: 1px solid #c0a062;
  padding-bottom: 2px;
}

.training-page .tr-links a:hover {
  color: #8fa3c1;
}

.training-page .tr-points {
  margin: 40px auto 0;
  max-width: 720px;
  text-align: left;
}

.training-page .tr-points article + article {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid #eee8dc;
}

.training-page [aria-labelledby="tr-reconditioning-heading"] {
  isolation: isolate;
  background-color: #ffffff;
}

.training-page .tr-recondition {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  grid-template-areas:
    "photo copy"
    "points points";
  column-gap: 48px;
  row-gap: 40px;
  align-items: center;
}

.training-page .tr-recondition-photo {
  grid-area: photo;
  margin: 0;
}

.training-page .tr-recondition-photo img {
  border-radius: 6px;
}

.training-page .tr-recondition-copy {
  grid-area: copy;
  text-align: left;
}

.training-page .tr-recondition-copy .tx-eyebrow {
  text-align: left;
}

.training-page .tr-recondition-copy .tx-body {
  margin-top: 24px;
}

.training-page .tr-recondition > .tr-points {
  grid-area: points;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: none;
  margin: 0;
}

.training-page .tr-recondition > .tr-points article {
  margin: 0;
  padding: 0 24px;
  border-left: 1px solid rgba(192, 160, 98, 0.55);
}

.training-page .tr-recondition > .tr-points article:first-child {
  padding-left: 0;
  border-left: none;
}

.training-page .tr-recondition > .tr-points article:last-child {
  padding-right: 0;
}

.training-page .tr-recondition > .tr-points article + article {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.training-page .tr-training {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #ffffff;
}

.training-page .tr-training-photo {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}

.training-page .tr-training-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 48%;
}

.training-page .tr-training::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  width: 62%;
  pointer-events: none;
  filter: blur(22px);
  background:
    radial-gradient(ellipse 88% 84% at 34% 50%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.96) 40%, rgba(255, 255, 255, 0.5) 62%, rgba(255, 255, 255, 0) 80%),
    radial-gradient(ellipse 40% 34% at 10% 18%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 72%),
    radial-gradient(ellipse 34% 30% at 72% 86%, rgba(255, 255, 255, 0.68) 0%, rgba(255, 255, 255, 0) 70%);
}

.training-page .tr-training > .tx-inner {
  max-width: min(32em, 42%);
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

.training-page .tr-training .tx-eyebrow,
.training-page .tr-training .tx-heading,
.training-page .tr-training .tx-body {
  position: relative;
  z-index: 2;
}

.training-page .tr-training .tx-eyebrow,
.training-page .tr-training .tx-heading {
  text-align: left;
}

.training-page .tr-training .tx-body p {
  opacity: 1;
}

.training-page .tr-performance {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #ffffff;
}

.training-page .tr-performance-photo {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}

.training-page .tr-performance-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 28% 46%;
}

.training-page .tr-performance::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  right: 0;
  width: 62%;
  pointer-events: none;
  filter: blur(22px);
  background:
    radial-gradient(ellipse 88% 84% at 66% 50%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.96) 40%, rgba(255, 255, 255, 0.5) 62%, rgba(255, 255, 255, 0) 80%),
    radial-gradient(ellipse 40% 34% at 90% 18%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 72%),
    radial-gradient(ellipse 34% 30% at 28% 86%, rgba(255, 255, 255, 0.68) 0%, rgba(255, 255, 255, 0) 70%);
}

.training-page .tr-performance > .tx-inner {
  max-width: min(32em, 42%);
  margin-left: auto;
  margin-right: 0;
  text-align: left;
}

.training-page .tr-performance .tx-eyebrow,
.training-page .tr-performance .tx-heading,
.training-page .tr-performance .tx-body,
.training-page .tr-performance .tx-text-link {
  position: relative;
  z-index: 2;
}

.training-page .tr-performance .tx-eyebrow,
.training-page .tr-performance .tx-heading {
  text-align: left;
}

.training-page .tr-performance .tx-body p {
  opacity: 1;
}

.training-page [aria-labelledby="tr-daily-heading"] {
  background-color: rgba(255, 255, 255, 0.8);
  padding-top: 112px;
  padding-bottom: 120px;
}

.training-page [aria-labelledby="tr-daily-heading"] > .tx-inner {
  max-width: 43em;
}

.training-page [aria-labelledby="tr-both-heading"] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #ffffff;
  background-image: url("../images/trainingacuath.jpg");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center top;
}

.training-page [aria-labelledby="tr-both-heading"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(255, 255, 255, 0.72) 20%,
    rgba(255, 255, 255, 0.2) 34%,
    rgba(255, 255, 255, 0) 46%
  );
}

.training-page [aria-labelledby="tr-both-heading"] > .tx-inner {
  position: relative;
  z-index: 2;
  max-width: min(28em, 34vw);
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

.training-page [aria-labelledby="tr-both-heading"] .tx-eyebrow,
.training-page [aria-labelledby="tr-both-heading"] .tx-heading {
  text-align: left;
}

.training-page [aria-labelledby="tr-both-heading"] .tx-body p {
  opacity: 1;
}

.training-page [aria-labelledby="tr-price-heading"] .tx-body {
  width: fit-content;
  max-width: min(33em, 100%);
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.training-page [aria-labelledby="tr-cta-heading"] {
  background-color: rgba(255, 255, 255, 0.8);
  padding-top: 108px;
  padding-bottom: 120px;
}

.training-page [aria-labelledby="tr-cta-heading"] .tx-body {
  width: fit-content;
  max-width: min(36em, 100%);
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.training-page [aria-labelledby="tr-cta-heading"] .tx-cta-btn {
  background: #1E3A5F;
  color: #ffffff;
  border-color: #1E3A5F;
  box-shadow: none;
}

.training-page [aria-labelledby="tr-cta-heading"] .tx-cta-btn--outline {
  background: #ffffff;
  color: #1E3A5F;
  border-color: rgba(30, 58, 95, 0.28);
  box-shadow: none;
}

@media (hover: hover) {
  .training-page [aria-labelledby="tr-cta-heading"] .tx-cta-btn:hover {
    background: #4a5f7a;
    color: #ffffff;
    border-color: #4a5f7a;
  }

  .training-page [aria-labelledby="tr-cta-heading"] .tx-cta-btn--outline:hover {
    background: #ffffff;
    color: #1E3A5F;
    border-color: #1E3A5F;
  }
}

.training-page .tr-rehab .tx-body,
.training-page .tr-rehab .tx-section-lead {
  max-width: 46em;
}

.training-page .tr-path {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr);
  align-items: center;
  max-width: none;
  margin: 36px 0 0;
  text-align: center;
}

.training-page .tr-path > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 2px 8px;
}

.training-page .tr-path p {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  font-size: 0.98rem;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: #1E3A5F;
  text-align: left;
}

.training-page .tr-path .tr-en {
  margin-bottom: 4px;
  color: #c0a062;
}

.training-page .tr-path .tr-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: #c0a062;
  letter-spacing: 0;
  line-height: 1;
}

.training-page .tr-arrow::after {
  content: "→";
  font-size: 0.82rem;
}

.training-page .tx-body a {
  color: #1E3A5F;
  border-bottom: 1px solid #c0a062;
  text-decoration: none;
}

.training-page .tx-body a:hover {
  color: #8fa3c1;
}

@media (max-width: 1024px) {
  .training-page .tx-hero {
    min-height: 72svh;
  }

  .training-page .tx-hero-copy {
    padding: 108px 28% 64px 7%;
  }

  .training-page .tx-hero-media img {
    object-position: 70% 44%;
  }

  .training-page .tr-recondition {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    column-gap: 28px;
    row-gap: 32px;
  }

  .training-page .tr-recondition > .tr-points article {
    padding: 0 16px;
  }
}

@media (max-width: 1160px) {
  .training-page .tr-flow {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 24px;
  }

  .training-page .tr-flow li,
  .training-page .tr-flow li:nth-child(odd),
  .training-page .tr-flow li:nth-child(even),
  .training-page .tr-flow li:first-child {
    padding: 18px 0 0;
    border-left: none;
    border-top: 1px solid #c0a062;
  }

  .training-page .tr-flow li:last-child {
    padding: 18px 0;
    border-left: none;
    border-top: 1px solid #c0a062;
    border-bottom: 1px solid #c0a062;
  }
}

@media (max-width: 900px) {
  .training-page .tr-training::before,
  .training-page .tr-performance::before {
    inset: 0;
    width: auto;
    left: 0;
    right: 0;
    filter: none;
    background: rgba(250, 250, 250, 0.86);
  }

  .training-page .tr-training > .tx-inner,
  .training-page .tr-performance > .tx-inner {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .training-page .tr-training .tx-eyebrow,
  .training-page .tr-training .tx-heading,
  .training-page .tr-performance .tx-eyebrow,
  .training-page .tr-performance .tx-heading {
    text-align: left;
  }
}

@media (max-width: 768px) {
  .training-page::before {
    width: min(72vw, 300px);
    opacity: 0.18;
  }

  .training-page .tx-hero {
    grid-template-columns: 1fr;
    min-height: 62svh;
  }

  .training-page .tx-hero-copy {
    justify-content: flex-end;
    padding: 96px 7% 36px;
  }

  .training-page .tx-hero-media img {
    object-position: 72% 42%;
  }

  .training-page .tx-hero-media::before {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.35) 48%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.35) 48%, #000 100%);
  }

  .training-page .tx-hero-media::after {
    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.28) 0%,
        rgba(255, 255, 255, 0.05) 36%,
        rgba(255, 255, 255, 0.78) 100%
      ),
      linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.42) 0%,
        rgba(255, 255, 255, 0.08) 46%,
        transparent 100%
      );
  }

  .training-page .tr-training-photo img {
    object-position: 72% 42%;
  }

  .training-page .tr-training > .tx-inner {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .training-page .tr-training .tx-eyebrow,
  .training-page .tr-training .tx-heading {
    text-align: left;
  }

  .training-page .tr-training .tx-heading {
    color: #1E3A5F;
  }

  .training-page .tr-training .tx-body p {
    color: #1E3A5F;
    opacity: 1;
  }

  .training-page .tr-performance-photo img {
    object-position: 30% 42%;
  }

  .training-page .tr-performance > .tx-inner {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .training-page .tr-performance .tx-eyebrow,
  .training-page .tr-performance .tx-heading {
    text-align: left;
  }

  .training-page .tr-performance .tx-heading,
  .training-page .tr-performance .tx-body p,
  .training-page .tr-performance .tx-text-link {
    color: #1E3A5F;
  }

  .training-page [aria-labelledby="tr-daily-heading"] {
    padding-top: 64px;
    padding-bottom: 68px;
  }

  .training-page [aria-labelledby="tr-price-heading"] .tx-body {
    max-width: min(31.4em, 100%);
    text-align: left;
  }

  .training-page [aria-labelledby="tr-cta-heading"] .tx-body {
    text-align: left;
  }

  .training-page .tr-rehab .tx-section-lead {
    text-align: left;
  }
}

@media (max-width: 1176px) {
  .training-page [aria-labelledby="tr-both-heading"] {
    background-size: cover;
    background-position: 68% 40%;
  }

  .training-page [aria-labelledby="tr-both-heading"]::before {
    inset: 0;
    width: auto;
    background: rgba(255, 255, 255, 0.8);
  }

  .training-page [aria-labelledby="tr-both-heading"] > .tx-inner {
    width: auto;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .training-page [aria-labelledby="tr-both-heading"] .tx-eyebrow,
  .training-page [aria-labelledby="tr-both-heading"] .tx-heading {
    text-align: left;
  }
}

@media (max-width: 700px) {
  .training-page .tr-path {
    display: block;
    max-width: 280px;
    margin: 32px auto 0;
  }

  .training-page .tr-path > div {
    padding: 0;
  }

  .training-page .tr-path .tr-arrow {
    margin: 16px auto;
  }

  .training-page .tr-arrow::after {
    content: "↓";
    font-size: 0.9rem;
  }
}

@media (max-width: 640px) {
  .training-page .tr-recondition {
    display: block;
  }

  .training-page .tr-recondition-photo {
    margin: 28px 0 4px;
  }

  .training-page .tr-recondition-copy,
  .training-page .tr-recondition-copy .tx-eyebrow {
    text-align: left;
  }

  .training-page .tr-recondition-copy .tx-heading {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .training-page .tr-recondition > .tr-points {
    display: block;
    margin-top: 28px;
  }

  .training-page .tr-recondition > .tr-points article,
  .training-page .tr-recondition > .tr-points article:first-child,
  .training-page .tr-recondition > .tr-points article:last-child {
    padding-left: 0;
    padding-right: 0;
    border-left: none;
  }

  .training-page .tr-recondition > .tr-points article + article {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(192, 160, 98, 0.55);
    border-left: none;
  }
}

@media (max-width: 480px) {
  .training-page .logo {
    font-size: 1.55rem;
  }
}

.training-page [aria-labelledby="tr-for-heading"] {
  position: relative;
  isolation: isolate;
  background-color: #fafafa;
  background-image: url("../images/traininghowabout.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 46%;
}

@media (max-width: 768px) {
  .training-page [aria-labelledby="tr-for-heading"] {
    background-position: 34% 42%;
  }
}

.training-page [aria-labelledby="tr-for-heading"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: rgba(250, 250, 250, 0.86);
}

.training-page [aria-labelledby="tr-for-heading"] > .tx-inner {
  position: relative;
  z-index: 1;
}

.training-page [aria-labelledby="tr-for-heading"] .tx-inner--narrow + .tx-inner--narrow {
  max-width: 1100px;
  margin-top: 32px;
}

.training-page [aria-labelledby="tr-for-heading"] .tx-philosophy-body {
  width: fit-content;
  max-width: min(62em, 100%);
  margin-left: auto;
  margin-right: auto;
}

.training-page [aria-labelledby="tr-for-heading"] .tx-philosophy-body p {
  line-height: 1.85;
  margin-bottom: 0.55em;
}

@media (min-width: 769px) {
  .training-page [aria-labelledby="tr-for-heading"] {
    padding-top: 56px;
    padding-bottom: 60px;
  }

  .training-page [aria-labelledby="tr-for-heading"] .tx-inner--narrow:first-child {
    max-width: 1100px;
  }

  .training-page [aria-labelledby="tr-for-heading"] .tx-inner--narrow + .tx-inner--narrow {
    margin-top: 44px;
  }
}

@media (min-width: 1025px) {
  .training-page [aria-labelledby="tr-for-heading"] .tx-extra-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 36px;
    margin-top: 20px;
  }

  .training-page [aria-labelledby="tr-for-heading"] .tx-extra-list li {
    padding: 10px 18px 10px 16px;
  }

  .training-page [aria-labelledby="tr-for-heading"] .tx-extra-list li:nth-child(n + 4) {
    border-bottom: 1px solid #eee8dc;
  }
}