/* らくらく賃料査定 /owner/satei/
   2026-11-06 yuki が送った見本(幅1024px の1枚絵)をそのまま写した。yuki「このデザインは完璧に再現してね？色合いとか細かいところも」
   --u = 見本の1px。PC では画面の幅に合わせて伸び縮みし、大きな画面では 1.15px で止めて中身を真ん中に寄せる
   (2026-11-06 yuki「文字デカい」「1画面に情報入れれるサイズ」「小さすぎるのはだめ」)。
   900px 未満はスマホ用の並び(下の @media)。
   色は見本から測った値。太さは見本に合わせて見出しと数字だけ 800〜900(このページだけ書体を足して読み込む) */
.st {
  --u: min(
    calc(100vw / 1024),
    0.98px
  ); /* 2026-11-06 yuki「全体的にデカいから85％にしたらちょうどよくなった」→ 1.15 の 85% */
  --w: calc(1024 * var(--u)); /* 見本の幅。中身はこの幅で真ん中に置く */
  --ink: #10291f; /* 見出しの濃い緑 */
  --text: #2b3a35;
  --sub: #4d5a55;
  --g: #0b5a3c; /* 「3」・数字の緑 */
  --g-num: #0e3d2c;
  --btn-a: #0d6a44;
  --btn-b: #035a3d;
  --lime: #c8e62f;
  --lime-soft: #ecfabe;
  --mint: #e6f5ec;
  --line: #e2e9e6;
  --yellow: #e9f55a;
  color: var(--text);
  line-height: 1.6;
  letter-spacing: 0.04em;
  overflow-x: hidden;
}
.st h1,
.st h2,
.st h3,
.st p {
  margin: 0;
}
.st a {
  text-decoration: none;
}

/* 斜めの黄緑の線(見出しの頭) */
.st .kicker::before {
  content: "";
  display: inline-block;
  width: calc(4 * var(--u));
  height: 1.3em;
  margin-right: 0.7em;
  background: var(--lime);
  transform: skewX(-24deg);
  vertical-align: -0.25em;
}

