/*------------------------
SIZE
-------------------------*/
/*************************************
MIXINS
*************************************/
.instagram-center, .instagram-media {
  margin: 0 auto;
}

.tri, .circle, .tri2, .triDotRed, .triRed, .triDotYellow, .triYellow, .triBrown, .triDotWhite {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.circle {
  background-image: url(../images/common/bg_circle.svg);
}

.tri {
  background-image: url(../images/common/bg_triangle.svg);
}

.triRed {
  background-image: url(../images/common/bg_triangle_red.svg);
}

.triDotRed {
  background-image: url(../images/common/bg_triangle_dot_red.svg);
}

.triBrown {
  background-image: url(../images/common/bg_triangle_brown.svg);
}

.triDotYellow {
  background-image: url(../images/common/bg_triangle_dot_yellow.svg);
}

.triYellow {
  background-image: url(../images/common/bg_triangle_yellow.svg);
}

.triDotWhite {
  background-image: url(../images/common/bg_triangle_dot_white.svg);
}

header .menu .ac a {
  color: #FFD800;
  text-decoration: underline;
}

header .menu a:hover {
  color: #FFD800;
  text-decoration: underline;
}

/*==============================================
  ABOUT
==============================================*/
@media screen and ( max-width : 768px ) {
  body.about .mainCopy {
    margin-bottom: 13.3333333333vw;
  }
}
body.about #mainContent .item {
  width: 100%;
  position: relative;
}
body.about #mainContent .image {
  position: relative;
  width: 94.1434846266vw;
  margin: 0 auto;
}
@media screen and ( max-width : 768px ) {
  body.about #mainContent .image {
    width: 100%;
  }
}
body.about #mainContent .no1 .image {
  height: 49.7803806735vw;
}
@media screen and ( max-width : 768px ) {
  body.about #mainContent .no1 .image {
    height: 53.0666666667vw;
  }
}
body.about #mainContent .no2 .image {
  height: 53.0014641288vw;
}
@media screen and ( max-width : 768px ) {
  body.about #mainContent .no2 .image {
    height: 56.5333333333vw;
  }
}
body.about #mainContent .no3 .image {
  height: 53.0014641288vw;
}
@media screen and ( max-width : 768px ) {
  body.about #mainContent .no3 .image {
    height: 56.5333333333vw;
  }
}
body.about #mainContent .no4 .image {
  height: 52.2693997072vw;
}
@media screen and ( max-width : 768px ) {
  body.about #mainContent .no4 .image {
    height: 55.7333333333vw;
  }
}
body.about #mainContent .before, body.about #mainContent .after {
  position: absolute;
  top: 0;
  left: 0;
  clip-path: polygon(-50% 0, -50% 0, 0 100%, 0 100%);
  width: 100%;
}
body.about #mainContent .before {
  transition: clip-path 0.5s cubic-bezier(0.75, 0.06, 0.8, 0.04);
}
body.about #mainContent .after {
  transition: clip-path 0.3s cubic-bezier(0.75, 0.06, 0.8, 0.04);
  transition-delay: 0.6s;
}
body.about #mainContent .view .before, body.about #mainContent .view .after {
  clip-path: polygon(0 0, 100% 0, 150% 100%, 0 100%);
}
body.about #mainContent .text {
  border: 10px solid #800000;
  background: #FFF;
  padding: 2.5622254758vw 2.196193265vw;
  display: inline-block;
  position: absolute;
  transform: scale3d(0, 0, 0);
}
@media screen and ( max-width : 768px ) {
  body.about #mainContent .text {
    border: 5px solid #800000;
    padding: 4vw;
    position: relative;
  }
}
body.about #mainContent .text .title {
  color: #800000;
  font-size: 3.513909224vw;
  line-height: 1.4;
  font-weight: 900;
}
@media screen and ( max-width : 768px ) {
  body.about #mainContent .text .title {
    font-size: 5.8666666667vw;
  }
}
body.about #mainContent .text .sub {
  font-size: 1.317715959vw;
  margin-top: 1.4641288433vw;
}
@media screen and ( max-width : 768px ) {
  body.about #mainContent .text .sub {
    font-size: 2.6666666667vw;
    margin-top: 1.3333333333vw;
  }
}
body.about #mainContent .view .text {
  animation: bounce 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 1.2s;
}
body.about #mainContent .tri {
  background-image: url(../images/common/bg_triangle.svg);
  width: 30.2342606149vw;
  height: 27.5256222548vw;
  z-index: -1;
}
body.about #mainContent .tri2 {
  background-image: url(../images/common/bg_triangle_dot_red.svg);
  width: 9.9560761347vw;
  height: 8.6383601757vw;
  z-index: -1;
}
body.about #mainContent .circle {
  background-image: url(../images/common/bg_circle.svg);
  width: 21.8155197657vw;
  height: 21.8155197657vw;
  z-index: -2;
}
body.about #mainContent .no1 {
  z-index: 5;
  margin-bottom: 1.4641288433vw;
}
@media screen and ( max-width : 768px ) {
  body.about #mainContent .no1 {
    margin-bottom: 2.6666666667vw;
  }
}
body.about #mainContent .no1 .text {
  bottom: -2.5622254758vw;
  left: 5.1244509517vw;
}
@media screen and ( max-width : 768px ) {
  body.about #mainContent .no1 .text {
    top: -6.6666666667vw;
    left: 5.3333333333vw;
  }
}
body.about #mainContent .no1 .tri {
  top: -6%;
  right: -21%;
  transform: rotate(-20deg);
}
@media screen and ( max-width : 768px ) {
  body.about #mainContent .no1 .tri {
    width: 45.3333333333vw !important;
    height: 45.3333333333vw !important;
    top: 50%;
    right: -21%;
  }
}
body.about #mainContent .no1 .tri2 {
  bottom: -1%;
  left: 49%;
  transform: rotate(4deg);
}
@media screen and ( max-width : 768px ) {
  body.about #mainContent .no1 .circle {
    width: 45.3333333333vw !important;
    height: 45.3333333333vw !important;
    bottom: 4%;
    left: 53%;
  }
}
body.about #mainContent .no2 {
  z-index: 4;
  margin-bottom: 5.8565153734vw;
}
@media screen and ( max-width : 768px ) {
  body.about #mainContent .no2 {
    margin-bottom: 2.6666666667vw;
  }
}
body.about #mainContent .no2 .text {
  bottom: -7.3206442167vw;
  right: 5.1244509517vw;
}
@media screen and ( max-width : 768px ) {
  body.about #mainContent .no2 .text {
    top: -7.2vw;
    left: 5.3333333333vw;
  }
}
body.about #mainContent .no2 .tri {
  bottom: 3%;
  left: -4%;
  transform: rotate(-80deg);
}
body.about #mainContent .no2 .tri2 {
  bottom: 30%;
  right: -3%;
  transform: rotate(-233deg);
}
@media screen and ( max-width : 768px ) {
  body.about #mainContent .no2 .tri2 {
    width: 26.6666666667vw;
    height: 26.6666666667vw;
    transform: rotate(-221deg);
    bottom: 20%;
    right: -6%;
  }
}
body.about #mainContent .no2 .circle {
  bottom: -9%;
  left: -6%;
}
body.about #mainContent .no3 {
  z-index: 3;
  margin-bottom: 4.39238653vw;
}
@media screen and ( max-width : 768px ) {
  body.about #mainContent .no3 {
    margin-bottom: 0vw;
  }
}
body.about #mainContent .no3 .text {
  bottom: -11.7130307467vw;
  right: 5.1244509517vw;
}
@media screen and ( max-width : 768px ) {
  body.about #mainContent .no3 .text {
    top: -7.2vw;
    left: 34.4vw;
  }
}
body.about #mainContent .no3 .tri {
  top: -13%;
  left: 21%;
  transform: rotate(89deg);
}
@media screen and ( max-width : 768px ) {
  body.about #mainContent .no3 .tri {
    width: 45.3333333333vw !important;
    height: 45.3333333333vw !important;
    top: 50%;
    left: -16%;
    transform: rotate(30deg);
  }
}
body.about #mainContent .no3 .tri2 {
  bottom: -6%;
  left: 25%;
  transform: rotate(-153deg);
}
body.about #mainContent .no3 .circle {
  bottom: -9%;
  left: 27%;
}
@media screen and ( max-width : 768px ) {
  body.about #mainContent .no3 .circle {
    width: 45.3333333333vw !important;
    height: 45.3333333333vw !important;
    bottom: 17%;
    left: 7%;
  }
}
body.about #mainContent .no4 {
  z-index: 2;
}
body.about #mainContent .no4 .text {
  bottom: -7.3206442167vw;
  left: 5.1244509517vw;
}
@media screen and ( max-width : 768px ) {
  body.about #mainContent .no4 .text {
    top: -7.2vw;
    left: 5.3333333333vw;
  }
}
body.about #mainContent .no4 .tri {
  bottom: 22%;
  right: -12%;
  transform: rotate(-13deg);
}
@media screen and ( max-width : 768px ) {
  body.about #mainContent .no4 .tri {
    width: 45.3333333333vw !important;
    height: 45.3333333333vw !important;
    bottom: -3%;
    right: -6%;
  }
}
body.about #mainContent .no4 .tri2 {
  top: 40%;
  left: -3%;
  transform: rotate(-30deg);
}
@media screen and ( max-width : 768px ) {
  body.about #mainContent .no4 .tri2 {
    width: 24vw !important;
    height: 24vw !important;
    top: 50%;
    left: -9%;
  }
}
body.about #mainContent .no4 .circle {
  bottom: -9%;
  right: -4%;
}
@media screen and ( max-width : 768px ) {
  body.about #mainContent .no4 .circle {
    width: 80vw !important;
    height: 80vw !important;
    bottom: 19%;
    right: -40%;
  }
}
body.about .bgBar.type4 {
  margin-top: 29.2825768668vw;
}
body.about .bgBar.type4 .c1 {
  width: 25.9150805271vw;
  bottom: -1.8301610542vw;
  left: 14%;
  animation: move1 1.5s alternate infinite ease-in-out;
}
body.about .bgBar.type4 .c2 {
  width: 23.9385065886vw;
  bottom: -1.8301610542vw;
  right: 15.9%;
  animation: move1 1.4s alternate infinite ease-in-out;
  animation-delay: 0.5s;
}
body.about #perfectFoodArea {
  margin-top: 14.6412884334vw;
}
@media screen and ( max-width : 768px ) {
  body.about #perfectFoodArea {
    margin-top: 42.6666666667vw;
  }
}
body.about #perfectFoodArea .explanation {
  width: 81.9912152269vw;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 auto;
  align-items: center;
  padding-bottom: 5.8565153734vw;
}
@media screen and ( max-width : 768px ) {
  body.about #perfectFoodArea .explanation {
    width: 82.6666666667vw;
    padding-bottom: 12vw;
    flex-direction: column;
  }
}
body.about #perfectFoodArea .explanation .image {
  width: 32.2108345534vw;
}
@media screen and ( max-width : 768px ) {
  body.about #perfectFoodArea .explanation .image {
    width: 64vw;
    margin-bottom: 4vw;
  }
}
body.about #perfectFoodArea .explanation .caption {
  width: 40.2635431918vw;
  font-size: 1.317715959vw;
  text-align: justify;
}
@media screen and ( max-width : 768px ) {
  body.about #perfectFoodArea .explanation .caption {
    width: 100%;
    font-size: 3.2vw;
    font-weight: normal;
    line-height: 1.5;
  }
}

