@charset "utf-8";


/* ===== 基本設定 ===== */
:root{ --gutter:clamp(16px,4vw,70px); }
html,body{height:100%;overflow-x:hidden; }
/*body{scroll-snap-type:y proximity; overscroll-behavior:contain;}*/
/*i.slide, .section{ overflow-x:hidden; }  */
/*img, video{ max-width:100%; height:auto; } */


html{ scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}

/* ===== スナップ対象：100vh セクションだけ ===== */
.slide[data-snap="true"]{
  min-height: calc(var(--vh) * 100);
  scroll-snap-align: start;
  position: relative;
  display: grid; place-items: center;
  overflow: clip;
  z-index: 0;
}

@media (min-width:768px){
.slide > div{ width:100%; height:100%; position:relative; }
}

/* ===== 可変セクションは“スナップ無効”を明示 ===== */
.section{ scroll-snap-align: none; }


/* オーバーレイ要素 */
.name_company,.gamushara,.ceo{ position:absolute; }
.name_company{left:4vw; bottom:16vh; z-index:2; font-weight:normal; line-height:1.2;font-size:clamp(18px,4vw,48px);}
.gamushara{ left:4vw; bottom:6vh; width:min(36vw,420px); z-index:2; }


/* ===== 可変セクション ===== */
.section{
  position:relative; z-index:0;
  width: 100%;
  overflow: hidden;
}

.section .text_wrap img{ max-width:100%; height:auto; display:block; }

video.success{
    display:block;
    width:100%;
    height:auto;         
    max-width:100%;
  }






.slide--2 div,.slide--3 div,.slide--4 div{ font-size:18px; }
.slide small{ display:block; margin-top:8px; opacity:.8; font-size:.82em; }

.inline_pc{ display:none; }
@media (min-width:1024px){ .inline_pc{ display:inline; } }

.text_wrap p { width:100%; text-align:left; display:inline-block; line-height:2em; text-align:justify;}
@media (min-width:768px){
  .text_wrap p { font-size:24px; }
}

.slide--1 { padding:0; }
.slide--1 div.slide--1-div { width:100%; height:100%; position:relative; }



  .slide--1 div.slide--1-div .topvideo { width:100%; height:100%; position:absolute; top:0; left:0; display:block; }





.slide--1 div.slide--1-div .ceo.inline_sp { width:100%; position:absolute; top:0; right:0; opacity:0;animation:ceofadeIn 1s ease forwards 1s; z-index:1; display:block; }
.slide--1 div.slide--1-div .ceo.inline_pc { display:none; }
@media (min-width:768px){
.slide--1 div.slide--1-div .ceo.inline_sp { display:none; }
.slide--1 div.slide--1-div .ceo.inline_pc {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;        
  width:100%;        
  max-height: 100%;   
  object-fit:cover; 
  display: block;
  opacity: 0;
  animation: ceofadeIn 1s ease forwards 1s;
  z-index: 1;
}
.slide--1 div.slide--1-div .top_new { width:100%; }


}
@keyframes ceofadeIn{to{opacity:1;}}

/* 1枚目のビデオ全面表示 */
.topvideo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}


.slide--1 div.slide--1-div .gamushara {
  position: absolute;
  top:2%;
  left: 50%;
    transform: translateX(-50%);
  width: 140px;
  opacity: 0;
  animation:
    gamusharafadeIn 2s ease forwards 2s,   /* 2秒後にフェードイン開始 */
    gamusharafadeOut 3s ease forwards 3s;  /* 3秒後にフェードアウト開始 */
  z-index: 3;
}

/* フェードイン */
@keyframes gamusharafadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* フェードアウト */
@keyframes gamusharafadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}


.slide--1 div.slide--1-div .gamushara2 { width:20%; position: absolute;top:0%;right: 0;opacity: 0;z-index: 5;animation: gamushara2fadeIn 2s ease forwards 2s;}
/* フェードイン */
@keyframes gamushara2fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


.slide--1 div.slide--1-div .gamushara2 { width:30vw; position:absolute; bottom:10vw; left:2.5%; top:initial; }
@media (min-width:768px){
  .slide--1 div.slide--1-div .gamushara2 {  width:17vw; top:5vw; right:11vw; left:initial; bottom:initial;  } 
}