/* 緑のボタン */
.st .btn-go {
  display: inline-flex;
  align-items: center;
  width: calc(328 * var(--u));
  height: calc(50 * var(--u));
  padding: 0 calc(22 * var(--u)) 0 calc(44 * var(--u));
  gap: calc(22 * var(--u));
  border-radius: calc(6 * var(--u));
  background: linear-gradient(90deg, var(--btn-a), var(--btn-b));
  box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) calc(-8 * var(--u)) rgba(0, 70, 45, 0.55);
  color: #fff;
  font-size: calc(19 * var(--u));
  font-weight: 700;
  letter-spacing: 0.1em;
  white-space: nowrap;
  transition: transform 0.3s var(--ease);
}
.st .btn-go:hover {
  transform: translateY(-2px);
}
.st .btn-go .go-tag {
  background: #f1fbf5;
  color: var(--g);
  font-size: calc(14 * var(--u));
  letter-spacing: 0.06em;
  padding: calc(2 * var(--u)) calc(10 * var(--u));
  border-radius: calc(3 * var(--u));
}
.st .btn-go i,
.st .btn-line i {
  margin-left: auto;
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

/* 表紙(2026-11-06 yuki が送った見本 = vault raw/ネハヤスHP_査定ページ3案-2026-11-05/yuki見本-表紙2-2026-11-06.webp の雰囲気。
   写真は yuki が渡した素材をそのまま使う。会社の数字も表紙の中に入れる。
   yuki「1枚目の写真みたいな感じにしたい」「２枚目のこの情報も表紙にいれたい」「３枚目が素材これそのまま使え」) */
.st .sh {
  position: relative;
  background: #f7f9f6;
  overflow: hidden;
}
.st .sh-photo {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  /* 写真の左の白い所が、いつも見出しの後ろに来るように、中身の左端より少し左から敷く(yuki「左側しろくなってるやろ？ここに文字来ないと違和感」) */
  left: max(0px, calc(50% - 512 * var(--u) - 140 * var(--u)));
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%);
}
.st .sh-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0% 50%;
}
.st .sh-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(250, 252, 248, 0.92) 0%,
    rgba(250, 252, 248, 0.86) 36%,
    rgba(250, 252, 248, 0) 58%
  );
}
.st .sh .in {
  position: relative;
  width: var(--w);
  margin: 0 auto;
  padding: calc(40 * var(--u)) 0 calc(36 * var(--u)) calc(66 * var(--u));
}
.st .sh h1 {
  font-family: var(--font-serif);
  font-size: calc(42 * var(--u));
  line-height: 1.38;
  font-weight: 600;
  color: #1f2b25;
  letter-spacing: 0.08em;
}
.st .sh h1::after {
  content: "";
  display: block;
  width: calc(92 * var(--u));
  height: calc(3 * var(--u));
  margin-top: calc(14 * var(--u));
  background: var(--lime);
}
.st .sh-lead {
  margin-top: calc(18 * var(--u));
  font-size: calc(14.5 * var(--u));
  line-height: 1.9;
  color: #2a3530;
  letter-spacing: 0.08em;
}
.st .sh .sh-btn {
  margin-top: calc(22 * var(--u));
  width: calc(330 * var(--u));
  height: calc(52 * var(--u));
  padding: 0 calc(30 * var(--u)) 0 calc(34 * var(--u));
  gap: calc(26 * var(--u));
  font-size: calc(19 * var(--u));
  background: linear-gradient(90deg, #1f5e41, #134a33);
}
.st .sh .sh-btn .go-tag {
  color: #1f5e41;
  font-size: calc(14 * var(--u));
}
.st .sh-feats {
  margin-top: calc(16 * var(--u));
  display: flex;
  font-size: calc(12 * var(--u));
  font-weight: 700;
  color: #1f2b25;
  white-space: nowrap;
}
.st .sh-feats li {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: 0 calc(16 * var(--u));
}
.st .sh-feats li:first-child {
  padding-left: 0;
}
.st .sh-feats li + li {
  border-left: 1px solid #b9c4bf;
}
.st .sh-feats svg {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  fill: none;
  stroke: #1f4d3d;
  stroke-width: 1.6;
}
/* 会社の数字(表紙の中) */
.st .sh-stats {
  margin: calc(26 * var(--u)) 0 0;
  width: calc(480 * var(--u));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  height: calc(76 * var(--u));
  background: rgba(255, 255, 255, 0.93);
  border: 1px solid #edf1ef;
  border-radius: calc(10 * var(--u));
  box-shadow: 0 calc(12 * var(--u)) calc(30 * var(--u)) calc(-14 * var(--u)) rgba(20, 60, 45, 0.25);
}
.st .sh-stats > div {
  text-align: center;
}
.st .sh-stats > div + div {
  border-left: 1px solid #dfe5e2;
}
.st .sh-stats dt {
  font-size: calc(11.5 * var(--u));
  font-weight: 700;
  color: #1d2b26;
}
.st .sh-stats dd {
  margin: 0;
  font-size: calc(26 * var(--u));
  line-height: 1.25;
  font-weight: 800;
  color: var(--g-num);
  letter-spacing: 0.02em;
}
.st .sh-stats dd small {
  font-size: calc(13 * var(--u));
  font-weight: 700;
  margin: 0 calc(2 * var(--u));
}

/* 表紙の右のレポート3枚(本物を隠した物。少し立体的に傾けて並べる。yuki「この素材を表紙の右側に画像のせてよ！高級感ある感じで」) */
.st .sh-sheets {
  position: absolute;
  left: calc(566 * var(--u));
  top: calc(96 * var(--u));
  width: calc(400 * var(--u));
  height: calc(280 * var(--u));
  perspective: calc(1400 * var(--u));
}
.st .sh-sheets::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 0;
  bottom: calc(-18 * var(--u));
  height: calc(60 * var(--u));
  background: radial-gradient(closest-side, rgba(10, 40, 30, 0.28), transparent);
  filter: blur(calc(6 * var(--u)));
}
.st .sh-sheets img {
  position: absolute;
  height: auto;
  border-radius: calc(4 * var(--u));
  outline: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.08),
    0 calc(26 * var(--u)) calc(50 * var(--u)) calc(-16 * var(--u)) rgba(8, 35, 28, 0.55);
}
.st .sh-sheets .r1 {
  left: 0;
  top: 0;
  width: calc(160 * var(--u));
  transform: rotateY(16deg) rotateZ(-4deg);
  z-index: 3;
}
.st .sh-sheets .r2 {
  left: calc(146 * var(--u));
  top: calc(28 * var(--u));
  width: calc(131 * var(--u));
  transform: rotateX(8deg) rotateY(-6deg) rotateZ(1deg);
  z-index: 2;
}
.st .sh-sheets .r3 {
  left: calc(261 * var(--u));
  top: calc(25 * var(--u));
  width: calc(134 * var(--u));
  transform: rotateY(-18deg) rotateZ(4deg);
  z-index: 1;
}

