/* ============================================================
   東京リフォーム TOPページ専用スタイル
   ============================================================ */

.page-tokyo-reform {
  --tr-color-body: #6F7C85;
  --tr-color-card-navy: #1e2a42;
  --tr-header-height: 72px;
  --tr-hero-expand: 0;
  --tr-hero-tone: 0;
  --tr-hero-about-in: 0;
  --tr-hero-progress: 0;
  --tr-hero-slider-top: 38%;
  --tr-hero-slider-height: 62%;
  --color-bg-light: #ffffff;
  overflow-x: clip;
}

.tr-line-cta {
  display: none !important;
}

.tr-br-pc {
  display: inline;
}

.tr-br-sp {
  display: none;
}

.tr-hero__arch-def {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.page-tokyo-reform .tr-section-title__name,
.page-tokyo-reform .tr-bottom-cta__label {
  color: var(--tr-color-body);
}


/* ------------------------------------------------------------
   共通コンポーネント
   ------------------------------------------------------------ */

/* SectionTitle */
.tr-section-title {
  margin-bottom: 48px;
}

.tr-section-title__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}

.tr-section-title__number {
  color: var(--color-accent);
  font-weight: 700;
}

.tr-section-title__slash {
  color: var(--color-border);
}

.tr-section-title__name {
  color: var(--tr-color-body);
}

.tr-section-title__heading {
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing);
  color: var(--color-main);
}

.tr-section-title__heading--vertical {
  line-height: 1.4;
}

.tr-section-title--light .tr-section-title__heading {
  color: var(--color-white);
}

.tr-section-title--light .tr-section-title__name {
  color: rgba(255, 255, 255, 0.6);
}

/* CTAButton */
.tr-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: var(--letter-spacing);
  line-height: 1.5;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: opacity var(--transition), background-color var(--transition), border-color var(--transition);
  text-align: center;
  white-space: nowrap;
}

.tr-cta-btn--primary {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

.tr-cta-btn--primary:hover {
  opacity: 0.88;
}

.tr-cta-btn--outline {
  background-color: var(--color-white);
  border-color: var(--color-border);
  color: var(--color-main);
}

.tr-cta-btn--outline:hover {
  border-color: var(--color-main);
}

.tr-cta-btn--wide {
  min-width: min(100%, 400px);
  width: 100%;
  max-width: 480px;
}

/* セクション共通 */
.tr-section {
  padding-block: 100px;
}

.tr-section--gray {
  background-color: var(--color-bg-light);
}

.tr-section--dark {
  background-color: var(--color-main);
  color: var(--color-white);
}


/* ------------------------------------------------------------
   ヘッダー
   ------------------------------------------------------------ */
.tr-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.tr-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--tr-header-height);
  gap: 24px;
}

.tr-logo {
  margin: 0;
  flex-shrink: 0;
}

.tr-logo__link {
  display: inline-flex;
  align-items: center;
  transition: opacity var(--transition);
}

.tr-logo__link:hover {
  opacity: 0.75;
}

.tr-logo__image {
  display: block;
  height: 58px;
  width: auto;
}

.tr-header .tr-logo__image {
  height: 44px;
}

.tr-header__actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.tr-global-nav__list {
  display: flex;
  align-items: center;
  gap: 28px;
}

.tr-global-nav__link {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: var(--letter-spacing);
  color: var(--color-main);
  transition: opacity var(--transition);
  white-space: nowrap;
}

.tr-global-nav__link:hover {
  opacity: 0.7;
}

.tr-header__cta {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 13px;
  letter-spacing: -0.02em;
  line-height: 1.4;
  min-height: 44px;
  padding: 8px 14px;
}

.tr-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.tr-nav-toggle__bar {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-main);
  transition: transform var(--transition), opacity var(--transition);
}


/* ------------------------------------------------------------
   ファーストビュー
   ------------------------------------------------------------ */
.tr-hero {
  position: relative;
  /* 100vh表示 + 拡大 + トーン + ABOUT表示 + スライダー上ホールド */
  height: calc(100vh + 65vh + 45vh + 45vh + 35vh);
  background-color: var(--color-white);
}

.tr-hero__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.tr-hero__bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(216, 222, 228, 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 222, 228, 0.35) 1px, transparent 1px),
    linear-gradient(rgba(216, 222, 228, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 222, 228, 0.15) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px;
  opacity: calc(0.6 * (1 - var(--tr-hero-expand) * 0.9));
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.1s linear;
}

.tr-hero__inner {
  position: relative;
  z-index: 2;
  padding-top: clamp(32px, 6vh, 64px);
  pointer-events: none;
}

.tr-hero__content {
  max-width: 720px;
  opacity: clamp(0, calc(1 - var(--tr-hero-expand) * 1.6), 1);
  transform: translateY(calc(var(--tr-hero-expand) * -72px));
  pointer-events: auto;
}