.slide--1 div.slide--1-div .name_company { width:150px; position: absolute; top:50%;left: 50%;transform: translate(-50%, -50%);font-size: 24px;line-height: 1.7em;color: #000;text-align: center;animation: 
  namecompanyFadeOut 1s ease forwards 2s;font-weight:normal; }
@keyframes namecompanyFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
  } 
@media (min-width:768px){
  .slide--1 div.slide--1-div .name_company { width:200px; top:50%; left: 50%;transform: translate(-50%, -50%); }
}


.slide--1 .name_company span { width:100%; text-align:center; display:inline-block; font-size:20px; }
.slide--1 .name_wrap { width:auto; height:auto; color:#fff; position:absolute; bottom:50px; left:5%; z-index:2; opacity:0; animation:name_wrapfadeIn 1s ease forwards 4.2s;}
@keyframes name_wrapfadeIn{to{opacity:1;}}
@media (min-width:768px){
  .slide--1 .name_wrap  { bottom:20vh; }
}

.slide--1 .name_wrap strong { width:100%; display:inline-block; font-size:24px; float:left; margin-bottom:10px;}
.slide--1 .name_wrap img { width:350px; }

.gamushara_tate_sp { position:absolute; right:2.5%; bottom:10%; display:block; }
@media screen and (min-width:768px) {
  .gamushara_tate_sp { display:none; }
}


/*獅子*/
.section.shishi { padding:0;  position:relative; background:#000; }
.section.shishi div { width:100%; height:100%; position:relative; }
.section.shishi .shishi.inline_sp { width:100%; height:auto; left:0; z-index:1; display:block; }
.section.shishi .shishi.inline_pc { display:none; }
@media screen and (min-width:768px) {
  .section.shishi  {  }
  .section.shishi div { height:auto; margin-bottom:80vh; }
  .section.shishi .shishi.inline_sp { display:none; }
  .section.shishi .shishi.inline_pc { width:60%; height:auto; position:absolute; left:0; z-index:1; display:block; }
}


.section.shishi div.text_wrap { width:90%; margin-top:-100px; margin-left:5%; z-index:2; top:0; font-size: 18px; }
@media screen and (min-width:768px) {
  .section.shishi div.text_wrap { width:55%; left:45%; top:80vh; margin-left:initial; font-size: 24px; }
}

.section.shishi div.text_wrap img { width:100%; margin-bottom:30px;  }
.section.shishi div.text_wrap p { width:100%; text-align:left; display:inline;line-height:2em; text-align:justify; }
@media screen and (min-width:768px) {
  .section.shishi div.text_wrap img { margin-top:0; margin-bottom:60px; }
  .section.shishi div.text_wrap p { display:inline-block; font-size:24px; margin-top:initial; }
}
.section.shishi div.text_wrap strong { width:100%; display:inline; text-align:left; line-height:1.7em; font-weight:bold; }
@media screen and (min-width:768px) {
  .section.shishi div.text_wrap strong { display:inline-block; font-size:40px;  margin:32px 0; }
}
.section.shishi.text_wrap {position: relative;z-index: 2;max-width: 50%;margin: 0 auto;padding: 3rem 2rem;}



/*20代で成功*/
.slide--2 { padding:0; /*height:100vh;*/ }
.slide--2 div  { width:100%; position:relative; /*overflow:visible;*/ }
.slide--2 div .success { width:100%; position:absolute; top:0; left:0; z-index:1; }
.slide--2 div .text_wrap { top:0; position:absolute; z-index:2; background: rgba(0, 0, 0, 0.5); }
.slide--2 div .text_wrap p { width:90%; margin-top:20px; margin-left:5%; }
.slide--2 div .text_wrap .text_sccess { width:50%; height:auto; position:absolute; top:5%; left:0; }
.slide--2 div .text_wrap .twentyth.inline_sp { width:60%; margin:120px auto 0 auto; display:block; } 
.slide--2 div .text_wrap .twentyth.inline_pc { display:none; }
@media screen and (min-width:768px) {
  .slide--2 { height:auto; }
  .slide--2 div  { width:100%; /*height:100%; */}
  .slide--2 div .text_wrap { height:100%; top:0; background: rgba(0, 0, 0, 0.5);}
  .slide--2 div .text_wrap .twentyth.inline_pc  { width:550px; /*height:90%;*/ left:0%; background:none; display:block; }
  .slide--2 div .text_wrap .twentyth.inline_sp { display:none; }
  .slide--2 div .text_wrap p { width:50%; margin-left:5%; margin-top:15%; margin-bottom:initial; position:absolute; top:0; }
  .slide--2 div.success_wrap { width:20vw; }
  .slide--2 div.success_wrap img { width:20%; float:left; }
}


.video_success {position: relative;display: block;overflow: hidden;}
.video_success::after {
  content: "";
  position: absolute;
  inset: 0; 
  background: rgba(0, 0, 0, 0.9); 
  mix-blend-mode: multiply;
  pointer-events: none; 
  z-index:10; 
}
@media screen and (max-width:768px) {
.video_success { width:150%; margin:0 -25%; /*height:50vh;*/ }
}


/*借金1億*/
@media screen and (max-width:768px) {
.slide--3 { margin-top:30vh; }
}
.slide--3 { padding:0; position:relative; }
.slide--3 div { width:100%; height:100%; position:relative; }


.slide--3 div .rain-wrap { position:relative; width:100%; height:100vh; overflow:hidden; position:absolute; top:0; }
.slide--3 div .rain { position:absolute; width:100%; height:100vh; object-fit:cover; }
.slide--3 div .rain-wrap::before { content:""; position:absolute; inset:0; pointer-events:none; backdrop-filter:grayscale(100%); -webkit-backdrop-filter:grayscale(100%); }
.slide--3::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,0); animation:darken 3s ease forwards; pointer-events:none; }
@keyframes darken { to { background:rgba(0,0,0,0.3); } }

