/* TOP専用 */

/* ファーストビュー */
/* 光を写真に乗算で重ねるため、文字の入れ物（.fv-inner・.fv-copy）が重なりの面を作らないようにする */
body.home .fv-inner {
  z-index: auto;
  max-width: none;
}

body.home .fv-copy {
  top: var(--space-top-mv-copy-y);
  z-index: auto;
}

body.home .fv-copy p {
  --font-text: var(--font-heading);
  position: relative;
  z-index: 3;
  font-weight: var(--font-heading-weight);
  line-height: var(--lh-top-mv);
  letter-spacing: var(--ls-top-mv);
  -webkit-text-stroke: var(--size-top-mv-edge) var(--color-white);
}

/* 光：文字の太い縁をぼかして乗算（文字の複製） */
body.home .fv-copy::before {
  content: attr(data-glow);
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: inherit;
  color: var(--main-color);
  font-family: var(--font-heading);
  font-size: var(--font-size-pc2);
  font-weight: var(--font-heading-weight);
  line-height: var(--lh-top-mv);
  letter-spacing: var(--ls-top-mv);
  text-align: center;
  white-space: pre-line;
  -webkit-text-stroke: var(--size-top-mv-glow-stroke) var(--main-color);
  filter: blur(var(--size-top-mv-glow-blur));
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* 区切りの共通：見出し（下線つき）と背景色 */
.top-section--yellow {
  background: var(--color-top-yellow);
}

.top-section--blue {
  background: var(--color-top-blue);
}

.top-section .section-title,
.top-section .card-title {
  display: table;
  margin: 0 auto var(--space-top-heading);
  padding: 0 0 var(--space-top-underline);
  border-bottom: var(--border-2) solid var(--sub-color);
  color: var(--sub-color);
  font-size: var(--font-heading-size);
  line-height: var(--lh-heading-top);
  letter-spacing: 0;
  text-align: center;
}

.top-section .card-box-single {
  background: transparent;
}

.top-section .card-text,
.top-section .card-box p:not(.card-link-text) {
  font-size: var(--font-body-size);
  font-weight: var(--font-body-readable-weight);
  line-height: var(--lh-body-tight);
}

.site-main .top-section--head {
  padding-bottom: 0;
}

.site-main .top-section--head + .top-section {
  padding-top: 0;
}

/* 区切りの幅（FAQの帯だけ共通の幅にそろえる） */
.site-main .top-section:not(.top-faq) .inner {
  max-width: var(--size-top-w);
}

.top-section:not(.top-faq) .card-box-single .card-content {
  max-width: 100%;
}

/* ボタンの幅 */
.top-lead .fv-btn2,
.top-more .fv-btn2,
.top-support .card-link-text {
  width: var(--btn-w-380);
}

/* 選ばれる理由 */
.site-main .top-lead {
  padding-bottom: var(--space-top-band-b);
}

.top-lead .card-title {
  margin-bottom: var(--space-top-lead-heading);
  padding-bottom: 0;
  border-bottom: 0;
}

.top-lead .card-text {
  margin-bottom: var(--space-list);
}

/* 事務所案内 */
.site-main .top-about {
  padding-top: var(--space-top-about-t);
  padding-bottom: var(--space-top-about-b);
}

.top-about .card-box-pair-wrapper {
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0;
}

.top-about .card-box-pair-wrapper .card-box:first-child {
  flex: 0 0 var(--size-top-about-photo-w);
  width: var(--size-top-about-photo-w);
  max-width: 100%;
  height: var(--size-top-about-photo-h);
  border-radius: var(--radius-card);
}

.top-about .card-box:first-child .card-bg,
.top-support .card-box:last-child .card-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: none;
}

.top-about .card-box:first-child .card-image-inner {
  top: calc(var(--num-top-about-photo-img-y) / var(--num-top-about-photo-h) * 100%);
  left: calc(var(--num-top-about-photo-img-x) / var(--num-top-about-photo-w) * 100%);
  width: calc(var(--num-top-about-photo-img-w) / var(--num-top-about-photo-w) * 100%);
  height: calc(var(--num-top-about-photo-img-h) / var(--num-top-about-photo-h) * 100%);
  transform: none;
}

.top-about .card-box-pair-wrapper .card-box:last-child {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

.top-about .card-box-pair-wrapper .card-content {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--space-top-vertical-gap);
  padding: 0;
}

.top-about .card-content > p:not(.card-link-text) {
  --font-text: var(--font-heading);
  flex: none;
  margin: 0 calc((var(--lh-top-vertical) - var(--font-top-vertical)) / -2) 0 0;
  color: var(--main-color);
  font-size: var(--font-top-vertical);
  font-weight: var(--font-heading-weight);
  line-height: var(--lh-top-vertical);
  letter-spacing: var(--ls-top-vertical);
  white-space: nowrap;
  writing-mode: vertical-rl;
}

.top-about .card-link-text {
  flex: none;
  width: var(--size-top-pill-w);
  height: var(--size-top-pill-h);
  margin: var(--space-top-pill-y) 0 0;
  border-radius: calc(var(--size-top-pill-w) / 2);
  background: var(--grad-main-vertical);
  writing-mode: vertical-rl;
}

.top-about .card-link-text a {
  gap: var(--space-s);
}