/*==============================================
 WEB ANIMATION
==============================================*/
body.anime .youtube {
  position: relative;
  max-width: 65.8857979502vw;
  width: 100%;
  margin: 0 auto 6.588579795vw;
}
@media screen and ( max-width : 768px ) {
  body.anime .youtube {
    max-width: 9999px;
    width: 89.6vw;
    margin: 0 auto 12vw;
  }
}
body.anime .youtube .inner {
  width: 100%;
  padding-bottom: 56.25%;
  position: relative;
}
body.anime .youtube iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
body.anime .mainCopy {
  margin-bottom: 6.588579795vw;
  line-height: 1.4;
}
@media screen and ( max-width : 768px ) {
  body.anime .mainCopy {
    margin-bottom: 13.3333333333vw;
  }
}
body.anime #characters {
  padding-top: 10.2489019034vw;
}
@media screen and ( max-width : 768px ) {
  body.anime #characters {
    padding-top: 26.6666666667vw;
  }
}
body.anime #charaList {
  width: 83.0161054173vw;
  margin: 0 auto;
  padding-bottom: 17.5695461201vw;
}
@media screen and ( max-width : 768px ) {
  body.anime #charaList {
    width: 89.3333333333vw;
    padding-bottom: 37.3333333333vw;
  }
}
body.anime #charaList .item {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  align-items: center;
}
body.anime #charaList .item:nth-of-type(even) {
  flex-direction: row-reverse;
}
@media screen and ( max-width : 768px ) {
  body.anime #charaList .item {
    display: block;
  }
}
body.anime #charaList .item .image, body.anime #charaList .item .text {
  width: 50%;
  position: relative;
}
@media screen and ( max-width : 768px ) {
  body.anime #charaList .item .image, body.anime #charaList .item .text {
    width: 96%;
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and ( max-width : 768px ) {
  body.anime #charaList .item .image {
    text-align: center;
    margin-bottom: 5.3333333333vw;
  }
}
body.anime #charaList .item .image figure {
  position: relative;
}
@media screen and ( max-width : 768px ) {
  body.anime #charaList .item .image figure {
    text-align: center;
    display: inline-block;
  }
}
body.anime #charaList .item .text h5 {
  margin-bottom: 0.7320644217vw;
}
@media screen and ( max-width : 768px ) {
  body.anime #charaList .item .text h5 {
    margin-bottom: 4.8vw;
    text-align: center;
  }
}
body.anime #charaList .item .text p, body.anime #charaList .item .text span {
  font-size: 1.317715959vw;
  font-weight: bold;
}
@media screen and ( max-width : 768px ) {
  body.anime #charaList .item .text p, body.anime #charaList .item .text span {
    font-size: 3.2vw;
    font-weight: normal;
  }
}
body.anime #charaList .item .text h5 img {
  height: 6.0761346999vw;
  width: auto;
}
@media screen and ( max-width : 768px ) {
  body.anime #charaList .item .text h5 img {
    height: 11.7333333333vw;
  }
}
body.anime #charaList .circle {
  width: 24.7437774524vw;
  height: 24.7437774524vw;
  z-index: -2;
}
@media screen and ( max-width : 768px ) {
  body.anime #charaList .circle {
    width: 45.0666666667vw;
    height: 45.0666666667vw;
  }
}
body.anime #charaList .triDotWhite {
  width: 13.9092240117vw;
  height: 13.9092240117vw;
}
body.anime #charaList .triDotRed {
  width: 9.5168374817vw;
  height: 8.1991215227vw;
}
@media screen and ( max-width : 768px ) {
  body.anime #charaList .triDotRed {
    width: 18.1333333333vw;
    height: 15.7333333333vw;
  }
}
body.anime #charaList .triDotRed.lg {
  width: 14.3484626647vw;
  height: 12.298682284vw;
}
body.anime #charaList .triRed {
  width: 11.7130307467vw;
  height: 10.2489019034vw;
}
body.anime #charaList .triDotYellow {
  width: 9.4436310395vw;
  height: 8.5651537335vw;
}
body.anime #charaList .triYellow {
  width: 10.2489019034vw;
  height: 8.78477306vw;
}
body.anime #charaList .triBrown {
  width: 13.17715959vw;
  height: 10.2489019034vw;
}
@media screen and ( max-width : 768px ) {
  body.anime #charaList .triDotWhite, body.anime #charaList .triDotRed.lg, body.anime #charaList .triRed, body.anime #charaList .triDotYellow, body.anime #charaList .triYellow, body.anime #charaList .triBrown {
    display: none;
  }
}
body.anime #charaList .objs {
  z-index: -2;
}
body.anime #charaList .drill {
  margin-top: 1.0980966325vw;
}
@media screen and ( max-width : 768px ) {
  body.anime #charaList .drill {
    margin-top: 5.3333333333vw;
  }
}
body.anime #charaList .no1 {
  margin-bottom: 4.39238653vw;
}
@media screen and ( max-width : 768px ) {
  body.anime #charaList .no1 {
    margin-bottom: 16vw;
  }
}
body.anime #charaList .no1 .image figure {
  width: 16.9838945827vw;
  left: 14.4%;
}
@media screen and ( max-width : 768px ) {
  body.anime #charaList .no1 .image figure {
    left: auto;
    width: 30.9333333333vw;
  }
}
body.anime #charaList .no1 .circle {
  left: 7%;
  top: -4%;
}
@media screen and ( max-width : 768px ) {
  body.anime #charaList .no1 .circle {
    margin: auto;
    left: 0;
    right: 0;
  }
}
body.anime #charaList .no1 .triRed {
  right: 3%;
  top: -16%;
  transform: rotate(-312deg);
}
body.anime #charaList .no1 .triDotWhite {
  right: 1%;
  top: -25%;
  transform: rotate(-345deg);
}
body.anime #charaList .no1 .triDotRed {
  left: 28%;
  bottom: 13%;
  transform: rotate(-45deg);
}
@media screen and ( max-width : 768px ) {
  body.anime #charaList .no1 .triDotRed {
    left: 67%;
    top: 30%;
  }
}
body.anime #charaList .no2 {
  margin-bottom: 8.4187408492vw;
}
@media screen and ( max-width : 768px ) {
  body.anime #charaList .no2 {
    margin-bottom: 13.3333333333vw;
  }
}
body.anime #charaList .no2 .image figure {
  width: 29.5021961933vw;
  left: 12.6%;
}
@media screen and ( max-width : 768px ) {
  body.anime #charaList .no2 .image figure {
    left: auto;
    width: 53.6vw;
  }
}
body.anime #charaList .no2 .circle {
  left: 23%;
  top: -7%;
}
@media screen and ( max-width : 768px ) {
  body.anime #charaList .no2 .circle {
    margin: auto;
    left: 0;
    right: 0;
  }
}
body.anime #charaList .no2 .triDotRed {
  right: 5%;
  bottom: 45%;
  transform: rotate(-143deg);
}
@media screen and ( max-width : 768px ) {
  body.anime #charaList .no2 .triDotRed {
    left: 60%;
    top: 13%;
    transform: rotate(-130deg);
    z-index: -1;
  }
}
body.anime #charaList .no2 .triDotYellow {
  right: -1%;
  bottom: -17%;
  transform: rotate(-145deg);
}
body.anime #charaList .no2 .triYellow {
  right: 12%;
  bottom: -23%;
  transform: rotate(-51deg);
}
body.anime #charaList .no3 {
  margin-bottom: 9.5168374817vw;
}
@media screen and ( max-width : 768px ) {
  body.anime #charaList .no3 {
    margin-bottom: 25.3333333333vw;
  }
}
body.anime #charaList .no3 .image figure {
  width: 29.2825768668vw;
  left: 0;
}
@media screen and ( max-width : 768px ) {
  body.anime #charaList .no3 .image figure {
    left: auto;
    width: 53.3333333333vw;
  }
}
body.anime #charaList .no3 .circle {
  left: 5%;
  top: 7%;
}
@media screen and ( max-width : 768px ) {
  body.anime #charaList .no3 .circle {
    margin: auto;
    left: 0;
    right: 0;
  }
}
body.anime #charaList .no3 .triDotRed {
  left: -6%;
  bottom: 39%;
  transform: rotate(-45deg);
}
@media screen and ( max-width : 768px ) {
  body.anime #charaList .no3 .triDotRed {
    left: 9%;
    bottom: 63%;
  }
}
body.anime #charaList .no3 .triBrown {
  right: -1%;
  bottom: -6%;
  transform: rotate(-99deg);
}
body.anime #charaList .no3 .triDotYellow {
  right: 3%;
  bottom: -1%;
  transform: rotate(-145deg);
}
body.anime #charaList .no4 {
  margin-bottom: 18.3016105417vw;
}
@media screen and ( max-width : 768px ) {
  body.anime #charaList .no4 {
    margin-bottom: 22.6666666667vw;
  }
}
body.anime #charaList .no4 .text {
  padding-top: 8vw;
}
body.anime #charaList .no4 .image figure {
  width: 32.9428989751vw;
  left: 7.2%;
}
@media screen and ( max-width : 768px ) {
  body.anime #charaList .no4 .image figure {
    left: auto;
    width: 60vw;
  }
}
body.anime #charaList .no4 .circle {
  left: 17%;
  top: -24%;
}
@media screen and ( max-width : 768px ) {
  body.anime #charaList .no4 .circle {
    margin: auto;
    left: 0;
    right: 0;
  }
}
body.anime #charaList .no4 .triDotRed {
  right: 6%;
  bottom: 56%;
  transform: rotate(-135deg);
}
@media screen and ( max-width : 768px ) {
  body.anime #charaList .no4 .triDotRed {
    z-index: -1;
    right: 16%;
    bottom: 85%;
  }
}
body.anime #charaList .no4 .triRed {
  right: 5%;
  bottom: -77%;
  transform: rotate(-23deg);
}
body.anime #charaList .no4 .triDotWhite {
  right: -3%;
  bottom: -67%;
  transform: rotate(-345deg);
}
body.anime #charaList .no5 .text {
  padding-top: 8.5333333333vw;
}
body.anime #charaList .no5 .image figure {
  width: 21.1566617862vw;
  left: 15.87%;
}
@media screen and ( max-width : 768px ) {
  body.anime #charaList .no5 .image figure {
    left: auto;
    width: 38.4vw;
  }
}
body.anime #charaList .no5 .circle {
  left: 11.5%;
  top: -13%;
}
@media screen and ( max-width : 768px ) {
  body.anime #charaList .no5 .circle {
    margin: auto;
    left: 0;
    right: 0;
  }
}
body.anime #charaList .no5 .triDotRed.lg {
  left: -6%;
  top: -60%;
  transform: rotate(-45deg);
}
body.anime #charaList .no5 .triDotRed {
  left: 29%;
  bottom: -19%;
  transform: rotate(-45deg);
}
@media screen and ( max-width : 768px ) {
  body.anime #charaList .no5 .triDotRed {
    z-index: -1;
    left: 61%;
    top: 29%;
  }
}
body.anime .bgBar.type5 .c1 {
  width: 9.3704245974vw;
  bottom: -3.2942898975vw;
  left: 6.4%;
  transform: rotate(-19.6deg);
  animation: moveDeg1 1.4s alternate infinite ease-in-out;
}
body.anime .bgBar.type5 .c2 {
  width: 14.055636896vw;
  bottom: 2.4158125915vw;
  left: 22.4%;
  transform: rotate(-19.6deg);
  animation: moveDeg1 1.4s alternate infinite ease-in-out;
  animation-delay: 0.7s;
}
body.anime .bgBar.type5 .c3 {
  width: 11.9326500732vw;
  bottom: 0vw;
  left: 44.3%;
  transform: rotate(-334deg);
  animation: moveDeg4 1.5s alternate infinite ease-in-out;
  animation-delay: 0;
}
body.anime .bgBar.type5 .c4 {
  width: 8.2723279649vw;
  bottom: 1.5373352855vw;
  left: 63.3%;
  transform: rotate(-334deg);
  animation: moveDeg4 1.4s alternate infinite ease-in-out;
  animation-delay: 0.7s;
}
body.anime .bgBar.type5 .c5 {
  width: 16.0322108346vw;
  bottom: -1.9765739385vw;
  left: 79.1%;
  transform: rotate(-347deg);
  animation: moveDeg5 1.6s alternate infinite ease-in-out;
  animation-delay: 1s;
}
body.anime #staffArea {
  position: relative;
  background-image: url(../images/animation/bg_staff.svg);
  background-size: 109.5%;
  background-repeat: no-repeat;
  background-position: -6.2225475842vw 6.588579795vw;
  padding-top: 14.934114202vw;
  padding-bottom: 18.3016105417vw;
}
@media screen and ( max-width : 768px ) {
  body.anime #staffArea {
    background: none;
    padding-top: 33.3333333333vw;
    padding-bottom: 0;
  }
}
body.anime #staffArea .contentTitle {
  padding-bottom: 13.5431918009vw;
}
@media screen and ( max-width : 768px ) {
  body.anime #staffArea .contentTitle {
    padding-bottom: 13.5431918009vw;
  }
}
body.anime #staffArea .comment {
  font-size: 1.1713030747vw;
  text-align: center;
  padding-bottom: 8.4187408492vw;
}
@media screen and ( max-width : 768px ) {
  body.anime #staffArea .comment {
    font-size: 3.2vw;
    padding-bottom: 10.6666666667vw;
  }
}
body.anime #staffArea .hexagonBox .inner {
  width: 85%;
}
@media screen and ( max-width : 768px ) {
  body.anime #staffArea .hexagonBox .inner {
    width: 66%;
  }
}
body.anime #staffArea .hexagonBox .inner dl, body.anime #staffArea .hexagonBox .inner dt, body.anime #staffArea .hexagonBox .inner dd {
  min-height: 2.5622254758vw;
}
body.anime #staffArea .hexagonBox .inner dl {
  flex-wrap: wrap;
  padding: 0.3660322108vw 0 0.2196193265vw;
}
@media screen and ( max-width : 768px ) {
  body.anime #staffArea .hexagonBox .inner dl {
    border: none;
    padding: 0vw 0 0.5333333333vw;
  }
}
@media screen and ( max-width : 768px ) {
  body.anime #staffArea .hexagonBox .inner dt, body.anime #staffArea .hexagonBox .inner dd {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #FFF;
    height: 6.1333333333vw;
  }
}