.slide--3 div .text_wrap { width:90%; margin:-100px auto 0 auto; }
.slide--3 div .text_wrap img { width:50%; margin:0 auto; display:block; position:relative; z-index:1; }
.slide--3 div .text_wrap p { width:100%; margin:40px auto 0 auto; display:inline-block; text-shadow:0 2px 2px rgba(0,0,0,.50),0 6px 18px rgba(0,0,0,.50),0 12px 36px rgba(0,0,0,.50); position:relative; z-index:1; }
.slide--3 div video { height:50vh; }
@media screen and (min-width:768px) {
  .slide--3 div .text_wrap { width:100%; top:20vh; display:flex; align-items: center; position:absolute; z-index:5; left:initial; }
  .slide--3 div .text_wrap img { width:23%; float:left; margin:0 100px 0 0 }
  .slide--3 div .text_wrap p { width:auto; text-align:left; float:right; margin-top:20vw; margin-left:0;  }
  .slide--3 div video { height:initial; }
}


/*再生*/
.slide--4 { position:relative; }
.slide--4 strong { font-size:76px; margin-bottom:80px; display:block; }
.slide--4 p { width:90%; margin:0 auto; text-align:left; display:block; }
.slide--4 div .text_wrap h2 { width:100%; font-size:40px; text-align:center; margin-bottom:40px; letter-spacing:0.1em; }

.slide--4 .sparks { position:absolute; bottom:0; }
@media screen and (min-width:768px) {
  .slide--4 div { position:relative; }
  .slide--4 div .text_wrap{ width:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;text-align:center; margin-top:10%; position:relative; }
  .slide--4 div .text_wrap h2 { font-size:76px; margin-top:initial; margin-bottom:72px;  }
  .slide--4 div .text_wrap p { width:100%; font-size:24px; text-align:center; letter-spacing:0.1em; }
  .slide--4 .sparks { position:absolute; bottom:0; }
}
.slide--4 video { position:absolute; bottom:0; }

@media screen and (max-width:768px) {
  .slide--4 { margin:0 0 200px 0; height:initial; }
}