.tr-hero__about {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(40px, 8vh, 96px);
  z-index: 6;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-x);
  opacity: 1;
  transform: translateY(calc((1 - var(--tr-hero-about-in)) * 16px));
  pointer-events: none;
  visibility: hidden;
}

.tr-hero.is-about-visible .tr-hero__about {
  pointer-events: auto;
  visibility: visible;
}

.tr-hero-about__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}

.tr-hero-about__label-number {
  color: var(--color-accent);
  font-weight: 700;
}

.tr-hero-about__label-slash {
  color: var(--color-border);
}

.tr-hero-about__label-name {
  color: var(--tr-color-body);
}

.tr-hero.is-toned .tr-hero-about__label-slash {
  color: rgba(255, 255, 255, 0.35);
}

.tr-hero.is-toned .tr-hero-about__label-name {
  color: rgba(255, 255, 255, 0.65);
}

.tr-hero-about__heading {
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing);
  color: var(--color-main);
  margin-bottom: 16px;
}

.tr-hero.is-toned .tr-hero-about__heading {
  color: var(--color-white);
}

.tr-hero-about__body {
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: var(--letter-spacing);
  color: var(--tr-color-body);
  max-width: min(100%, 860px);
}

.tr-hero.is-toned .tr-hero-about__body {
  color: rgba(255, 255, 255, 0.82);
}

@media (min-width: 1024px) {
  .tr-hero-about__lead-line {
    white-space: nowrap;
  }
}

.tr-hero-about__body p {
  margin: 0;
  font-weight: 400;
}

.tr-hero-about__body strong {
  font-weight: 700;
}

.tr-hero-about__cta {
  margin: 20px 0 0;
}

.tr-hero-about__cta .tr-cta-btn {
  min-width: min(100%, 320px);
}

.tr-hero__heading {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 0;
}

.tr-hero__heading-eyebrow {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.12em;
  color: var(--color-main);
}

.tr-hero__heading-display {
  display: block;
}

