/* Approved IMG-268 soft layout. All rules are confined to this section. */
section.f04-features#features {
  --f04-scene:url("features-04-scene-20260911-delivery-779f98a4b5.webp");
  display:block;
  position:relative;
  box-sizing:border-box;
  container-type:inline-size;
  width:100%;
  max-width:1920px;
  min-width:0;
  margin:0 auto !important;
  padding:0 !important;
  border:0;
  border-radius:0;
  overflow:hidden;
  background:#fff !important;
  box-shadow:none;
  color:#1a2b5c !important;
  font-family:"Noto Sans JP","Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif !important;
  font-size:16px !important;
  font-style:normal !important;
  font-weight:400 !important;
  line-height:normal !important;
  letter-spacing:normal !important;
  text-align:left;
  text-transform:none;
  isolation:isolate;
}
section.f04-features#features *,
section.f04-features#features *::before,
section.f04-features#features *::after { box-sizing:border-box; }
section.f04-features#features .f04-canvas {
  display:block;
  position:relative;
  isolation:isolate;
  margin:0;
  padding:0 0 7.2916667cqw;
  border:0;
}
/* The same artwork is revealed in four feathered bands, so each photo can
   move away from its text without changing the source or cutting the curves. */
section.f04-features#features .f04-scenes {
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
}
section.f04-features#features .f04-scene {
  position:absolute;
  inset:0;
  bottom:auto;
  height:150cqw;
  display:block;
  background-image:var(--f04-scene);
  background-size:100% auto;
  background-position:top center;
  background-repeat:no-repeat;
  transform:translate(var(--f04-offset),var(--f04-shift-y,0px));
  mask-image:var(--f04-band),var(--f04-photo-side),linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  -webkit-mask-image:var(--f04-band),var(--f04-photo-side),linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-composite:intersect;
  -webkit-mask-composite:source-in;
}
/* Keep the neighbouring photograph out of each shifted band. */
section.f04-features#features .f04-scene--1,
section.f04-features#features .f04-scene--3 {
  --f04-photo-side:linear-gradient(90deg,transparent 23%,#000 45%);
}
section.f04-features#features .f04-scene--2,
section.f04-features#features .f04-scene--4 {
  --f04-photo-side:linear-gradient(90deg,#000 55%,transparent 77%);
}
section.f04-features#features .f04-scene--1 {
  --f04-offset:2.0833333cqw;
  --f04-band:linear-gradient(#000 0 29.5138889%,transparent 34.375%);
}
section.f04-features#features .f04-scene--2 {
  --f04-offset:-2.0833333cqw;
  --f04-shift-y:6.25cqw;
  --f04-band:linear-gradient(transparent 29.5138889%,#000 34.375% 50.6944444%,transparent 55.5555556%);
}
section.f04-features#features .f04-scene--3 {
  --f04-offset:1.0416667cqw;
  --f04-shift-y:12.5cqw;
  --f04-band:linear-gradient(transparent 50.6944444%,#000 55.5555556% 71.875%,transparent 76.7361111%);
}
section.f04-features#features .f04-scene--4 {
  --f04-offset:-3.125cqw;
  --f04-shift-y:18.75cqw;
  --f04-band:linear-gradient(transparent 71.875%,#000 76.7361111% 100%);
}
section.f04-features#features .f04-scene-wash {
  display:block;
  opacity:.32;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  margin:0;
  padding:0;
  border:0;
  pointer-events:none;
  z-index:0;
}
section.f04-features#features .f04-header {
  display:block;
  position:relative;
  z-index:1;
  height:17.7083333cqw;
  margin:0;
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
  text-align:center;
}
section.f04-features#features .f04-title,
section.f04-features#features .f04-heading,
section.f04-features#features .f04-lead,
section.f04-features#features .f04-body {
  display:block;
  min-width:0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  font-family:inherit !important;
  font-style:normal !important;
  letter-spacing:normal !important;
  text-decoration:none;
  text-shadow:none;
  text-transform:none;
  white-space:normal;
  word-break:normal;
  overflow-wrap:normal;
}
section.f04-features#features .f04-title::before,
section.f04-features#features .f04-title::after,
section.f04-features#features .f04-header::after,
section.f04-features#features .f04-heading::after,
section.f04-features#features .f04-lead::after,
section.f04-features#features .f04-body::after { content:none; display:none; }
section.f04-features#features .f04-title {
  position:absolute;
  top:7.4479167cqw;
  left:0;
  width:100%;
  margin:0;
  color:#1a2b5c !important;
  font-size:3.3333333cqw !important;
  font-weight:700 !important;
  line-height:1.5 !important;
  text-align:center;
}
section.f04-features#features .f04-row {
  display:block;
  position:relative;
  z-index:1;
  height:31.25cqw;
  margin:0;
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
}
section.f04-features#features .f04-copy {
  display:flex;
  position:absolute;
  top:0;
  left:16.1458333%;
  flex-direction:column;
  justify-content:center;
  width:28.125%;
  height:29.1666667cqw;
  margin:0;
  padding:0;
}
section.f04-features#features .f04-row:not(:last-of-type) { margin-bottom:6.25cqw; }
section.f04-features#features .f04-row:nth-of-type(even) .f04-copy { left:55.7291667%; }
section.f04-features#features .f04-copy-content { display:block; margin:0; padding:0; }
section.f04-features#features .f04-heading,
section.f04-features#features .f04-lead,
section.f04-features#features .f04-body {
  position:relative;
  isolation:isolate;
  width:fit-content;
  max-width:100%;
  text-align:left;
}
section.f04-features#features .f04-heading {
  margin:0 0 1.0416667cqw;
  color:#075ab6 !important;
  font-size:2.6041667cqw !important;
  font-weight:700 !important;
  line-height:3.4375cqw !important;
}
section.f04-features#features .f04-lead {
  margin:0 0 1.1458333cqw;
  color:#1a1a1a !important;
  font-size:1.3541667cqw !important;
  font-weight:700 !important;
  line-height:2.34375cqw !important;
}
section.f04-features#features .f04-body {
  margin:0;
  color:#1a1a1a !important;
  font-family:"Noto Sans JP","Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif !important;
  font-size:1.1458333cqw !important;
  font-weight:500 !important;
  line-height:2.0833333cqw !important;
}
section.f04-features#features .f04-heading::before,
section.f04-features#features .f04-lead::before,
section.f04-features#features .f04-body::before {
  content:"";
  display:block;
  position:absolute;
  inset:-1.25cqw -1.4583333cqw;
  z-index:-1;
  border-radius:.625cqw;
  background:rgba(255,255,255,var(--f04-wash));
  filter:blur(.5208333cqw);
  pointer-events:none;
}
section.f04-features#features .f04-photo { display:none; }
section.f04-features#features .f04-break { display:initial; }

