@charset 'utf-8';
/*pc.css*/
.sp { display: none !important; }
.pc { display: block !important; }

/* --------------------------------------------------
layout
-------------------------------------------------- */
html, body {
  height: 100%;
}
body {
  position: relative;
  width: 100%;
  padding: 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #eaeae8;
  font-family:'HelveticaNeue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 400;
  letter-spacing: normal;
}
main {
position: relative;
}
ul,dl,a{
  text-decoration: none;
}
a{
cursor: pointer;

}
header {
  position: relative;
  width: 100%;
  padding-top: 56.1111111111%;
}
#mvbox {
  position: absolute;
  top:0;
  z-index: 1;
  width: 100%;
  padding-top: 56.25%;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
#mvbox iframe {
  position: absolute;
  top: 0;
  left: 0;
}
#play{
  position: absolute;
  top : 630px;
  left: 50%;
  margin-left: -28px;
  z-index: 1;
  opacity: 0;
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
  cursor: default;
}
#play img:hover{
  opacity: 0.5;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
#mute{
  position: absolute;
  bottom: 15px;
  left: 15px;
  width: 30px;
  height: 30px;
  z-index: 1;
  opacity: 1;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  cursor: pointer;
}
.off{
  background: url(../img/pc/mute_off.png) no-repeat center top;
}
.on{
  background: url(../img/pc/mute_on.png) no-repeat center top;
}
#top_logo {
  width: 756px;
  height: 480px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -195px;
  margin-left : -378px;
  background-color: #fff;
}
#top_logo h1 {
  position: absolute;
  top: 0;
  left: 263px;
}
#top_logo h1 img {
  width: 250px;
  height: 390px;
}
#top_logo .title_txt {
  position: absolute;
  top: 204px;
  left: 612px;
}
#top_logo .top_logo {
  position: absolute;
  top: 294px;
  left: 611px;
}
#top_logo .play {
  position: absolute;
  bottom: 0;
  left: 349px;
  width: 57px;
  height: 57px;
  cursor: pointer;
  background: url(http://www.dentsusxsw.com/assets/img/pc/btn_play.png) no-repeat center top;
}

/* --------------------------------------------------
menu
-------------------------------------------------- */
.lang_nav{
  position: fixed;
  top: 50%;
  right: 20px;
  margin-top: 110px;
  z-index: 100;
}
.lang_nav ul.nav{
  font-size: 20px;
}
.lang_nav ul.nav li{
  display: inline-block;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  padding-right: 10px;
}
.lang_nav ul.nav .btn_active{
  color: #999;
}
.lang_nav ul.nav li:last-child{
  padding-right: 0px;
}
.lang_nav ul.nav li a{
  display: block;
}

/* --------------------------------------------------
menu_nav
-------------------------------------------------- */
#menu_nav{
  position: fixed;
  right: 50px;
  top: 0;
  z-index: 2;
  height: 8vh;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#menu_nav .menu_box{
  position: relative;
  top: 35px;
}
#menu_nav ul{
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;
}
#menu_nav ul li{
font-family: "Myriad Pro", "Myriad Web", 'HelveticaNeue', 'Helvetica', 'Arial', sans-serif;;
font-size: 26px;
font-weight: 600;
}
#menu_nav ul li+li{
margin-left: .16em;
}
#menu_nav ul li a{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-decoration: none;
  color: #000;
}
#menu_nav ul li span{
-webkit-transition: .3s;
-o-transition: .3s;
transition: .3s;
opacity: .5;
}
#menu_nav ul li.current span{
position: relative;
}
#menu_nav ul li.current span::before{
  position: absolute;
  left: 0;
  bottom: 0;
  content: '';
  width: 100%;
  height: 2px;
  background-color: #000;
  
}

#menu_nav ul li a span:hover{
  opacity: 1;
}


/* --------------------------------------------------
sec-box
-------------------------------------------------- */
section.sec-box {
	width: 100%;
	margin-top: 20px;
}

section.sec-box > .inner{
  width: 100%;
  max-width: 1400px;
  margin: 0 auto 0;
}
section.sec-box > .inner img{
	width: 100%;
}


/* sec-box about
-------------------------------------------------- */
section.sec-box.about > .inner {
  position: relative;
  background: url(../img/pc/sec-about-bg.png) top center no-repeat;
  background-size: 100%;
  background-color: #1300ff;
}

