@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 .modeNM {}/*ノーマル*/
.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;}    /*スクリーン*/
.animation .modeMP, .animation .modeMP img {mix-blend-mode: multiply;}    /*乗算*/

.animation .modeCD, .animation .modeCD img {mix-blend-mode: color-dodge;}    /*焼き込み*/
.animation .modeCL, .animation .modeCL img {mix-blend-mode: color;}    /*カラー*/

.animation .modeCD, .animation img.modeCD {mix-blend-mode: color-dodge;}    /*焼き込み*/
.animation .modePL, .animation img.modePL {mix-blend-mode: plus-lighter;}    /*焼き込み*/



.mainImg .animation img.base{
    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:15.57%; height:69.99%; top: 43.4%; left: 60.1%;}
.ani___pillar  {width:15.57%; height:48.89%; top: 43.5%; left: 60.2%;}
.ani___road    {width:99.48%; height:52.13%; bottom: 0; left: 0%;}
.ani___station {width: 9.6%; top: 56.74%; left: 24.6%;}

.ani___area_momo   {width:15.94%; top: 32.8%; left: 16.4%;}
.ani___area_tenjin {width:10.47%; top: 33.5%; left: 55.8%;}
.ani___area_ring_tenjin {width: 15.7%; top: 43.9%; left: 53.2%;}
.ani___area_ring_momo   {width: 18.6%; top: 44.4%; left: 15.1%;}

.ani___tag_aeon     {width: 10.43%; top: 55.5%; left: 19.1%;}
/*.ani___tag_maru     {width:1.93%; top: 43.6%; left: 32.5%;}*/
.ani___tag_hospital {width: 10.73%; top: 48.8%; left: 68.7%;}
.ani___tag_univ     {width: 8.83%; top: 45.6%; left: 85.1%;}
.ani___tag_park     {width:10.52%; top: 49.8%; left: 48.2%;}
.ani___tag_station  {width:10.52%; top: 61%; left: 18.1%;}

.ani___read {width:43.85%; top: 6.5%; left: 50.6%;}
.ani___copy {width:41.56%; top: 13.1%; left: 4.5%;}
.ani___new  {width:8.18%; top: 3.8%; left: 2.4%;}
.ani___logo {width:4.79%; top: 2.5%; left: 93.6%;}
}
@media screen and (max-width: 767px) {
.mainImg .animation { background-image:url(../../images/top/ani/layout_sp.webp);}/**/

.ani___ground  {width: 23.89%; top: 55.1%; left: 57.1%;}
.ani___pillar  {width: 23.89%; height: 28.64%; top: 55.2%; left: 57.1%;}
.ani___road    {width: 100%; height: 42.18%; bottom: 0; left: 0;}
.ani___station {width: 14.22%; top: 63.04%; left: 5.2%;}

.ani___area_momo,
.ani___area_ring_momo   {display:none;}

.ani___area_tenjin      {width: 15.53%; top: 49.5%; left: 51.3%;}
.ani___area_ring_tenjin {width: 23.29%; top: 55.6%; left: 47.7%;}

.ani___tag_aeon     {width: 2.81%; top: 53.5%; left: 11.2%;}
.ani___tag_maru     {width: 2.81%; top: 55.4%; left: 17.9%;}
.ani___tag_hospital {width: 2.8%; top: 49.8%; left: 86.4%;}
.ani___tag_univ     {width: 2.85%; top: 50.2%; left: 95%;}
.ani___tag_park     {width: 15.54%; top: 59.1%;left: 40.3%;}
.ani___tag_station  {width: 15.54%; top: 66%; left: 14%;}

.ani___read {width:93.11%; top: 22.1%; left: 3.1%;}
.ani___copy {width: 71.67%; top: 8.2%; left: 14.1%;}
.ani___new  {width: 12.1%; top: 2.2%; left: 5.7%;}
.ani___logo {width: 7.12%; top: 1.5%; left: 91.4%;}
}