.tr-hero__display-line {
  display: block;
  font-size: clamp(40px, 6.8vw, 84px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.04em;
  color: var(--color-main);
  white-space: nowrap;
}

.tr-hero__display-accent {
  color: var(--color-accent);
  letter-spacing: -0.06em;
}

@keyframes tr-hero-copy-in {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

html.js .tr-hero__heading-eyebrow,
html.js .tr-hero__display-line {
  opacity: 0;
  transform: translateY(28px);
  animation: tr-hero-copy-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

html.js .tr-hero__heading-eyebrow {
  animation-delay: 0.3s;
}

html.js .tr-hero__display-line {
  animation-delay: 0.85s;
}

.tr-hero__lead {
  font-size: 16px;
  line-height: var(--line-height);
  color: var(--tr-color-body);
  max-width: 560px;
}

.tr-hero__slider-outer {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--tr-hero-slider-top);
  height: var(--tr-hero-slider-height);
  z-index: 1;
  overflow: hidden;
  clip-path: url(#tr-hero-arch-clip);
}

.tr-hero.is-scrolling .tr-hero__slider-outer {
  z-index: 4;
}

.tr-hero.is-full .tr-hero__slider-outer {
  top: 0;
  height: 100%;
  clip-path: none;
  z-index: 4;
}

.tr-hero.is-full .tr-hero__bg,
.tr-hero.is-full .tr-hero__content {
  opacity: 0;
  visibility: hidden;
}

.tr-hero__slider-tone {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-color: var(--color-main);
  opacity: calc(var(--tr-hero-tone) * 0.58);
  pointer-events: none;
}

/* 内側は常に固定サイズ。外側だけ拡大してクリップする */
.tr-hero__slider {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  transform: translateZ(0);
}

@keyframes tr-hero-slide {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.tr-hero__slider-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: max-content;
  height: 100vh;
  animation: tr-hero-slide 50s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

.tr-hero__slider-list {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-shrink: 0;
  align-items: stretch;
  height: 100vh;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tr-hero__slider-item {
  flex: 0 0 auto;
  height: 100vh;
  margin: 0;
  line-height: 0;
}

.tr-hero__slider-item picture {
  display: block;
  height: 100vh;
  line-height: 0;
}

.tr-hero__slider-item img {
  display: block;
  height: 100vh;
  width: 300px;
  object-fit: cover;
  object-position: center;
  background-color: var(--color-gray-300);
  filter: saturate(calc(1 - var(--tr-hero-tone) * 0.4))
    brightness(calc(1 - var(--tr-hero-tone) * 0.22));
}

@media (prefers-reduced-motion: reduce) {
  .tr-hero__slider-track {
    animation: none;
  }

  html.js .tr-hero__heading-eyebrow,
  html.js .tr-hero__display-line {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .tr-hero {
    height: auto;
  }

  .tr-hero__pin {
    position: relative;
    height: auto;
    min-height: 0;
    padding-bottom: 48px;
  }

  .tr-hero__slider-outer {
    position: relative;
    top: auto;
    height: 55vh;
    clip-path: url(#tr-hero-arch-clip);
  }

  .tr-hero__slider-tone {
    display: none;
  }

  .tr-hero__about {
    position: relative;
    bottom: auto;
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    margin-top: 32px;
  }

  .tr-hero-about__label-slash {
    color: var(--color-border);
  }

  .tr-hero-about__label-name {
    color: var(--tr-color-body);
  }

  .tr-hero-about__heading {
    color: var(--color-main);
  }

  .tr-hero-about__body {
    color: var(--tr-color-body);
  }
}


.tr-section--flow {
  background-color: #f4f6f8;
}


/* ------------------------------------------------------------
   ISSUES
   ------------------------------------------------------------ */
.tr-issues {
  padding-bottom: 0;
  background-color: #f4f6f8;
}

.tr-issues-stack {
  position: relative;
}

.tr-issues-card {
  position: relative;
  z-index: 2;
  padding: 48px 40px;
  background-color: var(--color-white);
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(23, 32, 51, 0.08);
}

.tr-issues__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tr-issue-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}

.tr-issue-item__visual {
  display: flex;
  justify-content: center;
}

.tr-issue-item__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #f4f6f8;
  color: var(--color-main);
  transition: background-color var(--transition), color var(--transition);
}

.tr-issue-item:hover .tr-issue-item__circle {
  background-color: rgba(230, 128, 0, 0.1);
  color: var(--color-accent);
}

.tr-issue-item__icon {
  display: block;
  width: 56px;
  height: 56px;
  overflow: visible;
}

.tr-issue-item__icon--spread,
.tr-issue-item__icon--large {
  width: 72px;
  height: 72px;
}

.tr-issue-item__icon--image {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.tr-issue-item__icon--image.tr-issue-item__icon--large {
  width: 72px;
  height: 72px;
}

.tr-issue-item__text {
  font-size: 16px;
  line-height: var(--line-height);
  color: var(--color-main);
  max-width: 240px;
}

.tr-issues-solution {
  position: relative;
  z-index: 1;
  margin-top: -32px;
  padding-block: 72px 40px;
  background-color: var(--color-main);
  text-align: center;
}

.tr-issues-solution__heading {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing);
  color: var(--color-white);
}

.tr-issues-solution__em {
  color: var(--color-accent);
}

.tr-issues-solution__arrow {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  color: var(--color-white);
  opacity: 0.8;
}


/* ------------------------------------------------------------
   REASONS（ReasonCard）
   ------------------------------------------------------------ */
.tr-reasons {
  padding-top: 48px;
}

.tr-reasons__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.tr-reason-card {
  padding: 40px 36px;
  background-color: var(--tr-color-card-navy);
  border-radius: 2px;
  transition: background-color var(--transition);
}

.tr-reason-card:hover {
  background-color: #24304a;
}

.tr-reason-card__number {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: 12px;
  letter-spacing: 0.1em;
}

.tr-reason-card__title {
  font-size: clamp(18px, 2vw, 20px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing);
  color: var(--color-white);
  margin-bottom: 16px;
}

.tr-reason-card__text {
  font-size: 16px;
  line-height: var(--line-height);
  color: rgba(255, 255, 255, 0.72);
}


/* ------------------------------------------------------------
   SERVICES（ServiceCard）
   ------------------------------------------------------------ */
.tr-services {
  padding-block: 0;
}

.tr-services__scroll {
  height: calc(100vh + 125vh * 7);
}

.tr-services__sticky {
  position: sticky;
  top: var(--tr-header-height);
  height: calc(100vh - var(--tr-header-height));
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  padding-block: 24px;
  box-sizing: border-box;
}

.tr-services__layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  align-self: center;
  margin-block: 0;
  width: 100%;
  max-height: 100%;
}

.tr-services__intro {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-self: center;
}

.tr-services__carousel {
  min-width: 0;
}

.tr-services__pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}

.tr-services__dot {
  display: block;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background-color: rgba(230, 128, 0, 0.4);
  transition: width var(--transition), background-color var(--transition);
}

.tr-services__dot.is-active {
  width: 24px;
  background-color: var(--color-accent);
}

.tr-services__viewport {
  overflow: hidden;
  min-width: 0;
  padding-block: clamp(20px, 4vh, 36px);
  container-type: inline-size;
  container-name: services-viewport;
}

.tr-services__track {
  display: flex;
  align-items: center;
  gap: 24px;
  width: max-content;
  list-style: none;
  margin: 0;
  padding: 0;
  will-change: transform;
  transition: none;
}

.tr-service-card {
  flex: 0 0 74cqw;
  width: 74cqw;
  max-width: 480px;
  min-width: 0;
  margin-inline: 0;
  margin-block: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  overflow: hidden;
  background-color: var(--color-white);
  transition: box-shadow var(--transition);
}

.tr-service-card:hover {
  box-shadow: var(--shadow-soft);
}

.tr-service-card__figure {
  margin: 0;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.tr-service-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--color-gray-300);
}

.tr-service-card__body {
  flex: 1 1 auto;
  min-height: 152px;
  padding: 28px 32px 32px;
}

.tr-service-card--illust .tr-service-card__body {
  position: relative;
  min-height: 280px;
  padding-bottom: 96px;
}

.tr-service-card__illust {
  position: absolute;
  right: 24px;
  bottom: 24px;
  color: var(--color-main);
  opacity: 0.72;
}

.tr-service-card__title {
  font-size: clamp(18px, 2vw, 20px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing);
  color: var(--color-main);
  margin-bottom: 12px;
  min-height: calc(1.5em * 2);
}

.tr-service-card__text {
  font-size: 16px;
  line-height: var(--line-height);
  color: var(--tr-color-body);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}


/* ------------------------------------------------------------
   FLOW（FlowStep）
   ------------------------------------------------------------ */
.tr-flow__diagram {
  --flow-connector-gap: 40px;
  --flow-row-gap: 48px;
  --flow-card-min-height: 176px;
  --flow-card-width: calc((100% - 2 * var(--flow-connector-gap)) / 3);
  --flow-card-width-4: calc((100% - 3 * var(--flow-connector-gap)) / 4);
  --flow-row-inset: calc(var(--flow-card-width) / 2);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  overflow: visible;
}

.tr-flow__row {
  display: grid;
  grid-template-columns:
    var(--flow-card-width)
    var(--flow-connector-gap)
    var(--flow-card-width)
    var(--flow-connector-gap)
    var(--flow-card-width);
  width: 100%;
  align-items: stretch;
  list-style: none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.tr-flow__row--four {
  grid-template-columns:
    var(--flow-card-width-4)
    var(--flow-connector-gap)
    var(--flow-card-width-4)
    var(--flow-connector-gap)
    var(--flow-card-width-4)
    var(--flow-connector-gap)
    var(--flow-card-width-4);
  margin-bottom: var(--flow-row-gap);
}

.tr-flow__row--bottom {
  grid-template-columns:
    var(--flow-card-width-4)
    var(--flow-connector-gap)
    var(--flow-card-width-4)
    var(--flow-connector-gap)
    var(--flow-card-width-4)
    var(--flow-connector-gap)
    var(--flow-card-width-4);
  width: 100%;
  margin-left: calc((var(--flow-card-width-4) + var(--flow-connector-gap)) / -2);
}

.tr-flow__row--bottom .tr-flow-step[data-step="5"] {
  grid-column: 3;
}

.tr-flow__row--bottom .tr-flow-connector:nth-child(2) {
  grid-column: 4;
}

.tr-flow__row--bottom .tr-flow-step[data-step="6"] {
  grid-column: 5;
}

.tr-flow__row--bottom .tr-flow-connector:nth-child(4) {
  grid-column: 6;
}

.tr-flow__row--bottom .tr-flow-step[data-step="7"] {
  grid-column: 7;
}

.tr-flow__row--offset {
  padding-left: var(--flow-row-inset);
  box-sizing: border-box;
}

.tr-flow__bridge-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

.tr-flow__bridge-path--four-five {
  fill: none;
  stroke: rgba(230, 128, 0, 0.42);
  stroke-width: 2;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 2;
}

.tr-flow-connector {
  position: relative;
  z-index: 1;
  align-self: stretch;
  height: auto;
  min-height: var(--flow-card-min-height);
  background: none;
}

.tr-flow-connector::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  margin-top: -1px;
  background-color: rgba(230, 128, 0, 0.42);
}

.tr-flow__bridge {
  display: block;
  flex: none;
  width: calc(var(--flow-card-width) * 1.5 + var(--flow-connector-gap) * 2);
  height: var(--flow-row-gap);
  margin-left: var(--flow-card-width);
  margin-right: auto;
  overflow: visible;
}

.tr-flow__bridge-path {
  fill: none;
  stroke: rgba(230, 128, 0, 0.42);
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.tr-flow__bridge-path--mobile {
  display: none;
}

.tr-flow-step {
  position: relative;
  z-index: 1;
  min-width: 0;
  width: 100%;
  padding: 28px 28px 26px;
  min-height: var(--flow-card-min-height);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 3px solid rgba(230, 128, 0, 0.24);
  border-radius: 2px;
  box-shadow: 0 2px 12px rgba(23, 32, 51, 0.04);
  overflow: hidden;
  transition:
    box-shadow var(--transition),
    transform var(--transition),
    border-color var(--transition),
    border-left-color var(--transition);
}

.tr-flow-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.tr-flow-step:hover {
  border-color: rgba(230, 128, 0, 0.22);
  border-left-color: var(--color-accent);
  box-shadow: var(--shadow-soft);
  transform: translateY(-4px);
}

.tr-flow-step:hover::before {
  transform: scaleX(1);
}

.tr-flow-step__label {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(230, 128, 0, 0.78);
  margin-bottom: 14px;
  transition: color var(--transition);
}

.tr-flow-step:hover .tr-flow-step__label {
  color: var(--color-accent);
}

.tr-flow-step__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing);
  color: var(--color-main);
  margin-bottom: 10px;
}

.tr-flow-step__text {
  font-size: 14px;
  line-height: 1.75;
  color: var(--tr-color-body);
}

.tr-bottom-cta__note {
  margin-top: 24px;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.72);
  max-width: 640px;
  margin-inline: auto;
}


