@charset 'utf-8';

/*sp.css*/

@media only screen and (max-width: 890px) {
  .pc {
    display: none !important;
  }
}

@media only screen and (max-width: 1070px) {
  #en .pc,
  .en-pc{
    display: none !important;
  }
}
html, body {
  -webkit-text-size-adjust: none;
}
img {
  width: 100%;
}

/* --------------------------------------------------
layout
-------------------------------------------------- */
body {
  position: relative;
  width: 100%;
  padding: 2vw;
  -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;
}
ul, dl, a {
  list-style: none;
  text-decoration: none;
}
a {
  color: #000;
}
#jp-contents, #jp-only-contents {
  position: relative;
  text-align: justify;
}
#en-contents {
  position: relative;
}
.txt {
  font-size: 24px;
  line-height: 250%;
}
.en {
  font-size: 27px;
}
header {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
#mvbox {
  position: absolute;
  top: 0;
  width: 100%;
  padding-top: 56.25%;
  z-index: 1;
}
#mv {
/* width: 100%;
height: 400px; */
}
#mvbox iframe {
  position: absolute;
  top: 0;
  left: 0;
}
#mv_sp {
  width: 100%;
  height: 100%;
}
#mv_sp iframe {
  width: 100%;
  height: 100%;
}
#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: 20px;
  left: 20px;
  width: 15px;
  height: 15px;
  z-index: 1;
  opacity: 0;
  -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: 590px;
  height: 420px;
  position: absolute;
  /* margin: 0 auto; */
  top: 0;
  left: 50%;
  margin-left : -295px;
  /* left: 0; */
/*
top: 50%;
left: 50%;
margin-top: -195px;
/* z-index: 100; */
background-color: #fff;
z-index: 0;
}
#top_logo h1 {
  position: absolute;
  top: 40px;
  left: 205px;
  width: 180px;
  /* margin-bottom: 45px; */
}
#top_logo h1 img {
  width: 100%;
  height: auto;
}
#top_logo .title_txt {
  /* margin-bottom: 35px; */
  /* margin: 0 auto 71px; */
  width: 100px;
  position: absolute;
  top: 212px;
  right: 50px;
}
#top_logo .top_logo {
  width: 100px;
  position: absolute;
  top: 274px;
  right: 50px;
  /* margin-bottom: 146px; */
}
#top_logo .play {
  position: absolute;
  bottom: 20px;
  left: 266px;
  width: 57px;
  height: 57px;
  cursor: pointer;
  background: url(http://www.dentsusxsw.com/assets/img/sp/btn_play.png) no-repeat center top;
}

/* menu
-------------------------------------------------- */
#nav-toggle {
  display: none;
  position: absolute;
  right: 25px;
  top: 25px;
  width: 50px;
  height: 36px;
  cursor: pointer;
  z-index: 101;
}
#nav-toggle div {
  position: relative;
}
#nav-toggle span {
  display: block;
  position: absolute;
  height: 6px;
  width: 100%;
  background: #000;
  left: 0;
  -webkit-transition: .35s ease-in-out;
  -o-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
  top: 0;
}
#nav-toggle span:nth-child(2) {
  top: 20px;
}
#nav-toggle span:nth-child(3) {
  top: 40px;
}
#top-head, .inner {
  width: 100%;
  padding: 0;
}
#top-head {
  top: 0;
  position: fixed;
  margin-top: 0;
  z-index: 999;
}

/* Fixed reset */

#top-head.fixed {
  padding-top: 0;
  background: transparent;
}
#mobile-head {
  width: 30px;
  height: 56px;
  z-index: 999;
  position: absolute;
  right: 0;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
#global-nav {
  position: absolute;
  background: rgba(255,255,255,0.6);
  -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%);
  padding: 76px 0 6px;
  width: 70%;
  right: 0;
  -webkit-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}
#global-nav ul {
  list-style: none;
  position: static;
  right: 0;
  bottom: 0;
  font-size: 14px;
  width: 80%;
  margin-left: auto;
}
#global-nav ul li {
  float: none;
  position: static;
}
#top-head #global-nav ul li a, #top-head.fixed #global-nav ul li a {
  width: 100%;
  display: block;
  color: #000;
  padding: 18px 0;
  font-size: 2em;
  font-weight: 700;
}
#global-nav ul li:nth-child(4) {
  padding-bottom: 20px;
}
#global-nav ul li:last-child {
  border-top: 1px solid #000;
  margin: 0 auto;
}
#nav-toggle {
  display: block;
}

/* #nav-toggle 切り替えアニメーション */

