@charset "utf-8";
footer{
    background: #ffffff;
}
nav{
    background: #fff;
}
#contents{
    padding: 0;
}
#contents > header{
    background: #fff;
}
#contents > header h2 span{
    display: inline-block;
}
#contents > header h2 small{
  margin-top: 3px;
}
.contents-detail{
    padding-bottom: 21px;
}
.tab{
    width: 100%;
    display: table;
    height: 54px;
    margin: 0 0 30px;
    background: #fff;
    border-bottom: 1px #ccc solid;
}
.tab > p{
    width: 33.33%;
    display: table-cell;
    vertical-align: middle;
    /*border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;*/
}
.tab > p + p{
    border-left: 1px #ccc solid;
}
.tab p a{
    display: block;
    text-align: center;
    font-size: 14px;
    line-height: 1.07;
    letter-spacing: -.04em;
    font-weight: bold;
    color: #1e1933;
    padding: 0 4px;
    text-decoration: none;
}
.tab p.current{
    background: #fa960a;
}
.tab p.current a{
    color: #ffffff;
}
.btn-wrap{
    padding: 55px 0 52px;
}
.btn-wrap p{
    width: 267px;
    margin: 0 auto 20px;
}
.btn-wrap p a{
    background: #fa960a;
    color: #ffffff;
    font-size: 13px;
    display: block;
    padding: 4px 0;
    text-align: center;
    font-weight: bold;
    border-radius: 2px;
    text-decoration: none;
    position: relative;
}
.btn-detail{
    width: 87.5%;
    margin: 0 auto 0px;
}
.btn-detail a{
    display: table;
    background: #1e1933;
    border-radius: 10px;
    height: 72px;
    padding: 6px 4px;
    box-sizing: border-box;
    text-decoration: none;
    text-align: center;
}
.btn-detail a span:nth-child(1){
    font-size: 6.5625vw;
    color: #ffffff;
    display: table-cell;
    vertical-align: middle;
    line-height: 1.43;
    font-weight: bold;
}
.btn-detail a span:nth-child(2){
    width: 17.142857142857142%;
    display: table-cell;
    vertical-align: middle;
}
.btn-detail a span:nth-child(2) img{
    width: 100%;
}
.history-section{
    position: relative;

}
[class^="period"] img{
    vertical-align: bottom;
}
[class^="section-"]{
    margin: 0 0 0 0;
    display: block;
    background: url(../img/history/obi_2.svg) repeat-y center top;
    /*background-size: 6.438642%;*/
    background-size: 18px;
}
[class^="section-"]:last-of-type{
    padding-bottom: 200px;
    margin-bottom: 0;
}
.marking {
    background: #fbddbe;
}
.period-list-element{
    background: #ffffff;
    padding: 15px 20px 15px;
    margin: 0 0 17px 0;
    box-sizing: border-box;
}
.period-list-wrap{
    width: 100%;
    display: table;
}
.period-list-wrap:last-of-type{
    margin-bottom: 0;
}
.period-list{
    width: 100%;
    display: block;
    vertical-align: top;
}
.period-list p{
    font-size: 16px;
    line-height:1.44;
    margin: 0 0 0 0;
    display: inline;
}
.period-list p:nth-child(1){
    font-weight: bold;
}
.thumb-layout{
    margin: 0 20px 30px;
    background: #ffffff;
}
.thumb-square{
    margin: 0 0 0 0;
}
.thumb-square img{
    border-radius: 10px;
    box-sizing: border-box;
}
.thumb-square.color-2019 img{
    border: 10px solid #f27f0c;
}
.thumb-circle{
    margin: 0 0 0 0;
}
.thumb-circle img{
    border-radius: 100%;
    box-sizing: border-box;
}
.thumb-circle.color-2019 img{
    border: 10px solid #f27f0c;
}
.caption{
    font-size: 16px;
    color: #1e1933;
    line-height: 1.44;
    background: #ffffff;
    padding: 10px 0;
    box-sizing: border-box;
}
.obi-bottom{
    width: 23px;
    position: absolute;
    bottom: -19px;
    left: 50%;
    margin: 0 0 0 -11.5px;
}
.obi-bottom img{
    width: 100%;
}
.txt-link, .txt-link-2, .modal-txt a{
    color: #b26118;
    text-decoration: underline;
    display: inline-block;
}
.btn-chronological{
    -webkit-transform: translateY(15px);
            transform: translateY(15px);
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    width: 30px;
    position: fixed;
    top: 36px;
    right: 10px;
    z-index: 21;
    opacity: 0;
    visibility: hidden;
}
.btn-chronological.active {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.btn-chronological img{
    width: 100%;
}
.chronological-table-element{
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    width: 100vw;
    height: 100vh;
    background: rgba(255,255,255,0.9);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    display: table;
    visibility: hidden;
    opacity: 0;
}
.chronological-table-element.active {
    opacity: 1;
    visibility: visible;
}
.chronological-table-wrap{
    display: table-cell;
    vertical-align: middle;
}
.chronological-table{
    overflow: hidden;
    width: 165px;
    margin: 70px auto 0;
}
.chronological-table p{
    float: left;
    width: 80px;
    margin: 0 5px 5px 0;
}
.chronological-table p:nth-child(even){
    margin: 0 0px 5px 0;
}
.chronological-table p a{
    display: block;
    font-size: 18px;
    font-weight: bold;
    color: #f27f0c;
    padding: 5px 10px;
    text-align: center;
    border: 1px solid #f27f0c;
    text-decoration: none;
}
/*

modal

--------------------------------------------------------------- */
body.active,
html.active{
    overflow: hidden;
}
.modal-bg{
    -webkit-transition: opacity 0.4s ease, visibility 0.4s ease;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 110;
    opacity: 0;
    visibility: hidden;
}
.modal-bg.active {
    opacity: 1;
    visibility: visible;
}
.modal-element{
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
    display: none;
    background: #fff;
    padding: 10px;
    box-sizing: border-box;
    overflow-y: scroll;
    width: 95%;
    max-height: 95vh;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
}

.modal-mov-element{
    display: none;
    width: 95%;
    height: 50vh;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-40%);
            transform: translate(-50%,-40%);
}