@media (max-width:768px) {
  section.f04-features#features .f04-canvas { background-image:none; padding-bottom:48px; }
  section.f04-features#features .f04-scenes { display:none; }
  section.f04-features#features .f04-scene-wash { display:none; }
  section.f04-features#features .f04-header { height:auto; padding:52px 24px 30px; }
  section.f04-features#features .f04-title { position:static; font-size:34px !important; margin:0; }
  section.f04-features#features .f04-row { height:auto; max-width:760px; margin:0 auto; padding:24px 0 32px; }
  section.f04-features#features .f04-row:not(:last-of-type) { margin-bottom:24px; }
  section.f04-features#features .f04-copy,
  section.f04-features#features .f04-row:nth-of-type(even) .f04-copy { position:static; display:block; width:auto; height:auto; margin:0 28px; }
  section.f04-features#features .f04-heading { font-size:30px !important; line-height:1.5 !important; margin-bottom:20px; }
  section.f04-features#features .f04-lead { font-size:20px !important; line-height:1.8 !important; margin-bottom:16px; }
  section.f04-features#features .f04-body { font-size:18px !important; line-height:1.9 !important; }
  section.f04-features#features .f04-heading::before,
  section.f04-features#features .f04-lead::before,
  section.f04-features#features .f04-body::before { display:none; }
  section.f04-features#features .f04-break { display:none; }
  section.f04-features#features .f04-heading .f04-break { display:initial; }
  section.f04-features#features .f04-photo {
    display:block;
    position:relative;
    overflow:hidden;
    width:100%;
    aspect-ratio:8/5;
    margin-top:22px;
    background-image:var(--f04-scene);
    background-size:200% auto;
    background-position:var(--f04-photo-x) var(--f04-photo-y);
    background-repeat:no-repeat;
  }
  section.f04-features#features .f04-photo::before,
  section.f04-features#features .f04-photo::after { content:""; display:block; position:absolute; inset:0; pointer-events:none; }
  section.f04-features#features .f04-photo::before { background:linear-gradient(rgba(255,255,255,.46),rgba(255,255,255,.22) 40%,rgba(255,255,255,.22)); }
  section.f04-features#features .f04-photo::after { background:linear-gradient(#fff,rgba(255,255,255,0) 12%,rgba(255,255,255,0) 80%,#fff); }
}