/* 3つのこと */
.st .three {
  padding-top: calc(76 * var(--u));
  text-align: center;
}
.st .three .kicker {
  font-size: calc(17 * var(--u));
  font-weight: 700;
  color: var(--ink);
}
.st .three h2 {
  font-size: calc(44 * var(--u));
  line-height: 1.2;
  font-weight: 900;
  color: var(--ink);
}
.st .three h2 b {
  font-size: calc(62 * var(--u));
  color: var(--g);
  margin-right: calc(4 * var(--u));
}
.st .three ul {
  width: calc(892 * var(--u));
  margin: calc(18 * var(--u)) auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(27 * var(--u));
}
.st .three li {
  height: calc(170 * var(--u));
  padding-top: calc(12 * var(--u));
  border: 1px solid var(--line);
  border-radius: calc(10 * var(--u));
  background: linear-gradient(#fff, #fbfdfc);
  box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) calc(-14 * var(--u)) rgba(0, 0, 0, 0.14);
}
.st .three .ic {
  display: grid;
  place-items: center;
  width: calc(58 * var(--u));
  height: calc(58 * var(--u));
  margin: 0 auto;
  border-radius: 50%;
  background: var(--mint);
}
.st .three .ic svg {
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  fill: none;
  stroke: var(--g);
  stroke-width: 1.8;
}
.st .three h3 {
  margin-top: calc(8 * var(--u));
  font-size: calc(20 * var(--u));
  font-weight: 800;
  color: #111;
}
.st .three li p {
  margin-top: calc(4 * var(--u));
  font-size: calc(13.5 * var(--u));
  line-height: 1.55;
  color: #3c4743;
}

