@charset "utf-8";

footer{
  background: #ffffff;
}
nav{
  background: #fff;
}
#contents{
  padding: 0;
}


.mv-title{
  width: 283px;
  padding: 38px 0 34px;
  margin: 0 auto;
}
.mv-title img{
  width: 100%;
}
.contents-detail{
  padding-bottom: 14px;
}

.balloon-txt {
  display: flex;
  align-items: center;
  width: 87.5%;
  min-height: 72px;
  margin: 0 auto 12px;
  border-radius: 9px;
  background: #1e1933;
}
.balloon-txt p {
/*
  box-sizing: border-box;
  text-decoration: none;
*/
  width: 100%;
  padding: 6px 0;
  text-align: center;
}
.balloon-txt p span {
  color: #ffffff;
  font-size: min(6.5625vw, 42px);
  font-weight: bold;
  line-height: 1.43;
}
.btn-detail {
  width: 87.5%;
  margin: 0 auto;
}
.btn-detail a {
  width: 39.1768%;
  margin-left: calc(100% - 39.1768%);
}

.history-section{
  position: relative;
  max-width: 640px;
  margin: 0 auto;

}
[class^="period"] img{
  vertical-align: bottom;
}
[class^="section-"]{
  margin: 0 0 0 0;
  display: block;
  background: url(/store/techo/ja/2022/sp/about/img/history/obi_2.svg) repeat-y center top;
  /*background-size: 6.438642%;*/
  background-size: 18px;
}
[class^="section-"]:last-of-type{
  padding-bottom: 32px;
  margin-bottom: 0;
}
.marking {
  background: #ffdede;
}
.period-list-element{
  background: #ffffff;
  padding: 15px 20px 15px;
  margin: 0 0 17px 0;
  box-sizing: border-box;
}
.period-list-wrap{
  width: 280px;
  margin: 0 auto 10px;
  display: table;
}
.period-list-wrap:last-of-type{
  margin-bottom: 0;
}
.period-list{
  width: 40%;
  display: table-cell;
  vertical-align: top;
}
.period-list + .period-list{
  width: 60%;
}
.period-list p{
  font-size: 12px;
  line-height: 1.5;
  margin: 0 0 0 0;
}
.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: 6.5px;
  box-sizing: border-box;
}
.thumb-square.color-2022 img{
  border: 5px solid #f18e8e;
}
.thumb-circle{
  margin: 0 0 0 0;
}
.thumb-circle img{
  border-radius: 100%;
  box-sizing: border-box;
}
.thumb-circle.color-2022 img{
  border: 5px solid #f18e8e;
}
.caption{
  font-size: 15px;
  color: #1e1933;
  background: #ffffff;
  padding: 10px;
  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{
  color: #1c3a83;
  text-decoration: underline;
  display: inline-block;
}
/*
.txt-link-2{
  color: #3eaf3e;
  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: 62px;
  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: opacity 0.4s ease;
  transition: opacity 0.4s ease;
  width: 100vw;
  height: 100vh;
  background: rgba(255,255,255,0.9);
  position: fixed;
  top: 0;
  left: 0;
  /* z-index: 20; */
  z-index: 201;
  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 {
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  width: 165px;
  margin: 0 auto;
}
.chronological-table > div {
  width: 80px;
}
.chronological-table a {
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: #1e1a33;
  margin-bottom: 5px;
  padding: 0 10px;
  text-align: center;
  border: 1px solid #1e1a33;
  text-decoration: none;
}
.chronological-table a:last-child {
  margin-bottom: 0;
}
/*

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: 203;
  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: 15px;
  color: #000000;
}
.modal-txt a{
  /* text-decoration: none; */
  color: #1c3a83;
}
.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: 0 5px 40px;
  position: relative;
}

.mv-bg{
  width: 320px;
  margin: -80px auto 0px;
  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: 320px;
  padding: 0 8px;
  position: absolute;
  top: 10%;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  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;
}
.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;
}
.period-2004{
  width: 51.5625%;
  margin: 0 auto 0px;
}



/*

2005

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


/*

2006

--------------------------------------------------------------- */
.section-2006{
  position: relative;
  z-index: 2;
  padding-bottom: 10px;
}
.period-2006{
  width: 55.3125%;
  margin: 0 auto 10px;
}


/*

2006

--------------------------------------------------------------- */
.section-2006{
  position: relative;
  z-index: 2;
  padding-bottom: 10px;
}
.period-2006{
  width: 55.00000000000001%;
  margin: 0 auto 10px;
}
.img-2006{
  position: relative;
}


/*

2007

--------------------------------------------------------------- */
.section-2007{
  position: relative;
  z-index: 2;
  padding-bottom: 10px;
}
.period-2007{
  width: 51.5625%;
  margin: 0 auto 0px;
}
.img-2007{
  position: relative;
}

