/* 参考の文字・色帯・写真の流れをPCとスマートフォンで共通化。コピーは維持。 */
.hero-stage { background:linear-gradient(125deg,#fff,#fafbf8 60%,#f0f3ed); color:#103e2b; }
.hero-stage .hero { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:repeat(5,auto); gap:0; width:min(1050px,calc(100% - 64px)); padding:24px 0 30px; min-height:0; }
.hero-stage .hero-copy { display:contents; }
.hero-stage .hero-copy>.hero-kicker { display:block; grid-column:1; grid-row:1; position:static; max-width:none; margin:0 0 18px; padding:0; border:0; text-align:center; font-size:.95rem; line-height:1.7; letter-spacing:.06em; color:#23563b; }
.hero-stage .hero-kicker>span { display:block; font-size:.95rem; color:inherit; }
.hero-stage .hero h1 { display:block; grid-column:1; grid-row:2; position:relative; z-index:2; width:100%; min-width:0; margin:0; padding:0; font-family:var(--serif); font-size:clamp(3.1rem,6.3vw,5.4rem); line-height:1.15; letter-spacing:-.055em; color:#12482e; text-align:center; text-shadow:none; white-space:normal; }
.hero-stage .hero h1>span.hero-title-main { display:block; margin:0; padding:0; font:inherit; color:inherit; text-decoration:none; }
.hero-stage .hero-opening { display:block; margin-bottom:10px; color:#12482e; }
.hero-stage .hero-highlight { display:inline-block; color:#fff; background:#0b5435; padding:4px .5em 12px; border-bottom:3px solid #d7be76; }
.hero-stage .hero-highlight em { color:#fff3be; font-style:normal; background:none; text-decoration:none; }
.hero-stage .hero h1 .hero-title-tail { display:block; position:static; margin:16px 0 0; padding:0; border:0; font-size:.48em; font-weight:800; line-height:1.6; letter-spacing:0; color:#173728; }
.hero-stage .hero-photo { grid-column:1; grid-row:3; position:relative; top:auto; right:auto; width:100%; height:auto; min-height:0; margin:12px 0 0; border-radius:0; overflow:hidden; }
.hero-stage .hero-photo img { position:static; display:block; width:100%; height:auto; aspect-ratio:2.5; object-fit:cover; object-position:center 36%; mask-image:linear-gradient(to bottom,#000 88%,transparent 100%); -webkit-mask-image:linear-gradient(to bottom,#000 88%,transparent 100%); }
.hero-stage .hero-copy>.hero-lead { grid-column:1; grid-row:4; position:static; width:100%; max-width:none; box-sizing:border-box; margin:2px 0 0; padding:18px 12px 0; border:0; border-radius:0; background:none; font-size:1.15rem; line-height:1.85; font-weight:700; text-align:center; color:#183f2b; text-shadow:none; }
.hero-stage .hero-copy>p:last-child { grid-column:1; grid-row:5; position:static; max-width:none; margin:14px 0 0; padding:0 12px; background:none; color:#46574b; font-size:1rem; line-height:1.85; text-align:center; text-shadow:none; }
.hero-stage .hero-forest { display:none; }
@media(max-width:600px){
 .hero-stage .hero { width:100%; padding:12px 16px 26px; }
 .hero-stage .hero-copy>.hero-kicker { margin-bottom:14px; font-size:.8rem; letter-spacing:.02em; }
 .hero-stage .hero-kicker>span { font-size:.8rem; }
 .hero-stage .hero h1 { font-size:clamp(2.3rem,10.5vw,3.8rem); line-height:1.2; }
 .hero-stage .hero-opening { margin-bottom:8px; }
 .hero-stage .hero-highlight { padding:3px .45em 8px; border-bottom-width:2px; }
 .hero-stage .hero h1 .hero-title-tail { font-size:.46em; margin-top:12px; line-height:1.7; }
 .hero-stage .hero-photo { margin-top:12px; }
 .hero-stage .hero-photo img { aspect-ratio:1.65; object-position:29% 38%; }
 .hero-stage .hero-copy>.hero-lead { font-size:1rem; line-height:1.85; padding:12px 2px 0; }
 .hero-stage .hero-copy>p:last-child { font-size:1rem; line-height:1.85; padding:0 2px; margin-top:12px; }
 .hero-stage .hero-copy>.hero-lead br,.hero-stage .hero-copy>p:last-child br { display:none; }
}

/* 強い第一印象と読みやすい説明を、緑とアイボリーで切り替える。 */
.hero-stage { background:#fffdf5; }
.hero-stage .hero { width:100%; padding:0; isolation:isolate; position:relative; background:none; }
.hero-stage .hero:before { content:''; grid-column:1; grid-row:1/4; z-index:0; pointer-events:none; background:radial-gradient(ellipse at 72% 24%,#23835e88,transparent 58%),linear-gradient(120deg,#043425e8,#07563ce8 60%,#032b20f2),url('assets/forest.png') center/cover; border-top:2px solid #c9ab61; }
.hero-stage .hero-copy>.hero-kicker { z-index:1; color:#f3e7c4; margin:0; padding:24px 20px 18px; font-size:1rem; }
.hero-stage .hero h1 { z-index:2; padding:0 24px; color:#fffdf2; box-sizing:border-box; font-size:clamp(3.2rem,6.5vw,5.6rem); text-shadow:0 2px 12px #002b1d55; }
.hero-stage .hero-opening { color:#fffdf2; margin-bottom:14px; }
.hero-stage .hero-highlight { color:#073c28; background:linear-gradient(105deg,#e2c273,#fff3c0 46%,#e6c674); border:1px solid #ffefb4; padding:5px .5em 14px; box-shadow:0 4px 16px #001b1433; text-shadow:none; }
.hero-stage .hero-highlight em { color:#073c28; }
.hero-stage .hero h1 .hero-title-tail { color:#fff8df; margin-top:18px; padding-bottom:10px; }
.hero-stage .hero-photo { z-index:1; margin:0; }
.hero-stage .hero-photo img { aspect-ratio:2.7; object-position:center 34%; mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 100%); -webkit-mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 100%); }
.hero-stage .hero-copy>.hero-lead { z-index:1; background:#fffdf5; border-top:3px solid #c9ab61; margin:0; padding:26px 28px 0; }
.hero-stage .hero-copy>p:last-child { z-index:1; background:#fffdf5; margin:0; padding:14px 28px 28px; }
@media(max-width:600px){
 .hero-stage .hero-copy>.hero-kicker { padding:18px 14px 16px; font-size:.875rem; }
 .hero-stage .hero-kicker>span { font-size:.8125rem; }
 .hero-stage .hero h1 { padding:0 14px; font-size:clamp(2.3rem,11vw,4rem); line-height:1.2; }
 .hero-stage .hero-opening { margin-bottom:10px; }
 .hero-stage .hero-highlight { padding:4px .42em 10px; }
 .hero-stage .hero h1 .hero-title-tail { margin-top:14px; padding-bottom:12px; font-size:.46em; }
 .hero-stage .hero-photo img { aspect-ratio:1.7; object-position:29% 38%; }
 .hero-stage .hero-copy>.hero-lead { padding:22px 20px 0; text-align:left; font-size:1rem; }
 .hero-stage .hero-copy>p:last-child { padding:12px 20px 26px; text-align:left; font-size:1rem; }
}

/* 頭部へのグラデーションの重なりを避け、写真上端を優先して表示。 */
.hero-stage .hero-photo { margin-top:16px; }
.hero-stage .hero-photo img { object-position:center top; mask-image:none; -webkit-mask-image:none; }
@media(max-width:600px){
 .hero-stage .hero-photo { margin-top:14px; }
 .hero-stage .hero-photo img { object-position:29% top; }
}

/* PCでは元写真の縦横比で表示し、頭から手元まで切らずに見せる。 */
@media(min-width:601px){
 .hero-stage .hero-photo img { aspect-ratio:auto; height:auto; object-fit:contain; }
}