section.sec-box.about > .inner .vidual-wrap{
position: relative;
width: 100%;
margin-bottom: 20.71%;
}
section.sec-box.about > .inner .vidual-wrap h1{
	width: 100%;
}
section.sec-box.about > .inner .vidual-wrap h1 .vidual-img{
	position: relative;
	width: 42.5%;
	max-width: 595px;
}
section.sec-box.about > .inner .vidual-wrap h1 .vidual-img img{
	width: 100%;
}
section.sec-box.about > .inner .vidual-wrap h1 .vidual-img .vidual-img-01{
	position: relative;
	width: 97.14%;
}
section.sec-box.about > .inner .vidual-wrap h1 .vidual-img .vidual-img-01 img{
	position: relative;
	width: 84.95%;
	max-width: 491px;
	margin-left: 10.6%;
	z-index: 1;
}
section.sec-box.about > .inner .vidual-wrap h1 .vidual-img .vidual-img-02{
	position: relative;
	width: 100%;
	margin-top: -3.1%;
}
section.sec-box.about > .inner .vidual-wrap h1 .vidual-img .vidual-img-02 img{
	position: relative;
	width: 96.81%;
	max-width: 576px;
	z-index: 1;
}
section.sec-box.about > .inner .vidual-wrap h1 .vidual-img .vidual-img-01::before,
section.sec-box.about > .inner .vidual-wrap h1 .vidual-img .vidual-img-02::before{
  position: absolute;
  top: 0;
  right: 0;
  content: '';
  width: 100%;
  height: 122.22%;
  background-color: #1300ff;
  z-index: 0;
}

section.sec-box.about > .inner .vidual-wrap .vidual-logo {
	position: absolute;
	top: 0;
	left: 0;
	width: 6%;
	max-width: 84px;
	margin-top: 52.7%;
	margin-left: 3.57%;
}
section.sec-box.about > .inner .vidual-wrap .vidual-logo img{
	width: 100%;
}

section.sec-box.about > .inner .vidual-wrap .sec-box-txt{
	position: relative;
	width: 32.57%;
	max-width: 456px;
	margin: 32.5% 0 0 auto;
}
section.sec-box.about > .inner .vidual-wrap .sec-box-txt .inner{
	position: relative;
	width: 100%;
}
section.sec-box.about > .inner .vidual-wrap .sec-box-txt .inner::before{
  position: absolute;
  top: 0;
  right: -1%;
  content: '';
  width: 100%;
  height: 80%;
  background-color: #eaeae8;
}
section.sec-box.about > .inner .vidual-wrap .sec-box-txt .inner p{
	position: relative;
	width: 100%;
}
section.sec-box.about > .inner .vidual-wrap .sec-box-txt .inner p::before{
  position: absolute;
  bottom: -10%;
  right: -1%;
  content: '';
  width: 85.96%;
  height: 80%;
  background-color: #eaeae8;
}
section.sec-box.about > .inner .vidual-wrap .sec-box-txt .inner p img{
position: relative;
	width: 95.61%;
	margin-left:  4.39%;
	margin-bottom: 10%;
}

/* section.sec-box.about .vidual-wrap animate
-------------------------------------------------- */
section.sec-box.about .vidual-wrap .vidual-img{
overflow: hidden;
}
section.sec-box.about .vidual-wrap .vidual-img.animate .vidual-img-01::before{
  -webkit-transition: -webkit-transform .4s ease-in-out .3s;
  transition: -webkit-transform .4s ease-in-out .3s;
  -o-transition: transform .4s ease-in-out .3s;
  transition: transform .4s ease-in-out .3s;
  transition: transform .4s ease-in-out .3s, -webkit-transform .4s ease-in-out .3s;
  -webkit-transform: translateX(-110%);
      -ms-transform: translateX(-110%);
          transform: translateX(-110%);
}
section.sec-box.about .vidual-wrap .vidual-img.action .vidual-img-01::before{
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
}
section.sec-box.about .vidual-wrap .vidual-img.animate .vidual-img-02::before{
  -webkit-transition: -webkit-transform .4s ease-in-out .4s;
  transition: -webkit-transform .4s ease-in-out .4s;
  -o-transition: transform .4s ease-in-out .4s;
  transition: transform .4s ease-in-out .4s;
  transition: transform .4s ease-in-out .4s, -webkit-transform .4s ease-in-out .4s;
  -webkit-transform: translateX(-110%);
      -ms-transform: translateX(-110%);
          transform: translateX(-110%);
}
section.sec-box.about .vidual-wrap .vidual-img.action .vidual-img-02::before{
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
}