#mov-player {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    margin-bottom: 20px;
}
#mov-player iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}

.modal-mov-element .btn-modal-close {
    top: -40px;
    right: 0;
}

.modal-txt{
    font-size: 16px;
    line-height: 1.44;
    color: #000000;
}
.btn-modal-close{
    width: 25px;
    margin: 25px auto 0;
    padding-bottom: 25px;
}
.btn-modal-close a{
    display: block;
}
.btn-modal-close img{
    width: 100%;
}
.modal-element .box {
    display: none;
}


/*

mv

--------------------------------------------------------------- */
.contents-mv{
    margin: 100px 5px 30%;
    position: relative;
}

.mv-bg{
    width: 100%;
    margin: -80px 0 0px 0;
    position: relative;
    z-index: 1;
}
.obi-1{
    position: absolute;
    top: 0px;
    left: 50%;
    /*width: 6.438642%;*/
    width: 18px;
    /*margin-left: -2.219321148825065%;*/
    margin-left: -9px;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
    z-index: 2;
}
.mv-txt{
    width: 87.8125%;
    position: absolute;
    top: 35px;
    left: 50%;
    margin-left: -43.90625%;
    z-index: 3;
}


/*

2002

--------------------------------------------------------------- */
.section-2002{
    position: relative;
    z-index: 2;
    background: none;
}
.period-2002{
    width: 52.1875%;
    margin: 0 auto 10px;
}
.section-2002 .thumb-layout:last-of-type{
    margin-bottom: 0;
}
/*

2003

--------------------------------------------------------------- */
.section-2003{
    position: relative;
    z-index: 2;
    padding-top: 0px;
    padding-bottom: 60px;
}
.section-2003 .btn-detail a{
    text-align: center;
}
.period-2003{
    width: 52.5%;
    margin: 0 auto 0px;
}
.img-2003{
    position: relative;
}
.img_2003_2{
    width: 80%;
    margin: 0 auto;
}
.img_2003_3{
    width: 45.625%;
    position: absolute;
    top: 50px;
    right: 0;
    z-index: 2;
}
.img_2003_3 img{
    width: 100%;
}

