/* index.htmlだけが読み込むホーム専用の設定です。他ページには影響しません。 */
.home-hero {
  background-image: linear-gradient(90deg, #fff 0%, #fff 28%, rgba(255,255,255,.97) 35%, rgba(255,255,255,.7) 45%, transparent 65%), linear-gradient(180deg, #7aa1ce, #8aaccd);
  background-color: #fff;
  background-repeat: no-repeat;
  /* 写真の比率を維持し、タワー上端から街並みまでを右側に表示します。 */
  background-size: cover, auto 120%;
  background-position: center, right 80%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* 同じ実写を無加工で表示。左端だけを透過し、空色と白へ自然につなげます。 */
.home-hero::before {
  content: "";
  position: absolute;
  right: 0;
  top: -16%;
  height: 120%;
  aspect-ratio: 3 / 2;
  background: url("../images/home-hero-real.jpg") center / cover no-repeat;
  mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
  pointer-events: none;
  z-index: -1;
}
.hero-copy p + p { font-weight: 400; }
.home-pc-break { display: none; }
.services-card {
  background-image: linear-gradient(90deg, rgba(240,248,253,.87), rgba(240,248,253,.62) 60%, rgba(240,248,253,.23)), url("../images/home-services.png");
}
.fees-card {
  background-image: linear-gradient(90deg, rgba(255,253,250,.87), rgba(255,253,250,.62) 60%, rgba(255,253,250,.23)), url("../images/home-fees.png");
}
.home-links .link-card { position: relative; }
.home-links .link-card h2 { padding-right: 0; margin-right: 68px; }
.home-links .link-card p { max-width: 390px; }
/* 2つの中央見出しの下線を、文字列の幅に追従させます。 */
.section-title h2::after { width: 100%; }
/* スマートフォンでは既存の配置をそのまま使用します。 */
.feature-heading-group { display: contents; }
@media (min-width: 1440px) {
  /* アイコン等の位置を動かさず、本文だけに指定の1行分の幅を確保します。 */
  .home-flow .steps li { min-width: 0; }
  .home-flow .steps p { width: max-content; position: relative; left: 50%; transform: translateX(-50%); }
  .flow-copy-line { display: block; white-space: nowrap; }
}
@media (min-width: 1024px) {
  .home-flow .steps p { text-align: center; }
  .home-pc-break { display: initial; }
  .hero-copy p { max-width: 720px; }
  /* 特徴01〜03は共通CSSの同じ2カラム構成を使用します。 */
  /* 縦罫線を持つ左カラムは伸ばしたまま、内容のグループだけを中央へ。 */
  .feature-heading { align-items: center; }
  .feature-heading-group { display: flex; align-items: flex-start; gap: inherit; width: 100%; min-width: 0; }
  /* 指定の2行で表示し、「経理体制」などの語を途中で分割しません。 */
  .feature-title-line { display: block; white-space: nowrap; }
  /* PCだけSTEP本文の幅を広げ、4列の均等配置を維持します。 */
  .home-flow { width: min(1400px, calc(100% - 48px)); }
  .home-flow .steps { gap: 24px; }
  .home-flow .steps li:not(:last-child)::after { right: -18px; font-size: 2.2rem; }
  .footer-grid { grid-template-columns: minmax(440px,1.5fr) .8fr 1fr; }
  .footer-address { max-width: none; }
}
@media (max-width: 560px) {
  .home-hero::before { display: none; }
  .home-hero {
    background-image: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(248,252,255,.94) 62%, rgba(248,252,255,.8) 82%, rgba(255,255,255,.55) 100%), url("../images/home-hero-real.jpg");
    background-position: center, 35% 65%;
    background-size: cover, auto 112%;
  }
  .feature-row:last-child .feature-title-line { display: inline-block; }
}