/*==============================================
 DEVELOPMENT STORY
==============================================*/
body.story .mainCopy {
  line-height: 1.4;
}
@media screen and ( max-width : 768px ) {
  body.story .mainCopy {
    margin-bottom: 11.7333333333vw;
  }
}
body.story .mainCopy .sub {
  margin-top: 0.878477306vw;
}
@media screen and ( max-width : 768px ) {
  body.story .mainCopy .sub {
    margin-top: 2.1333333333vw;
  }
}
body.story #storyArea {
  position: relative;
  background-image: url(../images/story/bg_story.svg);
  background-size: 109.5%;
  background-repeat: no-repeat;
  background-position: -6.2225475842vw 5.8565153734vw;
  padding-top: 15.3733528551vw;
  padding-bottom: 6.588579795vw;
}
@media screen and ( max-width : 768px ) {
  body.story #storyArea {
    background-repeat: repeat;
    padding-top: 16vw;
    padding-bottom: 0;
    background-size: 201%;
    background-position: -90.6666666667vw 0px;
  }
}
body.story #storyArea .inner {
  width: 79.7950219619vw;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and ( max-width : 768px ) {
  body.story #storyArea .inner {
    width: 89.3333333333vw;
  }
}
body.story #storyArea .item {
  width: 45%;
  margin-bottom: 8.0527086384vw;
}
@media screen and ( max-width : 768px ) {
  body.story #storyArea .item {
    width: 100%;
    margin-bottom: 14.6666666667vw;
  }
  body.story #storyArea .item:last-of-type {
    margin-bottom: 0;
  }
}
body.story #storyArea .item dt {
  color: #800000;
  font-size: 2.0497803807vw;
  margin-bottom: 1.317715959vw;
  font-weight: 900;
}
@media screen and ( max-width : 768px ) {
  body.story #storyArea .item dt {
    font-size: 4.8vw;
    margin-bottom: 2.4vw;
  }
}
body.story #storyArea .item dd {
  font-size: 1.317715959vw;
}
@media screen and ( max-width : 768px ) {
  body.story #storyArea .item dd {
    font-size: 3.2vw;
  }
}