.open #mobile-head {
  background: #fff;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.open #nav-toggle span:nth-child(1) {
  top: 20px;
  -webkit-transform: rotate(315deg);
  -ms-transform: rotate(315deg);
      transform: rotate(315deg);
}
.open #nav-toggle span:nth-child(2) {
  width: 0;
  left: 50%;
}
.open #nav-toggle span:nth-child(3) {
  top: 20px;
  -webkit-transform: rotate(-315deg);
  -ms-transform: rotate(-315deg);
      transform: rotate(-315deg);
}

/* #global-nav スライドアニメーション */

.open #global-nav {
  /* #global-nav top + #mobile-head height */
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
}

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

section.sec-box > .inner{
  width: 100%;
  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-sp.png) top center no-repeat;
  background-size: 100%;
  background-color: #1300ff;
}

section.sec-box.about > .inner .vidual-wrap{
position: relative;
width: 100%;
margin-bottom: 10.67vw;
}
section.sec-box.about > .inner .vidual-wrap h1{
	width: 100%;
}
section.sec-box.about > .inner .vidual-wrap h1 .vidual-img{
	position: relative;
	width: 62.5%;
}
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: 11.66%;
	margin-top: 93.06%;
	margin-left: 1.66%;
}
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: 56.39%;
	margin: 81.67% 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: 101%;
  height: 72.26%;
  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: 0;
  right: -1%;
  content: '';
  width: 85.96%;
  height: 72.26%;
  background-color: #eaeae8;
}
section.sec-box.about > .inner .vidual-wrap .sec-box-txt .inner p img{
position: relative;
	width: 93.1%;
	margin-left: 6.9%;
	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-sp.png) top center no-repeat;
  background-size: 100%;
  background-color: #00b4b4;
}
section.sec-box.about-en > .inner .sec-box-txt{
	width: 84.03%;
	display: block;
	margin-bottom: 66.13vw;
}
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: 81.9%;
  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;
}
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: 43.89%;
  width: 86.81%;
}
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: 72.5%;
  margin-top: 57vw;
  margin-left: 29.58%;
}
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: 111%;
}
section.sec-box.last > .inner .vidual-wrap .sec-box-txt .sec-box-txt-img.img02::before{
  top: 9.5%;
  bottom: auto;
  height: 102%;
}
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{
  bottom: -1%;
  width: 99.7%;
  height: 103%;
}

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: 8vw 4vw 10.67vw;
  color: #fff;
}
.project .inner {
  position: relative;
  margin: 0 auto;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.project .inner .project-description{
display: contents;
width: 100%;
}
.project .inner .project-description .project-description-wrap{
display: contents;
}
.project .inner .project-ttl{
	-webkit-box-ordinal-group: 2;
	    -ms-flex-order: 1;
	        order: 1;
}
.project .inner .project-description-img{
	-webkit-box-ordinal-group: 3;
	    -ms-flex-order: 2;
	        order: 2;
}
.project .inner .txt-wrap{
	-webkit-box-ordinal-group: 4;
	    -ms-flex-order: 3;
	        order: 3;
}
.project .inner .link-wrap{
	-webkit-box-ordinal-group: 4;
	    -ms-flex-order: 3;
	        order: 3;
}

.project .inner h2 {
	font-size: 82px;
	font-size: 10.93vw;
	line-height: 0.73em;
}
.project .inner h2.mid {
	font-size: 76px;
	font-size: 10.13vw;
}	

.project .inner .tag {
	font-size: 24px;
	font-size: 3.2vw;
	margin-top: .5833em;
}

.project .inner .description-txt {
	font-size: 22px;
	font-size: 2.93vw;
	line-height: 1.63em;
	margin-top: 1.2em;
	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: 26px;
	font-size: 3.47vw;
	line-height: 1.31em;
	margin-top: 2.69em;
}

.project .inner .link-wrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	padding: 8.33% 10% 0;
}

.project .inner .link-wrap > * {
display: inline-block;
position: relative;
}

.project .inner .link-wrap .link-btn a{
  color: #fff;
}
.project .inner .link-wrap .link-btn a p{
position: relative;
font-size: 42px;
font-size: 5.6vw;
  border-radius: 0.62em;
  padding: .06em 1em;
  -webkit-transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  transition: all .3s ease-in;
}
.project .inner .link-wrap .link-btn a p::before,
.project .inner .link-wrap .link-btn a p::after {
  position: absolute;
  top: 0;
  content: '';
  width: .62em;
  height: 1em;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
}
.project .inner .link-wrap .link-btn a p::before {
  left: 0;
  border-left: 2px solid #fff;
  border-radius: .7em 0 0 .7em;
}
.project .inner .link-wrap .link-btn a p::after {
  right: 0;
  border-right: 2px solid #fff;
  border-radius: 0 .7em .7em 0;
}


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

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