/*名古屋で一番に*/
.section.ichiban { height:auto; padding:0; background:#000; }
@media screen and (min-width:768px) {

}
.section.ichiban div  { width:100%; /*height:100%;*/ position:relative; margin:0 auto; }
.section.ichiban div .bg_ichiban.inline_sp { width:100%; height:auto;  position:absolute; right:0; bottom:0; display:block; }
.section.ichiban div .bg_ichiban.inline_pc { display:none; }
@media screen and (min-width:768px) {
  .section.ichiban div { margin-bottom:64px; }
  .section.ichiban div .bg_ichiban.inline_pc { width:auto; height:70%; right:0; bottom:5%; text-align: justify; display:block; position:absolute; }
  .section.ichiban div .bg_ichiban.inline_sp { display:none; }
}
.section.ichiban div .text_wrap { width:90%; left:var(--gutter);right:var(--gutter);width:auto; box-sizing:border-box;color:#fff; }
.section.ichiban div .text_wrap img { width:80%; margin-bottom:40px; }
@media screen and (min-width:768px) {
  .section.ichiban div .text_wrap { width:initial; }
  .section.ichiban div .text_wrap img { width:initial; margin-bottom:initial; }
}
.section.ichiban div .text_wrap .ichiban { width:90%; float:left; margin-bottom:50px; }
.section.ichiban div .text_wrap p { width:90%; text-align:left; color:#fff; text-align:justify; font-family:"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho","Noto Serif JP","Noto Serif CJK JP",serif; font-weight:bold; font-size:18px; text-align:justify; }
  .section.ichiban div .text_wrap strong { width:90%; margin:30px 0; text-align:left; font-weight:bold; font-size:28px; }
@media screen and (min-width:768px) {
  .section.ichiban div .text_wrap p { width:100%; font-size: 24px; }
  .section.ichiban div .text_wrap strong { width:100%; font-size:48px; margin:40px 0 20px 0;  }
}

.section.ichiban div .bg_ichiban  { 
  transition: opacity 2s ease 2s; /* ← 2s遅れて、2sかけて表示 */}
.section.ichiban div .bg_ichiban.is-visible {
  opacity: 1;
}

.section.ichiban .ichiban_text_photo { width:100%; margin-left:0;}
.section.ichiban .ichiban_text_photo .inline_sp { width:100%; }
@media screen and (min-width:768px) {
  .section.ichiban .ichiban_text_photo { width:99%; height:auto; display:flex; flex-wrap:wrap; justify-content: space-between;  margin-left:5%; }
}

.section.ichiban .ichiban_text_photo .inline_pc { width:100%; }
.section.ichiban .ichiban_text_photo p { width:90%; line-height:2em; margin:0 auto 40px auto; display:block; font-size:18px; }
@media screen and (min-width:768px) {
.section.ichiban .ichiban_text_photo .inline_pc { width:50%; }
.section.ichiban .ichiban_text_photo p { width:50%; font-size:24px; line-height:2em; margin-bottom:initial; }
.section.ichiban .ichiban_text_photo img { width:45%; margin-top:40px;}
.section.ichiban .reveal-img { margin-bottom:64px; }
}




.sparks {inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode: screen;  /* 黒背景を透かす */pointer-events:none;z-index:1; }




/*くすぶる火種*/
.slide--5 { padding:0; }
.slide--5 div  { width:100%;  position:relative; }
.slide--5 div .hidane { width:100%; object-fit:cover; position:absolute; top:0; left:0; z-index:1; }

.slide--5 div .text_wrap  { width:90%; margin:-200px 5% 0 5%; display:block; }
.slide--5 div .text_wrap p { width:100%; margin-top:80%; position:relative; z-index:3; font-size:18px; }
.slide--5 div #containerD {margin: 0;overflow: hidden;width: 100%;height: 480px; position:absolute; z-index:99; display: block; bottom:0; }
@media screen and (min-width:768px) {
  .slide--5 {  overflow:visible; }
  .slide--5 div { height:150vh; }
  .slide--5 div .hidane { height:100vh; }
  .slide--5 div .text_wrap { width:95%; position:absolute; left:5%; z-index:2; display:flex; justify-content: space-between; top:40%; margin:initial; }
  .slide--5 div .text_wrap p { width:76%; margin-top:10%; font-size:24px; }
  .slide--5 div #containerD {margin: 0;overflow: hidden;width: 100%;height: 480px;position:relative; z-index:99; display: block;}
}

.slide--5 div .text_wrap .kusuburu-seq{position:absolute;aspect-ratio: 3 / 1; right:0vw; height:30vh;z-index:3; padding:200px 0 0 0; }
@media screen and (min-width:768px) {
.slide--5 div .text_wrap .kusuburu-seq  { height:30vw; right:-32vw; } 
}
.kusuburu-seq img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;                 /* 高さも合わせる */
  object-fit: contain;
  opacity: 0;
}

/* スクロールで .is-active が付いたら順番に表示 */
.kusuburu-seq.is-active img {
  animation: fadeInSeq 0.2s ease forwards;
}

.kusuburu-seq.is-active img:nth-child(1) { animation-delay: 0s; }
.kusuburu-seq.is-active img:nth-child(2) { animation-delay: 0.075s; }
.kusuburu-seq.is-active img:nth-child(3) { animation-delay: 0.15s; }
.kusuburu-seq.is-active img:nth-child(4) { animation-delay: 0.225s; }
.kusuburu-seq.is-active img:nth-child(5) { animation-delay: 0.4s; }
.kusuburu-seq.is-active img:nth-child(6) { animation-delay: 0.6s; }

@keyframes fadeInSeq {
  0% { opacity: 0; }
  100% { opacity: 1; }
}




/*君は*/
.slide--6 { padding:0; }
.slide--6 div  { width:100%; height:100%; position:relative; }
.pane.pane-a .kimi  { width:20%; position:absolute; z-index:2; left:50%; top:10%;  transform:translateX(-50%);}
@media screen and (min-width:768px) {
  .pane.pane-a .kimi { width:185px; height:auto; }
}

/*ひと花咲かす*/
.slide--7 div {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  color:#fff;
}


/* ラッパー：スクロール量を作る（heightはJSでdata-flowからも可） */
.swap{
  position: relative;
  height: 220vh; /* data-flowと揃える。増減で切替の尺を調整 */
  overflow: clip;
}

/* キャンバス：常に100vhに張り付き */
.swap .pin{
  position: sticky;
  top: 0;
  width:100%; 
  height: 100vh;
  display: grid;
  place-items: center;
  isolation: isolate; /* blendするときに有利 */
}

.swap .pane{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(4vh);
  transition: opacity .4s linear, transform .4s ease; /* フォールバック用 */
  will-change: opacity, transform;
}

.swap .pane-a,
.swap .pane-b{
  padding-inline: clamp(16px, 6vw, 80px);
}

.swap .pane-b p{
  max-width: 900px;
  font-size: 18px;
  line-height: 1.9;
  text-align: center; 
}

@media screen and (min-width:768px) {
  .swap .pane-b p{ font-size: 24px; }
}

@media (prefers-reduced-motion: reduce){
  .swap .pane{ transform: none !important; transition: none !important; }
}










/*ひと花咲かす*/
.slide--7 div {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  color:#fff;
}


.slide--7 div p { width:90%; font-size:24px; text-align:left;text-align:justify; position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); } 
@media screen and (min-width:768px) {
.slide--7 div p {
  width:100%; 
  
  text-align: center;
  margin:initial;
  font-size: 32px;
  line-height: 2em;
  color: #fff; 
  z-index: 2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 1);
}
}