/*

2008

--------------------------------------------------------------- */
.section-2008{
  position: relative;
  z-index: 2;
  padding-bottom: 10px;
}
.period-2008{
  width: 53.125%;
  margin: 0 auto 10px;
}


/*

2009

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


/*

2010

--------------------------------------------------------------- */
.section-2010{
  position: relative;
  z-index: 2;
  padding-bottom: 10px;
}
.period-2010{
  width: 49.0625%;
  margin: 0 auto 10px;
}


/*

2011

--------------------------------------------------------------- */
.section-2011{
  position: relative;
  z-index: 2;
  padding-bottom: 10px;
}
.period-2011{
  width: 43.75%;
  margin: 0 auto 10px;
}

/*

2012

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


/*

2013

--------------------------------------------------------------- */
.section-2013{
  position: relative;
  z-index: 2;
  padding-bottom: 10px;
}
.period-2013{
  width: 47.5%;
  margin: 0 auto 0px;
}

/*

2014

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

/*

2015

--------------------------------------------------------------- */
.section-2015{
  position: relative;
  z-index: 2;
  padding-bottom: 10px;
}
.period-2015{
  width: 47.5%;
  margin: 0 auto 0px;
}

/*

2016

--------------------------------------------------------------- */
.section-2016{
  position: relative;
  z-index: 2;
  padding-bottom: 10px;
}
.period-2016{
  width: 51.87500000000001%;
  margin: 0 auto 10px;
}

/*

2017

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


/*

2018

--------------------------------------------------------------- */
.section-2018{
  position: relative;
  z-index: 2;
  padding-bottom: 10px;
}
.period-2018{
  width: 47.1875%;
  margin: 0 auto 10px;
}

/*

2019

--------------------------------------------------------------- */
.section-2019{
  position: relative;
  z-index: 2;
  padding-bottom: 10px;
}
.period-2019{
  width: 47.1875%;
  margin: 0 auto 0px;
}

/*

2020

--------------------------------------------------------------- */
.section-2020{
  position: relative;
  z-index: 2;
  padding-bottom: 0px;
}
.period-2020{
  width: 47.1875%;
  margin: 0 auto 10px;
}

/*

2021

--------------------------------------------------------------- */
.section-2021 {
  position: relative;
  z-index: 2;
  padding-bottom: 10px;
}
.period-2021 {
  width: 46.5625%;
  margin: 0 auto 10px;
}

/*

2022

--------------------------------------------------------------- */
.section-2022 {
  position: relative;
  z-index: 2;
  padding-bottom: 10px;
}
.period-2022 {
  width: 50.625%;
  margin: 0 auto 10px;
}


/* 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(/store/techo/ja/2022/sp/about/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;
  margin: 0 auto;
  z-index: 2;
}
.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(/store/techo/ja/2022/sp/about/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(/store/techo/ja/2022/sp/about/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(/store/techo/ja/2022/sp/about/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(/store/techo/ja/2022/sp/about/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(/store/techo/ja/2022/sp/about/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(/store/techo/ja/2022/sp/about/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(/store/techo/ja/2022/sp/about/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(/store/techo/ja/2022/sp/about/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(/store/techo/ja/2022/sp/about/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;
}
#contents .tab {
  border-top: 2px #1e1a33 solid;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -o-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  padding: 0 10px;
  margin-bottom: 80px;
}
#contents .tab a {
  display: block;
  width: calc(50% - 5px);
  max-width: 305px;
  color: #1e1a33;
  border: 1px #787585 solid;
  border-top: none;
  text-decoration: none;
  text-align: center;
  border-radius: 0 0 3px 3px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -o-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  height: 36px;
}
#contents .tab a + a {
  margin-left: 10px;
}
#contents .tab a.current {
  border-color: #1e1a33;
  background: #1e1a33;
  color: #fff;
  pointer-events: none;
}
#contents .tab a.current:before {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  background: #fff;
  color: #1e1a33;
}
#contents .tab a:before {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  overflow: hidden;
  text-align: center;
  background: #1e1a33;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  margin-right: 8px;
}
#contents .tab a span {
  display: block;
  font-size: 10px;
  line-height: 1.45;
  letter-spacing: 0.1em;
  font-weight: bold;
}
#contents .btn-wrap {
  width: 230px;
  margin: 0 auto;
  overflow: hidden;
  padding: 98px 0 64px;
  position: relative;
  z-index: 11;
}
#contents .btn-wrap a {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -o-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  text-decoration: none;
  padding: 9px 0;
  height: auto;
  min-height: 40px;
}
#contents .btn-wrap a:before {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  color: #1e1a33;
  text-align: center;
  font-size: 15px;
  line-height: 1;
  right: 8px;
}
#contents .btn-wrap a span {
  font-size: 14px;
  line-height: 1.5;
}