/*==============================================
 NEWS LIST (ARCHIVE)
==============================================*/
#archiveListWrap {
  width: 86.82284041vw;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#archiveList {
  width: 67.5%;
  font-weight: normal;
}
@media screen and ( max-width : 768px ) {
  #archiveList {
    width: 93.3333333333vw;
  }
}

#archiveList.news .item {
  border-top: 1px solid #DCBE69;
  padding: 1.4641288433vw 0 5.8565153734vw;
}
@media screen and ( max-width : 768px ) {
  #archiveList.news .item {
    padding: 2.6666666667vw 0 5.3333333333vw;
  }
}
#archiveList.news .dateBox {
  display: flex;
  align-items: center;
}
#archiveList.news .dateBox .new {
  display: flex;
  align-items: center;
  margin-left: 0.878477306vw;
}
#archiveList.news .dateBox img {
  height: 1.317715959vw;
  width: auto;
}
@media screen and ( max-width : 768px ) {
  #archiveList.news .dateBox img {
    height: 3.4666666667vw;
  }
}
#archiveList.news .date.en {
  color: #800000;
  font-size: 1.8301610542vw;
  font-weight: normal;
}
@media screen and ( max-width : 768px ) {
  #archiveList.news .date.en {
    font-size: 3.2vw;
  }
}
#archiveList.news .title {
  font-size: 2.0497803807vw;
  margin-bottom: 1.4641288433vw;
  font-weight: 900;
}
@media screen and ( max-width : 768px ) {
  #archiveList.news .title {
    font-size: 4.8vw;
    margin-bottom: 3.2vw;
    line-height: 1.5;
  }
}
#archiveList.news .thumb {
  margin-bottom: 2.196193265vw;
  overflow: hidden;
}
@media screen and ( max-width : 768px ) {
  #archiveList.news .thumb {
    margin-bottom: 4vw;
  }
}
#archiveList.news .thumb img {
  transition: transform 0.6s;
}
#archiveList.news .caption {
  font-size: 1.1713030747vw;
}
@media screen and ( max-width : 768px ) {
  #archiveList.news .caption {
    font-size: 3.2vw;
  }
}
#archiveList.news .more img {
  height: 1.756954612vw;
  width: auto;
  margin-top: 1.4641288433vw;
  transform: opacity 0.3s;
}
@media screen and ( max-width : 768px ) {
  #archiveList.news .more img {
    margin-top: 2.6666666667vw;
    height: 4.8vw;
  }
}

