:root{--ink:#161714;--paper:#f2f0e8;--paper-dark:#e5e2d7;--accent:#d9f358;--line:rgba(22,23,20,.22);--muted:#67685f}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic",sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}p,h1,h2{margin:0}.header{display:grid;grid-template-columns:1fr auto;align-items:center;height:92px;padding:0 4.2vw;border-bottom:1px solid var(--line)}.brand{font:700 29px/1 "Yu Mincho","Hiragino Mincho ProN",serif;letter-spacing:-.12em}.back{padding:12px 0;border-bottom:1px solid currentColor;font:700 10px/1 Arial,sans-serif;letter-spacing:.12em}.hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);min-height:620px;border-bottom:1px solid var(--line)}.hero-copy{display:flex;flex-direction:column;justify-content:flex-end;padding:110px 8vw 90px 4.2vw}.meta{display:flex;gap:18px;color:var(--muted);font:700 10px/1 Arial,sans-serif;letter-spacing:.13em}.hero h1{margin-top:48px;font:500 clamp(42px,6vw,84px)/1.42 "Yu Mincho","Hiragino Mincho ProN",serif;letter-spacing:-.06em}.lead{margin-top:42px;max-width:650px;font-size:15px;line-height:2.1}.hero-visual{position:relative;display:flex;align-items:flex-end;padding:38px;color:#fff;background:#777b70;overflow:hidden}.hero-visual:before{content:"";position:absolute;width:72%;aspect-ratio:1;border:1px solid rgba(255,255,255,.3);border-radius:50%;top:14%;left:14%}.hero-visual:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent 0 30px,rgba(255,255,255,.05) 31px 32px)}.hero-visual span{position:relative;z-index:1;font:700 10px/1 Arial,sans-serif;letter-spacing:.15em}.earth{background:#817162}.blue{background:#5f7476}.green{background:#6d7960}.dark{background:#394235}.article{display:grid;grid-template-columns:minmax(120px,15vw) minmax(0,720px) 1fr;gap:5vw;padding:120px 4.2vw 150px}.article-index{color:var(--muted);font:700 10px/1.5 Arial,sans-serif;letter-spacing:.13em}.article-body h2{margin:75px 0 24px;font:500 30px/1.6 "Yu Mincho","Hiragino Mincho ProN",serif}.article-body h2:first-child{margin-top:0}.article-body p{font-size:15px;line-height:2.25;letter-spacing:.035em}.article-body p+p{margin-top:24px}.note{align-self:start;padding:28px;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}.note span{color:var(--muted);font:700 9px/1 Arial,sans-serif;letter-spacing:.13em}.note p{margin-top:18px;font-size:12px;line-height:1.9}.footer{display:grid;grid-template-columns:1fr auto;align-items:center;padding:70px 4.2vw;background:var(--paper-dark)}.footer strong{font:700 36px/1 "Yu Mincho","Hiragino Mincho ProN",serif;letter-spacing:-.1em}.next{padding-bottom:10px;border-bottom:1px solid currentColor;font-size:12px;font-weight:700}
@media(max-width:850px){.hero{grid-template-columns:1fr}.hero-copy{padding:90px 6vw 70px}.hero-visual{min-height:360px}.article{grid-template-columns:1fr;padding:90px 6vw 110px}.article-index{margin-bottom:10px}.note{margin-top:30px}}@media(max-width:560px){.header{height:74px;padding:0 6vw}.hero-copy{padding-top:70px}.hero h1{font-size:42px}.lead{font-size:14px}.hero-visual{min-height:280px}.article{padding-top:70px}.footer{grid-template-columns:1fr;gap:34px;padding:55px 6vw}.next{justify-self:start}}

.hero-visual{isolation:isolate;background:#20231d}
.hero-visual img{position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.86) contrast(1.03) brightness(.82);animation:artImageDrift 18s ease-in-out infinite alternate}
.hero-visual:before{z-index:-1;inset:0;width:auto;aspect-ratio:auto;border:0;border-radius:0;background:linear-gradient(180deg,rgba(8,10,7,.05),rgba(8,10,7,.68))}
.hero-visual:after{z-index:0;background:linear-gradient(130deg,rgba(217,243,88,.08),transparent 44%)}
.hero-visual span{z-index:1}

/* =========================================================
   MOTION LAYER — 記事ページの読み込みアニメーション
   ========================================================= */
@keyframes artRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes artCurtain{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes artLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes artFloat{from{transform:translate(0,0) scale(1)}to{transform:translate(-18px,14px) scale(1.06)}}
@keyframes artImageDrift{from{transform:scale(1.02) translateX(0)}to{transform:scale(1.07) translateX(-1.2%)}}
.header{animation:artRise .8s cubic-bezier(.16,1,.3,1) backwards}
.meta{animation:artRise .9s cubic-bezier(.16,1,.3,1) .15s backwards}
.hero h1{animation:artRise 1s cubic-bezier(.16,1,.3,1) .28s backwards}
.lead{animation:artRise 1s cubic-bezier(.16,1,.3,1) .42s backwards}
.hero-visual{animation:artCurtain 1.2s cubic-bezier(.16,1,.3,1) .3s backwards}
.hero-visual:before{animation:none}
.article-index{animation:artRise .9s cubic-bezier(.16,1,.3,1) .6s backwards}
.article-body>*{animation:artRise .9s cubic-bezier(.16,1,.3,1) backwards}
.article-body>*:nth-child(1){animation-delay:.62s}
.article-body>*:nth-child(2){animation-delay:.7s}
.article-body>*:nth-child(3){animation-delay:.78s}
.article-body>*:nth-child(4){animation-delay:.86s}
.article-body>*:nth-child(5){animation-delay:.94s}
.article-body>*:nth-child(n+6){animation-delay:1s}
.article-body h2{position:relative}
.article-body h2:before{content:"";position:absolute;left:-18px;top:.55em;width:10px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;animation:artLine .7s ease 1.1s forwards}
.note{animation:artRise 1s cubic-bezier(.16,1,.3,1) 1.05s backwards}
.back,.next,.brand{transition:transform .35s cubic-bezier(.16,1,.3,1),letter-spacing .35s ease}
.back:hover{transform:translateX(-5px)}
.next:hover{transform:translateX(5px);letter-spacing:.06em}
.brand:hover{transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition-duration:.01ms!important}
  .article-body h2:before{transform:scaleX(1)}
}

body,.footer{background-image:url("../assets/media/gosenone-paper.png");background-size:300px 300px}
.brand{display:block;width:202px;height:29px;background:url("../assets/logos/tasuki-logo.svg") left center/contain no-repeat;filter:brightness(0);font-size:0}.brand-logo{display:block;width:202px;height:auto}.footer strong{display:block;width:240px;height:50px;background:url("../assets/logos/tasuki-logo.png") left center/contain no-repeat;font-size:0}.footer-logo{display:block;width:220px;height:auto}
.footer{position:relative;overflow:hidden;padding:82px 4.2vw;background:linear-gradient(135deg,#f2f1eb 0%,#fffefa 58%,#eef2d9 100%);border-top:1px solid var(--ink)}
.footer:before{content:"";position:absolute;right:-9vw;top:-21vw;width:38vw;height:38vw;border:1px solid rgba(22,23,20,.12);border-radius:50%;box-shadow:0 0 0 6vw rgba(217,243,88,.12),0 0 0 12vw rgba(22,23,20,.025)}
.footer>*{position:relative;z-index:1}.next{display:flex;gap:24px;align-items:center;padding:14px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);transition:padding .25s ease}.next:hover{padding-left:9px}.next:after{content:"→";font-size:16px}
@media(max-width:700px){.footer{padding:62px 6vw}.footer:before{right:-30vw;top:-18vw;width:90vw;height:90vw}.footer strong{width:190px;height:42px}}