/* ------------------------------------------------------------
   FAQ（FAQItem）
   ------------------------------------------------------------ */
.tr-faq__list {
  max-width: 900px;
  margin-inline: auto;
}

.tr-faq-item {
  border-bottom: 1px solid var(--color-border);
}

.tr-faq-item:first-child {
  border-top: 1px solid var(--color-border);
}

.tr-faq-item__heading {
  margin: 0;
}

.tr-faq-item__question {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 24px 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: opacity var(--transition);
}

.tr-faq-item__question:hover {
  opacity: 0.75;
}

.tr-faq-item__badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 2px;
}

.tr-faq-item__badge--q {
  background-color: var(--color-accent);
  color: var(--color-white);
}

.tr-faq-item__badge--a {
  background-color: var(--color-bg-light);
  color: var(--color-main);
  border: 1px solid var(--color-border);
}

.tr-faq-item__question-text {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  color: var(--color-main);
}

.tr-faq-item__icon {
  flex-shrink: 0;
  position: relative;
  width: 20px;
  height: 20px;
}

.tr-faq-item__icon::before,
.tr-faq-item__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--color-main);
  transition: transform var(--transition);
}

.tr-faq-item__icon::before {
  width: 14px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.tr-faq-item__icon::after {
  width: 2px;
  height: 14px;
  transform: translate(-50%, -50%);
}

.tr-faq-item.is-open .tr-faq-item__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.tr-faq-item__answer {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 0 8px 24px 8px;
}

.tr-faq-item__answer[hidden] {
  display: none;
}

.tr-faq-item__answer-text {
  flex: 1;
  font-size: 16px;
  line-height: var(--line-height);
  color: var(--tr-color-body);
  padding-top: 4px;
}

.tr-faq__more {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}


/* ------------------------------------------------------------
   下部CTA
   ------------------------------------------------------------ */
.tr-bottom-cta {
  position: relative;
  padding-block: 100px;
  background-color: var(--color-main);
  color: var(--color-white);
}

.tr-bottom-cta__inner {
  text-align: center;
}

.tr-bottom-cta .tr-section-title__label {
  justify-content: center;
}

.tr-bottom-cta .tr-section-title__name {
  color: rgba(255, 255, 255, 0.6);
}

.tr-bottom-cta__label {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--color-accent);
  margin-bottom: 24px;
}