section.sec-box.about .vidual-wrap .vidual-img.animate .vidual-img-01 img{
  -webkit-transition: -webkit-transform .5s ease .6s;
  transition: -webkit-transform .5s ease .6s;
  -o-transition: transform .5s ease .6s;
  transition: transform .5s ease .6s;
  transition: transform .5s ease .6s, -webkit-transform .5s ease .6s;
  -webkit-transform: translateX(-120%);
      -ms-transform: translateX(-120%);
          transform: translateX(-120%);
}
section.sec-box.about .vidual-wrap .vidual-img.action .vidual-img-01 img{
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
}
section.sec-box.about .vidual-wrap .vidual-img.animate .vidual-img-02 img{
  -webkit-transition: -webkit-transform .5s ease.8s;
  transition: -webkit-transform .5s ease.8s;
  -o-transition: transform .5s ease.8s;
  transition: transform .5s ease.8s;
  transition: transform .5s ease.8s, -webkit-transform .5s ease.8s;
  -webkit-transform: translateX(-120%);
      -ms-transform: translateX(-120%);
          transform: translateX(-120%);
}
section.sec-box.about .vidual-wrap .vidual-img.action .vidual-img-02 img{
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
}


section.sec-box.about .vidual-wrap .vidual-logo.animate{
  -webkit-transition: opacity .8s ease-out .4s, -webkit-transform .5s ease-out .3s;
  transition: opacity .8s ease-out .4s, -webkit-transform .5s ease-out .3s;
  -o-transition: opacity .8s ease-out .4s, transform .5s ease-out .3s;
  transition: opacity .8s ease-out .4s, transform .5s ease-out .3s;
  transition: opacity .8s ease-out .4s, transform .5s ease-out .3s, -webkit-transform .5s ease-out .3s;
  -webkit-transform: translateY(5%);
      -ms-transform: translateY(5%);
          transform: translateY(5%);
  opacity: 0;
}
section.sec-box.about .vidual-wrap .vidual-logo.action{
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}


section.sec-box.about .vidual-wrap .sec-box-txt{
  overflow: hidden;
}
section.sec-box.about .vidual-wrap .sec-box-txt .inner.animate::before{
  -webkit-transition: -webkit-transform .4s ease-in-out .2s;
  transition: -webkit-transform .4s ease-in-out .2s;
  -o-transition: transform .4s ease-in-out .2s;
  transition: transform .4s ease-in-out .2s;
  transition: transform .4s ease-in-out .2s, -webkit-transform .4s ease-in-out .2s;
  -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%);
}
section.sec-box.about .vidual-wrap .sec-box-txt .inner.animate p::before{
  -webkit-transition: -webkit-transform .4s ease-in-out .3s;
  transition: -webkit-transform .4s ease-in-out .3s;
  -o-transition: transform .4s ease-in-out .3s;
  transition: transform .4s ease-in-out .3s;
  transition: transform .4s ease-in-out .3s, -webkit-transform .4s ease-in-out .3s;
  -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%);
}
section.sec-box.about .vidual-wrap .sec-box-txt .inner.animate p img{
  -webkit-transition: -webkit-transform .4s ease .6s;
  transition: -webkit-transform .4s ease .6s;
  -o-transition: transform .4s ease .6s;
  transition: transform .4s ease .6s;
  transition: transform .4s ease .6s, -webkit-transform .4s ease .6s;
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
}

section.sec-box.about .vidual-wrap .sec-box-txt .inner.action::before{
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
}
section.sec-box.about .vidual-wrap .sec-box-txt .inner.action p::before{
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
}
section.sec-box.about .vidual-wrap .sec-box-txt .inner.action p img{
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}