/* レポートのイメージ */
.st .report {
  margin-top: calc(64 * var(--u));
  height: calc(380 * var(--u));
  background: linear-gradient(90deg, #f3f8f6, #e7f2ee);
}
.st .report .in {
  position: relative;
  height: 100%;
  width: var(--w);
  margin: 0 auto;
}
.st .report-text {
  position: absolute;
  left: calc(74 * var(--u));
  top: calc(44 * var(--u));
}
.st .report .kicker {
  font-size: calc(13.5 * var(--u));
  font-weight: 500;
  color: var(--ink);
}
.st .report h2 {
  margin-top: calc(10 * var(--u));
  font-size: calc(32 * var(--u));
  line-height: 1.38;
  font-weight: 900;
  color: var(--ink);
}
.st .report-text > p:last-child {
  margin-top: calc(10 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: 1.6;
}
.st .sheets img {
  position: absolute;
  height: auto;
  border-radius: calc(2 * var(--u));
  box-shadow: 0 calc(14 * var(--u)) calc(26 * var(--u)) calc(-10 * var(--u)) rgba(20, 50, 40, 0.35);
}
.st .sheets .s1 {
  left: calc(446 * var(--u));
  top: calc(36 * var(--u));
  width: calc(170 * var(--u));
  transform: rotate(-4deg);
  z-index: 3;
}
.st .sheets .s2 {
  left: calc(616 * var(--u));
  top: calc(52 * var(--u));
  width: calc(150 * var(--u));
  transform: rotate(1deg);
  z-index: 2;
}
.st .sheets .s3 {
  left: calc(774 * var(--u));
  top: calc(58 * var(--u));
  width: calc(156 * var(--u));
  transform: rotate(4deg);
  z-index: 1;
}

.st .report-list {
  margin-top: calc(14 * var(--u));
  display: grid;
  gap: calc(8 * var(--u));
}
.st .report-list li {
  position: relative;
  max-width: calc(350 * var(--u));
  padding-left: calc(20 * var(--u));
  font-size: calc(13 * var(--u));
  line-height: 1.5;
  color: var(--text);
}
.st .report-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  border-radius: 50%;
  background: var(--lime);
}
.st .report-list b {
  display: block;
  color: var(--ink);
}

/* 見直しの差 */
.st .diff {
  position: relative;
  z-index: 4;
  background: #fff;
}
.st .diff .in {
  width: var(--w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: calc(322 * var(--u)) 1fr;
  padding: calc(56 * var(--u)) 0 calc(36 * var(--u)) calc(66 * var(--u));
}
.st .diff h2 {
  font-size: calc(22 * var(--u));
  line-height: 1.5;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.06em;
}
.st .diff h2::after {
  content: "";
  display: block;
  width: calc(56 * var(--u));
  height: calc(4 * var(--u));
  margin-top: calc(12 * var(--u));
  background: var(--lime);
}
.st .diff ol {
  display: flex;
  align-items: center;
  gap: calc(52 * var(--u));
}
.st .diff li {
  position: relative;
  width: calc(147 * var(--u));
  height: calc(70 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: calc(6 * var(--u));
  background: #f0f5f3;
}
.st .diff li + li::before {
  content: "";
  position: absolute;
  left: calc(-30 * var(--u));
  top: 50%;
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  border-top: 1.5px solid #4d5a55;
  border-right: 1.5px solid #4d5a55;
  transform: translateY(-50%) rotate(45deg);
}
.st .diff li.is-big {
  width: calc(174 * var(--u));
  background: linear-gradient(135deg, #0c6a47, #08503a);
  box-shadow: 0 calc(10 * var(--u)) calc(20 * var(--u)) calc(-10 * var(--u)) rgba(0, 60, 40, 0.6);
}
.st .diff small {
  font-size: calc(12.5 * var(--u));
  font-weight: 700;
  color: #1d2b26;
}
.st .diff b {
  font-size: calc(26 * var(--u));
  line-height: 1.3;
  font-weight: 800;
  color: var(--g-num);
}
.st .diff b span {
  font-size: calc(15 * var(--u));
  font-weight: 700;
}
.st .diff .is-big small {
  color: #fff;
}
.st .diff .is-big b {
  color: var(--yellow);
}
.st .diff .note {
  grid-column: 2;
  margin-top: calc(12 * var(--u));
  padding-left: calc(64 * var(--u));
  font-size: calc(10.5 * var(--u));
  color: var(--sub);
}

/* 会社の帯 */
.st .company {
  position: relative;
  height: calc(258 * var(--u));
  background: linear-gradient(110deg, #0d5a3c 30%, #093a28 75%);
  overflow: hidden;
}
.st .company::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: calc(110 * var(--u));
  background: linear-gradient(180deg, rgba(200, 230, 47, 0.9), rgba(200, 230, 47, 0.35));
  clip-path: polygon(80% 0, 100% 0, 100% 100%, 0 100%);
}
/* 写真は切らずにそのままの比率で小さく置く(顔と全身が必ず入る。yuki「大前提顔は絶対映ってないとだめです」) */
.st .company-photo {
  position: absolute;
  left: calc(50% - 400 * var(--u));
  top: calc(28 * var(--u));
  width: calc(259 * var(--u));
  aspect-ratio: 4 / 3;
  border-radius: calc(10 * var(--u));
  overflow: hidden;
  border: calc(4 * var(--u)) solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 calc(18 * var(--u)) calc(36 * var(--u)) calc(-14 * var(--u)) rgba(0, 0, 0, 0.5);
}
.st .company-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.st .company-panel {
  position: absolute;
  left: 50%;
  top: calc(24 * var(--u));
  color: #fff;
}
.st .company-logos {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  margin-bottom: calc(14 * var(--u));
}
.st .company-logos img:first-child {
  height: calc(22 * var(--u));
  width: auto;
}
.st .company-logos span {
  width: 1px;
  height: calc(26 * var(--u));
  background: rgba(255, 255, 255, 0.45);
}
.st .company-logos img:last-child {
  height: calc(30 * var(--u));
  width: auto;
}
.st .company-panel h2 {
  font-size: calc(22 * var(--u));
  line-height: 1.42;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.st .company-panel p {
  margin-top: calc(10 * var(--u));
  font-size: calc(12.5 * var(--u));
  line-height: 1.7;
  color: #e2efe9;
}
.st .btn-line {
  margin-top: calc(14 * var(--u));
  display: flex;
  align-items: center;
  width: calc(202 * var(--u));
  height: calc(34 * var(--u));
  padding: 0 calc(24 * var(--u)) 0 calc(48 * var(--u));
  border: 1.5px solid #fff;
  border-radius: calc(6 * var(--u));
  color: #fff;
  font-size: calc(12.5 * var(--u));
  font-weight: 700;
  white-space: nowrap;
}
.st .btn-line i {
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
}

/* 最後 */
.st .last {
  position: relative;
  height: calc(116 * var(--u));
  padding-top: calc(16 * var(--u));
  text-align: center;
  background: #fff;
  overflow: hidden;
}
.st .last::before,
.st .last::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: calc(230 * var(--u));
  height: calc(110 * var(--u));
  background: linear-gradient(180deg, rgba(236, 250, 190, 0.4), var(--lime-soft));
}
.st .last::before {
  left: 0;
  clip-path: polygon(0 20%, 60% 100%, 0 100%);
}
.st .last::after {
  right: 0;
  clip-path: polygon(100% 0, 100% 100%, 20% 100%);
}
.st .last p {
  position: relative;
  font-size: calc(14.5 * var(--u));
  font-weight: 700;
  color: var(--ink);
}
.st .last .btn-go {
  position: relative;
  z-index: 1;
  margin-top: calc(10 * var(--u));
  width: calc(405 * var(--u));
  height: calc(54 * var(--u));
  padding: 0 calc(40 * var(--u)) 0 calc(74 * var(--u));
  gap: calc(30 * var(--u));
  border-radius: 999px;
  background: linear-gradient(90deg, #0c6b32, #157029);
  font-size: calc(20 * var(--u));
}
.st .last .btn-go .go-tag {
  font-size: calc(15 * var(--u));
}

/* スマホ・小さい画面 */
@media (max-width: 899px) {
  .st {
    --u: 1px;
    --w: auto;
  }
  .st .sh .in {
    padding: 28px 16px 28px;
  }
  .st .sh-photo img {
    object-position: 72% 50%;
  }
  .st .sh-photo::after {
    background: linear-gradient(
      180deg,
      rgba(250, 252, 248, 0.9) 0%,
      rgba(250, 252, 248, 0.86) 60%,
      rgba(250, 252, 248, 0.55) 100%
    );
  }
  .st .sh h1 {
    font-size: 30px;
  }
  .st .sh-lead {
    font-size: 13.5px;
  }
  .st .sh-lead br {
    display: none;
  }
  .st .sh .sh-btn {
    width: 100%;
    height: 54px;
    font-size: 18px;
  }
  .st .sh-feats {
    flex-wrap: wrap;
    row-gap: 8px;
    font-size: 11.5px;
  }
  .st .sh-feats li {
    padding: 0 10px;
  }
  .st .sh-stats {
    width: 100%;
    height: auto;
    grid-template-columns: repeat(3, 1fr);
    padding: 4px 0;
  }
  .st .sh-stats > div {
    padding: 8px 0;
  }
  .st .sh-stats dd {
    font-size: 20px;
  }
  .st .sh-sheets {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 230px;
    margin-top: 22px;
  }
  .st .sh-sheets .r1 {
    left: 2%;
    width: 42%;
  }
  .st .sh-sheets .r2 {
    left: 33%;
    top: 22px;
    width: 34%;
  }
  .st .sh-sheets .r3 {
    left: 62%;
    top: 20px;
    width: 35%;
  }
  .st .three {
    padding: 56px 16px 0;
  }
  .st .three h2 {
    font-size: 30px;
  }
  .st .three h2 b {
    font-size: 42px;
  }
  .st .three ul {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .st .three li {
    height: auto;
    padding: 16px 12px 18px;
  }
  .st .report {
    margin-top: 48px;
    height: auto;
    padding: 32px 16px 28px;
  }
  .st .report-text {
    position: static;
  }
  .st .report h2 {
    font-size: 23px;
  }
  .st .sheets {
    position: relative;
    height: 250px;
    margin-top: 20px;
  }
  .st .sheets .s1 {
    left: 2%;
    top: 6px;
    width: 40%;
  }
  .st .sheets .s2 {
    left: 34%;
    top: 22px;
    width: 34%;
  }
  .st .sheets .s3 {
    left: 63%;
    top: 30px;
    width: 34%;
  }
  .st .diff .in {
    grid-template-columns: 1fr;
    padding: var(--page-hero-pad-top) 16px 28px;
  }
  .st .diff h2 {
    font-size: 21px;
  }
  .st .diff ol {
    margin-top: 22px;
    flex-direction: column;
    gap: 30px;
  }
  .st .diff li,
  .st .diff li.is-big {
    width: 100%;
    height: 76px;
  }
  .st .diff li + li::before {
    left: 50%;
    top: -19px;
    transform: translateX(-50%) rotate(135deg);
  }
  .st .diff b {
    font-size: 26px;
  }
  .st .diff .note {
    grid-column: 1;
    padding: 0;
    text-align: center;
  }
  .st .company {
    height: auto;
  }
  .st .company-photo {
    position: relative;
    left: auto;
    top: auto;
    width: calc(100% - 32px);
    margin: 24px auto 0;
  }
  .st .company-panel {
    position: relative;
    left: auto;
    top: auto;
    padding: 18px 16px 36px;
  }
  .st .company-panel h2 {
    font-size: 18px;
  }
  .st .company-panel p br {
    display: none;
  }
  .st .company::after {
    width: 36px;
  }
  .st .last {
    height: auto;
    padding: 32px 16px 40px;
  }
  .st .last p {
    font-size: 14px;
  }
  .st .last .btn-go {
    width: 100%;
    max-width: 405px;
    padding: 0 28px 0 40px;
    font-size: 19px;
  }
}

/* 帯を他の下層ページにそろえる(2026-11-07 たいち「文字が真ん中に寄りすぎてる」)。
   写真の帯の高さ、題の位置、題の大きさ、左右の端は pages.css の .page-hero と同じ値。
   帯に入りきらない実績の数字は帯のすぐ下に置き、査定書は右端にそろえて帯の下へはみ出させる */
.st .sh-photo {
  bottom: auto;
  height: var(--page-hero-height);
}
/* パソコンは写真を表紙の一番下(実績の数字の箱の下)まで敷く(2026-11-13 yuki「背景画像が下半分足りてないからへんな感じ」)。
   題の位置・大きさは他の下層ページにそろえたまま */
@media (min-width: 900px) {
  .st .sh-photo {
    bottom: 0;
    height: auto;
  }
}
/* パソコン幅(1101px 以上)では style.css が下層の帯の高さを 0.8 で割り戻して高くしている。
   査定 LP はその値で実績の数字の箱の位置を決めているので、箱が表紙の下で切れないよう元の 340px のままにする(2026-11-13 yuki「デザインへんになってる」) */
@media (min-width: 1101px) {
  .st {
    --page-hero-height: 340px;
  }
}
.st .sh h1 {
  font-size: 36px;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
@media (min-width: 900px) {
  .st .sh-photo {
    left: max(0px, calc(50% - var(--container) / 2 - 140px));
  }
  .st .sh-photo::after {
    background: linear-gradient(
      90deg,
      rgba(250, 252, 248, 0.92) 0%,
      rgba(250, 252, 248, 0.86) 46%,
      rgba(250, 252, 248, 0) 70%
    );
  }
  .st .sh .in {
    width: min(var(--container), 100% - var(--gutter) * 2);
    min-height: 522px;
    padding: var(--page-hero-pad-top) 0 0;
  }
  /* 動きを減らす設定は紙の下に説明を全部並べるので、その分だけ伸ばす */
  .st .sh .in:has(.report-flip:not(.is-animated)) {
    min-height: 1020px;
  }
  .st .sh h1 .sh-h1-narrow {
    display: none;
  }
  .st .sh h1::after {
    margin-top: 8px;
  }
  .st .sh-lead {
    margin-top: 10px;
  }
  .st .sh .sh-btn {
    margin-top: 12px;
  }
  .st .sh-feats,
  .st .sh-stats {
    position: absolute;
    left: 0;
    margin: 0;
  }
  .st .sh-feats {
    top: calc(var(--page-hero-height) + 22px);
  }
  .st .sh-stats {
    top: calc(var(--page-hero-height) + 56px);
  }
  /* 査定書: 右端を内容の右端に、上端をパンくずにそろえる */
  .st .sh-report {
    position: absolute;
    z-index: 1;
    top: 40px;
    right: 0;
    width: calc(300 * var(--u));
  }
}
@media (max-width: 899.98px) {
  .st .sh .in {
    padding: var(--page-hero-pad-top) var(--gutter) 28px;
  }
  .st .sh-photo::after {
    background: linear-gradient(
      180deg,
      rgba(250, 252, 248, 0.9) 0%,
      rgba(250, 252, 248, 0.86) 60%,
      #f7f9f6 100%
    );
  }
  .st .sh-report {
    position: relative;
    width: 100%;
    margin-top: 22px;
  }
}
@media (max-width: 760px) {
  .st .sh h1 {
    font-size: 25px;
  }
}