/* セクション自体は200vh：前半＝画像、後半＝テキスト */
.slide--6{
  position: relative;
  min-height: 200vh;               /* ← ここで“1ビュー内での切替”の尺を作る */
  scroll-snap-align: start;        /* 他のスライドと同じく先頭でスナップ */
  overflow: visible;
}

/* 中の表示枠は100vhで貼り付け */
.slide--6 .pin{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* レイヤー（重ねてフェードを切替） */
.slide--6 .layer{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--gutter,24px);
  opacity: 0;
  transition: opacity .8s ease;
}

/* 表示状態 */
.slide--6 .layer.is-show{ opacity: 1; }

/* 見た目の微調整例 */
.slide--6 .kimi{ /* 画像側のサイズ調整などあればここに */ }
.slide--6 .fade-text{
  max-width: 38em;
  line-height: 1.9;
  text-align: center;
  color: #fff;
}

/* 余白は高さだけあればOK */
.slide--6 .spacer{ height: 100vh; }


/*新卒1期生募集*/
.slide--8 { padding:0; }
.slide--8 div  { width:100%; position:relative; }
.slide--8 div .taiyo{ display:none; }
@media screen and (min-width:768px) {
  .slide--8 div .taiyo{ width:100%;position:absolute;bottom:0;opacity:0;transition: opacity 2s ease;z-index:1;bottom:0; display:block; }
  .slide--8 div { height:auto; }
}
.slide--8 div .taiyo.is-visible {opacity:0.2;}
.slide--8 div .boshu { width:80%; margin:100px auto 100px auto; display:block; position:relative; z-index:10; }
.slide--8 div .taiyo_people.inline_sp { width:100%; position:absolute; bottom:0; z-index:6; display:block; }
.slide--8 div .taiyo_people.inline_pc { display:none; }
@media screen and (min-width:768px) {
  .slide--8 { height:60vh; }
  .slide--8 div .boshu { width:40%; margin:5% auto 0 auto; display:block; position:relative; z-index:5; }
  .slide--8 div .taiyo_people.inline_sp { display:none; }
  .slide--8 div .taiyo_people.inline_pc { width:100%; position:absolute; bottom:0; z-index:6; display:block; }
}