#archiveList.faq .categoryTitle {
  border-bottom: 1px solid #DCBE69;
  border-top: 1px solid #DCBE69;
  font-weight: 900;
  margin-bottom: 1.8301610542vw;
  padding: 0.7320644217vw 0 0.878477306vw;
  font-size: 1.317715959vw;
  line-height: 1.2;
}
@media screen and ( max-width : 768px ) {
  #archiveList.faq .categoryTitle {
    border-bottom: none;
    font-size: 3.2vw;
    padding: 2.1333333333vw 0 1.3333333333vw;
  }
}
#archiveList.faq .item {
  margin-bottom: 3.6603221083vw;
}
@media screen and ( max-width : 768px ) {
  #archiveList.faq .item {
    margin-bottom: 10.6666666667vw;
  }
}
#archiveList.faq .question, #archiveList.faq .answer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#archiveList.faq .question dt, #archiveList.faq .answer dt {
  width: 2.7818448023vw;
}
@media screen and ( max-width : 768px ) {
  #archiveList.faq .question dt, #archiveList.faq .answer dt {
    width: 6.4vw;
  }
}
#archiveList.faq .question dd, #archiveList.faq .answer dd {
  width: 54.5387994143vw;
}
@media screen and ( max-width : 768px ) {
  #archiveList.faq .question dd, #archiveList.faq .answer dd {
    width: 77.3333333333vw;
  }
}
#archiveList.faq .question {
  align-items: center;
  border-bottom: 1px solid #DCBE69;
  margin-bottom: 1.0980966325vw;
  padding-bottom: 1.0980966325vw;
}
@media screen and ( max-width : 768px ) {
  #archiveList.faq .question {
    margin-bottom: 2.1333333333vw;
    padding-bottom: 2.6666666667vw;
    border-top: 1px solid #DCBE69;
    padding-top: 2.6666666667vw;
  }
}
#archiveList.faq .question dd {
  font-size: 1.1713030747vw;
  font-weight: bold;
  color: #800000;
}
@media screen and ( max-width : 768px ) {
  #archiveList.faq .question dd {
    font-size: 3.2vw;
  }
}
#archiveList.faq .answer {
  margin-bottom: 0.7320644217vw;
  padding-bottom: 0.7320644217vw;
}
#archiveList.faq .answer dd {
  font-size: 1.1713030747vw;
  padding-top: 0.439238653vw;
}
@media screen and ( max-width : 768px ) {
  #archiveList.faq .answer dd {
    font-size: 3.2vw;
    padding-top: 1.6vw;
  }
}