.tr-bottom-cta__heading {
  font-size: clamp(28px, 3.5vw, 36px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing);
  margin-bottom: 24px;
}

.tr-bottom-cta__lead {
  font-size: 16px;
  line-height: var(--line-height);
  color: rgba(255, 255, 255, 0.78);
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: 48px;
}

.tr-bottom-cta__action {
  display: flex;
  justify-content: center;
}


/* ------------------------------------------------------------
   フッター
   ------------------------------------------------------------ */
.tr-footer {
  background-color: var(--color-main);
  color: var(--color-white);
  padding-block: 64px 32px;
}

.tr-footer__columns {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.tr-footer__logo {
  margin: 0 0 16px;
}

.tr-footer__logo-link {
  display: inline-block;
  transition: opacity var(--transition);
}

.tr-footer__logo-link:hover {
  opacity: 0.8;
}

.tr-footer__logo-image {
  display: block;
  height: 72px;
  width: auto;
}

.tr-footer__meta {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 4px;
}

.tr-footer__company-info {
  margin-top: 12px;
  margin-bottom: 16px;
  font-style: normal;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.65);
}

.tr-footer__tel {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.tr-footer__tel:hover {
  color: rgba(255, 255, 255, 0.9);
}

.tr-footer__desc {
  font-size: 16px;
  line-height: var(--line-height);
  color: rgba(255, 255, 255, 0.65);
  margin-top: 16px;
}

.tr-footer__nav-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: var(--letter-spacing);
  margin-bottom: 20px;
}