/*

2004

--------------------------------------------------------------- */
.section-2004{
    position: relative;
    z-index: 2;
}
.section-2004 .period-list-element{
    margin: 0 0 27px 0;
}
.section-2004 .btn-detail a{
    text-align: center;
}
.period-2004{
    width: 51.5625%;
    margin: 0 auto 0px;
}



/*

2005

--------------------------------------------------------------- */
.section-2005{
    position: relative;
    z-index: 2;
    padding-bottom: 10px;
}
.section-2005 .btn-detail a{
    text-align: center;
}
.period-2005{
    width: 53.125%;
    margin: 0 auto 0px;
}


/*

2006

--------------------------------------------------------------- */
.section-2006{
    position: relative;
    z-index: 2;
    padding-bottom: 40px;
}
.section-2006 .btn-detail a{
    text-align: center;
}
.period-2006{
    width: 55.3125%;
    margin: 0 auto 10px;
}


/*

2006

--------------------------------------------------------------- */
.section-2006{
    position: relative;
    z-index: 2;
    padding-bottom: 40px;
}
.section-2006 .btn-detail a{
    text-align: center;
}
.period-2006{
    width: 55.00000000000001%;
    margin: 0 auto 10px;
}
.img-2006{
    position: relative;
}


/*

2007

--------------------------------------------------------------- */
.section-2007{
    position: relative;
    z-index: 2;
    padding-bottom: 40px;
}
.section-2007 .btn-detail a{
    text-align: center;
}
.period-2007{
    width: 51.5625%;
    margin: 0 auto 0px;
}
.img-2007{
    position: relative;
}

/*

2008

--------------------------------------------------------------- */
.section-2008{
    position: relative;
    z-index: 2;
    padding-bottom: 40px;
}
.section-2008 .btn-detail a{
    text-align: center;
}
.period-2008{
    width: 53.125%;
    margin: 0 auto 10px;
}


/*

2009

--------------------------------------------------------------- */
.section-2009{
    position: relative;
    z-index: 2;
    padding-bottom: 0px;
}
.section-2009 .btn-detail a{
    text-align: center;
}
.period-2009{
    width: 53.75%;
    margin: 0 auto 0px;
}


/*

2010

--------------------------------------------------------------- */
.section-2010{
    position: relative;
    z-index: 2;
    padding-bottom: 40px;
}
.section-2010 .btn-detail a{
    text-align: center;
}
.period-2010{
    width: 49.0625%;
    margin: 0 auto 10px;
}


/*

2011

--------------------------------------------------------------- */
.section-2011{
    position: relative;
    z-index: 2;
    padding-bottom: 40px;
}
.section-2011 .btn-detail a{
    text-align: center;
}
.period-2011{
    width: 43.75%;
    margin: 0 auto 10px;
}

/*

2012

--------------------------------------------------------------- */
.section-2012{
    position: relative;
    z-index: 2;
    padding-bottom: 0px;
}
.section-2012 .btn-detail a{
    text-align: center;
}
.period-2012{
    width: 46.5625%;
    margin: 0 auto 10px;
}


/*

2013

--------------------------------------------------------------- */
.section-2013{
    position: relative;
    z-index: 2;
    padding-bottom: 40px;
}
.section-2013 .btn-detail a{
    text-align: center;
}
.period-2013{
    width: 47.5%;
    margin: 0 auto 0px;
}

/*

2014

--------------------------------------------------------------- */
.section-2014{
    position: relative;
    z-index: 2;
    padding-bottom: 0px;
}
.section-2014 .btn-detail a{
    text-align: center;
}
.period-2014{
    width: 46.875%;
    margin: 0 auto 0px;
}

