/* Men and women audience landing pages — scoped to .hh-audience */
.hh-audience {
 --aud-accent: #ff822d;
 --aud-accent-deep: #e86f1c;
 /* Text-safe shade of #ff822d: #ff822d itself is ~2.1:1 on the light washes */
 --aud-accent-dark: #a84a0a;
 --aud-on-accent: #ffffff;
 --aud-bg: #f4efe6;
 --aud-bg-soft: #fbf8f2;
 --aud-ink: #17201e;
 --aud-muted: #625f59;
 --aud-line: rgba(31, 37, 34, .16);
 color: var(--aud-ink);
 background: var(--aud-bg-soft);
}
.hh-audience--women {
 --aud-bg: #f3ebe1;
 --aud-bg-soft: #fcf8f1;
 --aud-ink: #292421;
 --aud-muted: #6b605b;
}
.hh-audience main { overflow: clip; }
.hh-audience h1,
.hh-audience h2,
.hh-audience h3 { color: var(--aud-ink); }
.hh-audience h1 {
 max-width: none;
 font-size: clamp(2.25rem, 4.6vw, 4.2rem);
 line-height: 1.05;
 letter-spacing: -.045em;
}
.aud-title-line {
 display: block;
 white-space: nowrap;
}
.hh-audience h2 {
 font-size: clamp(2rem, 3.5vw, 3.4rem);
 line-height: 1.15;
 letter-spacing: -.035em;
}
.hh-audience h3 { letter-spacing: -.015em; }
.hh-audience .hh-kicker {
 color: var(--aud-accent-dark);
 letter-spacing: .16em;
 font-weight: 600;
}
.aud-hero {
 position: relative;
 padding: clamp(3rem, 7vw, 7rem) 0 clamp(3.5rem, 8vw, 7.5rem);
 background: var(--aud-bg);
}
.aud-hero::after {
 position: absolute;
 inset: auto 0 0;
 height: 1px;
 background: var(--aud-line);
 content: "";
}
.aud-hero__grid {
 display: grid;
 grid-template-columns: minmax(0, 1.05fr) minmax(360px, .75fr);
 gap: clamp(2.5rem, 7vw, 7rem);
 align-items: center;
}
.aud-hero__lead {
 max-width: 42rem;
 margin: 1.5rem 0 0;
 color: var(--aud-muted);
 font-size: clamp(1.05rem, 1.5vw, 1.24rem);
}
.aud-hero__actions,
.aud-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hh-audience .hh-btn--solid {
 border-color: var(--aud-accent);
 background: var(--aud-accent);
 color: var(--aud-on-accent);
}
.hh-audience .hh-btn--solid:hover,
.hh-audience .hh-btn--solid:active {
 border-color: var(--aud-accent-deep);
 background: var(--aud-accent-deep);
 color: var(--aud-on-accent);
 box-shadow: 0 10px 24px rgba(232, 111, 28, 0.28);
}
.hh-audience .hh-btn--outline-orange {
 border-color: var(--aud-accent);
 color: var(--aud-accent);
}
.hh-audience .hh-btn--outline-orange:hover,
.hh-audience .hh-btn--outline-orange:active {
 border-color: var(--aud-accent-deep);
 background: var(--hh-orange-soft, #fff3ea);
 color: var(--aud-accent-deep);
 box-shadow: 0 8px 20px rgba(232, 111, 28, 0.12);
}
.aud-hero__figure { position: relative; margin: 0; }
.aud-hero__figure::before {
 position: absolute;
 inset: -1.15rem 1.15rem 1.15rem -1.15rem;
 border: 1px solid var(--aud-accent);
 border-radius: 48% 48% 2rem 2rem;
 content: "";
}
.aud-hero__figure img {
 position: relative;
 width: 100%;
 aspect-ratio: 4 / 5;
 object-fit: cover;
 border-radius: 48% 48% 2rem 2rem;
}
.aud-hero__note {
 position: absolute;
 right: 1rem;
 bottom: 1.2rem;
 z-index: 2;
 max-width: 15.5rem;
 margin: 0;
 padding: 0.95rem 1.1rem 1rem;
 background: rgba(251, 248, 242, 0.92);
 -webkit-backdrop-filter: blur(14px) saturate(1.08);
 backdrop-filter: blur(14px) saturate(1.08);
 border: 1px solid rgba(31, 37, 34, 0.1);
 border-radius: 2px;
 box-shadow: none;
 color: rgba(23, 32, 30, 0.9);
 font-size: 0.78rem;
 font-weight: 400;
 line-height: 1.72;
 letter-spacing: 0.015em;
 pointer-events: none;
}
.aud-hero__note::before {
 display: block;
 margin: 0 0 0.55rem;
 padding: 0 0 0.5rem 0.72rem;
 border-bottom: 1px solid rgba(255, 130, 45, 0.32);
 background: radial-gradient(circle closest-side, #ff822d 72%, transparent 74%) 0 0.3em / 0.26rem 0.26rem no-repeat;
 color: var(--aud-accent-dark);
 content: "現場說明";
 font-size: 0.62rem;
 font-weight: 600;
 letter-spacing: 0.16em;
 line-height: 1;
}
.aud-section { padding: clamp(4.25rem, 8vw, 8rem) 0; background: var(--aud-bg-soft); }
.aud-section--wash { background: var(--aud-bg); }
.aud-section--dark { background: var(--aud-ink); color: #f8f3eb; }
.aud-section--dark h2,
.aud-section--dark h3 { color: #fff; }
.aud-section--dark .hh-kicker { color: var(--aud-accent); }
.aud-section__head {
 display: grid;
 grid-template-columns: minmax(250px, .85fr) minmax(300px, 1fr);
 gap: 2rem 5rem;
 align-items: end;
 margin-bottom: 3rem;
 padding-bottom: 2rem;
 border-bottom: 1px solid var(--aud-line);
}
.aud-section__head p:last-child { max-width: 42rem; margin: 0; color: var(--aud-muted); }
#men-needs .aud-section__head,
#women-stages .aud-section__head {
 display: flex;
 flex-direction: column;
 align-items: center;
 width: min(100%, 64rem);
 margin: 0 auto 3rem;
 gap: .85rem;
 text-align: center;
}
#men-needs .aud-section__head h2,
#women-stages .aud-section__head h2 {
 margin-bottom: .2rem;
 font-size: clamp(2rem, 3.1vw, 3.1rem);
 white-space: nowrap;
}
#men-needs .aud-section__head p:last-child,
#women-stages .aud-section__head p:last-child {
 max-width: 46rem;
}
.aud-card-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 1px;
 background: var(--aud-line);
 border: 1px solid var(--aud-line);
}
.aud-card {
 min-height: 16rem;
 padding: 2rem;
 background: var(--aud-bg-soft);
 color: inherit;
 text-decoration: none;
 transition: background .25s ease, transform .25s ease;
}
.aud-card:hover { background: #fff; color: inherit; transform: translateY(-2px); }
.aud-card__num {
 display: block;
 margin-bottom: 2.5rem;
 color: var(--aud-accent-dark);
 font: 600 .72rem/1 var(--hh-sans);
 letter-spacing: .14em;
}
.aud-card p { color: var(--aud-muted); }
.aud-card__link { color: var(--aud-accent-dark); font-weight: 600; }
.aud-split {
 display: grid;
 grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
 gap: clamp(3rem, 8vw, 8rem);
}
.aud-split__aside { position: sticky; top: 8rem; align-self: start; }
.aud-reasons { counter-reset: reason; border-top: 1px solid var(--aud-line); }
.aud-reason {
 position: relative;
 padding: 2rem 0 2rem 4.2rem;
 border-bottom: 1px solid var(--aud-line);
}
.aud-reason::before {
 counter-increment: reason;
 content: "0" counter(reason);
 position: absolute;
 left: 0;
 top: 2.3rem;
 color: var(--aud-accent-dark);
 font-size: .76rem;
 letter-spacing: .12em;
}
.aud-reason p { color: var(--aud-muted); }
.aud-process {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 margin-top: 3rem;
 border-top: 1px solid rgba(255,255,255,.28);
}
.aud-process__item { padding: 2rem 1.5rem 0 0; }
.aud-process__item + .aud-process__item { padding-left: 1.5rem; border-left: 1px solid rgba(255,255,255,.28); }
.aud-process__step { color: var(--aud-accent); font-size: .75rem; letter-spacing: .14em; }
.aud-process__item p { color: rgba(255,255,255,.72); }
.aud-treatment-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 1.25rem;
}
.aud-treatment {
 overflow: hidden;
 background: #fff;
 border: 1px solid var(--aud-line);
 text-decoration: none;
}
.aud-treatment img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.aud-treatment__body { display: block; padding: 1.6rem; }
.aud-treatment p { color: var(--aud-muted); }
.aud-expect {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 1px;
 background: var(--aud-line);
 border: 1px solid var(--aud-line);
}
.aud-expect article { padding: clamp(2rem, 4vw, 3.5rem); background: var(--aud-bg-soft); }
.aud-expect ul { display: grid; gap: .8rem; }
.aud-expect li { position: relative; padding-left: 1.25rem; color: var(--aud-muted); }
.aud-expect li::before { position: absolute; left: 0; content: "—"; color: var(--aud-accent); }
.aud-case {
 display: grid;
 grid-template-columns: .72fr 1fr;
 gap: clamp(2rem, 6vw, 6rem);
 align-items: center;
}
.aud-case img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 50% 50% 1.5rem 1.5rem; }
.aud-case__notice {
 margin-top: 1.5rem;
 padding: 1rem 1.2rem;
 border: 1px solid var(--aud-line);
 color: var(--aud-muted);
 font-size: .88rem;
}
.aud-faq { max-width: 58rem; margin-left: auto; }
.hh-audience .hh-faq__item { border: 0; border-bottom: 1px solid var(--aud-line); border-radius: 0; background: transparent; padding: 1.25rem 0; }
.hh-audience .hh-faq__item summary { font-family: var(--hh-serif); font-size: 1.15rem; }
.hh-audience .hh-faq__item[open] summary { color: var(--aud-accent-dark); }
.aud-cta {
 position: relative;
 isolation: isolate;
 overflow: hidden;
 padding: clamp(4rem, 8vw, 7rem) 0;
 background:
 radial-gradient(circle at 14% 22%, rgba(255,255,255,.1) 0 1px, transparent 1.5px) 0 0 / 18px 18px,
 radial-gradient(ellipse at 88% 12%, rgba(255,255,255,.1), transparent 33%),
 radial-gradient(ellipse at 12% 100%, rgba(255, 130, 45, .22), transparent 45%),
 linear-gradient(125deg, #1f1814, #2a221c 56%, #33271f);
 color: #fff;
}
.aud-cta .hh-kicker { color: var(--aud-accent); }
.aud-cta::before,
.aud-cta::after {
 position: absolute;
 z-index: -1;
 border: 1px solid rgba(255,255,255,.12);
 border-radius: 50%;
 content: "";
}
.aud-cta::before {
 width: 34rem;
 height: 34rem;
 right: -12rem;
 top: -25rem;
 box-shadow: 0 0 0 5rem rgba(255,255,255,.018), 0 0 0 10rem rgba(255,255,255,.012);
}
.aud-cta::after {
 width: 20rem;
 height: 20rem;
 left: -12rem;
 bottom: -15rem;
}
.aud-cta__inner {
 position: relative;
 z-index: 1;
 display: grid;
 grid-template-columns: minmax(0, 1fr) auto;
 gap: clamp(2.5rem, 7vw, 7rem);
 align-items: center;
}
.aud-cta h2 { max-width: none; margin-bottom: 1rem; color: #fff; }
.aud-cta-title-line { display: block; white-space: nowrap; }
.aud-cta p { max-width: 42rem; margin-bottom: 0; color: rgba(255,255,255,.8); }
.aud-cta__actions { justify-content: flex-end; margin-top: 0; }
.aud-disclaimer {
 padding: 1.25rem 0;
 background: #fff;
 border-bottom: 1px solid var(--aud-line);
 color: var(--aud-muted);
 font-size: .78rem;
}
.aud-disclaimer p { margin: 0; }
.aud-section-nav {
 position: sticky;
 top: 73px; /* flush with measured header border-box (72px bar + 1px border) */
 z-index: 20;
 background: rgba(252,248,241,.96);
 border-bottom: 1px solid var(--aud-line);
 backdrop-filter: blur(12px);
}
.aud-section-nav ul {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
 width: 100%;
 margin: 0;
 gap: .4rem 1.35rem;
 padding: .45rem 0;
}
.aud-section-nav a {
 color: var(--aud-muted);
 font-size: .8rem;
 text-decoration: none;
 white-space: nowrap;
}
.aud-section-nav a:hover,
.aud-section-nav a:focus-visible { color: var(--aud-accent-dark); }
.hh-audience :focus-visible { outline: 3px solid var(--aud-accent); outline-offset: 3px; }

/* Audience footer rhythm — same tight editorial footer */
.hh-audience .hh-footer--editorial { padding: 1.65rem 0 0.4rem; }
.hh-audience .hh-footer__grid--editorial { gap: 0.85rem 2rem; }
.hh-audience .hh-footer__brand-lockup { margin-bottom: 0.45rem; }
.hh-audience .hh-footer__blurb {
 margin-bottom: 0;
 line-height: 1.6;
}
.hh-audience .hh-footer__meta {
 margin: 0.1rem 0;
 line-height: 1.5;
}
.hh-audience .hh-footer__contacts {
 margin-top: 0.45rem;
 gap: 0.32rem;
}
.hh-audience .hh-footer__social {
 gap: 0.55rem;
 margin-top: 0.65rem;
}
.hh-audience .hh-footer__bottom {
 margin-top: 0.7rem;
 padding-top: 0.55rem;
}

@media (max-width: 960px) {
 .aud-hero__grid,
 .aud-section__head,
 .aud-split,
 .aud-case,
 .aud-cta__inner { grid-template-columns: 1fr; }
 .aud-hero__figure { max-width: 32rem; margin-inline: auto; }
 .aud-split__aside { position: static; }
 .aud-process { grid-template-columns: 1fr 1fr; }
 .aud-process__item:nth-child(3) { border-left: 0; }
 .aud-card-grid,
 .aud-treatment-grid { grid-template-columns: 1fr 1fr; }
 .aud-cta__actions { justify-content: flex-start; }
}
@media (max-width: 640px) {
 .hh-audience h1 { font-size: clamp(2.05rem, 9.3vw, 2.4rem); }
 .aud-hero__grid { gap: 3rem; }
 .aud-hero__note {
 right: 0.75rem;
 bottom: 0.9rem;
 max-width: min(15.5rem, calc(100% - 1.5rem));
 font-size: 0.74rem;
 }
 #men-needs .aud-section__head h2,
 #women-stages .aud-section__head h2 {
 font-size: clamp(1.9rem, 9vw, 2.35rem);
 white-space: normal;
 }
 .aud-cta-title-line { white-space: normal; }
 .aud-cta__actions { gap: .6rem; }
 .aud-cta__actions .hh-btn { width: 100%; }
 .aud-card-grid,
 .aud-treatment-grid,
 .aud-expect,
 .aud-process { grid-template-columns: 1fr; }
 .aud-process__item + .aud-process__item { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.28); }
 .aud-card { min-height: 0; }
 .aud-card__num { margin-bottom: 1.5rem; }
 .hh-audience .hh-footer--editorial { padding: 1.75rem 0 0.9rem; }
 .hh-audience .hh-footer__grid--editorial { gap: 1.15rem; }
 .hh-audience .hh-footer__brand-lockup { margin-bottom: 0.4rem; }
 .hh-audience .hh-footer__blurb { margin-bottom: 0; }
 .hh-audience .hh-footer__social { margin-top: 0.55rem; }
 .hh-audience .hh-footer__bottom { margin-top: 0.9rem; padding-top: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) {
 .hh-audience *,
 .hh-audience *::before,
 .hh-audience *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}