@charset "utf-8";
/*----------------------アニメーション-------------------------------------------------
------------------------------------------------------------------------------------*/
@media screen and (min-width: 768px) {
.effect-fade.fade-in{
  -webkit-animation-fill-mode:both;
  -ms-animation-fill-mode:both;
  animation-fill-mode:both;
  -webkit-animation-duration:2s;
  -ms-animation-duration:2s;
  animation-duration:2s;
  -webkit-animation-name:fid;
  animation-name:fid;
  visibility:visible !important;
}
@-webkit-keyframes fid{
  0%{
    opacity:0;
    -webkit-transform:translateY(-20px);
  }
  100%{
    opacity:1;
    -webkit-transform:translateY(0);
  }
}
@keyframes fid{
  0%{
    opacity:0;
    -webkit-transform:translateY(-20px);
    -ms-transform:translateY(-20px);
    transform:translateY(-20px);
  }
  100%{
    opacity:1;
    -webkit-transform:translateY(0);
    -ms-transform:translateY(0);
    transform:translateY(0);
  }
}

.anim-box.slidein.is-animated{
  animation:slideIn 2s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes slideIn{
  0%{
    transform:translateX(180px);
    opacity:0;
  }
  100%{
    transform:translateX(0);
  }
  40%,100%{
    opacity:1;
  }
}
/*----scroll-animation fadein-----*/
.fadein{
  -webkit-transition: all 2s ease-out;
  -o-transition: all 2s ease-out;
  transition: all 2s ease-out;
  opacity: 0;
}
.fadein.active{
  opacity: 1;
}

/*----下からフェードイン-scroll-animation fadein-bottom----*/
.fadein-bottom{
  -webkit-transition: all .7s ease-out;
  -o-transition: all .7s ease-out;
  transition: all .7s ease-out;
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
  opacity: 0;
}
.fadein-bottom.active{
  -webkit-transform: translateY(0%);
  -moz-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
  opacity: 1;
}
/*----下からフェードイン-scroll-animation fadein-bottom----*/
.fadein-center{
  -webkit-transition: all 1.1s ease-out;
  -o-transition: all 1.1s ease-out;
  transition: all 1.1s ease-out;
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
  opacity: 0;
}
.fadein-center.active{
  -webkit-transform: translateY(0%);
  -moz-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
  opacity: 1;
}
/*----左からフェードイン-scroll-animation fadein-left----*/
.fadein-left{
  -webkit-transition: all 1.1s ease-out;
  -o-transition: all 1.1s ease-out;
  transition: all 1.1s ease-out;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  opacity: 0;
}
.fadein-left.active{
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}

/*----遅れて左からフェードイン-scroll-animation fadein-rightdelay----*/
.fadein-leftdelay{
  transition: all 1.1s ease-out;
  transition-delay: .5s;
  transform: translateX(-300%);
  opacity: 1;
}
.fadein-leftdelay.active{
  transform: translateX(0%);
  opacity: 1;
}
/*----右からフェードイン-scroll-animation fadein-right----*/
.fadein-right{
  -webkit-transition: all 1.1s ease-out;
  -o-transition: all 1.1s ease-out;
  transition: all 1.1s ease-out;
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  opacity: 0;
}
.fadein-right.active{
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}

/*----遅れて右からフェードイン-scroll-animation fadein-rightdelay----*/
.fadein-rightdelay{
  transition: all 1.1s ease-out;
  transition-delay: .5s;
  transform: translateX(300%);
  opacity: 1;
}
.fadein-rightdelay.active{
  transform: translateX(0%);
  opacity: 1;
}
/*----1ブロック----*/
.block01 .block01-list:nth-child(odd) .fadein-img{
  -webkit-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transition: all 1s ease-out;
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  opacity: 0;
}
.block01 .block01-list:nth-child(even) .fadein-img{
  -webkit-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transition: all 1s ease-out;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  opacity: 0;
}
.block01 .block01-list .fadein-img.active{
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}
.block01 .block01-list:nth-child(odd) .fadein-set{
  -webkit-transition: all 1.1s ease-out;
  -o-transition: all 1.1s ease-out;
  transition: all 1.1s ease-out;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  opacity: 0;
}
.block01 .block01-list:nth-child(even) .fadein-set{
  -webkit-transition: all 1.1s ease-out;
  -o-transition: all 1.1s ease-out;
  transition: all 1.1s ease-out;
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  opacity: 0;
}
.block01 .block01-list .fadein-set.active{
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}

section.layoutsub:first-child .fadein{opacity:1;}
section.layoutsub:first-child .fadein-bottom,section:first-child .fadein-right,section:first-child .fadein-left
{-webkit-transform: translateY(0);-moz-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);opacity: 1;}

}