/* sec-box about-en
-------------------------------------------------- */
section.sec-box.about-en > .inner {
  position: relative;
  background: url(../img/pc/sec-about-en-bg.png) top center no-repeat;
  background-size: 100%;
  background-color: #00b4b4;
}
section.sec-box.about-en > .inner .sec-box-txt{
	width: 54.07%;
	max-width: 757px;
	display: block;
	margin-bottom: 27.14%;
}
section.sec-box.about-en > .inner .sec-box-txt p{
	position: relative;
	width: 100%;
	display: block;
}
section.sec-box.about-en > .inner .sec-box-txt p::before{
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 71.33%;
  height: 87.57%;
  background-color: #fff;
}
section.sec-box.about-en > .inner .sec-box-txt img{
  width: 100%;
  mix-blend-mode: multiply;
}

/* section.sec-box.about-en .vidual-wrap animate
-------------------------------------------------- */
section.sec-box.about-en .vidual-wrap{
  overflow: hidden;
}
section.sec-box.about-en .vidual-wrap .sec-box-txt.animate p::before{
  -webkit-transition: -webkit-transform .3s ease-in-out .4s;
  transition: -webkit-transform .3s ease-in-out .4s;
  -o-transition: transform .3s ease-in-out .4s;
  transition: transform .3s ease-in-out .4s;
  transition: transform .3s ease-in-out .4s, -webkit-transform .3s ease-in-out .4s;
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
}
section.sec-box.about-en .vidual-wrap .sec-box-txt.animate p img{
  -webkit-transition: -webkit-transform .6s ease .7s;
  transition: -webkit-transform .6s ease .7s;
  -o-transition: transform .6s ease .7s;
  transition: transform .6s ease .7s;
  transition: transform .6s ease .7s, -webkit-transform .6s ease .7s;
  -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
          transform: translateX(-100%);
}

section.sec-box.about-en .vidual-wrap .sec-box-txt.action p::before{
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}
section.sec-box.about-en .vidual-wrap .sec-box-txt.action p img{
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
}



/* sec-box last
-------------------------------------------------- */
section.sec-box.last > .inner {
  position: relative;
  background-color: #ff3c00;
  padding-top: 80px;
}
section.sec-box.last > .inner .vidual-wrap{
  position: relative;
  width: 100%;
}
section.sec-box.last > .inner .vidual-wrap .vidual-img{
  position: absolute;
  left: -1px;
  bottom: -31.1%;
  width: 59.43%;
}
section.sec-box.last > .inner .vidual-wrap .vidual-img figure{
  position: relative;
  width: 100%;
}
section.sec-box.last > .inner .vidual-wrap .vidual-img figure img{
  position: relative;
  width: 100%;
}

section.sec-box.last > .inner .vidual-wrap .sec-box-txt{
  position: relative;
  width: 40.43%;
  max-width: 566px;
  margin-top: 20%;
  margin-left: 61%;
}
section.sec-box.last > .inner .vidual-wrap .sec-box-txt .sec-box-txt-img{
  position: relative;
  width: 100%;
  margin: 0 0 0 auto;
}
section.sec-box.last > .inner .vidual-wrap .sec-box-txt .sec-box-txt-img.img01{
	width: 44.17%;
}

section.sec-box.last > .inner .vidual-wrap .sec-box-txt .sec-box-txt-img.img02{
	width: 86.75%;
}
section.sec-box.last > .inner .vidual-wrap .sec-box-txt .sec-box-txt-img::before{
  position: absolute;
  right: 0;
  bottom: 0;
  content: '';
  width: 100%;
  height: 100%;
  background-color: #eaeae8;
}
section.sec-box.last > .inner .vidual-wrap .sec-box-txt .sec-box-txt-img.img01::before{
  top: 1px;
  bottom: auto;
  height: 110%;
}
section.sec-box.last > .inner .vidual-wrap .sec-box-txt .sec-box-txt-img.img02::before{
  top: 9.5%;
  bottom: auto;
  height: 100%;
}
section.sec-box.last > .inner .vidual-wrap .sec-box-txt .sec-box-txt-img.img03::before{
  width: 99.7%;
  height: 90%;
}
section.sec-box.last > .inner .vidual-wrap .sec-box-txt .sec-box-txt-img.img04::before{
  width: 99.7%;
}

section.sec-box.last > .inner .vidual-wrap .sec-box-txt .sec-box-txt-img img{
  position: relative;
  width: 100%;
}