/*

2015

--------------------------------------------------------------- */
.section-2015{
    position: relative;
    z-index: 2;
    padding-bottom: 40px;
}
.section-2015 .btn-detail a{
    text-align: center;
}
.period-2015{
    width: 47.5%;
    margin: 0 auto 0px;
}

/*

2016

--------------------------------------------------------------- */
.section-2016{
    position: relative;
    z-index: 2;
    padding-bottom: 40px;
}
.section-2016 .btn-detail a{
    text-align: center;
}
.period-2016{
    width: 51.87500000000001%;
    margin: 0 auto 10px;
}

/*

2017

--------------------------------------------------------------- */
.section-2017{
    position: relative;
    z-index: 2;
    padding-bottom: 0px;
}
.section-2017 .btn-detail a{
    text-align: center;
}
.period-2017{
    width: 46.875%;
    margin: 0 auto 0px;
}


/*

2018

--------------------------------------------------------------- */
.section-2018{
    position: relative;
    z-index: 2;
    padding-bottom: 40px;
}
.section-2018 .btn-detail a{
    text-align: center;
}
.period-2018{
    width: 47.1875%;
    margin: 0 auto 10px;
}

/*

2019

--------------------------------------------------------------- */
.section-2019{
    position: relative;
    z-index: 2;
    padding-bottom: 0px;
}
.section-2019 .btn-detail a{
    text-align: center;
}
.period-2019{
    width: 47.1875%;
    margin: 0 auto 0px;
}





/* keyframes */
@-webkit-keyframes anime1 {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to   { -webkit-transform: translateY(calc(-604px * 0.75)); transform: translateY(calc(-604px * 0.75)); }
}
@keyframes anime1 {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to   { -webkit-transform: translateY(calc(-604px * 0.75)); transform: translateY(calc(-604px * 0.75)); }
}
@-webkit-keyframes anime2 {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to   { -webkit-transform: translateY(calc(-960px * 0.754)); transform: translateY(calc(-960px * 0.754)); }
}
@keyframes anime2 {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to   { -webkit-transform: translateY(calc(-960px * 0.754)); transform: translateY(calc(-960px * 0.754)); }
}
@-webkit-keyframes anime3 {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to   { -webkit-transform: translateY(calc(-700px * 0.75)); transform: translateY(calc(-700px * 0.75)); }
}
@keyframes anime3 {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to   { -webkit-transform: translateY(calc(-700px * 0.75)); transform: translateY(calc(-700px * 0.75)); }
}
@-webkit-keyframes anime4 {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to   { -webkit-transform: translateY(calc(-513px * 0.754)); transform: translateY(calc(-513px * 0.754)); }
}
@keyframes anime4 {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to   { -webkit-transform: translateY(calc(-513px * 0.754)); transform: translateY(calc(-513px * 0.754)); }
}
@-webkit-keyframes anime5 {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to   { -webkit-transform: translateY(calc(-435px * 0.754)); transform: translateY(calc(-435px * 0.754)); }
}
@keyframes anime5 {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to   { -webkit-transform: translateY(calc(-435px * 0.754)); transform: translateY(calc(-435px * 0.754)); }
}
@-webkit-keyframes anime6 {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to   { -webkit-transform: translateY(calc(-612px * 0.754)); transform: translateY(calc(-612px * 0.754)); }
}
@keyframes anime6 {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to   { -webkit-transform: translateY(calc(-612px * 0.754)); transform: translateY(calc(-612px * 0.754)); }
}
@-webkit-keyframes anime7 {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to   { -webkit-transform: translateY(calc(-459px * 0.75)); transform: translateY(calc(-459px * 0.75)); }
}
@keyframes anime7 {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to   { -webkit-transform: translateY(calc(-459px * 0.75)); transform: translateY(calc(-459px * 0.75)); }
}
@-webkit-keyframes anime8 {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to   { -webkit-transform: translateY(calc(-486px * 0.754)); transform: translateY(calc(-486px * 0.754)); }
}
@keyframes anime8 {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to   { -webkit-transform: translateY(calc(-486px * 0.754)); transform: translateY(calc(-486px * 0.754)); }
}
@-webkit-keyframes anime9 {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to   { -webkit-transform: translateY(calc(-420px * 0.754)); transform: translateY(calc(-420px * 0.754)); }
}
@keyframes anime9 {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to   { -webkit-transform: translateY(calc(-420px * 0.754)); transform: translateY(calc(-420px * 0.754)); }
}