.top-about .card-more-arrow--down {
  position: relative;
  top: var(--space-top-pill-arrow-y);
  width: var(--size-top-pill-arrow-w);
  height: var(--size-top-pill-arrow-h);
}

.site-main .top-about .card-link-text:hover .card-more-arrow,
.site-main .top-about .card-link-text:focus-visible .card-more-arrow {
  transform: translateY(var(--btn-hover-x));
}

/* サービス一覧 */
.top-services .card-box {
  background: transparent;
  color: var(--text-color);
  text-decoration: none;
  overflow: visible;
}

.top-services .card-box .card-content {
  padding: var(--space-s) 0 0;
}

.top-services .card-box .card-content h3 {
  margin: 0 0 var(--space-s);
  color: var(--main-color);
  font-size: var(--font-heading-size);
  line-height: var(--lh-top-card-title);
  letter-spacing: 0;
}

.top-services .card-box .card-content .card-text {
  margin: 0;
  line-height: var(--lh-body-tight);
}

.top-services .card-image {
  aspect-ratio: var(--ratio-top-service);
  min-height: 0;
  box-sizing: border-box;
  border: var(--border-5) solid var(--color-top-frame);
  border-radius: var(--radius-card);
  background: var(--color-white);
}

.top-services .card-image .card-image-inner {
  position: static;
  width: 100%;
  height: 100%;
  transform: none;
}

.top-services .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-main .top-services {
  padding-bottom: 0;
}

.site-main .top-more {
  padding-top: var(--space-top-more-t);
  padding-bottom: var(--space-top-more-b);
}

/* 料金についてのご案内 */
.site-main .top-section--blue.top-plan {
  padding-top: var(--space-top-band-t);
  padding-bottom: 0;
}

.top-plan .card-title {
  margin-bottom: var(--space-top-plan-heading);
}

.top-plan .card-text {
  margin-bottom: 0;
}

.site-main .top-plans {
  padding-top: var(--space-top-plan-buttons);
  padding-bottom: var(--space-top-plans-b);
}

.top-plans .card-box-group-wrapper {
  gap: var(--space-card-x);
}

.top-plans .card-box {
  background: transparent;
  overflow: visible;
}

.top-plans .card-box .card-content {
  padding: 0;
}

.site-main .top-plans .card-link-text {
  width: 100%;
  font-size: var(--font-top-btn);
}

/* お悩み別サポート */
.site-main .top-plans + .top-section--head {
  padding-top: var(--space-top-support-t);
}

.site-main .top-support {
  padding-bottom: var(--space-top-support-b);
}

.site-main .top-section--head + .top-support {
  padding-top: var(--space-top-support-gap);
}

.top-support .card-box-pair-wrapper {
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: var(--space-top-support-x);
}

.top-support .card-box-pair-wrapper .card-box:first-child {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  overflow: visible;
}

.top-support .card-box-pair-wrapper .card-box:last-child {
  flex: 0 0 var(--size-top-support-photo-w);
  width: var(--size-top-support-photo-w);
  max-width: 100%;
  height: var(--size-top-support-photo-h);
  border-radius: var(--radius-card);
}

.top-support .card-box:last-child .card-image-inner {
  top: calc(var(--num-top-support-photo-img-y) / var(--num-top-support-photo-h) * 100%);
  left: calc(var(--num-top-support-photo-img-x) / var(--num-top-support-photo-w) * 100%);
  width: calc(var(--num-top-support-photo-img-w) / var(--num-top-support-photo-w) * 100%);
  height: calc(var(--num-top-support-photo-img-h) / var(--num-top-support-photo-h) * 100%);
  transform: none;
}

.top-support .card-box-pair-wrapper .card-content {
  padding: 0;
}

.top-support .card-content p:not(.card-link-text) {
  margin: 0 0 var(--space-stack);
}

/* よくあるご質問 */
.site-main .top-faq {
  padding-top: var(--space-top-band-t);
  padding-bottom: var(--space-top-band-b);
}

.top-faq .section-title {
  margin-bottom: var(--space-top-faq-heading);
}

.top-faq .btn {
  width: var(--btn-w-380);
  margin-top: var(--space-top-faq-button);
}

.top-faq .free-space-content > p {
  margin-bottom: 0;
}

/* コラム */
.site-main .top-news {
  padding-top: var(--space-top-news-t);
  padding-bottom: var(--space-top-news-b);
}

.top-news .news-list {
  margin: 0 0 var(--space-stack);
  border: var(--border-1) solid var(--color-gray-light);
}

.top-news .news-list .news-item {
  margin: 0;
  border-bottom: var(--border-1) solid var(--color-gray-light);
}

.top-news .news-list .news-item:last-child {
  border-bottom: 0;
}

.top-news .news-list .news-item a.news-title {
  display: flex;
  align-items: center;
  gap: var(--space-top-news-gap);
  box-sizing: border-box;
  height: var(--size-top-news-row);
  margin: 0;
  padding: 0 var(--space-top-news-x);
  color: var(--text-color);
  font-family: var(--font-heading);
  font-size: var(--font-top-news);
  font-weight: var(--font-heading-weight);
  letter-spacing: var(--ls-top-news);
}

.top-news .news-list .news-item a.news-title span.news-date {
  flex: none;
  min-width: var(--size-top-news-date);
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.top-news .section-button {
  margin: 0;
}

.top-news .section-button .fv-btn2 {
  width: var(--btn-w-300);
  font-size: var(--font-top-btn);
}