/*========= ふわっと系アニメーション（Apple風・跳ねない・2026-07-01）=========
  .scroll-animation + .fadein-{type} → スクロールで .active 付与。
  トレンドに合わせ“ふわっと”に統一（スプリング無し・滑らかな ease-out）。
  共通イージング: cubic-bezier(.22,.61,.36,1)。選択肢は none/soft/up/left/right/zoom。 */

/* ふわっと（Apple風・フェード＋ゆるやかに上へ）★既定
   blur はテキスト/細かい画像で滲んで汚く見えるため不使用（Apple も実質フェード＋微移動）。 */
.fadein-soft{transition:opacity 1.1s ease-out,transform 1.1s cubic-bezier(.22,.61,.36,1);transform:translateY(38px);opacity:0;will-change:opacity,transform;}
.fadein-soft.active{transform:translateY(0);opacity:1;}

/* 下から（少し大きめ・強調用） */
.fadein-up{transition:opacity 1s ease-out,transform 1s cubic-bezier(.22,.61,.36,1);transform:translateY(64px);opacity:0;}
.fadein-up.active{transform:translateY(0);opacity:1;}

/* ズームイン（上品なポップ・跳ね無し） */
.fadein-zoom{transition:opacity .9s ease-out,transform .9s cubic-bezier(.22,.61,.36,1);transform:scale(.92);opacity:0;}
.fadein-zoom.active{transform:scale(1);opacity:1;}

/* 左/右からふわっと（レガシーの大きいスライドを上書きして控えめに） */
.fadein-left{transition:opacity 1s ease-out,transform 1s cubic-bezier(.22,.61,.36,1);transform:translateX(-48px);opacity:0;}
.fadein-left.active{transform:translateX(0);opacity:1;}
.fadein-right{transition:opacity 1s ease-out,transform 1s cubic-bezier(.22,.61,.36,1);transform:translateX(48px);opacity:0;}
.fadein-right.active{transform:translateX(0);opacity:1;}

/*----col_content個別アニメ 追加タイプ（UNITE https://unite.yapp.li 実測・2026-08-01）
    既存の fadein-soft/up/zoom/left/right(ふわっと系)は温存。ここは「大きく/斜め/ぽよよん/線」＝UNITE実測値(200-300px・scale0＋バウンス・scaleX0) */
.fadein-fade{transition:opacity 1s ease;opacity:0;}
.fadein-fade.active{opacity:1;}
.fadein-up-big{transition:opacity .8s ease,transform .8s ease;transform:translateY(250px);opacity:0;}
.fadein-up-big.active{transform:none;opacity:1;}
.fadein-slide-l{transition:opacity 1s ease,transform 1s ease;transform:translateX(-200px);opacity:0;}
.fadein-slide-l.active{transform:none;opacity:1;}
.fadein-slide-r{transition:opacity 1s ease,transform 1s ease;transform:translateX(200px);opacity:0;}
.fadein-slide-r.active{transform:none;opacity:1;}
.fadein-diag-l{transition:opacity .8s ease,transform .8s ease;transform:translate(-300px,100px);opacity:0;}
.fadein-diag-l.active{transform:none;opacity:1;}
.fadein-diag-r{transition:opacity .8s ease,transform .8s ease;transform:translate(300px,100px);opacity:0;}
.fadein-diag-r.active{transform:none;opacity:1;}
.fadein-zoom-pop{transition:opacity .5s ease,transform .8s cubic-bezier(.34,1.56,.64,1);transform:scale(0);opacity:0;}
.fadein-zoom-pop.active{transform:scale(1);opacity:1;}
.fadein-line{transition:transform 1s cubic-bezier(.22,.61,.36,1);transform:scaleX(0);transform-origin:left center;}
.fadein-line.active{transform:scaleX(1);}

/*----ブロック葉の float 縦積み保証（2026-08-01・T33系）----
    葉(cc-reveal)の前が float 部品(link-list/req-table等)だと、後続の葉が clear されず
    透明ボックスが float の上に広がりクリックを奪う（実例: h3がリンク一覧を356px覆って遷移不能）。
    cc-reveal はキットが葉にだけ自動付与するクラス＝影響範囲は葉に限定。 */
.cc-reveal{clear:both;}