@charset "UTF-8";

/* =========================================================
   kazusora.com
   ========================================================= */

:root{
  --paper:      #fff6ef;   /* 明るいクリーム */
  --paper-deep: #ffe6dc;   /* ほんのり赤みのある面 */
  --ink:        #1c1512;
  --ink-soft:   #55443d;
  --ink-faint:  #a2887c;

  --accent:      #e03127;  /* 鮮やかな赤（差し色） */
  --accent-deep: #b81f16;  /* 小さい文字用の濃い赤 */
  --red-surface: #d62b21;  /* 赤ベタの面 */

  --line:       rgba(28,21,18,.16);
  --line-light: rgba(255,246,239,.3);

  --font-en: 'Anton', 'Zen Kaku Gothic New', sans-serif;
  --font-ja: 'Zen Kaku Gothic New', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Noto Sans JP', sans-serif;

  /* 参考にしたイージング：ゆっくり効いて、すっと止まる */
  --ease-expo: cubic-bezier(.16,1,.3,1);
  --ease-quart: cubic-bezier(.25,1,.5,1);

  --pad: clamp(20px, 5vw, 80px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-ja);
  font-weight:500;
  font-size:16px;
  line-height:2.05;
  letter-spacing:.04em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p,figure{ margin:0; }
em{
  font-style:normal; font-weight:900;
  background:linear-gradient(transparent 58%, rgba(224,49,39,.28) 58%);
}

::selection{ background:var(--accent); color:#fff; }

html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }


/* =========================================================
   紙の粒子感
   ========================================================= */
.cGrain{
  position:fixed; inset:0; z-index:9000;
  pointer-events:none;
  opacity:.16;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}


/* =========================================================
   右端を流れる帯
   ========================================================= */
.cMarquee{
  position:fixed; top:0; z-index:7000;
  width:clamp(34px,3.2vw,48px);   /* 本文の余白（5vw）より必ず狭くして重ならないようにする */
  height:100svh;
  overflow:hidden;
  background:var(--ink);
  pointer-events:none;
  display:none;
}
.cMarquee--right{ right:0; }
.cMarquee--left{ left:0; }
/* 左は逆向きに流して、右と対向させる */
.cMarquee--left .cMarquee__track{ animation-direction:reverse; }
/* 余白が足りない画面では出さない */
@media (min-width:900px){
  .cMarquee{ display:block; }
}
/* 赤ベタ・黒ベタの面に来たら反転させる（黒地に黒で消えるのを防ぐ） */
.cMarquee.is-light{ background:var(--paper); }
.cMarquee.is-light .cMarquee__text{ color:var(--ink); }

.cMarquee__track{
  display:flex; flex-direction:column;
  animation:marqueeY 44s linear infinite;
  will-change:transform;
}
.cMarquee__text{
  writing-mode:vertical-rl;
  font-family:var(--font-en);
  font-size:clamp(13px,1.2vw,16px);
  letter-spacing:.24em;
  color:var(--paper);
  white-space:nowrap;
  transition:color .5s var(--ease-quart);
}
/* 同じ文を2つ並べ、1つ分ちょうど動かすことで継ぎ目なく繰り返す */
@keyframes marqueeY{
  from{ transform:translateY(0); }
  to{ transform:translateY(-50%); }
}
@media (prefers-reduced-motion:reduce){
  .cMarquee__track{ animation:none; }
}


/* =========================================================
   燃焼トランジション
   ========================================================= */
/* 開幕の幕そのものなので、ヘッダーや帯より前面に置く */
.cBurn{
  position:fixed; inset:0; z-index:9400;
  pointer-events:none;
  display:none;
}
.cBurn.is-active{ display:block; }


/* =========================================================
   カーソルの炎
   ========================================================= */
.cFire{
  position:fixed; inset:0; z-index:8500;
  pointer-events:none;
}

/* カーソルが灯す火明かり。
   文字より後ろ（z-index:0）に置き、blend も使わない。
   前面から重ねて明るくすると、白に近い文字が飛んで逆に読めなくなる */
.cLight{
  position:absolute; top:0; left:0; z-index:0;
  width:clamp(340px,40vw,620px); aspect-ratio:1;
  pointer-events:none;
  opacity:0;
  transition:opacity .6s var(--ease-quart);
  will-change:transform;
}
.cLight.is-on{ opacity:1; }
/* 揺らぎは内側にかける。外側は点灯/消灯だけを担当する */
.cLight__core{
  position:absolute; inset:0; display:block;
  border-radius:50%;
  background:radial-gradient(circle closest-side,
    rgba(255,228,186,.30) 0%,
    rgba(255,172,92,.185) 22%,
    rgba(216,72,40,.09) 46%,
    rgba(216,72,40,0) 72%);
  will-change:transform,opacity;
}
/* 芯をもう一枚重ねる。一枚のグラデーションだけだと平板に見える */
.cLight__core::before{
  content:""; position:absolute; inset:27%;
  border-radius:50%;
  background:radial-gradient(circle closest-side,
    rgba(255,240,214,.26) 0%,
    rgba(255,198,128,.13) 44%,
    rgba(255,198,128,0) 76%);
}
/* 光より前に本文を置く */
.pContact__inner{ position:relative; z-index:1; }
.lFooter__logo, .lFooter__copy{ position:relative; z-index:1; }
@media (prefers-reduced-motion:reduce){ .cLight{ display:none; } }


/* =========================================================
   ローディングの幕
   ========================================================= */
.cCurtain{ display:none; }
.js .cCurtain{
  position:fixed; inset:0; z-index:9500;
  background:var(--red-surface);
  display:grid; place-items:center;
}
.cCurtain__mark{
  font-family:var(--font-en);
  color:#fff;
  font-size:clamp(28px,5vw,48px);
  letter-spacing:.06em;
}


/* =========================================================
   ヘッダー
   ========================================================= */
.lHeader{
  position:fixed; top:0; left:0; width:100%; z-index:8000;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(16px,2.4vw,30px) var(--pad);
  color:var(--ink);
  transition:transform .8s var(--ease-expo), opacity .8s var(--ease-expo), color .5s var(--ease-quart);
}
/* 赤ベタ・黒ベタの面に乗ったら白抜きにする */
.lHeader.is-light{ color:#fff; }
.lHeader.is-hidden{ transform:translateY(-110%); opacity:0; }

.lHeader__logo{
  font-family:var(--font-en);
  font-size:clamp(19px,2.1vw,26px);
  letter-spacing:.06em;
}

.lHeader__nav{ display:flex; gap:clamp(16px,2.4vw,36px); }
/* 同じ文字を2枚重ね、ホバーで下から入れ替える */
.lHeader__nav_item{
  font-family:var(--font-en);
  font-size:clamp(13px,1.3vw,16px); letter-spacing:.08em;
  display:block; overflow:hidden; height:1.5em; line-height:1.5em;
}
.lHeader__nav_item span{
  display:block;
  transition:transform .6s var(--ease-expo), color .3s;
}
.lHeader__nav_item:hover span{ transform:translateY(-100%); color:var(--accent); }
.lHeader.is-light .lHeader__nav_item:hover span{ color:var(--paper-deep); }

/* 狭い画面では収まらないので詰める（Anton は同じ級数でも横幅を食う） */
@media (max-width:480px){
  .lHeader{ padding-inline:16px; }
  .lHeader__logo{ font-size:16px; }
  .lHeader__nav{ gap:12px; }
  .lHeader__nav_item{ font-size:11px; letter-spacing:.04em; }
}


/* =========================================================
   見出し
   ========================================================= */
.cHeading{ display:flex; flex-direction:column; gap:.45em; }
.cHeading__en{
  font-family:var(--font-en);
  font-size:clamp(48px,8.5vw,120px);
  line-height:.92; letter-spacing:.01em;
  color:var(--accent);
}
.cHeading__ja{
  font-size:clamp(14px,1.5vw,17px); font-weight:900;
  letter-spacing:.14em;
  color:var(--ink);
  display:flex; align-items:center; gap:.8em;
}
.cHeading__ja::before{
  content:""; width:clamp(24px,3.4vw,48px); height:4px; border-radius:2px;
  background:var(--accent); flex:none;
}
.cHeading--light .cHeading__en{ color:#fff; }
.cHeading--light .cHeading__ja{ color:rgba(255,246,239,.85); }
.cHeading--light .cHeading__ja::before{ background:#fff; }


/* =========================================================
   リンクボタン
   ========================================================= */
.cLinkButton{
  position:relative; display:inline-block;
  padding:1em 2.8em;
  background:var(--accent); color:#fff;
  border-radius:999px;
  font-family:var(--font-en);
  font-size:clamp(15px,1.5vw,18px); letter-spacing:.08em;
  overflow:hidden;
  transition:transform .5s var(--ease-expo), background-color .4s;
}
.cLinkButton:hover{ transform:translateY(-4px); background:#fff; color:var(--accent); }
.cLinkButton__face{ display:block; position:relative; overflow:hidden; height:1.3em; }
.cLinkButton__label{
  display:block; line-height:1.3em;
  transition:transform .7s var(--ease-expo);
}
.cLinkButton:hover .cLinkButton__label{ transform:translateY(-1.3em); }
.cLinkButton__corner{ display:none; }


/* =========================================================
   FV
   ========================================================= */
.pFv{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding:0 var(--pad);
  overflow:hidden;
}
.pFv__bg{
  position:absolute; inset:-15% 0 -15% 0;
  background:
    radial-gradient(52% 42% at 82% 20%, rgba(224,49,39,.30) 0%, transparent 62%),
    radial-gradient(46% 40% at 6% 92%, rgba(255,138,90,.34) 0%, transparent 64%);
  will-change:transform;
}

/* 右側に写真。左端を透明にぼかして、紙の地色に溶かし込む */
.pFv__photo{
  position:absolute; top:0; bottom:0; right:0;
  width:min(44%, 760px);
  display:flex; align-items:center;   /* 縦は中央。写真は元の縦横比のまま置く */
  z-index:0;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 46%);
  mask-image:linear-gradient(to right, transparent 0%, #000 46%);
  will-change:transform;
}
.pFv__photo img{
  width:100%; height:auto;   /* cover で拡大すると顔が大きくなりすぎる */
}
/* 横に並べられない画面では、背景として薄く敷く */
@media (max-width:899px){
  .pFv__photo{
    top:0; bottom:0; width:100%;
    opacity:.22;
    -webkit-mask-image:linear-gradient(to bottom, #000 42%, transparent 94%);
    mask-image:linear-gradient(to bottom, #000 42%, transparent 94%);
  }
  /* こちらは画面いっぱいに敷きたいので、はみ出す分は切って埋める */
  .pFv__photo img{ height:100%; object-fit:cover; object-position:58% 50%; }
}

.pFv__inner{ position:relative; width:100%; max-width:1400px; margin-inline:auto; z-index:2; }

.pFv__eyebrow{
  font-family:var(--font-en);
  font-size:clamp(13px,1.5vw,18px);
  letter-spacing:.14em;
  color:var(--accent-deep);
  margin-bottom:clamp(14px,2vw,26px);
}
.pFv__title{
  font-family:var(--font-en);
  font-weight:400; /* Anton は1ウェイトだが見た目は極太 */
  font-size:clamp(64px,16vw,270px);
  line-height:.9; letter-spacing:.005em;
  color:var(--accent);
  margin-bottom:clamp(26px,3.6vw,52px);
}
.pFv__lead{
  font-size:clamp(15px,1.6vw,20px);
  font-weight:700;
  line-height:2.1; letter-spacing:.06em;
  color:var(--ink-soft);
}
.pFv__lead span{ display:block; }



/* =========================================================
   ABOUT
   ========================================================= */
.pAbout{
  padding:clamp(110px,17vw,240px) var(--pad);
  border-top:4px solid var(--accent);
}
.pAbout__inner{
  max-width:1400px; margin-inline:auto;
  display:grid; gap:clamp(48px,7vw,110px);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:900px){
  .pAbout__inner{ grid-template-columns:minmax(240px,32%) minmax(0,1fr); }
  .pAbout__head{ position:sticky; top:22vh; align-self:start; }
}
/* 紹介写真。赤いブロックを後ろにずらして重ねる */
.pAbout__photo{
  position:relative;
  margin:0 0 clamp(58px,6.5vw,104px);   /* 食み出すプレートのぶん下を空ける */
  transform:rotate(-1.5deg);
}
.pAbout__photo::before{
  content:"";
  position:absolute;
  inset:clamp(14px,1.6vw,22px) calc(clamp(14px,1.6vw,22px) * -1) calc(clamp(14px,1.6vw,22px) * -1) clamp(14px,1.6vw,22px);
  background:var(--accent);
  border-radius:24px;
  z-index:0;
}
.pAbout__photo img{
  position:relative; z-index:1;
  width:100%; height:auto;
  border-radius:24px;
  display:block;
}
/* 写真の左下から食み出すネームプレート */
.pAbout__photo_cap{
  position:absolute; z-index:2;
  left:0; bottom:0;
  /* 写真は -1.5度。逆向きに +3度かけて、傾きを対比させる */
  transform:translate(0, 34%) rotate(3deg);
  background:var(--ink);
  padding:clamp(14px,1.5vw,20px) clamp(18px,2vw,30px);
  border-radius:14px;
  display:flex; flex-direction:column; gap:.5em;
  box-shadow:0 18px 40px rgba(28,21,18,.28);
}
@media (min-width:900px){
  .pAbout__photo_cap{ left:clamp(-40px,-2.4vw,-20px); }
}
.pAbout__photo_cap_en{
  display:block;
  font-family:var(--font-en);
  font-size:clamp(30px,4.4vw,60px);
  line-height:.92; letter-spacing:.02em;
  color:#fff;
}
.pAbout__photo_cap_ja{
  display:block;
  font-size:clamp(11px,1.1vw,13px); font-weight:900;
  letter-spacing:.24em; color:rgba(255,246,239,.75);
}

.pAbout__text{
  font-size:clamp(15px,1.4vw,18px);
  font-weight:500;
  line-height:2.4; letter-spacing:.06em;
  margin-bottom:1.8em; max-width:44em;
}
.pAbout__meta{
  margin-top:clamp(40px,6vw,80px);
  border-top:2px solid var(--line);
}
.pAbout__meta_row{
  display:grid; gap:.2em 2em;
  grid-template-columns:minmax(0,1fr);
  padding:1.4em 0;
  border-bottom:2px solid var(--line);
}
@media (min-width:640px){
  .pAbout__meta_row{ grid-template-columns:11em minmax(0,1fr); }
}
.pAbout__meta_row dt{
  font-size:12px; font-weight:900; letter-spacing:.12em;
  color:var(--accent-deep); padding-top:.6em;
}
.pAbout__meta_row dd{ font-size:15px; font-weight:700; letter-spacing:.04em; }


/* =========================================================
   WORKS（赤ベタ・横スクロール）
   ========================================================= */
.pWorks{
  background:var(--red-surface);
  color:#fff;
  position:relative;
}
.pWorks__sticky{
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(22px,3vw,40px);
  padding:clamp(56px,7vw,84px) 0;
  overflow:hidden;
}
/* 固定表示する要素は画面ちょうどの高さにする（はみ出すとピンがずれる） */
@media (min-width:900px){
  .pWorks__sticky{ height:100svh; }
  /* 横スクロールが成立しないときは高さを内容なりにする */
  .pWorks.is-static .pWorks__sticky{ height:auto; padding-block:clamp(90px,11vw,150px); }
  .pWorks.is-static .pWorks__progress{ display:none; }
}
@media (max-width:899px){
  .pWorks__sticky{ min-height:0; }
}
.pWorks__head{
  padding-inline:var(--pad);
  display:flex; flex-direction:column; gap:clamp(14px,2vw,24px);
}
.pWorks .cHeading__en{ font-size:clamp(42px,6vw,86px); }

.pWorks__progress{
  width:min(320px,42vw); height:5px; border-radius:3px;
  background:rgba(255,255,255,.28); position:relative; overflow:hidden;
}
.pWorks__progress i{
  position:absolute; inset:0 auto 0 0; width:0%;
  background:#fff; border-radius:3px;
}

.pWorks__track{
  display:flex; align-items:stretch;
  gap:clamp(24px,4vw,64px);
  padding-inline:var(--pad);
  will-change:transform;
}
/* 横スクロールしない画面では縦積み */
@media (max-width:899px){
  .pWorks__track{ flex-direction:column; transform:none !important; }
  .pWorks__progress{ display:none; }
}

.pWorks__item{
  flex:none;
  width:min(620px,78vw);
  padding:clamp(26px,2.6vw,38px) clamp(24px,2.4vw,36px);
  background:rgba(255,255,255,.1);
  border-radius:22px;
  display:flex; flex-direction:column;
}
@media (max-width:899px){ .pWorks__item{ width:100%; } }

.pWorks__item_num{
  font-family:var(--font-en);
  font-size:clamp(34px,4vw,54px);
  line-height:1; color:#fff; opacity:.55;
  margin-bottom:clamp(14px,1.8vw,24px);
}
.pWorks__item_title{
  font-size:clamp(24px,2.8vw,38px);
  font-weight:900; line-height:1.4; letter-spacing:.02em;
  margin-bottom:.4em;
}
.pWorks__item_role{
  font-size:12px; font-weight:900; letter-spacing:.14em;
  color:#fff;
  margin-bottom:1.4em;
}
.pWorks__item_text{
  font-size:15px; font-weight:500; line-height:2.05; letter-spacing:.05em;
  color:#fff;
  margin-bottom:1.8em;
}
/* 画面が縦に短いノートPCでも収まるように */
@media (min-width:900px) and (max-height:800px){
  .pWorks__item_text{ font-size:14px; line-height:1.9; }
  .pWorks__item_num{ margin-bottom:12px; }
}

.pWorks__item_tags{ display:flex; flex-wrap:wrap; gap:.55em; margin-top:auto; }
.pWorks__item_tags li{
  font-family:var(--font-en);
  font-size:13px; letter-spacing:.05em;
  padding:.45em 1.15em;
  background:#fff; color:var(--red-surface);
  border-radius:999px;
}

.pWorks__item--end{
  justify-content:center; align-items:flex-start;
  gap:clamp(24px,3vw,40px);
  background:none; width:min(480px,72vw);
}
@media (max-width:899px){
  .pWorks__item--end{ width:100%; padding-top:clamp(20px,6vw,40px); }
}
.pWorks__item_end_text{
  font-size:clamp(24px,3vw,40px);
  font-weight:900; line-height:1.6; letter-spacing:.03em;
}
.pWorks__item--end .cLinkButton{ background:#fff; color:var(--accent); }
.pWorks__item--end .cLinkButton:hover{ background:var(--ink); color:#fff; }


/* =========================================================
   NUMBERS
   ========================================================= */
.pNumbers{
  background:var(--paper-deep);
  padding:clamp(80px,11vw,150px) var(--pad);
}
.pNumbers__inner{ max-width:1400px; margin-inline:auto; }
.pNumbers__list{
  display:grid; gap:clamp(40px,6vw,24px);
  grid-template-columns:minmax(0,1fr);
  text-align:center;
}
@media (min-width:760px){
  .pNumbers__list{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .pNumbers__item + .pNumbers__item{ border-left:3px solid rgba(224,49,39,.24); }
}
.pNumbers__item{ display:flex; flex-direction:column; gap:.5em; padding-inline:1em; }
.pNumbers__item_num{
  font-family:var(--font-en);
  font-size:clamp(66px,9vw,140px);
  line-height:1; letter-spacing:.01em;
  color:var(--accent);
}
.pNumbers__item_num small{ font-size:.32em; letter-spacing:.04em; margin-left:.1em; }
.pNumbers__item_label{
  font-size:14px; font-weight:900; letter-spacing:.1em; color:var(--ink);
}


/* =========================================================
   CONTACT
   ========================================================= */
.pContact{
  background:var(--ink); color:var(--paper);
  padding:clamp(110px,16vw,220px) var(--pad);
  /* 火明かりを内側だけに効かせるため、独立した重ね合わせの箱にする */
  position:relative; overflow:hidden; isolation:isolate;
}
.pContact__inner{ max-width:1400px; margin-inline:auto; }
.pContact__lead{
  margin-top:clamp(26px,3.4vw,46px);
  font-size:16px; font-weight:700; letter-spacing:.06em;
  color:rgba(255,246,239,.8);
}
/* アイコンを横一列に並べる */
.pContact__icons{
  margin-top:clamp(46px,6vw,84px);
  display:flex; flex-wrap:wrap;
  gap:clamp(20px,3vw,44px);
}
/* --lit は 0〜1。カーソルの近さに応じて JS が入れる。
   素の状態は沈ませ、近づくと浮かび上がる */
.pContact__icons a{
  --lit:0;
  display:flex; flex-direction:column; align-items:center;
  gap:.9em;
}
/* JS が無い環境でもホバーで灯るようにしておく */
.pContact__icons a:hover, .pContact__icons a:focus-visible{ --lit:1; }

.pContact__icons_mark{
  width:clamp(64px,7.4vw,104px); aspect-ratio:1;
  border-radius:50%;
  display:grid; place-items:center;
  border:2px solid rgba(255,246,239, calc(.20 + .62 * var(--lit)));
  background:rgba(255,150,72, calc(.13 * var(--lit)));
  /* 光彩を2層に重ねて、芯と外周をつくる */
  box-shadow:
    0 0 calc(14px * var(--lit)) rgba(255,220,175, calc(.55 * var(--lit))),
    0 0 calc(52px * var(--lit)) rgba(240,110,55,  calc(.45 * var(--lit)));
  transform:scale(calc(1 + .08 * var(--lit)));
  will-change:transform;
}
.pContact__icons_mark svg{
  width:46%; height:46%;
  display:block;
  fill:rgba(255,246,239, calc(.46 + .54 * var(--lit)));
  filter:drop-shadow(0 0 calc(12px * var(--lit)) rgba(255,190,130, calc(.7 * var(--lit))));
}
.pContact__icons_label{
  font-family:var(--font-en);
  font-size:clamp(12px,1.2vw,15px);
  letter-spacing:.08em;
  color:rgba(255,246,239, calc(.44 + .56 * var(--lit)));
  text-shadow:0 0 calc(22px * var(--lit)) rgba(255,178,98, calc(.6 * var(--lit)));
}


/* =========================================================
   フッター
   ========================================================= */
.lFooter{
  background:var(--ink); color:rgba(255,246,239,.6);
  padding:clamp(34px,5vw,60px) var(--pad);
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:1.4em;
  border-top:4px solid var(--accent);
  position:relative; overflow:hidden; isolation:isolate;
}
.lFooter__logo{
  font-family:var(--font-en);
  font-size:clamp(20px,2.4vw,30px);
  letter-spacing:.06em; color:var(--paper);
}
.lFooter__copy{ font-size:12px; font-weight:700; letter-spacing:.08em; }


/* =========================================================
   文字送りアニメーションの下地
   ========================================================= */
.u-char{ display:inline-block; overflow:hidden; vertical-align:top; }
.u-char > i{ display:inline-block; font-style:normal; will-change:transform; }
.u-char--space{ white-space:pre; }

/* JS が動く前のちらつき防止（no-js のときは表示したまま） */
.js .js-lines,
.js [data-from],
.js .pWorks__item{ opacity:0; }


/* =========================================================
   動きを減らす設定への配慮
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js .js-lines,
  .js [data-from],
  .js .pWorks__item{ opacity:1 !important; }
}