@media (max-width:480px) {
  section.f04-features#features .f04-header { padding:40px 20px 25px; }
  section.f04-features#features .f04-title { font-size:28px !important; }
  section.f04-features#features .f04-copy,
  section.f04-features#features .f04-row:nth-of-type(even) .f04-copy { margin:0 24px; }
  section.f04-features#features .f04-heading { font-size:26px !important; line-height:1.5 !important; margin-bottom:16px; }
  section.f04-features#features .f04-lead { font-size:19px !important; line-height:1.75 !important; }
  section.f04-features#features .f04-body { font-size:17px !important; line-height:1.85 !important; }
  section.f04-features#features .f04-photo { margin-top:20px; }
}

/* The host #hidden-sections is a centered 1920px canvas above 768px. */
@media (min-width:769px) {
  section.f04-features#features { width:1920px; margin-left:auto; margin-right:auto; }
}

/* Restore the previous fluorescent marker: same colors, 11px stroke and sweep.
   A separate inline layer keeps the white text wash and existing line breaks. */
section.f04-features#features .f04-marker-line {
  display:inline-block;
  position:relative;
  isolation:isolate;
  max-width:100%;
  vertical-align:top;
}
section.f04-features#features .f04-marker-line::after {
  content:"";
  position:absolute;
  right:-8px;
  bottom:5px;
  left:0;
  z-index:-1;
  display:block;
  height:11px;
  border-radius:999px 3px 3px 999px;
  background:linear-gradient(90deg,rgba(255,244,91,.96) 0%,rgba(255,239,102,.82) 72%,rgba(255,239,102,.18) 100%);
  box-shadow:0 0 12px rgba(255,235,59,.30);
  transform:skewX(-9deg) scaleX(1);
  transform-origin:left center;
  pointer-events:none;
}
section.f04-features#features.f04-marker-ready .f04-heading:not(.is-marker-visible) .f04-marker-line::after {
  transform:skewX(-9deg) scaleX(0);
}
section.f04-features#features.f04-marker-ready .f04-heading.is-marker-visible .f04-marker-line::after {
  animation:f04-marker-sweep 1.18s cubic-bezier(.33,0,.2,1) .06s both;
}
section.f04-features#features.f04-marker-ready .f04-heading.is-marker-visible .f04-marker-line ~ .f04-marker-line::after {
  animation-delay:.24s;
}
@keyframes f04-marker-sweep {
  from { transform:skewX(-9deg) scaleX(0); }
  to { transform:skewX(-9deg) scaleX(1); }
}
@media (prefers-reduced-motion:reduce) {
  /* Match the previous approved marker: brief, once per entry, no moving text. */
  section.f04-features#features.f04-marker-ready .f04-heading:not(.is-marker-visible) .f04-marker-line::after {
    animation:none !important;
    transform:skewX(-9deg) scaleX(0) !important;
  }
  section.f04-features#features.f04-marker-ready .f04-heading.is-marker-visible .f04-marker-line::after {
    animation:f04-marker-sweep .9s cubic-bezier(.33,0,.2,1) .03s both !important;
  }
  section.f04-features#features.f04-marker-ready .f04-heading.is-marker-visible .f04-marker-line ~ .f04-marker-line::after {
    animation-delay:.14s !important;
  }
}
@media (forced-colors:active) {
  section.f04-features#features .f04-marker-line::after { display:none; }
}

/* Slightly reduce the first feature's supporting paragraph. */
section.f04-features#features .f04-row[aria-labelledby="f04-feature-1"] .f04-body {
  font-size:1.1458333cqw !important;
}
@media (max-width:768px) {
  section.f04-features#features .f04-row[aria-labelledby="f04-feature-1"] .f04-body { font-size:17px !important; }
}
@media (max-width:480px) {
  section.f04-features#features .f04-row[aria-labelledby="f04-feature-1"] .f04-body { font-size:16px !important; }
}