/* project animate
-------------------------------------------------- */
.project.animate .inner .project-description-img img{
  -webkit-transition: opacity .7s ease-out .7s, -webkit-transform .5s ease-out .6s, -webkit-filter .6s ease-out 1.4s;
  transition: opacity .7s ease-out .7s, -webkit-transform .5s ease-out .6s, -webkit-filter .6s ease-out 1.4s;
  -o-transition: opacity .7s ease-out .7s, transform .5s ease-out .6s, filter .6s ease-out 1.4s;
  transition: opacity .7s ease-out .7s, transform .5s ease-out .6s, filter .6s ease-out 1.4s;
  transition: opacity .7s ease-out .7s, transform .5s ease-out .6s, filter .6s ease-out 1.4s, -webkit-transform .5s ease-out .6s, -webkit-filter .6s ease-out 1.4s;
  -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 .2s, -webkit-transform .3s ease-out .1s;
  transition: opacity .3s ease-out .2s, -webkit-transform .3s ease-out .1s;
  -o-transition: opacity .3s ease-out .2s, transform .3s ease-out .1s;
  transition: opacity .3s ease-out .2s, transform .3s ease-out .1s;
  transition: opacity .3s ease-out .2s, transform .3s ease-out .1s, -webkit-transform .3s ease-out .1s;
  -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 .4s, -webkit-transform .3s ease-out .3s;
  transition: opacity .3s ease-out .4s, -webkit-transform .3s ease-out .3s;
  -o-transition: opacity .3s ease-out .4s, transform .3s ease-out .3s;
  transition: opacity .3s ease-out .4s, transform .3s ease-out .3s;
  transition: opacity .3s ease-out .4s, transform .3s ease-out .3s, -webkit-transform .3s ease-out .3s;
  -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 1s, -webkit-transform .5s ease-out .9s;
  transition: opacity .5s ease-out 1s, -webkit-transform .5s ease-out .9s;
  -o-transition: opacity .5s ease-out 1s, transform .5s ease-out .9s;
  transition: opacity .5s ease-out 1s, transform .5s ease-out .9s;
  transition: opacity .5s ease-out 1s, transform .5s ease-out .9s, -webkit-transform .5s ease-out .9s;
  -webkit-transform: translateY(5%);
      -ms-transform: translateY(5%);
          transform: translateY(5%);
  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(5%);
      -ms-transform: translateY(5%);
          transform: translateY(5%);
  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: 94px;
  margin-top: 12.53333vw;
}
.sec-info .inner {
  position: relative;
  padding-bottom: 100px;
  margin: 0 auto;
  width: 700px;
  width: 93.33333vw;
  border-bottom: 1px solid black;
}
.sec-info dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.sec-info dl+dl {
  margin-top: 65px;
  margin-top: 8.66666vw;
}
.sec-info dl dt {
  width: 100px;
  width: 13.33333vw;
}
.sec-info dl dd {
  margin-left: 20px;
  margin-left: 2.66666vw;
  font-size: 18px;
  font-size: 2.4vw;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
.sec-info .past-archive  {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 140px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 28px;
  font-size: 3.73333vw;
  font-weight: bold;
  color: #fff;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.sec-info .past-archive a {
  width: 274px;
  width: 36.53333vw;
  text-align: center;
  text-decoration: none;
  background-color: #000;
}

.sec-info .past-archive a p {
  padding: 22px 0 24px;
  padding: 2.93333vw 0 3.2vw;
  font-weight: bold;
  color: #fff;
}
.sec-info .past-archive a+a {
  margin-top: 60px;
}
.sec-info .sec-info-logo {
  position: absolute;
  width: 74px;
  width: 9.86666vw;
  top: 0;
  right: 0;
}

/* --------------------------------------------------
footer
-------------------------------------------------- */
footer {
  margin: 38px;
  margin: 5.06666vw;
}
footer .footer-logo {
  margin: 0 auto;
  width: 136px;
  width: 18.13333vw;
}
footer p {
  margin-top: 20px;
  margin-top: 2.66666vw;
  font-size: 10px;
  font-size: 1.33333vw;
  text-align: center;
}
footer ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 40px;
  margin-top: 5.33333vw;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
footer ul li {
  width: 48px;
  width: 6.4vw;
}
footer ul li+li {
  margin-left: 25px;
  margin-left: 3.33333vw;
}

/* 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 a {
  -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 a {
  -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;
}