#archiveList.news.detail h2 {
  font-weight: bold;
  color: #800000;
  font-size: 1.9033674963vw;
  margin-bottom: 0.7320644217vw;
  padding-bottom: 0.3660322108vw;
  border-bottom: 2px solid #800000;
  line-height: 1.5;
}
@media screen and ( max-width : 768px ) {
  #archiveList.news.detail h2 {
    font-size: 4.2666666667vw;
    margin-bottom: 1.6vw;
    padding-bottom: 0.8vw;
  }
}
#archiveList.news.detail h3 {
  font-weight: bold;
  font-size: 1.756954612vw;
  margin-bottom: 0.7320644217vw;
  line-height: 1.5;
}
@media screen and ( max-width : 768px ) {
  #archiveList.news.detail h3 {
    font-size: 4vw;
    margin-bottom: 1.6vw;
  }
}
#archiveList.news.detail h4 {
  color: #800000;
  font-weight: bold;
  font-size: 1.317715959vw;
  margin-bottom: 0.7320644217vw;
  line-height: 1.5;
}
@media screen and ( max-width : 768px ) {
  #archiveList.news.detail h4 {
    font-size: 3.4666666667vw;
    margin-bottom: 1.6vw;
  }
}
#archiveList.news.detail h5, #archiveList.news.detail h6 {
  color: #800000;
  font-weight: bold;
  font-size: 1.317715959vw;
  margin-bottom: 0.7320644217vw;
  line-height: 1.5;
}
@media screen and ( max-width : 768px ) {
  #archiveList.news.detail h5, #archiveList.news.detail h6 {
    font-size: 3.4666666667vw;
    margin-bottom: 1.6vw;
  }
}
#archiveList.news.detail p {
  margin-bottom: 0.7320644217vw;
}
@media screen and ( max-width : 768px ) {
  #archiveList.news.detail p {
    margin-bottom: 1.6vw;
  }
}
#archiveList.news.detail a {
  text-decoration: underline;
  color: #800000;
}
#archiveList.news.detail a:hover {
  text-decoration: none;
}
#archiveList.news.detail strong {
  font-weight: bold;
}

