@charset "UTF-8";
/* ######################################################################################

　トップアニメーション

###################################################################################### */
/* ====================================================
  ベース
==================================================== */
.animation {
    background-position:center;
    background-repeat:no-repeat;
    background-color:#000;
    background-size:contain;
    position:relative;
    overflow:hidden;
    font-size:0;
}
.animation img {vertical-align:bottom;}
.animation *[class*="ani___"]{position:absolute;}
.animation *[class*="ani___"] *[class*="ani___"] {top:0; left:0; width:100%;}

.ani___pillar img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:auto;
}
.animation .modeNO {}/*ノーマル*/
.animation .modeOL, .animation .modeOL img {mix-blend-mode:overlay;}    /*オーバーレイ*/
.animation .modeSL, .animation .modeSL img {mix-blend-mode: soft-light;}/*ソフトライト*/
.animation .modeSC, .animation .modeSC img {mix-blend-mode: screen;}    /*スクリーン*/

.mainImg .animation img.base{/*opacity:0 !important;*/
    display:block;
    width:100%;
    height:auto;
}

@media print, screen and (min-width: 768px) {
/*.mainImg .animation { background-image:url(images/top/ani/layout_pc.webp);}*/

.ani___ground { width:20.57%; height:30.83%; top: 47.5%;  left: 9.1%;}
.ani___pillar { width:6.67%;  height:73.61%; top: 3.4%;     left: 15.7%;}
.ani___light  { width:59.11%;   height:91.75%; top:0;      left:0; }
.ani___road   { width:62.96%; height:67.22%; top: 35.2%; left: 21.1%; }

.ani___tag_jingu { width:8.70%;  top: 26.3%; left: 32.6%; }
.ani___tag_nhk   { width:12.50%; top: 36.5%; left: 48%; }
.ani___tag_torii { width:12.50%; top: 76%;   left: 36.5%;}

.ani___read    { width:31.34%; top:67.8%; left: 64.1%;}
.ani___new     { width: 6.30%; top: 3.9%; left: 14.9%;}
.ani___logo    { width:10.63%; top: 2.6%; left: 2.5%;}
.ani___copy    { width: 8.09%; top: 14.7%;left: 73.1%;}
.ani___mohitsu { width:15.54%; top:11.8%; left: 9.7%;}
}
@media screen and (max-width: 767px) {
/*.mainImg .animation { background-image:url(images/top/ani/layout_sp.webp);}*/

.ani___ground { width:28.00%; height:22.44%; top: 57.9%; left: 0%;}
.ani___pillar { width:10.67%; height:79.44%; top: 0%;    left: 5.6%;}
.ani___light  { width:100%;   height:86.00%; top:0;      left:0; }
.ani___road   { width:86.00%; height:50.27%; top: 49.8%; left: 13.4%;}

.ani___tag_jingu { width:18.56%; top: 44%;   left: 29%;}
.ani___tag_nhk   { width:26.67%; top: 51.5%; left: 57.5%;}
.ani___tag_torii { width:26.67%; top: 81.9%; left: 36.2%;}

.ani___read    { width:59.39%; top: 17.4%; left: 34.6%;}
.ani___new     { width:13.44%; top: 3.9%;  left: 29.7%;}
.ani___logo    { width:22.67%; top: 2.5%;  left: 3.2%;}
.ani___copy    { width:58.32%; top: 10.9%; left: 34.3%;}
.ani___mohitsu { width:27.69%; top: 29.8%; left: 0%;}
}

