.hero{height:calc(100svh - 88px);min-height:650px;position:relative;color:#fff;overflow:hidden}
.hero-video,.hero-overlay{position:absolute;inset:0}
.hero-video{width:100%;height:100%;object-fit:cover}
.hero-overlay{background:linear-gradient(90deg,rgba(0,35,76,.82),rgba(0,62,125,.28) 58%,rgba(0,0,0,.08)),linear-gradient(0deg,rgba(0,23,51,.4),transparent 45%)}
.hero-image,.hero-overlay{position:absolute;inset:0}
.hero-copy{position:absolute;left:var(--pad);top:48%;transform:translateY(-50%);z-index:2}
.hero-en{font:900 clamp(45px,8vw,126px)/.8 Arial,sans-serif;letter-spacing:-.055em;color:rgba(255,255,255,.18);margin:0 0 -15px}
.hero h1{font-size:clamp(43px,6.2vw,92px);line-height:1.16;letter-spacing:.06em;margin:0}
.hero h1 span{display:block}
.hero h1 span:last-child{margin-left:clamp(0px,6vw,100px)}
.hero-lead{font-size:clamp(15px,1.4vw,20px);font-weight:700;letter-spacing:.08em;margin-top:30px}
.scroll{position:absolute;left:var(--pad);bottom:28px;z-index:2;font:700 10px Arial;letter-spacing:.18em;display:flex;align-items:center;gap:15px}
.scroll i{position:relative;width:80px;height:1px;background:rgba(255,255,255,.25);overflow:hidden}
.scroll i::after{content:"";position:absolute;left:-100%;top:0;width:100%;height:100%;background:#fff;animation:scrollLine 2s infinite}
@keyframes scrollLine{0%{left:-100%}100%{left:100%}}
.section{padding:clamp(80px,10vw,150px) var(--pad)}
.big-en{font:900 clamp(58px,9vw,140px)/.76 Arial;letter-spacing:-.06em;color:#dce9f5;margin:0}
.section-heading{margin-bottom:70px;position:relative;display:block}
.section-heading>div>span,.section-en{color:var(--red);font:800 16px Arial;letter-spacing:.18em}
.section-heading h2{font-size:clamp(36px,4.6vw,66px);line-height:1.3;margin:12px 0 0;white-space:nowrap}
.section-heading>div{position:absolute;right:0;bottom:0;z-index:2}
.topics{background:#fff}
.topic-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:35px}
.topic-filter button{border:1px solid #cbd7e2;background:#fff;color:var(--ink);padding:11px 20px;border-radius:999px;font-weight:700;font-size:16px;cursor:pointer}
.topic-filter button.active,.topic-filter button:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.topic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.topic-card{min-width:0;height:100%;border:1px solid #dce3e9;background:#fff;transition:transform .3s ease,box-shadow .3s ease}
.topic-card>a{display:flex;flex-direction:column;width:100%;height:100%;min-width:0}
.topic-card:hover{transform:translateY(-7px);box-shadow:0 20px 45px rgba(0,50,100,.12)}
.topic-card.is-filter-hidden{display:none}
.topic-card.is-hidden{display:none}
.topic-photo{width:100%;height:210px;flex:0 0 210px;background:#dce9f5 center/cover no-repeat;display:grid;place-items:center;color:#52708c;text-align:center;font:700 11px Arial;letter-spacing:.1em}
.topic-body{display:flex;flex:1;flex-direction:column;min-width:0;padding:23px;overflow:hidden}
.tag{display:inline-block;align-self:flex-start;background:var(--blue);color:#fff;padding:3px 10px;font-size:16px}
.topic-body time{margin-left:12px;color:#728296;font-size:16px}
.topic-body h3{width:100%;max-width:100%;min-width:0;min-height:93px;margin:18px 0;font-size:20px;line-height:1.55;overflow-wrap:anywhere;word-break:normal;white-space:normal}
.topic-body b{margin-top:auto;color:var(--blue);font:800 10px Arial;letter-spacing:.13em}
.about{min-height:850px;background:linear-gradient(120deg,#eef6fd 0%,#fff 58%);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:9vw;position:relative;overflow:hidden}
.about-bg{position:absolute;inset:0;background:url("../images/top.webp") top center/cover no-repeat;opacity:.09}
.about-left,.about-copy{position:relative}
.giant-en{font:900 clamp(62px,10vw,150px)/.76 Arial;letter-spacing:-.07em;color:var(--blue);margin:0}
.about-copy h2{font-size:clamp(38px,4.8vw,70px);line-height:1.25;margin:14px 0 38px}
.about-copy h2 em{color:var(--blue);font-style:normal}
.about-copy .lead{font-size:clamp(20px,2vw,30px);font-weight:700}
.about-copy>p:last-of-type{color:#5e6d7b;font-size:20px}
.round-link{display:inline-flex;align-items:center;gap:20px;margin-top:30px;font-weight:800;font-size:16px}
.round-link b{width:56px;height:56px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center}
.products{background:var(--gray)}
.products .big-en{color:#bad3eb;margin:0}
.product-stack{border-top:1px solid #c8d3dd}
.product-row{position:relative;display:grid;grid-template-columns:45px 220px .7fr 1fr 40px;min-height:100px;align-items:center;gap:28px;padding:30px 0;border-bottom:1px solid #c8d3dd;overflow:hidden;transition:.45s ease}
.product-row::before{content:"";position:absolute;left:0;top:0;width:0;height:100%;background:linear-gradient(90deg,rgba(7,85,164,.08),rgba(7,85,164,.18));transition:.55s cubic-bezier(.22,.61,.36,1);z-index:0}
.product-row>*{position:relative;z-index:2}
.product-row:hover{padding-left:20px}
.product-photo{overflow:hidden;transition:.5s ease}
.product-row h3{transition:.35s ease}
.product-row:hover h3{color:var(--blue)}
.product-row b{font-size:22px;color:var(--red);transition:.35s ease}
.product-row:hover b{transform:translate(8px,4px);color:var(--blue)}
.product-row:hover .product-photo{transform:scale(1.05)}
.product-row:hover::before{width:100%}
.product-row>span{font:800 16px Arial;color:#7790a6}
.product-photo{height:150px;background:#dce9f5 center/cover no-repeat;display:grid;place-items:center;color:#6c8297;font-size:16px}
.photo-product-initiatives{background-image:url("../images/top_initiatives_pic.webp")}
.photo-product-event{background-image:url("../images/top_event_pic.webp")}
.photo-product-seed{background-image:url("../images/product-seed.jpg")}
.photo-product-soil{background-image:url("../images/product-soil.jpg")}
.photo-product-tool{background-image:url("../images/product-tool.jpg")}
.photo-product-green{background-image:url("../images/product-green.jpg")}
.product-row h3{font-size:clamp(20px,2.1vw,30px)}
.product-row p{color:#637180;font-size:20px}
.product-row>b{font-size:22px;color:var(--red)}
.visual-break{height:600px;background:linear-gradient(90deg,rgba(0,40,90,.82),rgba(0,55,120,.2)),url("../images/visual-field.webp") center/cover no-repeat;color:#fff;display:flex;align-items:end;padding:60px var(--pad)}
.visual-break p{font:900 clamp(38px,6vw,90px)/.92 Arial;letter-spacing:-.04em;margin:0}
.visual-break small{background:rgba(0,0,0,.55);padding:5px 9px}
.shops{background:var(--navy);color:#fff}
.section-heading.light .big-en{color:rgba(255,255,255,.1)}
.shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:rgba(255,255,255,.2)}
.shop-card{background:#063465;padding:clamp(32px,5vw,70px)}
.shop-card small{color:#73b9ff;font:800 16px Arial;letter-spacing:.18em}
.shop-card h3{font-size:clamp(38px,4vw,60px);margin:24px 0}
.shop-card dl div{display:grid;grid-template-columns:100px 1fr;align-items:center;padding:18px 0;border-top:1px solid rgba(255,255,255,.2)}
.shop-card dt{font:700 16px Arial;letter-spacing:.12em;color:#8ab4d9;margin:0}
.shop-card dd{margin:0}
.shop-card dd a{font-size:16px;font-weight:800}
.shop-card>a{display:block;margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.2);font:800 11px Arial;letter-spacing:.15em}
.anim-left,.anim-right,.anim-up{will-change:transform,opacity}

/* ========================================
   オンラインショップセクション
======================================== */
.online-shop-section{position:relative;isolation:isolate;overflow:hidden;background:#fff}
.online-shop-bg{position:absolute;z-index:-2;top:0;right:0;width:58%;height:100%;background:url("../images/online-shop-screen.webp") top center/cover no-repeat;opacity:1;pointer-events:none}
.online-shop-section::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#fff 0%,#fff 42%,rgba(255,255,255,.94) 58%,rgba(255,255,255,.76) 100%);pointer-events:none}
.online-shop-heading{display:grid;grid-template-columns:minmax(0,.9fr) minmax(320px,1fr);align-items:center;gap:clamp(40px,8vw,140px)}
.online-shop-title p{margin:0}
.online-shop-title h2{margin:12px 0 0;font-size:clamp(36px,4.6vw,66px);line-height:1.3;letter-spacing:.02em}
.online-shop-content{padding:clamp(28px,4vw,50px);background:rgba(255,255,255,.82);box-shadow:0 15px 40px rgba(3,44,90,.07);backdrop-filter:blur(2px)}
.online-shop-content p{margin:0;color:#44586c;font-size:20px;line-height:2}
.online-shop-content small{display:block;margin-top:12px;color:#7790a6;font-size:12px}
.online-shop-link{display:flex;align-items:center;justify-content:flex-end;gap:20px;width:max-content;margin:30px 0 0 auto;font-size:16px;font-weight:800;white-space:nowrap}
.online-shop-link b{display:grid;width:56px;height:56px;flex:0 0 56px;place-items:center;border-radius:50%;background:var(--red);color:#fff;font-size:18px;transition:transform .3s ease,background .3s ease}
.online-shop-link:hover{color:var(--blue)}
.online-shop-link:hover b{background:var(--blue);transform:translate(4px,-4px)}


@media(max-width:980px){
	.hero{height:calc(100svh - 72px)}
	.section-heading{grid-template-columns:1fr;margin-bottom:50px;width:100%;overflow:hidden}
	.section-heading>div{position:static;width:100%;margin-top:24px}
	.section-heading h2{width:100%;max-width:100%;white-space:normal;font-size:clamp(30px,7vw,48px);line-height:1.3;margin-top:8px}
	.big-en{overflow-wrap:anywhere}
	.topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
	.about{grid-template-columns:1fr}
	.product-row{grid-template-columns:35px 90px 1fr 30px}
	.product-row p{grid-column:3/5;margin-top:-18px}
	.shop-grid{grid-template-columns:1fr}
	
	.online-shop-bg{width:72%;opacity:.11}
	.online-shop-section::before{background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.96) 48%,rgba(255,255,255,.76) 100%)}
	.online-shop-heading{grid-template-columns:1fr;align-items:start;gap:35px}
	.online-shop-content{max-width:680px;margin-left:auto}
}

@media(max-width:640px){
	.hero h1 span:last-child{margin-left:0}
	.hero-en{font-size:52px}
	.topic-grid{grid-template-columns:minmax(0,1fr)}
	.topic-card{min-width:0}
	.topic-card>a{display:block;min-width:0}
	.topic-body{min-width:0;overflow:hidden}
	.topic-body h3{max-width:100%;min-height:0;overflow-wrap:anywhere;word-break:normal;white-space:normal}
	.topic-filter{overflow-x:auto;flex-wrap:nowrap;padding-bottom:8px}
	.topic-filter button{white-space:nowrap}
	.giant-en{font-size:70px}
	.product-row{grid-template-columns:30px 70px 1fr 25px;gap:12px}
	.product-row h3{font-size:18px}
	.product-row p{grid-column:2/5;font-size:13px;margin:0}
	.product-photo{height:58px}
	.visual-break{height:440px}
	.shop-card dl div{grid-template-columns:1fr}
	
	.online-shop-bg{top:auto;bottom:0;width:100%;height:62%;background-position:top center;opacity:.1}
	.online-shop-heading{gap:28px}
	.online-shop-title h2{font-size:36px}
	.online-shop-content{max-width:none;margin-left:0;padding:25px 20px;background:rgba(255,255,255,.84)}
	.online-shop-content p{font-size:15px;line-height:1.9}
	.online-shop-link{margin-top:25px;font-size:14px}
	.online-shop-link b{width:50px;height:50px;flex-basis:50px}
}

@media(prefers-reduced-motion:reduce){
	.anim-left,.anim-right,.anim-up{opacity:1!important;transform:none!important}
}