@media screen and (min-width:768px) {
.slide--8 div .number-seq {position: relative;width: 1055px;height: 430px; margin:100px auto 0 auto; }
.slide--8 div .number-seq img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.slide--8 div .number-seq img.show {
  opacity: 1;
}
}


/* slide--8 の土台 */
.slide--8{ position: relative; }
.slide--8 .pin{
  position: sticky; top:0; height:100vh;
  display:grid; place-items:center; overflow:hidden;
}

/* 背景：全画面で下層 */
.slide--8 .bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.slide--8 .bg video,
.slide--8 .bg img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}

/* 文字：最終サイズは画面幅の約70% */
.slide--8 .boom-target{
  position:relative; z-index:2;
  width:min(70vw, 1200px); /* ←ここが“最終サイズ” */
}
.slide--8 .boom-target img{
  display:block; width:100%; height:auto;
  transform-origin:50% 50%;
  will-change: transform, filter;
}

/* フェールセーフ（動き苦手な人） */
@media (prefers-reduced-motion: reduce){
  .slide--8{ height:auto; }
  .slide--8 .pin{ position:relative; height:auto; }
  .slide--8 .boom-target img{ transform:none !important; filter:none !important; }
}





.gap {
  height:20vh;  
}
@media screen and (min-width:768px) {
.gap {
  height:40vh;  
  scroll-snap-align: none;
}
}



/*大きな文字のアニメーション*/
.reveal-wrap{ position:relative; display:inline-block; overflow:hidden; background:#000; }
.reveal-img{ display:block; height:auto; max-width:100%; }
.reveal-wrap{ position:relative; display:inline-block; overflow:hidden; background:#000; }
.reveal-img{ display:block; height:auto; max-width:100%; }

/* 初期：黒板が全面を覆う（アニメなし） */
.cover{
  position:absolute; inset:0;
  background:linear-gradient(to right, rgba(0,0,0,1) 0 94%, rgba(0,0,0,0) 100%);
  transform:translateX(0%);
  will-change: transform;
}

/* 画面に入ったらだけ動く 4秒かけて再生*/
.reveal-wrap.is-visible .cover{
  animation: sweep 3s cubic-bezier(.2,.7,.1,1) forwards .2s;
}

@keyframes sweep{ to{ transform:translateX(110%); } }

/* 動きを好まない人には、結果だけ見せる */
@media (prefers-reduced-motion: reduce){
  .reveal-wrap.is-visible .cover{ animation:none; transform:translateX(110%); }
  
}

/*透明マスク*/
.reveal-mask {
  display:inline-block;
  --w: 0%;
  --feather: 6%;
  --duration: 1.4s;
  --delay: .2s;

  -webkit-mask-image: linear-gradient(to right,
      rgba(255,255,255,1) 0 calc(100% - var(--feather)),
      rgba(255,255,255,0) 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  -webkit-mask-size: var(--w) 100%;

          mask-image: linear-gradient(to right,
      rgba(255,255,255,1) 0 calc(100% - var(--feather)),
      rgba(255,255,255,0) 100%);
  mask-repeat: no-repeat;
  mask-position: left center;
  mask-size: var(--w) 100%;
  will-change: mask-size;
}

/* スクロールで可視になったらアニメ */
.reveal-mask.is-visible {
  animation: maskGrow var(--duration) cubic-bezier(.2,.7,.1,1) forwards var(--delay);
}
@keyframes maskGrow {
  to { --w: 110%; }
}


.sticky { position: sticky; top: 0;}