:root{
  --ink:#0d3158;
  --ink-dark:#061d36;
  --water:#d7f0eb;
  --sky:#a9d8eb;
  --acid:#dce96e;
  --paper:#f7faf8;
  --white:#fff;
  --line:rgba(13,49,88,.18);
  --sans:"Noto Sans JP",sans-serif;
  --serif:"Noto Serif JP",serif;
  --latin:"DM Sans",sans-serif;
}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--sans);font-size:max(12px,16px);line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:auto}
button{font:inherit}
.micro{margin:0 0 24px;font-family:var(--latin);font-size:max(12px,12px);font-weight:600;letter-spacing:.24em}
.hero{position:relative;min-height:100svh;padding:112px 4vw 40px;box-sizing:border-box;background:var(--paper);overflow:hidden}
.hero-image{position:absolute;inset:112px 4vw 40px 34vw;overflow:hidden;border-radius:280px 12px 12px 12px}
.hero-image::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(247,250,248,.72),transparent 38%),linear-gradient(0deg,rgba(13,49,88,.14),transparent 45%)}
.hero-image img{height:100%;object-fit:cover;object-position:center}
.hero-copy{position:relative;z-index:2;max-width:780px;padding:17vh 0 0 5vw}
.hero-copy h1{margin:0;font-family:var(--serif);font-size:max(12px,clamp(58px,8.3vw,130px));font-weight:400;line-height:1.08;letter-spacing:-.055em}
.hero-copy h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1.6px var(--ink)}
.hero-lead{margin:38px 0 0 4px;font-family:var(--serif);font-size:max(12px,clamp(19px,2vw,28px));line-height:1.75;letter-spacing:.08em}
.scroll-mark{position:absolute;left:4vw;bottom:40px;display:flex;align-items:center;gap:14px;font-family:var(--latin);font-size:max(12px,10px);letter-spacing:.2em;writing-mode:vertical-rl}
.scroll-mark i{display:block;width:1px;height:70px;background:var(--ink)}
.philosophy{position:relative;display:grid;grid-template-columns:140px minmax(300px,.9fr) minmax(320px,.8fr);gap:6vw;padding:150px 7vw 180px;background:var(--white);overflow:hidden}
.section-number{font-family:var(--latin);font-size:max(12px,13px);letter-spacing:.2em}
.philosophy h2,.section-title-row h2,.scenes h2,.reports h2,.news h2{margin:0;font-family:var(--serif);font-size:max(12px,clamp(40px,5.5vw,80px));font-weight:400;line-height:1.28;letter-spacing:-.035em}
.philosophy-copy{padding-top:72px}
.philosophy-copy p{margin:0 0 25px;max-width:590px}
.philosophy-copy .lead-serif{font-family:var(--serif);font-size:max(12px,clamp(22px,2.4vw,34px));line-height:1.8}
.line-link{display:inline-flex;align-items:center;gap:24px;margin-top:22px;padding-bottom:7px;border-bottom:1px solid;font-size:max(12px,14px);font-weight:700}
.line-link span{transition:transform .3s}
.line-link:hover span{transform:translateX(5px)}
.cycle-word{position:absolute;left:-.02em;bottom:-.21em;color:transparent;-webkit-text-stroke:1px rgba(13,49,88,.1);font-family:var(--latin);font-size:max(12px,clamp(90px,15vw,250px));line-height:1;letter-spacing:-.06em;white-space:nowrap}
.selection{padding:145px 6vw 170px;background:linear-gradient(180deg,#eef8f6 0%,var(--paper) 100%)}
.section-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:50px;max-width:1380px;margin:0 auto 90px}
.section-title-row>p{max-width:360px;margin:0 0 10px}
.product-grid{display:grid;grid-template-columns:1.08fr .82fr .9fr;gap:clamp(18px,3vw,48px);align-items:start;max-width:1380px;margin:auto}
.product-card{position:relative;display:block}
.card-shift{margin-top:100px}
.card-no{position:absolute;top:16px;left:18px;z-index:2;display:grid;place-items:center;width:42px;height:42px;color:white;background:var(--ink);border-radius:50%;font-family:var(--latin);font-size:max(12px,11px);letter-spacing:.08em}
.product-image{aspect-ratio:1/1.03;background:white;overflow:hidden;border-radius:2px 120px 2px 2px}
.card-tall .product-image{aspect-ratio:1/1.18;border-radius:170px 2px 2px 2px}
.product-image img{height:100%;object-fit:contain;padding:11%;box-sizing:border-box;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.product-card:hover .product-image img{transform:scale(1.045)}
.product-meta{padding:22px 3px}
.product-meta small{font-family:var(--latin);font-size:max(12px,10px);letter-spacing:.18em}
.product-meta h3{margin:10px 0 8px;font-family:var(--serif);font-size:max(12px,clamp(21px,2vw,28px));font-weight:500;line-height:1.5}
.product-meta span{font-family:var(--latin);font-size:max(12px,12px);opacity:.65}
.section-action{display:flex;justify-content:center;margin-top:80px}
.round-link{display:flex;align-items:center;justify-content:space-between;width:min(100%,330px);padding:20px 24px;border:1px solid var(--ink);border-radius:999px;font-size:max(12px,14px);font-weight:700;transition:.3s}
.round-link:hover{color:white;background:var(--ink)}
.scenes{position:relative;padding:140px 7vw 160px;color:white;background:var(--ink);overflow:hidden}
.scenes::after{content:"";position:absolute;width:55vw;aspect-ratio:1;right:-20vw;top:-15vw;border:1px solid rgba(215,240,235,.3);border-radius:50%;box-shadow:0 0 0 80px rgba(215,240,235,.03),0 0 0 160px rgba(215,240,235,.02)}
.section-number.light{position:absolute;left:7vw;top:150px;color:var(--water)}
.scenes header{position:relative;z-index:1;margin-left:18vw;margin-bottom:90px}
.scenes h2{max-width:760px}
.scene-list{position:relative;z-index:1;max-width:1100px;margin-left:auto;border-top:1px solid rgba(255,255,255,.32)}
.scene-list a{display:grid;grid-template-columns:60px 1fr 220px 30px;align-items:center;padding:26px 0;border-bottom:1px solid rgba(255,255,255,.32);transition:padding .3s,color .3s}
.scene-list a:hover{padding-left:18px;color:var(--acid)}
.scene-no,.scene-list small{font-family:var(--latin);font-size:max(12px,11px);letter-spacing:.16em}
.scene-list strong{font-family:var(--serif);font-size:max(12px,clamp(30px,4vw,52px));font-weight:400}
.scene-list i{font-style:normal;font-size:max(12px,24px)}
.reports{padding:150px 7vw;background:var(--white)}
.report-list{max-width:1380px;margin:auto;padding:0;list-style:none;border-top:1px solid var(--line)}
.report-list a{display:grid;grid-template-columns:130px 120px 1fr 30px;gap:18px;align-items:center;padding:30px 10px;border-bottom:1px solid var(--line);transition:background .3s,padding .3s}
.report-list a:hover{padding-inline:24px;background:#eff7f5}
.report-list time,.report-cat{font-family:var(--latin);font-size:max(12px,11px);letter-spacing:.1em}
.report-cat{color:#487786}
.report-list h3{margin:0;font-size:max(12px,17px);font-weight:500;line-height:1.8}
.report-list i{font-style:normal;font-size:max(12px,20px)}
.news{display:grid;grid-template-columns:.72fr 1.28fr;gap:7vw;padding:140px 7vw;background:var(--acid)}
.news-heading{position:sticky;top:130px;align-self:start}
.news-list{border-top:1px solid rgba(13,49,88,.4)}
.news-list a{display:grid;grid-template-columns:110px 90px 1fr 20px;gap:16px;align-items:start;padding:28px 0;border-bottom:1px solid rgba(13,49,88,.4)}
.news-list time,.news-list span{font-family:var(--latin);font-size:max(12px,11px);letter-spacing:.08em}
.news-list p{margin:0;font-weight:500}
.news-list i{font-style:normal}
@media(max-width:980px){.hero-image{left:22vw}
.philosophy{grid-template-columns:70px 1fr}
.philosophy-copy{grid-column:2}
.product-grid{grid-template-columns:1fr 1fr}
.card-shift{margin-top:0}
.product-card:last-child{grid-column:2}
.scene-list{max-width:none}
.news{grid-template-columns:1fr}
.news-heading{position:static}}
@media(max-width:680px){.hero{min-height:920px;padding:92px 18px 28px}
.hero-image{inset:90px 18px 250px 12vw;border-radius:160px 4px 4px 4px}
.hero-copy{padding:56vh 0 0 4px}
.hero-copy .micro{display:none}
.hero-copy h1{font-size:max(12px,clamp(52px,16vw,78px))}
.hero-copy h1 em{-webkit-text-stroke:1px var(--ink)}
.hero-lead{margin-top:25px;font-size:max(12px,17px)}
.hero-index{display:none}
.scroll-mark{left:auto;right:20px;bottom:28px}
.philosophy{display:block;padding:100px 24px 130px}
.section-number{margin-bottom:60px}
.philosophy-copy{padding-top:50px}
.selection{padding:100px 20px 120px}
.section-title-row{display:block;margin-bottom:55px}
.section-title-row>p{margin-top:24px}
.product-grid{grid-template-columns:1fr;gap:54px}
.product-card:last-child{grid-column:auto}
.card-shift{margin-top:0}
.product-image,.card-tall .product-image{aspect-ratio:1/1.05;border-radius:2px 100px 2px 2px}
.scenes{padding:100px 22px 120px}
.section-number.light{position:static;margin-bottom:55px}
.scenes header{margin:0 0 60px}
.scene-list a{grid-template-columns:40px 1fr 24px}
.scene-list small{display:none}
.reports{padding:100px 20px}
.report-list a{grid-template-columns:88px 1fr 20px;gap:12px}
.report-cat{display:none}
.report-list h3{font-size:max(12px,15px)}
.news{padding:100px 20px;gap:55px}
.news-list a{grid-template-columns:90px 1fr 20px}
.news-list span{display:none}
.news-list p{font-size:max(12px,14px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
.product-image img{transition:none}}
/* Refined water palette and motion layer */
:root{--ink:#354b55;--ink-dark:#263b44;--water:#dfe9ec;--sky:#8099a3;--acid:#7895a3;--green-soft:#edf3f5;--paper:#fff;--line:rgba(53,75,85,.18)}
body{background:#fff}
.hero{background:#fff}
.hero::before{content:"";position:absolute;inset:16% auto auto -8%;width:42vw;height:42vw;border-radius:50%;background:radial-gradient(circle,rgba(120,149,163,.16),rgba(223,233,236,.08) 48%,transparent 70%);filter:blur(10px);animation:breath 8s ease-in-out infinite}
.hero-image{border-radius:42% 8px 42% 8px;clip-path:inset(0 0 0 100%);animation:imageReveal 1.5s .2s cubic-bezier(.2,.8,.2,1) forwards}
.hero-image::after{background:linear-gradient(90deg,rgba(255,255,255,.82),transparent 40%),linear-gradient(0deg,rgba(53,75,85,.12),transparent 45%)}
.hero-copy{z-index:3;animation:copyIn 1.1s .1s cubic-bezier(.2,.8,.2,1) both}
.hero-copy h1 em{color:var(--sky);-webkit-text-stroke:0}
.philosophy{background:#fff}
.cycle-word{-webkit-text-stroke:1px rgba(128,153,163,.16)}
.selection{background:linear-gradient(180deg,#f4f7f7 0%,#fff 100%)}
.card-no{background:var(--sky);transition:transform .4s}
.product-card:hover .card-no{transform:rotate(12deg) scale(1.08)}
.product-image{background:#f7f9f8;box-shadow:0 20px 50px rgba(53,75,85,.06)}
.round-link:hover{color:#fff;background:var(--sky);border-color:var(--sky)}
.scenes{color:var(--ink);background:var(--water)}
.scenes::after{border-color:rgba(128,153,163,.22);box-shadow:0 0 0 80px rgba(255,255,255,.18),0 0 0 160px rgba(255,255,255,.1)}
.section-number.light{color:var(--sky)}
.scene-list{border-top-color:rgba(53,75,85,.26)}
.scene-list a{border-bottom-color:rgba(53,75,85,.26);transition:padding .3s,color .3s,background .3s}
.scene-list a:hover{color:#5d7987;background:rgba(255,255,255,.24)}
.reports{background:#fff}
.report-list a:hover{background:var(--green-soft)}
.news{background:var(--green-soft)}
.news-list{border-top-color:rgba(53,75,85,.34)}
.news-list a{border-bottom-color:rgba(53,75,85,.34)}
.water-art{position:absolute;z-index:2;pointer-events:none;object-fit:contain;filter:saturate(.55) hue-rotate(12deg);will-change:transform}
.water-art-hero{right:-4vw;top:12vh;width:min(42vw,650px);opacity:.52;mix-blend-mode:multiply}
.water-art-philosophy{left:-8vw;bottom:-14vw;width:min(38vw,520px);opacity:.2;transform:rotate(28deg)}
.water-art-scenes{right:-8vw;bottom:-15vw;z-index:0;width:min(48vw,700px);opacity:.18;filter:saturate(.45) hue-rotate(18deg)}
.reveal{opacity:0;transform:translateY(48px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.product-card.reveal:nth-child(2){transition-delay:.12s}
.product-card.reveal:nth-child(3){transition-delay:.24s}
@keyframes imageReveal{to{clip-path:inset(0 0 0 0)}}
@keyframes copyIn{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:none}}
@keyframes breath{50%{transform:scale(1.08);opacity:.7}}
@media(max-width:680px){.hero-image{border-radius:120px 4px 120px 4px}
.hero-copy h1 em{-webkit-text-stroke:0}
.water-art-hero{right:-24vw;top:14vh;width:90vw;opacity:.34}
.water-art-philosophy{width:72vw}
.water-art-scenes{width:90vw}}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}
.hero-image,.hero-copy,.hero::before{animation:none}
.hero-image{clip-path:none}}
/* Product-first scene cards, compact hero and footer */
.hero{height:600px;min-height:600px}
.hero-copy{padding-top:96px}
.hero-image{inset:104px 4vw 30px 34vw}
.water-art-hero{top:72px;width:min(36vw,520px)}
.scene-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;max-width:1180px;border-top:0}
.scene-list .scene-card{display:block;padding:0;border:0;background:rgba(255,255,255,.9);overflow:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.scene-list .scene-card:hover{padding-left:0;color:var(--ink);background:#fff;transform:translateY(-8px);box-shadow:0 24px 60px rgba(53,75,85,.12)}
.scene-image{aspect-ratio:16/9;overflow:hidden;background:#eef3f2}
.scene-image img{height:100%;object-fit:cover;filter:saturate(.7) contrast(.94);transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .5s}
.scene-card:hover .scene-image img{transform:scale(1.035);filter:saturate(.9) contrast(.98)}
.scene-content{position:relative;min-height:178px;padding:25px 62px 27px 26px;box-sizing:border-box}
.scene-content .scene-no{display:block;margin-bottom:12px;color:var(--sky)}
.scene-content strong{display:block;margin-bottom:9px;font-family:var(--serif);font-size:max(12px,clamp(23px,2.5vw,34px));font-weight:500;line-height:1.35}
.scene-content p{margin:0;max-width:430px;font-size:max(12px,14px);line-height:1.8}
.scene-content i{position:absolute;right:26px;top:28px;font-style:normal;font-size:max(12px,22px);transition:transform .3s}
.scene-card:hover .scene-content i{transform:translateX(6px)}
@media(max-width:980px){.hero-copy{padding-top:110px}
.scene-list{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.hero{height:650px;min-height:650px}
.hero-image{inset:82px 18px 210px 12vw}
.hero-copy{padding-top:410px}
.water-art-hero{top:75px;width:72vw}
.scene-list{grid-template-columns:1fr;gap:20px}
.scene-content{min-height:164px;padding:22px 58px 24px 22px}
.scene-content strong{font-size:max(12px,25px)}
.scene-content p{font-size:max(12px,14px)}}
/* Wireframe alignment and balanced interaction */
.water-art-hero{opacity:.34}
.water-art-philosophy{opacity:.12}
.water-art-scenes{opacity:.1}
.reveal{transform:translateY(24px);transition-duration:.72s}
.product-card.reveal:nth-child(2){transition-delay:.08s}
.product-card.reveal:nth-child(3){transition-delay:.16s}
.report-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;border-top:0}
.report-list li{min-width:0}
.report-list a{display:block;padding:0;border-bottom:0}
.report-list a:hover{padding:0;background:transparent}
.report-image{aspect-ratio:16/10;margin-bottom:20px;overflow:hidden;background:#edf1f0}
.report-image img{width:100%;height:100%;object-fit:cover;filter:saturate(.65) contrast(.94);transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .4s}
.report-list a:hover .report-image img{transform:scale(1.035);filter:saturate(.85) contrast(.98)}
.report-list time{display:block;margin-bottom:8px;color:var(--sky)}
.report-list h3{margin:0;font-size:max(12px,16px);font-weight:500;line-height:1.75}
@media(max-width:780px){.report-list{grid-template-columns:1fr;gap:42px}
.report-image{aspect-ratio:16/9}}
@media(prefers-reduced-motion:reduce){.report-image img{transition:none}}
/* Copy and section refinements */
.hero-copy{max-width:760px;padding-top:116px}
.hero-copy h1{margin:0;font-family:var(--serif);font-size:max(12px,clamp(38px,4.05vw,62px));font-weight:400;line-height:1.48;letter-spacing:-.035em}
.hero-copy h1 span{display:block;white-space:nowrap}
.philosophy{grid-template-columns:minmax(300px,.9fr) minmax(320px,.8fr)}
.scenes header{margin-left:0}
@media(max-width:980px){.hero-copy h1{font-size:max(12px,clamp(34px,5.6vw,54px))}
.philosophy{grid-template-columns:1fr 1fr}
.philosophy-copy{grid-column:auto}}
@media(max-width:680px){.hero-image{inset:82px 18px 230px 12vw}
.hero-copy{padding-top:390px}
.hero-copy h1{font-size:max(12px,clamp(22px,6.8vw,32px));line-height:1.5;letter-spacing:-.045em}
.philosophy{display:block}}
/* Visual hierarchy, unified products and menu motion */
:root{--text-black:#111716}
main h1,main h2,main h3,main strong,.philosophy-copy .lead-serif,.news-list p{color:var(--text-black)}
.product-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.product-card,.card-tall,.card-shift{display:flex;flex-direction:column;height:100%;margin-top:0}
.product-image,.card-tall .product-image{width:100%;aspect-ratio:1/1.08;border-radius:2px 112px 2px 2px}
.product-meta{display:flex;flex:1;flex-direction:column;min-height:168px}
.product-meta h3{min-height:84px}
.product-meta>span{margin-top:auto}
.scenes::after{display:none}
.scenes-word-art{position:absolute;z-index:0;top:58px;right:-.04em;text-align:right;pointer-events:none}
.scenes-word-art span{display:block;color:transparent;-webkit-text-stroke:1px rgba(53,75,85,.2);font-family:var(--latin);font-size:max(12px,clamp(96px,17vw,270px));font-weight:600;line-height:.82;letter-spacing:-.07em}
.scenes-word-art small{display:block;margin:24px 7vw 0 0;color:rgba(53,75,85,.44);font-family:var(--latin);font-size:max(12px,12px);font-weight:600;letter-spacing:.3em}
.scenes header,.scene-list{position:relative;z-index:1}
.line-link{min-height:48px;margin-top:24px;padding:0 19px;border:1px solid var(--ink);border-radius:999px;background:#fff;box-sizing:border-box;transition:color .3s,background .3s,border-color .3s,transform .3s,box-shadow .3s}
.line-link:hover{color:#fff;background:var(--ink-dark);border-color:var(--ink-dark);transform:translateY(-2px);box-shadow:0 10px 24px rgba(38,59,68,.14)}
.round-link{min-height:58px;color:#fff;background:var(--ink-dark);border-color:var(--ink-dark);box-shadow:0 12px 28px rgba(38,59,68,.16);transition:color .3s,background .3s,border-color .3s,transform .3s,box-shadow .3s}
.round-link span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.14);transition:transform .3s,background .3s}
.round-link:hover{color:#fff;background:#5d7987;border-color:#5d7987;transform:translateY(-3px);box-shadow:0 16px 34px rgba(53,75,85,.2)}
.round-link:hover span{background:rgba(255,255,255,.22);transform:translateX(3px)}
@media(max-width:980px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.product-card:last-child{grid-column:2}
.scenes-word-art{top:70px}}
@media(max-width:680px){.product-grid{grid-template-columns:1fr}
.product-card:last-child{grid-column:auto}
.product-meta{min-height:0}
.product-meta h3{min-height:0}
.scenes-word-art{top:48px;right:-.03em}
.scenes-word-art span{font-size:max(12px,24vw)}
.scenes-word-art small{margin:14px 22px 0 0;font-size:max(12px,10px);letter-spacing:.2em}}
@media(prefers-reduced-motion:reduce){.line-link,.round-link,.round-link span{transition:none}}
/* Blue-gray accent and compact content balance */
:root{
  --sky:#8aa4b0;
  --acid:#7895a3;
  --green-soft:#edf3f5;
  --accent:#7895a3;
  --accent-deep:#5d7987;
  --accent-soft:#edf3f5;
}
.hero::before{background:radial-gradient(circle,rgba(120,149,163,.16),rgba(223,233,236,.08) 48%,transparent 70%)}
.selection{background:linear-gradient(180deg,#f2f6f7 0%,#fff 100%)}
.news{background:var(--accent-soft)}
.scene-list a:hover{color:var(--accent-deep)}
.section-action{margin-top:68px}
.round-link{width:min(100%,316px);min-height:54px;padding:8px 10px 8px 22px;border-radius:10px;font-size:max(12px,16px);letter-spacing:.02em;color:#fff;background:var(--accent-deep);border-color:var(--accent-deep);box-shadow:0 8px 22px rgba(53,75,85,.13)}
.round-link span{width:36px;height:36px;border-radius:8px}
.round-link:hover{background:#4d6875;border-color:#4d6875;transform:translateY(-2px);box-shadow:0 12px 26px rgba(53,75,85,.18)}
.report-list{gap:34px}
.report-list a{display:grid;grid-template-columns:112px 1fr;grid-template-rows:auto 1fr;column-gap:18px;align-items:start}
.report-image{grid-column:1;grid-row:1/3;width:112px;aspect-ratio:1/1;margin:0;border-radius:2px 28px 2px 2px}
.report-list time{grid-column:2;grid-row:1;margin:0 0 8px}
.report-list h3{grid-column:2;grid-row:2;font-size:max(12px,16px);line-height:1.75}
.news-list span{display:inline-flex;align-items:center;justify-content:center;width:max-content;min-width:68px;min-height:28px;padding:2px 9px;border:1px solid rgba(53,75,85,.55);border-radius:0;box-sizing:border-box;color:var(--ink);background:rgba(255,255,255,.48);line-height:1}
@media(max-width:980px){.report-list{grid-template-columns:1fr;gap:28px}
.report-list a{grid-template-columns:128px 1fr}
.report-image{width:128px}}
@media(max-width:680px){.section-action{margin-top:56px}
.round-link{width:100%;max-width:316px}
.report-list a{grid-template-columns:96px 1fr;column-gap:15px}
.report-image{width:96px}
.report-list h3{font-size:max(12px,15px)}
.news-list span{display:none}}
/* Square CTA, blue-only accents and free-stock imagery */
.round-link{justify-content:space-between;border-radius:0;color:var(--accent-deep);background:#fff;border:1px solid var(--accent-deep);box-shadow:none}
.round-link span{display:inline;width:auto;height:auto;border-radius:0;background:transparent;font-size:max(12px,20px);line-height:1}
.round-link:hover{color:#fff;background:var(--accent-deep);border-color:var(--accent-deep);box-shadow:0 10px 24px rgba(53,75,85,.14)}
.round-link:hover span{background:transparent;transform:translateX(5px)}
.line-link{color:var(--accent-deep);border-color:var(--accent-deep)}
.line-link:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.product-image img{padding:0;object-fit:cover;filter:saturate(.72) contrast(.96)}
.product-card:hover .product-image img{filter:saturate(.88) contrast(.98)}
.card-no{background:var(--accent-deep)}
.scene-list a:hover{color:var(--accent-deep)}
/* Unified capsule buttons, compact headings and a clearer footer */
.line-link,.round-link{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  width:min(100%,300px);
  min-height:62px;
  padding:0 30px 0 34px;
  border:1.5px solid var(--accent-deep);
  border-radius:999px;
  box-sizing:border-box;
  color:var(--accent-deep);
  background:linear-gradient(var(--accent-deep),var(--accent-deep)) no-repeat 100% 0/0 100%,#fff;
  box-shadow:none;
  font-size:max(12px,16px);
  font-weight:700;
  letter-spacing:.02em;
  overflow:hidden;
  transition:color .35s ease,background-size .52s cubic-bezier(.22,1,.36,1),background-position 0s .52s,transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease;
}
.line-link span,.round-link span{display:inline;width:auto;height:auto;border-radius:0;background:transparent;font-size:max(12px,21px);line-height:1;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.line-link:hover,.round-link:hover{color:#fff;background-position:0 0;background-size:100% 100%;border-color:var(--accent-deep);transform:translateY(-3px);box-shadow:0 12px 28px rgba(53,75,85,.15)}
.line-link:hover span,.round-link:hover span{background:transparent;transform:translateX(7px)}
.philosophy h2,.section-title-row h2,.scenes h2,.reports h2,.news h2{font-size:max(12px,clamp(37px,calc(5.5vw - 3px),77px));white-space:nowrap}
@media(max-width:680px){.line-link,.round-link{width:min(100%,300px);min-height:58px;padding-inline:25px;font-size:max(12px,15px)}
.philosophy h2,.section-title-row h2,.scenes h2,.reports h2,.news h2{font-size:max(12px,clamp(22px,6.6vw,30px));white-space:nowrap;letter-spacing:-.04em}}
@media(prefers-reduced-motion:reduce){.line-link,.round-link,.line-link span,.round-link span{transition:none}}
/* Final blue system, non-sticky header and text hierarchy */
:root{
  --sky:#5F91BF;
  --acid:#5F91BF;
  --accent:#5F91BF;
  --accent-deep:#5F91BF;
}
body{color:#425663}
.line-link,.round-link{
  color:#fff;
  border-color:#5F91BF;
  background:linear-gradient(#fff,#fff) no-repeat 100% 0/0 100%,#5F91BF;
}
.line-link:hover,.round-link:hover{
  color:#5F91BF;
  border-color:#5F91BF;
  background-position:0 0;
  background-size:100% 100%;
}
.hero-copy h1,main h2{color:#172d3c}
main h3,main strong,.philosophy-copy .lead-serif{color:#2e4b5d}
.philosophy-copy p:not(.lead-serif),.section-title-row>p,.scene-content p,.news-list p,.report-list h3{color:#425663}
.micro,.product-meta small,.product-meta>span,.scene-no,.report-list time,.news-list time{color:#7891a2}
/* Japanese maker names, outlined TOP and animated text links */
.news-list a,.report-list a{transition:color .32s ease,transform .45s cubic-bezier(.22,1,.36,1),opacity .32s ease}
.news-list a:hover{transform:translateX(7px)}
.news-list i{transition:transform .45s cubic-bezier(.22,1,.36,1)}
.news-list a:hover i{transform:translateX(6px)}
.report-list a:hover{transform:translateY(-5px)}
.product-meta>span{transition:color .3s ease,letter-spacing .4s cubic-bezier(.22,1,.36,1)}
.product-card:hover .product-meta>span{color:#5F91BF;letter-spacing:.035em}
@media(prefers-reduced-motion:reduce){.news-list a,.news-list i,.report-list a,.product-meta>span{transition:none}}
/* Keep the verified product package visible without cropping */
.product-image--pack{background:#fff}
.product-image--pack img{padding:9%;box-sizing:border-box;object-fit:contain;filter:none}
.product-card:hover .product-image--pack img{filter:none}
/* Mobile menu: match the lower pages (single column, no number column). 2026-10-02 */
/* SP main visual: shift the crop right so the soap bar stays in frame. 2026-10-02 */
@media(max-width:680px){.hero-image img{object-position:96% 50%}}
/* Top-page news: an item without a published date (date column omitted) */
.news-list a.is-undated{grid-template-columns:90px 1fr 20px}
@media(max-width:680px){.news-list a.is-undated{grid-template-columns:1fr 20px}}
/* 10/7: 広い画面での間延び・右寄りを防ぐ */
@media(min-width:681px){
/* MV：文字と画像を幅1500pxの枠に収め、それより広い画面では枠ごと中央に置く（1500px以下は従来どおり） */
.hero{padding-left:max(4vw,calc((100% - 1500px) / 2 + 60px));padding-right:max(4vw,calc((100% - 1500px) / 2 + 60px))}
.hero-copy{padding-left:min(5vw,75px)}
.hero-image{left:max(34vw,calc((100% - 1500px) / 2 + 510px));right:max(4vw,calc((100% - 1500px) / 2 + 60px))}
.water-art-hero{right:max(-4vw,calc((100% - 1500px) / 2 - 60px))}
.scenes header,.scene-list{max-width:1180px;margin-left:auto;margin-right:auto}
.scenes-word-art small{margin-right:max(7vw,calc((100vw - 1180px) / 2))}
}
/* 10/7（4回目）：「私たちの想い」「お知らせ」も商品・活動と同じ幅1380pxの枠に（約1480px以下は従来どおり） */
@media(min-width:681px){.philosophy,.news{padding-left:max(7vw,calc((100% - 1380px) / 2));padding-right:max(7vw,calc((100% - 1380px) / 2))}}
/* 装飾の「CIRCULATION」文字が「私たちについて」ボタンの上に重なってクリックを奪っていたため、クリックを通す */
.cycle-word{pointer-events:none}
/* 10/7（5回目）：PC版「私たちの想い」の本文エリアを左へ100px広げる */
@media(min-width:981px){.philosophy-copy{margin-left:-100px}}