/* =========================
   ハッピーさち LP styles
   色・余白・文字サイズはここから調整できます。
   ========================= */
:root{
--ink:#242424;--muted:#6f6f6b;--line:#e6e3dc;--paper:#fffdf9;--accent:#d4775f;--accent-dark:#a95543;--serif:Georgia,'Times New Roman',serif}

*{
box-sizing:border-box}
html{
scroll-behavior:smooth}
body{
margin:0;color:var(--ink);background:var(--paper);font-family:'Noto Sans JP',sans-serif;line-height:1.9}
img{
display:block;max-width:100%}
a{
color:inherit;text-decoration:none}
.container{
width:min(1120px,calc(100% - 48px));margin-inline:auto}
.narrow{
max-width:820px}
.site-header{
position:sticky;top:0;z-index:10;background:rgba(255,253,249,.95);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.header-inner{
display:flex;align-items:center;justify-content:space-between;min-height:76px}
.logo{
font-weight:800;font-size:1.25rem;letter-spacing:.08em}
.logo span{
color:var(--accent)}
.global-nav{
display:flex;align-items:center;gap:27px;font-size:.78rem}
.global-nav a:not(.button){
color:var(--muted)}
.global-nav a:not(.button):hover,.text-link:hover{
color:var(--accent-dark)}
.menu-toggle{
display:none;border:0;background:none;padding:8px}
.menu-toggle span{
display:block;width:24px;height:2px;background:var(--ink);margin:5px}
.button{
display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:10px 27px;border:1px solid var(--accent);border-radius:4px;background:var(--accent);color:#fff;font-weight:700;font-size:.9rem;transition:.2s ease}
.button:hover{
background:var(--accent-dark);border-color:var(--accent-dark);transform:translateY(-2px)}
.button--small{
min-height:39px;padding:6px 15px;font-size:.75rem}
.button--outline{
color:var(--accent-dark);background:transparent}
.button--outline:hover{
color:#fff}
.button--light{
background:#fff;color:var(--accent-dark);border-color:#fff}
.section{
padding:112px 0;border-bottom:1px solid var(--line)}
.hero{
padding:85px 0 100px;background:linear-gradient(110deg,#fbf2e9 0%,#fffdf9 65%)}
.hero-inner{
display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:65px}
.eyebrow{
color:var(--accent-dark);font-size:.78rem;font-weight:700;letter-spacing:.17em;margin:0 0 20px}
.hero h1{
font-size:clamp(2.3rem,4.2vw,3.8rem);line-height:1.35;letter-spacing:0;margin:0 0 28px}
.hero h1 span{
white-space:nowrap}
.hero h1 span{
color:var(--accent-dark)}
.lead{
color:var(--muted);font-size:1.05rem;margin-bottom:35px}
.hero-image{
position:relative}
.hero-image img{
width:100%;height:570px;object-fit:cover;border-radius:150px 150px 8px 8px;filter:saturate(.82)}
.hero-badge{
position:absolute;right:-20px;bottom:28px;display:grid;place-items:center;width:130px;height:130px;border-radius:50%;background:var(--accent);color:#fff;text-align:center;font-size:.78rem;line-height:1.5;font-weight:700;transform:rotate(8deg)}
.split-layout{
display:grid;grid-template-columns:31% 1fr;gap:80px;align-items:start}
.split-layout--reverse{
grid-template-columns:31% 1fr}
.section-heading h2,.center-heading h2{
font-size:clamp(1.5rem,3vw,2.25rem);line-height:1.5;margin:0}
.section-number{
color:var(--accent);font-size:.8rem;font-weight:800;letter-spacing:.12em;margin:0 0 13px}
.heading-line{
display:block;width:40px;height:2px;background:var(--accent);margin-top:22px}
.story-content{
display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:center}
.rounded-image{
width:100%;height:285px;object-fit:cover;border-radius:6px}
.story-text,.video-content p{
color:var(--muted);font-size:.9rem}
.story-text p{
margin-top:0;margin-bottom:19px}
.text-link{
display:inline-block;color:var(--accent-dark);font-weight:700;border-bottom:1px solid var(--accent);padding-bottom:2px}
.video-content{
display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center}
.video-placeholder{
position:relative;overflow:hidden;padding:0;border:0;background:#eee;cursor:pointer;min-height:300px}
.video-placeholder img{
width:100%;height:300px;object-fit:cover;filter:brightness(.65)}
.play-icon{
position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:60px;height:60px;border:2px solid #fff;border-radius:50%;color:#fff}
.video-content .button{
grid-column:1/-1;justify-self:center}
.center-heading{
text-align:center;margin-bottom:55px}
.center-heading .section-number{
margin-bottom:5px}
.center-heading .heading-line{
margin:18px auto 0}
.feature-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.feature-card{
padding:28px 20px;border:1px solid var(--line);background:#fff;text-align:center}
.feature-icon{
display:block;color:var(--accent);font-size:2.5rem;line-height:1;margin-bottom:17px}
.feature-card h3{
font-size:.95rem;margin:0 0 10px}
.feature-card p,.activity-grid p{
font-size:.78rem;color:var(--muted);line-height:1.8;margin:0}
.center-button{
text-align:center;margin-top:35px}
.activity-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.activity-image{
overflow:hidden;aspect-ratio:1.5;margin-bottom:16px}
.activity-image img{
width:100%;height:100%;object-fit:cover;filter:saturate(.7)}
.activity-grid h3{
text-align:center;font-size:1rem;margin:0 0 8px}
.achievement-grid{
display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);background:#fff}
.achievement-grid>div{
padding:30px;text-align:center;border-right:1px solid var(--line)}
.achievement-grid>div:last-child{
border-right:0}
.achievement-grid strong{
display:block;color:var(--accent-dark);font-size:2rem;line-height:1.3}
.achievement-grid strong span{
font-size:.95rem;margin-left:3px}
.achievement-grid span{
color:var(--muted);font-size:.75rem}
.voice-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.voice-grid blockquote{
margin:0;padding:28px 25px;border:1px solid var(--line);background:#fff;font-size:.82rem}
.avatar{
float:left;display:grid;place-items:center;width:42px;height:42px;margin-right:10px;border-radius:50%;background:#f3e7dd;color:var(--accent-dark);font-size:.65rem}
.voice-grid cite{
display:block;padding-top:8px;font-size:.76rem;font-style:normal;font-weight:700}
.voice-grid p{
clear:both;color:var(--muted);font-size:.8rem;margin:25px 0 0}
.faq-list{
border-top:1px solid var(--line)}
details{
border-bottom:1px solid var(--line);background:#fff}
summary{
display:flex;justify-content:space-between;gap:20px;cursor:pointer;padding:16px 22px;font-size:.86rem;list-style:none}
summary::-webkit-details-marker{
display:none}
summary span{
color:var(--accent);font-size:1.2rem}
.faq-list details p{
color:var(--muted);font-size:.82rem;margin:0;padding:0 22px 18px}
.cta{
padding:105px 0;text-align:center;background:var(--accent-dark);color:#fff}
.cta .eyebrow{
color:#f9d4c4}
.cta h2{
font-size:clamp(1.45rem,3vw,2.3rem);line-height:1.8;margin:0 0 31px}
.cta h2 span{
font-size:.8em}
.site-footer{
padding:38px 0}
.footer-inner{
display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px}
.footer-inner nav{
display:flex;gap:20px;font-size:.72rem;color:var(--muted)}
.footer-inner small{
justify-self:end;color:#999;font-size:.65rem}

@media (max-width:760px){
.container{
width:min(100% - 36px,540px)}
.site-header{
min-height:65px}
.header-inner{
min-height:65px}
.menu-toggle{
display:block}
.global-nav{
position:absolute;top:65px;left:0;right:0;display:none;padding:18px;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 10px 25px #0000000d}
.global-nav.is-open{
display:grid;gap:14px}
.global-nav .button{
width:100%}
.section{
padding:70px 0}
.hero{
padding:55px 0 70px}
.hero-inner{
grid-template-columns:1fr;gap:35px}
.hero h1{
font-size:2.15rem}
.hero-image img{
height:370px;border-radius:120px 120px 8px 8px}
.hero-badge{
right:0;width:105px;height:105px;font-size:.7rem}
.split-layout,.split-layout--reverse{
grid-template-columns:1fr;gap:35px}
.section-heading{
text-align:center}
.section-heading .heading-line{
margin:17px auto 0}
.story-content,.video-content{
grid-template-columns:1fr;gap:25px}
.rounded-image{
height:220px}
.video-placeholder,.video-placeholder img{
height:235px;min-height:235px}
.feature-grid{
grid-template-columns:repeat(2,1fr);gap:10px}
.feature-card{
padding:20px 12px}
.feature-card h3{
font-size:.84rem}
.feature-card p{
font-size:.7rem}
.activity-grid{
grid-template-columns:1fr;gap:35px}
.activity-grid article{
display:grid;grid-template-columns:42% 1fr;column-gap:18px}
.activity-image{
grid-row:span 2;margin:0}
.activity-grid h3{
text-align:left;align-self:end}
.activity-grid p{
align-self:start}
.achievement-grid,.voice-grid{
grid-template-columns:1fr}
.achievement-grid>div{
border-right:0;border-bottom:1px solid var(--line);padding:22px}
.achievement-grid>div:last-child{
border-bottom:0}
.voice-grid{
gap:10px}
.voice-grid blockquote{
padding:22px}
.footer-inner{
grid-template-columns:1fr;gap:18px}
.footer-inner nav{
flex-wrap:wrap}
.footer-inner small{
justify-self:start}
.cta{
padding:75px 0}
}