@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 img[class*="ani___"]{position:absolute;}
.ani___pillar img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:auto;
}
.animation .modeNO {}/*ノーマル*/
.animation .modeOL {mix-blend-mode:overlay;}/*オーバーレイ*/

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

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

.ani___pillar01_OL,
.ani___pillar { position: absolute; left:64.3%; width:18.1770%; height:95.7585%;}

.ani___pillar01_OL {top:0.0%;}
.ani___pillar      {top:1.9%;}

.ani___cloudL       {width:47.7604%; top:33.6%; left:0;}
.ani___cloudR       {width:35.5208%; top:0;    right:0;}
.ani___new          {width:10.0000%; top:4.4%; left:2%;}
.ani___logo_gojo    {width:7.08333%; top:4.4%; left:90.6%;}

.ani___rin          {width:12.2395%; top:11.9%; left:44%;}

.ani___copy         {width:18.4375%; top:32.5%; left:64.3%;}
.ani___read         {width:28.6979%; top:49.7%; left:1.2%;}

.ani___label_gojost {width:2.2395%; top:55.8%; left:41%;}
.ani___label_museum {width:10.156%; top:30%; left:74%;}
.ani___label_school {width:9.2708%; top:48.6%; left:83.8%;}
.ani___label_tenma  {width:9.2708%; top:33.5%; left:53%;}
.ani___3min         {width:35.468%; top:82.5%; left:1.2%;}

}
@media screen and (max-width: 767px) {
/*.mainImg .animation { background-image:url(../../images/top_ani/layout_sp.png);}*/

.ani___pillar01_OL,
.ani___pillar { position: absolute; top:-4.1%; left:49.877%; width:32.6666%; height:58.9651%;}

.ani___cloudL       {width:100%;     top:47.7%; left:0;}
.ani___cloudR       {width:45.2222%; top:0;    right:0;}
.ani___new          {width:18.6666%; top:1.5%;  left:2.5%;}
.ani___logo_gojo    {width:11.5555%; top:0.9%;  left:87.4%;}

.ani___rin          {width:22.88888%; top:1.9%; left:38.6%;}

.ani___copy         {width:39.33333%; top:11.6%;  left:46.2%;}
.ani___read         {width:89.90000%; top:67.2%; left:5.1%;}

.ani___label_gojost {width:4.777777%; top:28.3%; left:8.6%;}
.ani___label_museum {width:21.66666%; top:14%;   left:66.2%;}
.ani___label_school {width:19.77777%; top:27%; left:79.2%;}
.ani___label_tenma  {width:19.77777%; top:16.4%; left:30.4%;}
.ani___3min         {width:88.33333%; top:53.7%; left:5.8%;}

}

.ani___pillar {
    mask:url("../../images/top_ani/ani___mask_pillar.png") no-repeat 0 0;
    mask-size:100% 200%;
    mask-position:0 -100%;
    -webkit-mask:url("../../images/top_ani/ani___mask_pillar.png") no-repeat 0 0;
    -webkit-mask-size:100% 200%;
    -webkit-mask-position:0 -100%;
}

/* 初期状態 */
.base,
.ani___pillar01_OL,
.ani___label,
.ani___copy,
.ani___read,
.ani___new,
.ani___cloud,
.ani___logo_gojo,
.ani___rin,
.ani___3min {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 glow {
    0%   {opacity: 0.90;}
    10%  {opacity: 0.80;}
    20%  {opacity: 0.90;}
    30%  {opacity: 0.80;}
    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 FadeIn {
  0%   {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes CopyIn {
  0%   {opacity: 0; filter: blur(20px);}
  100% {opacity: 1; filter: blur(0);}
}
@keyframes cloudL {
    0%   {opacity:0; transform:translateX(-10%);}
    70% {opacity:1;}
    100% {opacity:1; transform:translateY(0%);}
}
@keyframes cloudR {
    0%   {opacity:0; transform:translateX(10%);}
    70% {opacity:1;}
    100% {opacity:1; transform:translateY(0%);}
}

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

.animation.action .ani___label_gojost {animation:tagIn 2.00s ease-in-out 1.20s forwards;}
.animation.action .ani___label_museum {animation:tagIn 1.20s ease-in-out 2.50s forwards;}
.animation.action .ani___label_school {animation:tagIn 1.20s ease-in-out 2.80s forwards;}
.animation.action .ani___label_tenma  {animation:tagIn 1.20s ease-in-out 3.10s forwards;}

.animation.action .ani___pillar01_OL {animation:FadeIn 2.5s ease-in-out 3.00s forwards;}
.animation.action .ani___pillar      {animation:PillarIn 2.3s ease-out 4.50s forwards;}

.animation.action .ani___pillar03_OL,
.animation.action .ani___pillar02_NM {animation: glow 0.3s linear 0.1s infinite;}

.animation.action .ani___copy  {animation:FadeIn 1.2s ease-in-out 5.00s forwards;}

.animation.action .ani___cloudL   {animation:cloudL 3.0s ease-in-out 6.5s forwards;}
.animation.action .ani___cloudR   {animation:cloudR 3.0s ease-in-out 6.5s forwards;}

.animation.action .ani___read     {animation:FadeIn 2.0s ease-in-out 7.0s forwards;}

.animation.action .ani___logo_gojo {animation:CopyIn 2.0s ease-in-out 7.50s forwards;}
.animation.action .ani___rin       {animation:CopyIn 2.0s ease-in-out 7.50s forwards;}
.animation.action .ani___3min      {animation:CopyIn 2.0s ease-in-out 7.50s forwards;}
.animation.action .ani___new       {animation:CopyIn 2.0s ease-in-out 7.50s forwards;}



/*訴求ポイント*/
#appeal-area { background: #950601; padding: 20px 10px;}










/*end*/