#archiveList a:hover .more img {
  opacity: 0.7;
}

#sideBar {
  width: 27%;
}
@media screen and ( max-width : 768px ) {
  #sideBar {
    width: 100%;
    margin-top: 8vw;
  }
}
#sideBar h6.title {
  background-color: #800000;
  color: #FFF;
  font-size: 1.317715959vw;
  font-weight: 900;
  padding: 0.6588579795vw;
  line-height: 1;
  margin-bottom: 1.4641288433vw;
}
@media screen and ( max-width : 768px ) {
  #sideBar h6.title {
    padding: 1.6vw;
    font-size: 2.6666666667vw;
    margin-bottom: 2.1333333333vw;
  }
}
#sideBar .categories {
  font-size: 1.1713030747vw;
}
@media screen and ( max-width : 768px ) {
  #sideBar .categories {
    font-size: 2.6666666667vw;
  }
}
@media screen and ( max-width : 768px ) {
  #sideBar .categories li {
    margin-bottom: 2.1333333333vw;
    padding: 0 0.8vw;
  }
}
#sideBar .lists {
  font-weight: normal;
}
#sideBar .item {
  border-bottom: 1px solid #DCBE69;
  padding: 0.7320644217vw 0;
}
@media screen and ( max-width : 768px ) {
  #sideBar .item {
    padding: 0vw 0 2.6666666667vw;
    margin-bottom: 2.6666666667vw;
  }
}
#sideBar .dateBox {
  display: flex;
  align-items: center;
}
#sideBar .dateBox .new {
  display: flex;
  align-items: center;
  margin-left: 0.6588579795vw;
}
#sideBar .dateBox img {
  height: 1.0248901903vw;
  width: auto;
}
@media screen and ( max-width : 768px ) {
  #sideBar .dateBox img {
    height: 2.4vw;
  }
}
#sideBar .date.en {
  color: #800000;
  font-size: 1.1713030747vw;
  font-weight: normal;
}
@media screen and ( max-width : 768px ) {
  #sideBar .date.en {
    font-size: 3.2vw;
  }
}
#sideBar .title {
  font-size: 1.1713030747vw;
  font-weight: normal;
  line-height: 1.5;
}
@media screen and ( max-width : 768px ) {
  #sideBar .title {
    font-size: 2.6666666667vw;
    line-height: 1.5;
  }
}
#sideBar .btn {
  margin-top: 2.196193265vw;
}
@media screen and ( max-width : 768px ) {
  #sideBar .btn {
    margin-top: 10.6666666667vw;
  }
}