/* section.sec-box.last .vidual-wrap animate
-------------------------------------------------- */
section.sec-box.last .vidual-wrap .sec-box-txt{
overflow: hidden;
}
section.sec-box.last .vidual-wrap .sec-box-txt.animate .sec-box-txt-img.img01::before{
  -webkit-transition: -webkit-transform .4s ease-in-out .6s;
  transition: -webkit-transform .4s ease-in-out .6s;
  -o-transition: transform .4s ease-in-out .6s;
  transition: transform .4s ease-in-out .6s;
  transition: transform .4s ease-in-out .6s, -webkit-transform .4s ease-in-out .6s;
  -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%);
}
section.sec-box.last .vidual-wrap .sec-box-txt.animate .sec-box-txt-img.img02::before{
  -webkit-transition: -webkit-transform .4s ease-in-out .5s;
  transition: -webkit-transform .4s ease-in-out .5s;
  -o-transition: transform .4s ease-in-out .5s;
  transition: transform .4s ease-in-out .5s;
  transition: transform .4s ease-in-out .5s, -webkit-transform .4s ease-in-out .5s;
  -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%);
}
section.sec-box.last .vidual-wrap .sec-box-txt.animate .sec-box-txt-img.img03::before{
  -webkit-transition: -webkit-transform .4s ease-in-out .4s;
  transition: -webkit-transform .4s ease-in-out .4s;
  -o-transition: transform .4s ease-in-out .4s;
  transition: transform .4s ease-in-out .4s;
  transition: transform .4s ease-in-out .4s, -webkit-transform .4s ease-in-out .4s;
  -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%);
}
section.sec-box.last .vidual-wrap .sec-box-txt.animate .sec-box-txt-img.img04::before{
  -webkit-transition: -webkit-transform .4s ease-in-out .3s;
  transition: -webkit-transform .4s ease-in-out .3s;
  -o-transition: transform .4s ease-in-out .3s;
  transition: transform .4s ease-in-out .3s;
  transition: transform .4s ease-in-out .3s, -webkit-transform .4s ease-in-out .3s;
  -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%);
}

section.sec-box.last .vidual-wrap .sec-box-txt.animate .sec-box-txt-img.img01 img{
  -webkit-transition: -webkit-transform .4s ease 1.1s;
  transition: -webkit-transform .4s ease 1.1s;
  -o-transition: transform .4s ease 1.1s;
  transition: transform .4s ease 1.1s;
  transition: transform .4s ease 1.1s, -webkit-transform .4s ease 1.1s;
  -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%);
}
section.sec-box.last .vidual-wrap .sec-box-txt.animate .sec-box-txt-img.img02 img{
  -webkit-transition: -webkit-transform .4s ease 1s;
  transition: -webkit-transform .4s ease 1s;
  -o-transition: transform .4s ease 1s;
  transition: transform .4s ease 1s;
  transition: transform .4s ease 1s, -webkit-transform .4s ease 1s;
  -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%);
}
section.sec-box.last .vidual-wrap .sec-box-txt.animate .sec-box-txt-img.img03 img{
  -webkit-transition: -webkit-transform .4s ease .9s;
  transition: -webkit-transform .4s ease .9s;
  -o-transition: transform .4s ease .9s;
  transition: transform .4s ease .9s;
  transition: transform .4s ease .9s, -webkit-transform .4s ease .9s;
  -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%);
}
section.sec-box.last .vidual-wrap .sec-box-txt.animate .sec-box-txt-img.img04 img{
  -webkit-transition: -webkit-transform .4s ease .8s;
  transition: -webkit-transform .4s ease .8s;
  -o-transition: transform .4s ease .8s;
  transition: transform .4s ease .8s;
  transition: transform .4s ease .8s, -webkit-transform .4s ease .8s;
  -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%);
}

section.sec-box.last .vidual-wrap .sec-box-txt.action .sec-box-txt-img.img01::before,
section.sec-box.last .vidual-wrap .sec-box-txt.action .sec-box-txt-img.img02::before,
section.sec-box.last .vidual-wrap .sec-box-txt.action .sec-box-txt-img.img03::before,
section.sec-box.last .vidual-wrap .sec-box-txt.action .sec-box-txt-img.img04::before,
section.sec-box.last .vidual-wrap .sec-box-txt.action .sec-box-txt-img.img01 img,
section.sec-box.last .vidual-wrap .sec-box-txt.action .sec-box-txt-img.img02 img,
section.sec-box.last .vidual-wrap .sec-box-txt.action .sec-box-txt-img.img03 img,
section.sec-box.last .vidual-wrap .sec-box-txt.action .sec-box-txt-img.img04 img{
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
}