.tr-footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tr-footer__link {
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
  transition: opacity var(--transition);
}

.tr-footer__link:hover {
  opacity: 1;
  color: var(--color-white);
}

.tr-footer__company-site-link {
  display: inline-block;
  margin-top: 12px;
}

.tr-footer__link--accent {
  display: inline-block;
  margin-top: 16px;
  color: var(--color-accent);
}

.tr-footer__link--accent:hover {
  opacity: 0.8;
  color: var(--color-accent);
}

.tr-footer__copyright {
  text-align: center;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 32px;
  letter-spacing: 0.02em;
}


/* ------------------------------------------------------------
   セクション表示（段階的リビール）
   ------------------------------------------------------------ */
html.js .tr-section:not(.is-visible) .tr-section-title,
html.js .tr-section:not(.is-visible) .tr-issue-item,
html.js .tr-section:not(.is-visible) .tr-issues-solution,
html.js .tr-section:not(.is-visible) .tr-reason-card,
html.js .tr-section:not(.is-visible) .tr-services__intro .tr-cta-btn,
html.js .tr-section:not(.is-visible) .tr-flow-step,
html.js .tr-section:not(.is-visible) .tr-faq__list,
html.js .tr-section:not(.is-visible) .tr-faq__more,
html.js .tr-bottom-cta:not(.is-visible) .tr-bottom-cta__inner > * {
  opacity: 0;
  transform: translateY(28px);
}