/* マスク要素 */
.ani___pillar {
    mask:url("../../images/top/ani/mask_pillar.png") no-repeat 0 0;
    mask-size:100% 200%;
    mask-position:0 -70%;
    -webkit-mask:url("../../images/top/ani/mask_pillar.png") no-repeat 0 0;
    -webkit-mask-size:100% 200%;
    -webkit-mask-position:0 -70%;
}
.ani___road {
    mask:url("../../images/top/ani/mask_road.png") no-repeat 0 0;
    mask-size:100% 200%;
    mask-position:0 -100%;
    -webkit-mask:url("../../images/top/ani/mask_road.png") no-repeat 0 0;
    -webkit-mask-size:100% 200%;
    -webkit-mask-position:0 -100%;
}
.ani___light {
    mask:url("../../images/top/ani/mask_light.png") no-repeat 0 0;
    mask-size:100% 200%;
    mask-position:0 200%;
    -webkit-mask:url("../../images/top/ani/mask_light.png") no-repeat 0 0;
    -webkit-mask-size:100% 200%;
    -webkit-mask-position:0 200%;
}





/* 初期状態 */
.base,
.ani___ground,
.ani___tag,
.ani___copy,
.ani___read,
.ani___new,
.ani___logo,
.ani___mohitsu {opacity:0;}

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

@keyframes BaseIn {
  0%   {opacity: 0;}
  5%   {opacity: 0.5;}
  50%  {opacity: 0.5;}
  100% {opacity: 1;}
}
@keyframes LightIn {
    0%   {mask-position: 0 200%; -webkit-mask-position: 0 200%;}
    100% {mask-position: 0    0; -webkit-mask-position: 0 0;}
}
@keyframes PillarIn {
    0%   {mask-position: 0 -70%; -webkit-mask-position: 0 -70%;}
    100% {mask-position: 0 20%; -webkit-mask-position: 0 20%;}
}
@keyframes RoadIn {
    0%   {mask-position: 0 -100%; -webkit-mask-position: 0 -100%;}
    100% {mask-position: 0   20%; -webkit-mask-position: 0 20%;}
}
@keyframes glow {
    0%   {opacity: 0.90;}
    10%  {opacity: 0.80;}
    20%  {opacity: 0.90;}
    30%  {opacity: 0.75;}
    40%  {opacity: 0.90;}
    60%  {opacity: 0.85;}
    80%  {opacity: 0.90;}
    100% {opacity: 0.80;}
}

@keyframes tagIn {
    0%   {opacity:0; transform:translateY(1.2%);}
    35%  {opacity:1; transform:translateY(-1.5%);}
    100% {opacity:1; transform:translateY(0%);}
}
@keyframes CopyIn {
  0%   {opacity: 0; filter: blur(20px);}
  100% {opacity: 1; filter: blur(0);}
}


.animation.action .base {animation:BaseIn 6.0s linear 0.1s forwards;}

.animation.action .ani___light      {animation:LightIn 6.0s ease-out 1.5s forwards;}

.animation.action .ani___ground    {animation:FadeIn 2.2s ease-in-out 2.5s forwards;}

.animation.action .ani___road      {animation:RoadIn 2.0s cubic-bezier(0.48, 0.1, 1, 0.61) 3.5s forwards;}

.animation.action .ani___pillar      {animation:PillarIn 1.5s cubic-bezier(0.35, 0.1, 0.86, 0.2) 4.5s forwards;}
.animation.action .ani___pillar1_SL,
.animation.action .ani___pillar2_OL  {animation: glow 0.3s linear 0.1s infinite;}

.animation.action .ani___read    {animation:CopyIn 1.5s ease-in-out 6.00s forwards;}
.animation.action .ani___copy    {animation:CopyIn 1.5s ease-in-out 6.50s forwards;}
.animation.action .ani___mohitsu {animation:CopyIn 1.5s ease-in-out 7.00s forwards;}

.animation.action .ani___tag_jingu {animation:FadeIn 2.0s ease-in-out 7.5s forwards;}
.animation.action .ani___tag_nhk   {animation:FadeIn 2.0s ease-in-out 7.5s forwards;}
.animation.action .ani___tag_torii {animation:FadeIn 2.0s ease-in-out 7.5s forwards;}

.animation.action .ani___logo    {animation:CopyIn 1.5s ease-in-out 8.0s forwards;}
.animation.action .ani___new     {animation:CopyIn 1.5s ease-in-out 8.0s forwards;}


/* end */