/* --------------------------------------------------
project
-------------------------------------------------- */
.project {
  margin: 0 auto;
  padding: 0 50px 120px;
  color: #fff;
}
.project .inner {
  position: relative;
  margin: 0 auto;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

.project .inner .project-description{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 53.4%;
}
.project .inner .project-description .project-description-wrap{
	margin-right: 19.27%;
}


@media only screen and (min-width: 1440px) {
	.project .inner h2 {
		font-size: 82px;
		line-height: 0.73em;
	}
	.project .inner h2.mid {
		font-size: 72px;
	}	
}
@media only screen and (min-width: 891px) and (max-width: 1439px) {
.project .inner h2 {
	font-size: 5.8vw;
	line-height: 0.73em;
}
.project .inner h2.mid {
	font-size: 4.32vw;
}	
}

.project .inner .tag {
	font-size: 20px;
	margin-top: 1em;
}

.project .inner .description-txt {
	font-size: 14px;
	line-height: 1.71em;
	margin-top: 2.5em;
	text-align: justify;
}
.project .inner .description-txt.jp {
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}

.project .inner .company-name {
	font-size: 18px;
	line-height: 1.44em;
	margin-top: 3.33em;
}

.project .inner .link-wrap > * {
display: inline-block;
position: relative;
}
.project .inner .link-wrap .link-btn +  .link-btn {
 margin-top: 60px;
}

.project .inner .link-wrap .link-btn a{
  color: #fff;
}
.project .inner .link-wrap .link-btn a p{
  position: relative;
  font-size: 36px;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  border-radius: 0.62em;
  padding: 1em .06em;
  -webkit-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  transition: all .2s ease-in;
}
@media only screen and (min-width: 1440px) {
.project .inner .link-wrap .link-btn a p{
font-size: 36px;
}
}
@media only screen and (min-width: 891px) and (max-width: 1439px) {
.project .inner .link-wrap .link-btn a p{
font-size: 2.57vw;
}
}

.project .inner .link-wrap .link-btn a p::before,

.project .inner .link-wrap .link-btn a p::after {
  position: absolute;
  left: 0;
  content: '';
  width: 1em;
  height: .62em;
  border-left: 1.6px solid #fff;
  border-right: 1.6px solid #fff;
}
.project .inner .link-wrap .link-btn a p::before {
  top: 0;
  border-top: 1.6px solid #fff;
  border-radius: .7em .7em 0 0;
}
.project .inner .link-wrap .link-btn a p::after {
  bottom: 0;
  border-bottom: 1.6px solid #fff;
  border-radius: 0 0 .7em .7em;
}

.project .inner .link-wrap .link-btn a:hover{
  cursor: pointer;
}
.project .inner .link-wrap .link-btn a:hover p{
background-color: #fff;
}
.project.hugtics .inner .link-wrap .link-btn a:hover p{
color: #1300ff;
}
.project.phantomsnack .inner .link-wrap .link-btn a:hover p{
color: #00b4b4;
}
.project.transcentdance .inner .link-wrap .link-btn a:hover p{
color: #ff3c00;
}


.project .inner .project-description-img{
	width: 41.2%;
  	max-width: 535px;
	margin-right: 5.4%;
}

.project .inner .project-description-img img{
  width: 100%;
}


/* project layout-image-right
-------------------------------------------------- */
.project.layout-image-right .inner {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.project.layout-image-right .inner .project-description{
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
.project.layout-image-right .inner .project-description .project-description-wrap{
  margin-left: 19.27%;
  margin-right: 0;
}
.project.layout-image-right .inner  .project-description-img{
  margin-left: 5.4%;
  margin-right: 0;
}

/* project animate
-------------------------------------------------- */
.project.animate .inner .project-description-img img{
  -webkit-transition: opacity .5s ease-out .1s, -webkit-transform .5s ease-out .1s, -webkit-filter .6s ease-out 1.1s;
  transition: opacity .5s ease-out .1s, -webkit-transform .5s ease-out .1s, -webkit-filter .6s ease-out 1.1s;
  -o-transition: opacity .5s ease-out .1s, transform .5s ease-out .1s, filter .6s ease-out 1.1s;
  transition: opacity .5s ease-out .1s, transform .5s ease-out .1s, filter .6s ease-out 1.1s;
  transition: opacity .5s ease-out .1s, transform .5s ease-out .1s, filter .6s ease-out 1.1s, -webkit-transform .5s ease-out .1s, -webkit-filter .6s ease-out 1.1s;
  -webkit-transform: translateY(5%);
      -ms-transform: translateY(5%);
          transform: translateY(5%);
  opacity: 0;
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}
.project.animate.action .inner .project-description-img img{
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
  -webkit-filter: grayscale(0%);
          filter: grayscale(0%);
}

.project.animate .inner .project-description h2{
  -webkit-transition: opacity .3s ease-out .5s, -webkit-transform .3s ease-out .4s;
  transition: opacity .3s ease-out .5s, -webkit-transform .3s ease-out .4s;
  -o-transition: opacity .3s ease-out .5s, transform .3s ease-out .4s;
  transition: opacity .3s ease-out .5s, transform .3s ease-out .4s;
  transition: opacity .3s ease-out .5s, transform .3s ease-out .4s, -webkit-transform .3s ease-out .4s;
  -webkit-transform: translateY(20%);
      -ms-transform: translateY(20%);
          transform: translateY(20%);
  opacity: 0;
}
.project.animate .inner .project-description .tag{
  -webkit-transition: opacity .3s ease-out .7s, -webkit-transform .3s ease-out .6s;
  transition: opacity .3s ease-out .7s, -webkit-transform .3s ease-out .6s;
  -o-transition: opacity .3s ease-out .7s, transform .3s ease-out .6s;
  transition: opacity .3s ease-out .7s, transform .3s ease-out .6s;
  transition: opacity .3s ease-out .7s, transform .3s ease-out .6s, -webkit-transform .3s ease-out .6s;
  -webkit-transform: translateY(20%);
      -ms-transform: translateY(20%);
          transform: translateY(20%);
  opacity: 0;
}
.project.animate .inner .project-description .description-txt{
  -webkit-transition: opacity .5s ease-out .9s, -webkit-transform .5s ease-out .8s;
  transition: opacity .5s ease-out .9s, -webkit-transform .5s ease-out .8s;
  -o-transition: opacity .5s ease-out .9s, transform .5s ease-out .8s;
  transition: opacity .5s ease-out .9s, transform .5s ease-out .8s;
  transition: opacity .5s ease-out .9s, transform .5s ease-out .8s, -webkit-transform .5s ease-out .8s;
  -webkit-transform: translateY(10%);
      -ms-transform: translateY(10%);
          transform: translateY(10%);
  opacity: 0;
}
.project.animate .inner .project-description .company-name{
  -webkit-transition: opacity .4s ease-out 1.4s, -webkit-transform .4s ease-out 1.4s;
  transition: opacity .4s ease-out 1.4s, -webkit-transform .4s ease-out 1.4s;
  -o-transition: opacity .4s ease-out 1.4s, transform .4s ease-out 1.4s;
  transition: opacity .4s ease-out 1.4s, transform .4s ease-out 1.4s;
  transition: opacity .4s ease-out 1.4s, transform .4s ease-out 1.4s, -webkit-transform .4s ease-out 1.4s;
  -webkit-transform: translateY(10%);
      -ms-transform: translateY(10%);
          transform: translateY(10%);
  opacity: 0;
}
.project.animate .inner .project-description .link-btn.movie{
  -webkit-transition: opacity .4s ease-out 1.8s;
  -o-transition: opacity .4s ease-out 1.8s;
  transition: opacity .4s ease-out 1.8s;
  opacity: 0;
}
.project.animate .inner .project-description .link-btn.viewmore{
  -webkit-transition: opacity .4s ease-out 1.8s;
  -o-transition: opacity .4s ease-out 1.8s;
  transition: opacity .4s ease-out 1.8s;
  opacity: 0;
}

.project.action .inner .project-description h2,
.project.action .inner .project-description .tag,
.project.action .inner .project-description .description-txt,
.project.action .inner .project-description .company-name,
.project.action .inner .project-description .link-btn.movie,
.project.action .inner .project-description .link-btn.viewmore{
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}


/* --------------------------------------------------
sec-info
-------------------------------------------------- */
.sec-info {
  margin: 0 auto;
  margin-top: 13.0555555556%;
  max-width: 1440px;
}
.sec-info .inner {
  position: relative;
  padding-bottom: 5%;
  margin: 0 auto;
  min-width: 848px;
  width: 71.5277777778%;
  border-bottom: 1px solid black;
}
.sec-info dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.sec-info dl+dl {
  margin-top: 5.2777777778%;
}
.sec-info dl dt {
  width: 10.9708737864%;
}
.sec-info dl dd {
  margin-left: 2.1359223301%;
  font-size: 1.38888vw;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
.sec-info .past-archive  {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 5.5555555556%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 2.77777vw;
  font-weight: bold;
  color: #fff;
}
.sec-info .past-archive a {
  margin-top: 3%;
  width: 35.9223300971%;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background-color: #000;
  border: 1px solid black;
}
.sec-info .past-archive a:hover {
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
  color: #000;
  background-color: #fff;
}
.sec-info .past-archive a p {
  padding: 7.2% 0 8.2%;
  font-weight: bold;
}
.sec-info .past-archive a+a {
  margin-left: 2.3611111111%;
}
.sec-info .sec-info-logo {
  position: absolute;
  width: 5.625%;
  top: 0;
  right: 0;
}

/* fixed */
@media (min-width: 1440px) {
  .sec-info dl dd {
    font-size: 20px;
  }
  .sec-info .past-archive {
    font-size: 38px;
  }
}

/* --------------------------------------------------
footer
-------------------------------------------------- */
footer {
  margin: 4.1666666667%;
}
footer .footer-logo {
  margin: 0 auto;
  width: 14.0972222222%;
}
footer p {
  margin-top: 2.0833333333%;
  font-size: 0.97222vw;
  text-align: center;
}
footer ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 3.9583333333%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
footer ul li {
  width: 4.8611111111%;
}
footer ul li+li {
  margin-left: 2.5694444444%;
}

/* fixed */
@media (min-width: 1440px) {
  footer p {
    font-size: 14px;
  }
}

/* sec-info animate
-------------------------------------------------- */
.sec-info dl {
  -webkit-transition: opacity .5s ease-in, -webkit-transform .5s;
  transition: opacity .5s ease-in, -webkit-transform .5s;
  -o-transition: opacity .5s ease-in, transform .5s;
  transition: opacity .5s ease-in, transform .5s;
  transition: opacity .5s ease-in, transform .5s, -webkit-transform .5s;
  opacity: 0;
}
.sec-info.action dl:nth-child(1) {
  -webkit-transition-delay: .5s;
          -o-transition-delay: .5s;
     transition-delay: .5s;
  opacity: 1;
}
.sec-info.action dl:nth-child(2) {
  -webkit-transition-delay: .8s;
          -o-transition-delay: .8s;
     transition-delay: .8s;
  opacity: 1;
}
.sec-info .past-archive {
  -webkit-transition: opacity .5s ease-in, -webkit-transform .5s;
  transition: opacity .5s ease-in, -webkit-transform .5s;
  -o-transition: opacity .5s ease-in, transform .5s;
  transition: opacity .5s ease-in, transform .5s;
  transition: opacity .5s ease-in, transform .5s, -webkit-transform .5s;
  opacity: 0;
}
.sec-info.action .past-archive {
  -webkit-transition-delay: 1.1s;
          -o-transition-delay: 1.1s;
     transition-delay: 1.1s;
  opacity: 1;
}
.sec-info .sec-info-logo {
  -webkit-transition: opacity .5s ease-in, -webkit-transform .5s;
  transition: opacity .5s ease-in, -webkit-transform .5s;
  -o-transition: opacity .5s ease-in, transform .5s;
  transition: opacity .5s ease-in, transform .5s;
  transition: opacity .5s ease-in, transform .5s, -webkit-transform .5s;
  opacity: 0;
}
.sec-info.action .sec-info-logo {
  -webkit-transition-delay: 1.4s;
          -o-transition-delay: 1.4s;
     transition-delay: 1.4s;
  opacity: 1;
}