html.js .tr-section.is-visible .tr-section-title,
html.js .tr-section.is-visible .tr-issue-item,
html.js .tr-section.is-visible .tr-issues-solution,
html.js .tr-section.is-visible .tr-reason-card,
html.js .tr-section.is-visible .tr-services__intro .tr-cta-btn,
html.js .tr-section.is-visible .tr-flow-step,
html.js .tr-section.is-visible .tr-faq__list,
html.js .tr-section.is-visible .tr-faq__more,
html.js .tr-bottom-cta.is-visible .tr-bottom-cta__inner > * {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.65s ease,
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

html.js .tr-section.is-visible .tr-services__intro .tr-cta-btn {
  transition-delay: 0.24s;
}

/* SERVICES intro: tall scroll section may not hit default IO threshold */
html.js .tr-services:not(.is-visible) .tr-services__intro .tr-section-title,
html.js .tr-services.is-visible .tr-services__intro .tr-section-title,
html.js .tr-services:not(.is-visible) .tr-services__intro .tr-cta-btn,
html.js .tr-services.is-visible .tr-services__intro .tr-cta-btn {
  opacity: 1;
  transform: none;
}

html.js .tr-section.is-visible .tr-section-title {
  transition-delay: 0.05s;
}

html.js .tr-section.is-visible .tr-issue-item:nth-child(1),
html.js .tr-section.is-visible .tr-reason-card:nth-child(1),
html.js .tr-section.is-visible .tr-service-card:nth-child(1),
html.js .tr-section.is-visible .tr-flow-step[data-step="1"] { transition-delay: 0.12s; }

html.js .tr-section.is-visible .tr-issue-item:nth-child(2),
html.js .tr-section.is-visible .tr-reason-card:nth-child(2),
html.js .tr-section.is-visible .tr-service-card:nth-child(2),
html.js .tr-section.is-visible .tr-flow-step[data-step="2"] { transition-delay: 0.18s; }

html.js .tr-section.is-visible .tr-issue-item:nth-child(3),
html.js .tr-section.is-visible .tr-reason-card:nth-child(3),
html.js .tr-section.is-visible .tr-flow-step[data-step="3"] { transition-delay: 0.24s; }

html.js .tr-section.is-visible .tr-issue-item:nth-child(4),
html.js .tr-section.is-visible .tr-reason-card:nth-child(4),
html.js .tr-section.is-visible .tr-flow-step[data-step="4"] { transition-delay: 0.3s; }

html.js .tr-issues.is-visible .tr-issues-solution {
  transition-delay: 0.36s;
}

html.js .tr-reasons.is-visible .tr-section-title {
  transition-delay: 0.1s;
}

html.js .tr-reasons.is-visible .tr-reason-card:nth-child(1) { transition-delay: 0.2s; }
html.js .tr-reasons.is-visible .tr-reason-card:nth-child(2) { transition-delay: 0.26s; }
html.js .tr-reasons.is-visible .tr-reason-card:nth-child(3) { transition-delay: 0.32s; }
html.js .tr-reasons.is-visible .tr-reason-card:nth-child(4) { transition-delay: 0.38s; }

html.js .tr-section.is-visible .tr-flow-step[data-step="5"] { transition-delay: 0.36s; }

html.js .tr-section.is-visible .tr-flow-step[data-step="6"] { transition-delay: 0.42s; }

html.js .tr-section.is-visible .tr-flow-step[data-step="7"] { transition-delay: 0.48s; }

html.js .tr-section.is-visible .tr-faq__list {
  transition-delay: 0.12s;
}

html.js .tr-section.is-visible .tr-faq__more {
  transition-delay: 0.28s;
}

html.js .tr-bottom-cta.is-visible .tr-bottom-cta__label { transition-delay: 0.08s; }
html.js .tr-bottom-cta.is-visible .tr-bottom-cta__heading { transition-delay: 0.16s; }
html.js .tr-bottom-cta.is-visible .tr-bottom-cta__lead { transition-delay: 0.24s; }
html.js .tr-bottom-cta.is-visible .tr-bottom-cta__action { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  .tr-services__track {
    transition: none;
  }

  .tr-flow-step,
  .tr-flow-step::before,
  .tr-flow-step__label {
    transition: none;
  }

  .tr-flow-step:hover {
    transform: none;
  }

  .tr-services__scroll {
    height: auto !important;
  }

  .tr-services__sticky {
    position: static;
    height: auto;
    overflow: visible;
  }

  .tr-services__viewport {
    overflow: visible;
  }

  .tr-services__track {
    transform: none !important;
    flex-wrap: wrap;
    width: 100%;
    gap: 20px;
  }

  .tr-service-card {
    flex: 1 1 100%;
    max-width: 100%;
  }

  html.js .tr-section:not(.is-visible) .tr-section-title,
  html.js .tr-section:not(.is-visible) .tr-issue-item,
  html.js .tr-section:not(.is-visible) .tr-issues-solution,
  html.js .tr-section:not(.is-visible) .tr-reason-card,
  html.js .tr-section:not(.is-visible) .tr-flow-step,
  html.js .tr-section:not(.is-visible) .tr-faq__list,
  html.js .tr-section:not(.is-visible) .tr-faq__more,
  html.js .tr-bottom-cta:not(.is-visible) .tr-bottom-cta__inner > * {
    opacity: 1;
    transform: none;
  }
}


/* ------------------------------------------------------------
   レスポンシブ
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .tr-flow__diagram {
    --flow-connector-gap: 40px;
    --flow-row-gap: 40px;
  }

  .tr-issues__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 24px;
  }

  .tr-services__layout {
    grid-template-columns: 240px 1fr;
    gap: 40px;
  }
}

@media (max-width: 960px) {
  .tr-global-nav__list {
    gap: 16px;
  }

  .tr-header__actions {
    gap: 16px;
  }

  .tr-header__cta {
    font-size: 12px;
    padding: 8px 12px;
    min-height: 42px;
  }
}

@media (max-width: 768px) {
  .tr-br-pc {
    display: none;
  }

  .tr-br-sp {
    display: inline;
  }

  .tr-section {
    padding-block: 64px;
  }

  .tr-section-title {
    margin-bottom: 32px;
  }

  /* ヘッダー：ハンバーガー */
  .tr-nav-toggle {
    display: flex;
    margin-left: auto;
  }

  .tr-header__inner {
    flex-wrap: nowrap;
  }

  .tr-header__actions {
    position: fixed;
    top: var(--tr-header-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    padding: 24px var(--container-padding-x-sp);
    transform: translateY(-120%);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
    z-index: 99;
  }

  .tr-header__actions.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .tr-global-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 24px;
  }

  .tr-header__cta {
    width: 100%;
    font-size: 15px;
    padding: 14px 16px;
    letter-spacing: 0;
  }

  .tr-nav-toggle.is-active .tr-nav-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .tr-nav-toggle.is-active .tr-nav-toggle__bar:nth-child(2) {
    opacity: 0;
  }

  .tr-nav-toggle.is-active .tr-nav-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* ファーストビュー */
  .page-tokyo-reform {
    --tr-hero-slider-top: 46%;
    --tr-hero-slider-height: 54%;
    --tr-hero-slider-height-sp: clamp(280px, 52svh, 420px);
  }

  .tr-hero {
    height: auto;
  }

  .tr-hero__pin {
    position: relative;
    height: auto;
    min-height: 0;
    padding-bottom: 48px;
  }

  .tr-hero__inner {
    padding-top: clamp(32px, 7svh, 48px);
    padding-bottom: clamp(16px, 4svh, 28px);
  }

  .tr-hero__content {
    opacity: 1;
    transform: none;
  }

  .tr-hero__slider-outer {
    position: relative;
    top: auto;
    height: var(--tr-hero-slider-height-sp);
    overflow: hidden;
  }

  .tr-hero__slider {
    top: 0;
    bottom: auto;
    height: 100%;
  }

  .tr-hero__slider-track {
    height: 100%;
  }

  .tr-hero__slider-list {
    height: 100%;
  }

  .tr-hero__slider-item {
    height: 100%;
  }

  .tr-hero__slider-item picture {
    height: 100%;
  }

  .tr-hero__slider-item img {
    width: 220px;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
  }

  .tr-hero__slider-tone {
    display: none;
  }

  .tr-hero__about {
    position: relative;
    bottom: auto;
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    margin-top: 32px;
    padding-inline: var(--container-padding-x-sp);
  }

  .tr-hero-about__label-slash {
    color: var(--color-border);
  }

  .tr-hero-about__label-name {
    color: var(--tr-color-body);
  }

  .tr-hero-about__heading {
    color: var(--color-main);
  }

  .tr-hero-about__body {
    color: var(--tr-color-body);
  }

  .tr-hero-about__lead-line {
    white-space: normal;
  }

  .tr-hero__display-line {
    font-size: clamp(30px, 8.8vw, 40px);
  }

  .tr-hero-about__cta {
    margin-top: 16px;
  }

  .tr-hero-about__cta .tr-cta-btn {
    width: 100%;
  }

  /* ISSUES */
  .tr-issues-card {
    padding: 32px 24px;
  }

  .tr-issues-solution {
    margin-top: -24px;
    padding-block: 56px 32px;
  }

  .tr-issues__grid {
    grid-template-columns: 1fr;
    gap: 36px;
    max-width: 360px;
    margin-inline: auto;
  }

  .tr-reasons {
    padding-top: 32px;
  }

  /* REASONS */
  .tr-reasons__grid {
    grid-template-columns: 1fr;
  }

  /* SERVICES */
  .tr-services {
    padding-block: 64px;
  }

  .tr-services__scroll {
    height: auto !important;
  }

  .tr-services__sticky {
    position: static;
    height: auto;
    overflow: visible;
  }

  .tr-services__layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .tr-services__intro {
    position: static;
  }

  .tr-section-title__heading--vertical br {
    display: none;
  }

  .tr-services__intro .tr-cta-btn {
    width: 100%;
  }

  .tr-services__viewport {
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--container-padding-x-sp);
    margin-inline: calc(-1 * var(--container-padding-x-sp));
    padding-inline: var(--container-padding-x-sp);
    padding-block: 20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .tr-services__viewport::-webkit-scrollbar {
    display: none;
  }

  .tr-services__track {
    transform: none !important;
    width: auto;
    align-items: center;
    gap: 16px;
    padding-inline-end: 0;
  }

  .tr-services__track::after {
    content: "";
    flex: 0 0 calc(var(--container-padding-x-sp) + 16px);
    width: calc(var(--container-padding-x-sp) + 16px);
    height: 1px;
  }

  .tr-service-card {
    scroll-snap-align: center;
    flex: 0 0 min(78vw, 300px);
    width: min(78vw, 300px);
    max-width: 300px;
    margin-inline: 0;
    margin-block: 0;
  }

  .tr-service-card:last-child {
    scroll-snap-stop: always;
  }

  .tr-services__pagination {
    margin-top: 24px;
  }

  /* FLOW */
  .tr-flow__diagram {
    --flow-connector-gap: 0;
    --flow-row-gap: 0;
    gap: 0;
  }

  .tr-flow__row--four {
    margin-bottom: 40px;
  }

  .tr-flow__bridge-svg {
    display: none;
  }

  .tr-flow__bridge {
    width: 2px;
    height: 40px;
    margin-inline: auto;
    margin-left: auto;
  }

  .tr-flow__row,
  .tr-flow__row--offset,
  .tr-flow__row--bottom {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    width: 100%;
    margin-left: 0;
    padding-left: 0;
  }

  .tr-flow__row--bottom .tr-flow-step,
  .tr-flow__row--bottom .tr-flow-connector {
    grid-column: auto;
  }

  .tr-flow-connector {
    flex: 0 0 32px;
    align-self: center;
    min-height: 0;
    height: 32px;
    margin-inline: auto;
  }

  .tr-flow-connector::before {
    top: 0;
    left: 50%;
    right: auto;
    width: 2px;
    height: 100%;
    transform: translateX(-50%);
  }

  .tr-flow__bridge-path--desktop {
    display: none;
  }

  .tr-flow__bridge-path--mobile {
    display: block;
  }

  .tr-flow-step {
    flex: none;
    width: 100%;
    min-height: auto;
  }

  /* ボトムCTA */
  .tr-bottom-cta__heading {
    font-size: clamp(22px, 5.8vw, 28px);
    line-height: 1.65;
    margin-bottom: 20px;
  }

  /* フッター */
  .tr-footer {
    width: 100%;
    padding-block: 40px calc(56px + env(safe-area-inset-bottom, 0px));
  }

  .tr-footer__columns {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-bottom: 28px;
  }

  .tr-footer__nav-title {
    margin-bottom: 12px;
  }

  .tr-footer__nav-list {
    gap: 10px;
  }

  .tr-footer__copyright {
    margin-top: 24px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}