@-webkit-keyframes anime1_noloop {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to   { -webkit-transform: translateY(calc(-453px * 0.754)); transform: translateY(calc(-453px * 0.754)); }
}
@keyframes anime1_noloop {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to   { -webkit-transform: translateY(calc(-453px * 0.754)); transform: translateY(calc(-453px * 0.754)); }
}
@-webkit-keyframes anime2_noloop {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to   { -webkit-transform: translateY(calc(-720px * 0.754)); transform: translateY(calc(-720px * 0.754)); }
}
@keyframes anime2_noloop {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to   { -webkit-transform: translateY(calc(-720px * 0.754)); transform: translateY(calc(-720px * 0.754)); }
}
@-webkit-keyframes anime3_noloop {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to   { -webkit-transform: translateY(calc(-525px * 0.754)); transform: translateY(calc(-525px * 0.754)); }
}
@keyframes anime3_noloop {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to   { -webkit-transform: translateY(calc(-525px * 0.754)); transform: translateY(calc(-525px * 0.754)); }
}
@-webkit-keyframes anime4_noloop {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to   { -webkit-transform: translateY(calc(-342px * 0.754)); transform: translateY(calc(-342px * 0.754)); }
}
@keyframes anime4_noloop {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to   { -webkit-transform: translateY(calc(-342px * 0.754)); transform: translateY(calc(-342px * 0.754)); }
}
@-webkit-keyframes anime5_noloop {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to   { -webkit-transform: translateY(calc(-290px * 0.754)); transform: translateY(calc(-290px * 0.754)); }
}
@keyframes anime5_noloop {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to   { -webkit-transform: translateY(calc(-290px * 0.754)); transform: translateY(calc(-290px * 0.754)); }
}
@-webkit-keyframes anime6_noloop {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to   { -webkit-transform: translateY(calc(-459px * 0.754)); transform: translateY(calc(-459px * 0.754)); }
}
@keyframes anime6_noloop {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to   { -webkit-transform: translateY(calc(-459px * 0.754)); transform: translateY(calc(-459px * 0.754)); }
}
/*@-webkit-keyframes anime7_noloop {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to   { -webkit-transform: translateY(calc(-306px * 0.754)); transform: translateY(calc(-306px * 0.754)); }
}
@keyframes anime7_noloop {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to   { -webkit-transform: translateY(calc(-306px * 0.754)); transform: translateY(calc(-306px * 0.754)); }
}*/
@-webkit-keyframes anime7_noloop {
  from { -webkit-transform: translateX(0); transform: translateX(0); }
  to   { -webkit-transform: translateX(100%); transform: translateX(100%); }
}
@keyframes anime7_noloop {
  from { -webkit-transform: translateX(0); transform: translateX(0); }
  to   { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}
/*@-webkit-keyframes anime8_noloop {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to   { -webkit-transform: translateY(calc(-324px * 0.75)); transform: translateY(calc(-324px * 0.75)); }
}
@keyframes anime8_noloop {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to   { -webkit-transform: translateY(calc(-324px * 0.754)); transform: translateY(calc(-324px * 0.754)); }
}
*/
@-webkit-keyframes anime8_noloop {
  from { -webkit-transform: translateX(0); transform: translateX(0); }
  to   { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}
@keyframes anime8_noloop {
  from { -webkit-transform: translateX(0); transform: translateX(0); }
  to   { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}
@-webkit-keyframes anime9_noloop {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to   { -webkit-transform: translateY(calc(-315px * 0.754)); transform: translateY(calc(-315px * 0.754)); }
}
@keyframes anime9_noloop {
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to   { -webkit-transform: translateY(calc(-315px * 0.754)); transform: translateY(calc(-315px * 0.754)); }
}


.obi {
    background: url(../img/history/obi_2.svg) repeat-y center top;
    padding: 10px 0 50px 0;
    margin-top: -30px;
}
.section-2002 + .obi {
  margin-top: 0;
}

.chara {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    opacity: 0;
    overflow: hidden;
    position: relative;
    z-index: 2;
    margin: 0 auto;
}
.chara.action {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
}

.chara span {
    display: block;
    background-size: 100%, 100%;
    background-position: 0 0;
    background-repeat:repeat-y;
    /* animation-duration: 2s; */
    /* animation-delay: 1s; */
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-direction:alternate;
            animation-direction:alternate;
    position: absolute; top: 0; left: 0;
    width: 100%;
}
.chara.noloop span {
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}

/* *********** anima1 ************** */
.chara.anime1 {
    width: calc(189px * 0.75); height: calc(151px * 0.75);
}
.chara.anime1 span {
    -webkit-animation-timing-function: steps(4);
            animation-timing-function: steps(4);
    background-image: url(../img/history/anime1/spritesheet.png);
    height: 400%;
}
.chara.anime1.noloop span {
    -webkit-animation-timing-function: steps(3);
            animation-timing-function: steps(3);
}
.chara.anime1.action span {
    -webkit-animation-name: anime1;
            animation-name: anime1;
}
.chara.anime1.noloop.action span {
    -webkit-animation-name: anime1_noloop;
            animation-name: anime1_noloop;
}

/* *********** anima2 ************** */
.chara.anime2 {
    width: calc(258px * 0.754); height: calc(240px * 0.754);
}
.chara.anime2 span {
    -webkit-animation-timing-function: steps(4);
            animation-timing-function: steps(4);
    background-image: url(../img/history/anime2/spritesheet.png);
    height: 400%;
    background-position: 0px -2px;
}
.chara.anime2.noloop span {
    -webkit-animation-timing-function: steps(3);
            animation-timing-function: steps(3);
}
.chara.anime2.action span {
    -webkit-animation-name: anime2;
            animation-name: anime2;
}
.chara.anime2.noloop.action span {
    -webkit-animation-name: anime2_noloop;
            animation-name: anime2_noloop;
}

/* *********** anima3 ************** */
.chara.anime3 {
    width: calc(187px * 0.754); height: calc(175px * 0.754);
}
.chara.anime3 span {
    -webkit-animation-timing-function: steps(4);
            animation-timing-function: steps(4);
    background-image: url(../img/history/anime3/spritesheet.png);
    height: 400%;
    background-position: 0 -2px;
}
.chara.anime3.noloop span {
    -webkit-animation-timing-function: steps(3);
            animation-timing-function: steps(3);
}
.chara.anime3.action span {
    -webkit-animation-name: anime3;
            animation-name: anime3;
}
.chara.anime3.noloop.action span {
    -webkit-animation-name: anime3_noloop;
            animation-name: anime3_noloop;
}

/* *********** anima4 ************** */
.chara.anime4 {
    width: calc(191px * 0.754); height: calc(171px * 0.754);
}
.chara.anime4 span {
    -webkit-animation-timing-function: steps(3);
            animation-timing-function: steps(3);
    background-image: url(../img/history/anime4/spritesheet.png);
    height: 300%;
}
.chara.anime4.noloop span {
    -webkit-animation-timing-function: steps(2);
            animation-timing-function: steps(2);
}
.chara.anime4.action span {
    -webkit-animation-name: anime4;
            animation-name: anime4;
}
.chara.anime4.noloop.action span {
    -webkit-animation-name: anime4_noloop;
            animation-name: anime4_noloop;
}

/* *********** anima5 ************** */
.chara.anime5 {
    width: calc(223px * 0.754); height: calc(145px * 0.754);
}
.chara.anime5 span {
    -webkit-animation-timing-function: steps(3);
            animation-timing-function: steps(3);
    background-image: url(../img/history/anime5/spritesheet.png);
    height: 300%;
}
.chara.anime5.noloop span {
    -webkit-animation-timing-function: steps(2);
            animation-timing-function: steps(2);
}
.chara.anime5.action span {
    -webkit-animation-name: anime5;
            animation-name: anime5;
}
.chara.anime5.noloop.action span {
    -webkit-animation-name: anime5_noloop;
            animation-name: anime5_noloop;
}

/* *********** anima6 ************** */
.chara.anime6 {
    width: calc(191px * 0.754); height: calc(153px * 0.754);
}
.chara.anime6 span {
    -webkit-animation-timing-function: steps(4);
            animation-timing-function: steps(4);
    background-image: url(../img/history/anime6/spritesheet.png);
    height: 400%;
}
.chara.anime6.noloop span {
    -webkit-animation-timing-function: steps(3);
            animation-timing-function: steps(3);
}
.chara.anime6.action span {
    -webkit-animation-name: anime6;
            animation-name: anime6;
}
.chara.anime6.noloop.action span {
    -webkit-animation-name: anime6_noloop;
            animation-name: anime6_noloop;
}

/* *********** anima7 ************** */
/*.chara.anime7 {
    width: calc(436px * 0.752); height: calc(153px * 0.752);
}*/
.chara.anime7 {
    width: 268px;
    height: 109px;
}
/*.chara.anime7 span {
    -webkit-animation-timing-function: steps(3);
            animation-timing-function: steps(3);
    background-image: url(../img/history/anime7/spritesheet.png);
    height: 300%;
}*/
.chara.anime7 span {
    background-image: url(../img/history/anime7/anime7.png);
    width: 134px;
    height: 109px;
    left: 50%;
}
.chara.anime7.noloop span {
    /*-webkit-animation-timing-function: steps(2);
            animation-timing-function: steps(2);*/
}
.chara.anime7.action span {
    -webkit-animation-name: anime7;
            animation-name: anime7;
}
.chara.anime7.noloop.action span {
    -webkit-animation-name: anime7_noloop;
            animation-name: anime7_noloop;
}

/* *********** anima8 ************** */
/*.chara.anime8 {
    width: calc(430px * 0.754); height: calc(162px * 0.754);
}*/
.chara.anime8 {
    width: 294px;
    height: 122px;
}
/*.chara.anime8 span {
    -webkit-animation-timing-function: steps(3);
            animation-timing-function: steps(3);
    background-image: url(../img/history/anime8/spritesheet.png);
    height: 300%;
}
*/
.chara.anime8 span {
    background-image: url(../img/history/anime8/anime8.png);
    width: 147px;
    height: 122px;
    left: 50%;
}
.chara.anime8.noloop span {
    /*-webkit-animation-timing-function: steps(2);
            animation-timing-function: steps(2);*/
}
.chara.anime8.action span {
    -webkit-animation-name: anime8;
            animation-name: anime8;
}
.chara.anime8.noloop.action span {
    -webkit-animation-name: anime8_noloop;
            animation-name: anime8_noloop;
}

/* *********** anima9 ************** */
.chara.anime9 {
    width: calc(195px * 0.754); height: calc(105px * 0.754);
    left: 50%;
    top: calc(-97px * 0.754);
    margin-left: calc(-92px * 0.754);
    z-index: 10;
}
.chara.anime9 span {
    -webkit-animation-timing-function: steps(4);
            animation-timing-function: steps(4);
    background-image: url(../img/history/anime9/spritesheet.png);
    height: 400%;
}
.chara.anime9.noloop span {
    -webkit-animation-timing-function: steps(3);
            animation-timing-function: steps(3);
}
.chara.anime9.action span {
    -webkit-animation-name: anime9;
            animation-name: anime9;
}
.chara.anime9.noloop.action span {
    -webkit-animation-name: anime9_noloop;
            animation-name: anime9_noloop;
}