/* マスク要素 */
.ani___pillar img {
    mask:url("../../images/top/ani/mask_pillar.png") no-repeat 0 0;
    mask-size:100% 200%;
    mask-position:0 -100%;
    -webkit-mask:url("../../images/top/ani/mask_pillar.png") no-repeat 0 0;
    -webkit-mask-size:100% 200%;
    -webkit-mask-position:0 -100%;
}
.ani___road img {
    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%;
}


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

@keyframes PillarIn {
    0%   {mask-position: 0 -100%; -webkit-mask-position: 0 -100%;}
    100% {mask-position: 0   40%; -webkit-mask-position: 0   40%;}
}
@keyframes RoadIn {
    0%   {mask-position: 0 -100%; -webkit-mask-position: 0 -100%;}
    100% {mask-position: 0   40%; -webkit-mask-position: 0   40%;}
}

@keyframes glow {
    0%   {opacity: 0.90;}
    10%  {opacity: 0.85;}
    20%  {opacity: 0.90;}
    30%  {opacity: 0.77;}
    40%  {opacity: 0.90;}
    60%  {opacity: 0.87;}
    80%  {opacity: 0.90;}
    100% {opacity: 0.83;}
}
@keyframes tagIn {
    0%   {opacity:0; transform:translateY(1.2%);}
    35%  {opacity:1; transform:translateY(-1.5%);}
    100% {opacity:1; transform:translateY(0%);}
}
@keyframes FadeIn {
  0%   {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes CircleIn {
  0%   {transform:scale(0,0); opacity:0;}
  90%  {opacity:0.5;}
  100% {transform:scale(1,1); opacity:0.8;}
}
@keyframes CopyIn {
  0%   {opacity: 0; filter: blur(20px);}
  100% {opacity: 1; filter: blur(0);}
}

.animation.action .base {animation:FadeIn 1.5s ease-in-out 0.1s forwards;}

.animation.action .ani___road img {animation:RoadIn 1.75s ease-out 1.00s forwards;}

.animation.action .ani___station img {animation:FadeIn 2.5s ease-in-out 1.5s forwards}

.animation.action .ani___ground {animation:FadeIn 2.5s ease-in-out 1.00s forwards;}
.animation.action .ani___pillar img {animation:PillarIn 2.75s ease-out 1.50s forwards, glow 0.3s linear 0.1s infinite;;}

.animation.action .ani___area_ring_tenjin {animation:CircleIn 1.20s ease-out 2.50s forwards;}
.animation.action .ani___area_ring_momo   {animation:CircleIn 1.20s ease-out 2.50s forwards;}

.animation.action .ani___area_momo        {animation:tagIn 2.00s ease-in-out 3.50s forwards;}
.animation.action .ani___area_tenjin      {animation:tagIn 2.00s ease-in-out 3.50s forwards;}

.animation.action .ani___label_gojost {animation:tagIn 2.00s ease-in-out 4.50s forwards;}

/*.animation.action .ani___tag_maru     {animation:tagIn 1.00s ease-in-out 4.50s forwards;}*/
.animation.action .ani___tag_hospital {animation:FadeIn 0.80s ease-in-out 4.50s forwards;}
.animation.action .ani___tag_univ     {animation:FadeIn 0.80s ease-in-out 4.60s forwards;}
.animation.action .ani___tag_aeon     {animation:FadeIn 0.80s ease-in-out 4.70s forwards;}
.animation.action .ani___tag_park     {animation:FadeIn 0.80s ease-in-out 4.80s forwards;}
.animation.action .ani___tag_station  {animation:FadeIn 0.80s ease-in-out 4.90s forwards;}

.animation.action .ani___copy {animation:CopyIn 2.0s ease-in-out 6.00s forwards;}
.animation.action .ani___read {animation:CopyIn 2.0s ease-in-out 6.25s forwards;}
.animation.action .ani___new  {animation:FadeIn 2.0s ease-in-out 7.00s forwards;}
.animation.action .ani___logo {animation:FadeIn 2.0s ease-in-out 7.00s forwards;}






/* end */