/** ------------ ------------ ------------ **/
/** 変数 **/
/** rem用のベースフォントサイズはここで宣言するらしい **/
:root {
  font-size: 14px;
  /** --euroTypekit: 'clarendon-text-pro', sans-serif; **/
}
/** ------------ ------------ ------------ **/
/** reset **/
html, body, ul, li{
  -webkit-animation: none 0s ease 0s 1 normal none running;
          animation: none 0s ease 0s 1 normal none running;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
  border: medium none currentColor;
  border-collapse: separate;
  -o-border-image: none;
     border-image: none;
  border-radius: 0;
  border-spacing: 0;
  bottom: auto;
  box-shadow: none;
  box-sizing: content-box;
  caption-side: top;
  clear: none;
  clip: auto;
  color: #000;
  -webkit-columns: auto;
          columns: auto;
  -webkit-column-count: auto;
          column-count: auto;
  -webkit-column-fill: balance;
          column-fill: balance;
  -webkit-column-gap: normal;
          column-gap: normal;
  -webkit-column-rule: medium none currentColor;
          column-rule: medium none currentColor;
  -webkit-column-span: 1;
          column-span: 1;
  -webkit-column-width: auto;
          column-width: auto;
  content: normal;
  counter-increment: none;
  counter-reset: none;
  cursor: auto;
  direction: ltr;
  display: inline;
  empty-cells: show;
  float: none;
  font-family: serif;
  font-size: medium;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-stretch: normal;
  line-height: normal;
  height: auto;
  -webkit-hyphens: none;
      -ms-hyphens: none;
          hyphens: none;
  left: auto;
  letter-spacing: normal;
  list-style: disc outside none;
  margin: 0;
  max-height: none;
  max-width: none;
  min-height: 0;
  min-width: 0;
  opacity: 1;
  orphans: 2;
  outline: medium none invert;
  overflow: visible;
  overflow-x: visible;
  overflow-y: visible;
  padding: 0;
  page-break-after: auto;
  page-break-before: auto;
  page-break-inside: auto;
  -webkit-perspective: none;
          perspective: none;
  -webkit-perspective-origin: 50% 50%;
          perspective-origin: 50% 50%;
  position: static;
  right: auto;
  -moz-tab-size: 8;
    -o-tab-size: 8;
       tab-size: 8;
  table-layout: auto;
  text-align: left;
  text-align-last: auto;
  text-decoration: none;
  text-indent: 0;
  text-shadow: none;
  text-transform: none;
  top: auto;
  -webkit-transform: none;
          transform: none;
  -webkit-transform-origin: 50% 50% 0;
          transform-origin: 50% 50% 0;
  -webkit-transform-style: flat;
          transform-style: flat;
  transition: none 0s ease 0s;
  unicode-bidi: normal;
  vertical-align: baseline;
  visibility: visible;
  white-space: normal;
  widows: 2;
  width: auto;
  word-spacing: normal;
  z-index: auto;
  all: initial;
}
body {
  font-family: "YuGothic","Yu Gothic","游ゴシック","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ","Meiryo",sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5 {
  margin: 0px;
}
p {
  display: inline-block;
  line-height: 1.6em;
  margin: 0px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
span {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a {
  text-decoration: none;
  color: #323232;
}
/** 画像の下の隙間対策 **/
img {
  display: block;
  border: 0px;
}
/** ------------ ------------ ------------ **/
header {
  position: absolute;
  z-index: 5000;
  width: 100%
}
header > div {
    width: 100%;
    /** 黒ベースヘッダー **/
    /** スクロール時のヘッダー **/
}
header > div div.container {
      width: 960px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      margin: 0 auto;
      padding-top: 20px;
      padding-bottom: 20px;
      /** ロゴ **/
      /** メニュー **/
}
header > div div.container div.logo {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
}
header > div div.container ul.menu {
        margin-left: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
}
header > div div.container ul.menu li {
          display: inline-block;
          margin-left: 38px;
          /** **/
}
header > div div.container ul.menu li.menu-link {}
header > div div.container ul.menu li.menu-link a {
              position: relative;
}
header > div div.container ul.menu li.menu-link a span {
                font-family: 'clarendon-urw', sans-serif;
                font-weight: 400;
                font-size: 17px;
}
header > div div.container ul.menu li.menu-link a::after {
                content: '';
                position: absolute;
                width: 100%;
                height: 2px;
                background-color: #1e39c3;
                bottom: -8px;
                left: 0px;
                -webkit-transform-origin: left;
                        transform-origin: left;
                -webkit-transform: scaleX(0);
                        transform: scaleX(0);
                transition: -webkit-transform .3s ease-out;
                transition: transform .3s ease-out;
                transition: transform .3s ease-out, -webkit-transform .3s ease-out;
}
header > div div.container ul.menu li.menu-link a:hover::after {
                -webkit-transform: scaleX(1);
                        transform: scaleX(1);
}
header > div.header {
      z-index: 5001;
      position: relative;
      background-color: rgba(0, 0, 0, .9);
      /** メニュー **/
}
header > div.header div.container {
        /** ロゴ **/
}
header > div.header div.container div.logo {
          /** logo mark&text **/
}
header > div.header div.container div.logo div {}
header > div.header div.container div.logo div.logo-name {
              margin-left: 25px;
}
header > div.header ul.menu {}
header > div.header ul.menu li {
          /** **/
}
header > div.header ul.menu li.menu-link {}
header > div.header ul.menu li.menu-link span {
              color: #fff;
}
header > div.header .menu .volume {
  display:none;
}
header > div.scrollHeader {
      z-index: 5000;
      position: fixed;
      top: 0px;
      background-color: rgba(255, 255, 255, .9);
      -webkit-transform: translateY(-76px);
              transform: translateY(-76px);
      transition: -webkit-transform .3s ease-out;
      transition: transform .3s ease-out;
      transition: transform .3s ease-out, -webkit-transform .3s ease-out;
      /** container **/
      /** メニュー **/
      /** active **/
}
header > div.scrollHeader div.container {
        /** ロゴ **/
}
header > div.scrollHeader div.container div.logo div.logo-name {
          margin-left: 22px;
}
header > div.scrollHeader ul.menu {}
header > div.scrollHeader ul.menu li {
          /** **/
}
header > div.scrollHeader ul.menu li.menu-link {}
header > div.scrollHeader ul.menu li.menu-link span {
              color: #323232;
}
header > div.scrollHeader ul.menu li.menu-link.volume {}
header > div.scrollHeader ul.menu li.menu-link.volume a {
                display: block;
                width: 16px;
                height: 12px;
                overflow: hidden;
                padding-top: 2px;
}
header > div.scrollHeader ul.menu li.menu-link.volume a img {
                  -webkit-transform: translateY(-12px);
                          transform: translateY(-12px);
}
header > div.scrollHeader ul.menu li.menu-link.volume.active img {
                -webkit-transform: translateY(0px);
                        transform: translateY(0px);
}
header > div.scrollHeader.active {
        -webkit-transform: translateY(0px);
                transform: translateY(0px);
}
/** FOOTER **/
footer {
  background-color: #323232;
  text-align: center;
  margin-top: 110px;
  padding-top: 80px;
  padding-bottom: 80px
}
footer .logo-block {}
footer .logo-block img {
      margin: 0 auto;
}
footer .logo-block img.logo-text {
        padding-top: 25px;
        padding-bottom: 65px;
        width: 72px;
        height: auto;
}
footer .sitemap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-bottom: 60px;
}
footer .sitemap .menu-link {
      display: inline-block;
      padding-right: 39px;
}
footer .sitemap .menu-link:last-child {
        padding-right: 0px;
}
footer .sitemap .menu-link a {
        display: block;
}
footer .sitemap .menu-link a span {
          font-family: 'clarendon-urw', sans-serif;
          font-weight: 400;
          font-size: 17px;
          color: #fff;
}
footer .copyright {
    font-family: 'Karla', sans-serif;
    font-size: 15px;
    color: #808080;
}
/** ---------- ---------- ---------- ---------- ---------- **/
/** — — — — —  共通  — — — — — **/
#top .section-block,.section-block-full {
  margin: 0 auto;
  padding-top: 214px
  /** タイトルラベル **/
}
#top .section-block .title, .section-block-full .title {
    text-align: center;
    padding-bottom: 67px;
}
#top .section-block .title h4, .section-block-full .title h4 { font-size: 15px; margin-top: 25px;
}
#top .section-block .title > img, .section-block-full .title > img { margin: 0 auto;
}
#top .section-block {
  width: 960px;
}
/** ---------- ---------- ---------- ---------- ---------- **/
#top {
/** ---------- ---------- ---------- ---------- ---------- **/
/* imgタグで埋め込んだsvgの色を変える： http://benhowdle.im/deSVG/ */
/** hot episodes **/
/** ---------- ---------- ---------- ---------- ---------- **/
/** PERSON **/
/** ---------- ---------- ---------- ---------- ---------- **/
/** SCENES **/
/** ---------- ---------- ---------- ---------- ---------- **/
/** ABOUT **/
}
#top #cover {
  position: relative;
  background-color: #080f33;
  color: #fff;
  height: 900px;
  /** カルーセル **/
  /** Recent **/
  /** 下向きのロゴ **/
}
#top #cover .carousel {
    z-index: 1;
    position: relative;
    height: 100%;
    /** カルーセルのナビ **/
    /** カルーセルのアイテム **/
}
#top #cover .carousel .carousel-navi {
      z-index: 2000;
      position: relative;
      width: 960px;
      margin: 0 auto;
      /** navi button **/
}
#top #cover .carousel .carousel-navi > div {
        position: absolute;
        top: 360px;
        /** aタグ **/
}
#top #cover .carousel .carousel-navi > div.prev {
          left: 0px;
}
#top #cover .carousel .carousel-navi > div.prev a:hover img { -webkit-transform: translateX(-3px); transform: translateX(-3px);
}
#top #cover .carousel .carousel-navi > div.next {
          right: 0px;
}
#top #cover .carousel .carousel-navi > div.next a:hover img { -webkit-transform: translateX(3px); transform: translateX(3px);
}
#top #cover .carousel .carousel-navi > div.swiper-button-disabled {
          pointer-events: none;
          opacity: .1;
}
#top #cover .carousel .carousel-navi > div a {
          /* display: block; */
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          border: 1px solid #fff;
          border-radius: 50%;
          width: 50px;
          height: 50px;
          transition: border-color .2s ease-out, background-color .2s ease-out;
          /** hover **/
          /** img **/
}
#top #cover .carousel .carousel-navi > div a:hover {
            border-color: #1e39c3;
            background-color: #1e39c3;
}
#top #cover .carousel .carousel-navi > div a img {
            transition: -webkit-transform .2s ease-out;
            transition: transform .2s ease-out;
            transition: transform .2s ease-out, -webkit-transform .2s ease-out;
}
#top #cover .carousel .carousel-items {
      width: 100%;
      height: 100%;
      overflow: hidden;
}
#top #cover .carousel .carousel-items > .swiper-wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        height: 100%;
        /** item **/
}
#top #cover .carousel .carousel-items > .swiper-wrapper > .swiper-slide {
          position: relative;
          -webkit-box-flex: 1;
              -ms-flex: 1 0 100%;
                  flex: 1 0 100%;
          width: 100%;
          height: 100%;
          /** active slide **/
}
#top #cover .carousel .carousel-items > .swiper-wrapper > .swiper-slide .photo {
            z-index: -1000;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            overflow: hidden;
            opacity: 0;
            transition: opacity .3s ease-in-out;
            /** before **/
            /** img **/
}
#top #cover .carousel .carousel-items > .swiper-wrapper > .swiper-slide .photo:before {
              content: '';
              position: absolute;
              background-image: url('/images/common/cover_line.png');
              width: 100%;
              height: 100%;
}
#top #cover .carousel .carousel-items > .swiper-wrapper > .swiper-slide .photo img {}
#top #cover .carousel .carousel-items > .swiper-wrapper > .swiper-slide .block {
            padding-top: 100px;
            width: 960px;
            margin: 0 auto;
            padding-left: 105px;
            padding-right: 50px;
            box-sizing: border-box;
            /** 中身 **/
}
#top #cover .carousel .carousel-items > .swiper-wrapper > .swiper-slide .block .label {
              padding-top: 75px;
              padding-bottom: 24px;
}
#top #cover .carousel .carousel-items > .swiper-wrapper > .swiper-slide .block .title {
              font-size: 30px;
              letter-spacing: .2em;
              line-height: 1.7em;
              padding-bottom: 10px;
}
#top #cover .carousel .carousel-items > .swiper-wrapper > .swiper-slide .block .caption {
              display: block;
              font-family: 'Karla', sans-serif;
              font-size: 13px;
              padding-bottom: 50px;
}
#top #cover .carousel .carousel-items > .swiper-wrapper > .swiper-slide .block .more-link {
              display: inline-block;
              border: 1px solid #fff;
              padding: 18px 42px;
              line-height: 1em;
              color: #323232;
              transition: all .25s ease-out;
              /** span **/
              /** hover **/
}
#top #cover .carousel .carousel-items > .swiper-wrapper > .swiper-slide .block .more-link span {
                color: #fff;
                font-size: 12px;
                font-weight: bold;
}
#top #cover .carousel .carousel-items > .swiper-wrapper > .swiper-slide .block .more-link:hover {
                border-color: #1e39c3;
                background-color: #1e39c3;
                color: #fff;
}
#top #cover .carousel .carousel-items > .swiper-wrapper > .swiper-slide.swiper-slide-active {}
#top #cover .carousel .carousel-items > .swiper-wrapper > .swiper-slide.swiper-slide-active .photo {
              opacity: 1;
              transition-delay: .4s;
              transition-duration: .4s;
}
#top #cover .recent {
    position: absolute;
    bottom: 74px;
    right: 50%;
    margin-right: -480px;
    z-index: 1;
}
#top #cover .recent .recent-header {
      margin: 0 auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: end;
          -ms-flex-pack: end;
              justify-content: flex-end;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      line-height: 12px;
      padding-bottom: 33px;
      /** **/
}
#top #cover .recent .recent-header div {}
#top #cover .recent .recent-header div.recent-all {
          border-left: 1px solid #4d4d4d;
          margin-left: 20px;
          padding-left: 20px;
          /* display:none; */
}
#top #cover .recent .recent-header div.recent-all a {
            position: relative;
            color: #fff;
            font-size: 12px;
            /** hover **/
}
#top #cover .recent .recent-header div.recent-all a::after {
              content: '';
              position: absolute;
              left: -1px;
              bottom: -5px;
              width: 100%;
              height: 1px;
              background-color: #1e39c3;
              -webkit-transform: scaleX(0);
                      transform: scaleX(0);
              -webkit-transform-origin: left;
                      transform-origin: left;
              transition: -webkit-transform .22s ease-out;
              transition: transform .22s ease-out;
              transition: transform .22s ease-out, -webkit-transform .22s ease-out;
}
#top #cover .recent .recent-header div.recent-all a:hover {}
#top #cover .recent .recent-header div.recent-all a:hover::after {
                -webkit-transform: scaleX(1);
                        transform: scaleX(1);
}
#top #cover .recent .recent-header div.label {}
#top #cover .recent .recent-items {
      margin: 0 auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: end;
          -ms-flex-pack: end;
              justify-content: flex-end;
      /** **/
}
#top #cover .recent .recent-items .item {
        display: inline-block;
        position: relative;
        padding-left: 30px;
        opacity: 1;
        transition: opacity .25s ease-in-out;
        /** hover **/
        /** active **/
}
#top #cover .recent .recent-items .item .photo {
          position: relative;
}
#top #cover .recent .recent-items .item .photo .number {
            position: absolute;
            top: 36px;
            left: -26px;
}
#top #cover .recent .recent-items .item .photo .number span {
              font-family: 'clarendon-urw', sans-serif;
              font-size: 25px;
              color: #fff;
}
#top #cover .recent .recent-items .item .photo img {
            border-radius: 2px;
            width: 180px;
}
#top #cover .recent .recent-items .item h3 {
          font-size: 13px;
          color: #fff;
          padding-top: 24px;
          padding-bottom: 4px;
}
#top #cover .recent .recent-items .item .caption {
          font-family: 'Karla', sans-serif;
          font-size: 10px;
          color: #999;
}
#top #cover .recent .recent-items .item::after {
          content: '';
          position: absolute;
          left: 30px;
          bottom: -8px;
          width: 180px;
          height: 2px;
          background-color: #1e39c3;
          -webkit-transform: scaleX(0);
                  transform: scaleX(0);
          -webkit-transform-origin: left;
                  transform-origin: left;
          transition: -webkit-transform .3s ease-out;
          transition: transform .3s ease-out;
          transition: transform .3s ease-out, -webkit-transform .3s ease-out;
}
#top #cover .recent .recent-items .item:hover {}
#top #cover .recent .recent-items .item:hover::after {
            -webkit-transform: scaleX(1);
                    transform: scaleX(1);
}
#top #cover .recent .recent-items .item.active {
          opacity: .3;
          pointer-events: none;
}
#top #cover .scroll-logo {
    z-index: 10;
    position: absolute;
    left: 50%;
    margin-left: -430px;
    bottom: 161px;
}
#top #hot-episodes {}
#top #hot-episodes .episodes {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
#top #hot-episodes .episodes .item {
      display: inline-block;
      position: relative;
      justify-content: center;
      padding-top: 13px;
      padding-left: 15px;
      padding-right: 15px;
      padding-bottom: 53px;
}
#top #hot-episodes .episodes .item .thumb {
        display: block;
        position: relative;
        /** hover **/
}
#top #hot-episodes .episodes .item .thumb .number {
          z-index: 10;
          text-align: center;
          /* position: absolute;
          top: 66px;
          left: -50px; */
}
#top #hot-episodes .episodes .item .thumb .number span {
            font-family: 'clarendon-urw', sans-serif;
            font-weight: 400;
            font-size: 50px;
            color: #323232;
}
#top #hot-episodes .episodes .item .thumb .photo {
          z-index: 1;
          overflow: hidden;
          border-radius: 6px;
          background-color: #1e39c3;
}
#top #hot-episodes .episodes .item .thumb .photo img {
            transition: opacity .3s ease-in-out;
}
#top #hot-episodes .episodes .item .thumb h3 {
          position: absolute;
          bottom: 27px;
          width: 100%;
          font-size: 15px;
          letter-spacing: .1em;
          color: #fff;
          text-align: center;
          transition: -webkit-transform .3s ease-out;
          transition: transform .3s ease-out;
          transition: transform .3s ease-out, -webkit-transform .3s ease-out;
}
#top #hot-episodes .episodes .item .thumb:hover {}
#top #hot-episodes .episodes .item .thumb:hover h3 {
            -webkit-transform: translateY(-38px);
                    transform: translateY(-38px);
}
#top #hot-episodes .episodes .item .thumb:hover .number span {
            color: #1e39c3;
}
#top #hot-episodes .episodes .item .thumb:hover .photo img {
            opacity: .2;
}
#top #hot-episodes .episodes .item .caption {
        font-family: 'Karla', sans-serif;
        font-size: 15px;
        color: #323232;
        width: 100%;
        text-align: center;
        margin-top: 32px;
        margin-bottom: 18px;
}
#top #hot-episodes .episodes .item .link {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
}
#top #hot-episodes .episodes .item .link .icon {
          padding-right: 10px;
          width: 28px; height: 28px;
}
#top #hot-episodes .episodes .item .link .icon img { width: 100%; height: 100%;
}
#top #hot-episodes .episodes .item .link span {
          font-size: 13px;
          font-weight: bold;
          color: #1e39c3;
}
#top #hot-episodes .all-link {
    text-align: center;
}
#top #hot-episodes .all-link > a {
      display: inline-block;
      border: 1px solid #323232;
      line-height: 1em;
      padding: 13px 0px;
      width: 196px;
      color: #323232;
      transition: all .25s ease-out;
      /** hover **/
}
#top #hot-episodes .all-link > a > span {
        font-size: 12px;
        font-weight: bold;
}
#top #hot-episodes .all-link > a:hover {
        border-color: #1e39c3;
        background-color: #1e39c3;
        color: #fff;
}
#top #person {
  /** もっと見る **/
}
#top #person .carousel-block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
#top #person .carousel-block .navi-btn {
      box-sizing: border-box;
      border: 1px solid #000;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      text-align: center;
      cursor: pointer;
      opacity: .4;
      transition: opacity .3s ease-in-out;
      /** img **/
      /** prev/next **/
}
#top #person .carousel-block .navi-btn img {
        margin: 0 auto;
        margin-top: 19px;
        transition: -webkit-transform .3s ease-in-out;
        transition: transform .3s ease-in-out;
        transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
}
#top #person .carousel-block .navi-btn.swiper- {
        /** disabled **/
}
#top #person .carousel-block .navi-btn.swiper-prev {
          margin-right: 30px;
          /** hover **/
}
#top #person .carousel-block .navi-btn.swiper-prev:hover {
            opacity: .8;
}
#top #person .carousel-block .navi-btn.swiper-prev:hover img {
              -webkit-transform: translateX(-4px);
                      transform: translateX(-4px);
}
#top #person .carousel-block .navi-btn.swiper-next {
          margin-left: 30px;
          /** hover **/
}
#top #person .carousel-block .navi-btn.swiper-next:hover {
            opacity: .8;
}
#top #person .carousel-block .navi-btn.swiper-next:hover img {
              -webkit-transform: translateX(4px);
                      transform: translateX(4px);
}
#top #person .carousel-block .navi-btn.swiper-button-disabled {
          opacity: .1;
          pointer-events: none;
}
#top #person .carousel-block #person-carousel {
      width: 800px;
      -webkit-box-flex: 1;
          -ms-flex: 1 0 800px;
              flex: 1 0 800px;
      overflow-x: hidden;
      /** swiper bullet **/
}
#top #person .carousel-block #person-carousel .swiper-wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        transition-timing-function:ease-out;
}
#top #person .carousel-block #person-carousel .swiper-wrapper ul {
          -webkit-box-flex: 1;
              -ms-flex: 1 0 800px;
                  flex: 1 0 800px;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: justify;
              -ms-flex-pack: justify;
                  justify-content: space-between;
}
#top #person .carousel-block #person-carousel .swiper-wrapper ul li.item {
            display: inline-block;
}
#top #person .carousel-block #person-carousel .swiper-wrapper ul li.item a {
              display: block;
              text-align: center;
              color: #323232;
              /** hover **/
}
#top #person .carousel-block #person-carousel .swiper-wrapper ul li.item a .photo {
                width: 150px;
                height: 150px;
                border-radius: 50%;
                margin: 0 auto;
                overflow: hidden;
                -webkit-mask-image: -webkit-radial-gradient(white, black); /** safariでのバグ回避用 **/
}
#top #person .carousel-block #person-carousel .swiper-wrapper ul li.item a .photo img {
                  transition: -webkit-transform .5s ease-out;
                  transition: transform .5s ease-out;
                  transition: transform .5s ease-out, -webkit-transform .5s ease-out;
}
#top #person .carousel-block #person-carousel .swiper-wrapper ul li.item a h4 {
                margin-top: 18px;
                font-size: 15px;
                line-height: 1.8em;
}
#top #person .carousel-block #person-carousel .swiper-wrapper ul li.item a .caption {
                font-family: 'Karla', sans-serif;
                font-size: 13px;
                line-height: 1.8em;
                letter-spacing: .02em;
}
#top #person .carousel-block #person-carousel .swiper-wrapper ul li.item a:hover {}
#top #person .carousel-block #person-carousel .swiper-wrapper ul li.item a:hover .photo {}
#top #person .carousel-block #person-carousel .swiper-wrapper ul li.item a:hover .photo img {
                    -webkit-transform: scale(1.1);
                            transform: scale(1.1);
}
#top #person .carousel-block #person-carousel .swiper-pagination-bullets {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        margin-top: 34px;
        margin-bottom: 43px;
}
#top #person .carousel-block #person-carousel .swiper-pagination-bullets .swiper-pagination-bullet {
          display: block;
          margin: 0 4px;
          width: 6px;
          height: 6px;
          border: 1px solid #808bc2;
          border-radius: 50%;
          cursor: pointer;
          /** active **/
}
#top #person .carousel-block #person-carousel .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
            border-color: #1e39c3;
            background-color: #1e39c3;
}
#top #person .all-link {
    text-align: center;
}
#top #person .all-link > a {
      display: inline-block;
      border: 1px solid #323232;
      line-height: 1em;
      padding: 13px 0px;
      width: 196px;
      color: #323232;
      transition: all .25s ease-out;
      /** hover **/
}
#top #person .all-link > a > span {
        font-size: 12px;
        font-weight: bold;
}
#top #person .all-link > a:hover {
        border-color: #1e39c3;
        background-color: #1e39c3;
        color: #fff;
}
#top #scenes {}
#top #scenes .block {}
#top #scenes .block ul {
      width: 860px;
      margin: 0 auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      -ms-flex-pack: distribute;
          justify-content: space-around;
}
#top #scenes .block ul li {
        padding-bottom: 2px;
        display: inline-block;
}
#top #about {
  position: relative;
}
#top #about .background {
    z-index: -10;
    position: absolute;
    top: 50px;
    left:0px;
}
#top #about .lead {
    width: 100%;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    color: #323232;
    line-height: 3em;
}
#top #about .logo-block {
    width: 100%;
    text-align: center;
    padding-top: 57px;
}
#top #about .logo-block > img {
      margin: 0 auto;
}
#top #about .logo-block > img.text-logo {
        width: 144px;
        height: auto;
        padding-top: 37px;
}

#top #projects {
  padding-bottom: 120px;
}

#top #projects .project{
  display: flex;
  margin-bottom: 45px;
}
#top #projects .left{
  width: 50%;
  display: block;
  padding: 50px 55px;
}
#top #projects .left h3{
  font-size: 16px;
}
#top #projects .left h2{
  font-size: 26px;
}
#top #projects .left .caption{
  font-size: 12px;
}
#top #projects .left .text{
  font-size: 14px;
  padding-top: 30px;
  font-weight: bold;
  color: #85878a;
}
#top #projects .right{
  width:50%;
  display: block;
}
#top #projects .right:after{
  content: url(../images/common/logo_bottom.svg);
  position: absolute;
  margin-top: -200px;
  margin-left: 374px;
}
#top #projects .project-1 {
  background: #212029;
  color: #ffffff;
}
#top #projects .project-2 {
  background: #eaedf2;
  color: #141414;
}

.section-block-cont {
  width: 960px;
  margin: 0 auto;
  padding-bottom: 120px;
}
#top #solutions {
  background: #e8e8e8;
}

#top #solutions .solutions {
  display: flex;
  justify-content: space-between;
}

#top #solutions .solutions .solution {
  width: 270px;
  text-align: center;
  padding: 0 37px;
}

#top #solutions .solutions .solution img {
  margin: 0 auto 25px;
}

#top #solutions .solutions .solution .title {
  padding-bottom: 8px;
}

#top #solutions .solutions .solution .subtitle {
  font-size: 16px;
  padding-bottom: 18px;
}

#top #solutions .solutions .solution .text {
  font-size: 14px;
  text-align: left;
  margin: 0 auto;
  font-weight: bold;
  color: #85878a;
}

#top #solutions .solutions .solution .more span{
  display:block;
  margin-top: 24px;
  padding: 13px 0;
  width: 100%;
  border: 1px #323232 solid;
  font-size: 14px;
}
#top #solutions .solutions .solution .more span:hover {
  background: #1e39c3;
  color: #fff;
  border: 1px #1e39c3 solid;
  transition: all .25s ease-out;
}

.address-block {
  margin-top: 30px;
  color: #808080;
}
.address-block a{
  display: block;
  margin-bottom: 20px;
  color: #808080;
}
.sns {
  display: flex;
}
.sns li{
  margin: 0 auto;
}

#single{
/** ------------ ------------ ------------ **/
/** ------------ ------------ ------------ **/
/** ------------ ------------ ------------ **/
/** block **/
/** p **/
}
#single #cover {
  position: relative;
  /** down arrow **/
  /** audio **/
  /** photo thumb **/
}
#single #cover .photo {
    z-index: 1;
    overflow: hidden;
    width: 100%;
    height: 600px;
}
#single #cover .description {
    z-index: 10;
    position: absolute;
    width: 100%;
    top: 180px;
    left: 0px;
    color: #fff;
    text-align: center;
}
#single #cover .description .episode img { margin: 0 auto;
}
#single #cover .description h1 {
      font-size: 45px;
      margin-top: 24px;
      margin-bottom: 12px;
      letter-spacing: .2em;
}
#single #cover .description .caption {
      font-family: 'Karla', sans-serif;
      font-size: 14px;
      color: rgba(255, 255, 255, .5);
}
#single #cover::after {
    content: url('../images/common/single/down_arrow.svg');
    position: absolute;
    top: 438px;
    left: 50%;
    margin-left: -12px;
}

#single #cover .audio {
    position: absolute;
    top: 510px;
    left: 50%;
    margin-left: 116px;
}
#single #cover .audio .player {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
}
#single #cover .audio .player li {
        margin-right: 16px;
        /** **/
}
#single #cover .audio .player li.on {
          cursor: pointer;
}
#single #cover .audio .player li.off {
          cursor: pointer;
}
#single #cover .audio .player li.line span {
          cursor: default;
}
#single #cover .audio .player li.active {}
#single #cover .audio .player li.active span {
            opacity: 1;
}
#single #cover .audio .player li.analyzer {
          position: relative;
          display: block;
          overflow: hidden;
          width: 32px;
          height: 11px;
}
#single #cover .audio .player li.analyzer.active {}
#single #cover .audio .player li.analyzer.active img {
              /** transform: translateY(-11px); **/
              -webkit-animation: analyzerAnime .3s steps(3) 0s infinite;
                      animation: analyzerAnime .3s steps(3) 0s infinite;
}
#single #cover .audio .player span {
        font-family: 'Karla', sans-serif;
        font-size: 14px;
        color: #fff;
        opacity: .2;
}
#single #cover .photo-thumb {
    position: absolute;
    left: 50%;
    margin-left: -480px;
    bottom: -130px;
}
#single #cover .photo-thumb img {
      border-radius: 3px;
}
#single #description {
  display: block;
  position: relative;
  width: 960px;
  margin: 0 auto;
  margin-top: 90px;
  /** profile **/
  /** movie **/
  /** lead **/
}
#single #description .profile {
    display: block;
    width: 245px;
    margin-left: 595px;
}
#single #description .profile .company {
      font-size: 16px;
      font-weight: bold;
      margin-top: 5px;
}
#single #description .profile .name {
      font-size: 25px;
      margin-top: 7px;
      margin-bottom: 7px;
}
#single #description .profile .text {
      font-size: 12px;
      font-weight: bold;
      line-height: 2em;
}
#single #description .movie {
    margin-top: 65px;
    margin-left: 470px;
}
#single #description .movie-modal {
    z-index: -5000;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, .8);
    text-align: center;
    opacity: 0;
    transition: opacity .3s ease-out;
}
#single #description .movie-modal > .player {
      display: inline-block;
}
#single #description .movie-modal.active {
      z-index: 5000;
      opacity: 1;
}
#single #description .movie-modal.active-out {
      opacity: 0;
}
#single #description .lead {
    position: absolute;
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
    color: #1e39c3;
    top: 150px;
    left: 85px;
    line-height: 3.3em;
    letter-spacing: .35em;
}
#single #description .lead h2 {
      font-size: 16px;
      margin-left: 30px;
      margin-right: 30px;
}
/* #single #description .lead::before {
      content: url(/images/common/single/dquotes02.svg);
      margin-top: 80px;
}
#single #description .lead::after {
      content: url(/images/common/single/dquotes01.svg);
      margin-top: 80px;
} */

#single #quote {
  display: block;
  position: relative;
  width: 960px;
  margin: 0 auto;
  margin-top: 90px;
}

#single #quote .lead {
    /* position: absolute; */
    margin: 0 auto;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    color: #323232;
    top: 200px;
    left: 85px;
    line-height: 3.3em;
    letter-spacing: .35em;
}

#single #quote .lead h2 {
    margin-left: 30px;
    margin-right: 30px;
}

#single #quote .lead::before {
      content: url(../images/common/single/dquotes02.svg);
      margin-top: 80px;
}
#single #quote .lead::after {
      content: url(../images/common/single/dquotes01.svg);
      margin-top: 80px;
}

#single #quote-2 {
  display: block;
  position: relative;
  /* width: 960px; */
  width: 100%;
  margin: 0 auto;
  margin-top: -350px;
}

#single #quote-2 .lead {
    /* position: absolute; */
    margin: 0 auto;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    color: #fff;
    /* top: 100px;
    left: 85px; */
    line-height: 3.3em;
    letter-spacing: .35em;
}

#single #quote-2 .lead h2 {
    margin-left: 30px;
    margin-right: 30px;
}

#single #quote-2 .lead::before {
      content: url(../images/common/single/dquotes02-w.svg);
      margin-top: 80px;
}
#single #quote-2 .lead::after {
      content: url(../images/common/single/dquotes01-w.svg);
      margin-top: 80px;
}

#single .block p {
  font-size: 16px;
  line-height: 2em;
  font-weight: bold;
  color: #646464;
}
#single .block p.blue {
  color: #1e39c3;
}
#single .block {
  /** flex ----- **/
  /** full ----- **/
  /** text-full ----- **/
}
#single .block-flex {
    width: 780px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 50px;
    margin-bottom: 50px;
    /** text **/
    /** photo **/
}
#single .block-flex .text-expand {
      margin-left: 90px;
      margin-right: 90px;
}
#single .block-flex .text-left {
      width: 390px;
      margin-left: 0px;
}
#single .block-flex .text-right {
      width: 390px;
      margin-right: 0px;
}
#single .block-flex .photo-left {
      width: 340px;
      margin-right: 50px;
}
#single .block-flex .photo-right {
      width: 340px;
      margin-left: 50px;
}
#single .block-full .photo-center {
        width: 560px;
        margin: 0 auto;
}
#single .block-full {
    width: 100%;
    margin-top: 130px;
    margin-bottom: 130px;
}
#single .block-full .photo-expand {}
#single .block-full .photo-expand img { width: 100%;
}
#single .block-full .photo-expand .photo-lead { margin: -36.5% 0 0 0;
}
#single .block-text-full {
    width: 780px;
    margin: 0 auto;
    margin-top: 130px;
    margin-bottom: 130px;
}

/* project */
#project #cover .photo {
  z-index: 1;
  overflow: hidden;
  width: 100%;
  height: 600px;
}
#project #cover .description {
  z-index: 10;
  position: absolute;
  width: 100%;
  top: 240px;
  left: 0px;
  color: #fff;
  text-align: center;
}
#project #cover .description h1 {
    font-size: 45px;
    /* margin-top: 24px; */
    margin-bottom: 12px;
    letter-spacing: 2px;
}
#project #cover .description h3 {
  font-size: 24px;
  margin-top: 34px;
  /* margin-bottom: 12px; */
  letter-spacing: 2px;
}
#project #cover .description p {
  font-family: 'Karla', sans-serif;
}

#project #cover .description .caption {
    font-family: 'Karla', sans-serif;
    font-size: 14px;
    color: rgba(255, 255, 255, .5);
}

#project #cover .photo-thumb {
  position: absolute;
  left: 50%;
  margin-left: -480px;
  bottom: -130px;
}
#project #cover .photo-thumb img {
    border-radius: 3px;
}
#project #description {
display: block;
position: relative;
width: 960px;
margin: 0 auto;
margin-top: 90px;
/** profile **/
/** movie **/
/** lead **/
}

#project .block p {
font-size: 16px;
line-height: 2em;
font-weight: bold;
color: #646464;
}
#project .block p.blue {
color: #1e39c3;
}
#project .block p.copy {
  padding-top: 100px;
}
#project .block {
/** flex ----- **/
/** full ----- **/
/** text-full ----- **/
}
#project .block-flex {
  width: 780px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 50px;
  margin-bottom: 50px;
  /** text **/
  /** photo **/
}
#project .block-flex .text-expand {
    margin-left: 90px;
    margin-right: 90px;
}

#project .block-full {
  width: 100%;
  margin-top: 130px;
  margin-bottom: 130px;
}
#project .block-full .photo-expand {}
#project .block-full .photo-expand img { width: 100%;
}
#project .block-full .photo-expand .photo-lead { margin: -36.5% 0 0 0;
}
#project .block-text-full {
  width: 780px;
  margin: 0 auto;
  margin-top: 130px;
  margin-bottom: 130px;
}

#project .thumb {
  margin-top: 80px;
  margin-bottom: 20px;
}

#project .thumb .photo {
  margin-top: 20px;
  margin-bottom: 20px;
}

#project .btn-coming {
  display: block;
  border: 1px solid #fff;
  width: 100%;
  margin-top: 60px;
  padding: 28px 0;
  line-height: 1em;
  color: #323232;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  border: 3px #eaeaea solid;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
#project .btn-coming span {
}

/*  */
/* solution */
/*  */
#solution #cover .photo {
  z-index: 1;
  overflow: hidden;
  width: 100%;
  height: 400px;
}
#solution #cover .description {
  z-index: 10;
  position: absolute;
  width: 100%;
  top: 180px;
  left: 0px;
  color: #fff;
  text-align: center;
}
#solution #cover .description p {
  font-family: 'Karla', sans-serif;
}
#solution #cover .description h1 {
    font-size: 45px;
    margin-top: 24px;
    /* margin-bottom: 12px; */
    letter-spacing: 2px;
}
#solution #cover .description h3 {
  font-size: 24px;
  margin-top: 34px;
  /* margin-bottom: 12px; */
  letter-spacing: 2px;
}
#solution #cover .description .caption {
    font-family: 'Karla', sans-serif;
    font-size: 14px;
    color: rgba(255, 255, 255, .5);
}

#solution #cover .photo-thumb {
  position: absolute;
  left: 50%;
  margin-left: -480px;
  bottom: -130px;
}
#solution #cover .photo-thumb img {
    border-radius: 3px;
}
#solution #description {
display: block;
position: relative;
width: 960px;
margin: 0 auto;
margin-top: 90px;
/** profile **/
/** movie **/
/** lead **/
}

#solution .block p {
font-size: 16px;
line-height: 2em;
font-weight: bold;
color: #646464;
}
#solution .block p.blue {
color: #1e39c3;
}
#solution .block p.text {
  margin-top: 32px;
}
#solution .block h3 {
  padding-top:  80px;
  font-size: 24px;
}
#solution .block {
/** flex ----- **/
/** full ----- **/
/** text-full ----- **/
}

#solution .block .text ul li{
  list-style: none;
}

#solution .block .text ul li{
  display:block;
  font-size: 16px;
  font-family: "YuGothic","Yu Gothic","游ゴシック","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ","Meiryo";
  line-height: 2em;
  font-weight: bold;
  color: #646464;
  padding: 6px 0;
}
#solution .block .text ul li:first-child {
  margin-top: 24px;
}
#solution .block-flex {
  width: 780px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 50px;
  margin-bottom: 50px;
  /** text **/
  /** photo **/
}

#solution .block .partner p {
  font-size: 14px;
  padding: 0px;
  margin-top: 10px;
}
#solution .block-flex .text-expand {

}

#solution .block-full {
  width: 100%;
  margin-top: 130px;
  margin-bottom: 130px;
}
#solution .block-full .photo-expand {}
#solution .block-full .photo-expand img { width: 100%;
}
#solution .block-full .photo-expand .photo-lead { margin: -36.5% 0 0 0;
}
#solution .block-text-full {
  width: 780px;
  margin: 0 auto;
  margin-top: 130px;
  margin-bottom: 130px;
}

#solution .thumb {
  margin-top: 80px;
  margin-bottom: 20px;
}

#solution .thumb .photo {
  margin-top: 20px;
  margin-bottom: 20px;
}

#solution .btn-coming {
  display: block;
  border: 1px solid #fff;
  width: 100%;
  margin-top: 60px;
  padding: 28px 0;
  line-height: 1em;
  color: #323232;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  border: 3px #eaeaea solid;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
#solution .btn-coming span {
}



/** **/
@-webkit-keyframes analyzerAnime {
  0% {
    -webkit-transform: translateY(-11px);
            transform: translateY(-11px);
  }
  100% {
    -webkit-transform: translateY(-44px);
            transform: translateY(-44px);
  }
}
@keyframes analyzerAnime {
  0% {
    -webkit-transform: translateY(-11px);
            transform: translateY(-11px);
  }
  100% {
    -webkit-transform: translateY(-44px);
            transform: translateY(-44px);
  }
}
@media (min-width:769px) {
  #top #solutions .solutions .solution:first-child {
    padding: 0 37px 0 0;
  }
  #top #solutions .solutions .solution:last-child {
    padding: 0 0 0 37px;
  }
}


@media (max-width:768px) {
  header>div div.container {
    width: 85%;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  header>div div.container ul.menu {
    display: none;
  }

  header > div.header div.container div.logo div.logo-mark img, header > div.scrollHeader div.container div.logo div.logo-mark img{
    width: 30px;
    margin-left: 8%;
  }

  header > div.header div.container div.logo div.logo-name img, header > div.scrollHeader div.container div.logo div.logo-name img{
    width: 88px;
  }

  #top #cover {
    height: 800px;
  }

  #top #cover .carousel .carousel-items>.swiper-wrapper>.swiper-slide .block {
    width: 100%;
    padding-left: 8%;
    padding-right: 8%;
  }

  #top #cover .carousel .carousel-items > .swiper-wrapper > .swiper-slide .block .title {
    font-size: 18px;
  }
  #top #cover .carousel .carousel-items>.swiper-wrapper>.swiper-slide .block .label {
    padding-top: 15px;
  }

  #top #cover .carousel .carousel-items>.swiper-wrapper>.swiper-slide .block .label img{
    width: 100px;
  }

  #top #cover .carousel .carousel-items > .swiper-wrapper > .swiper-slide .block .caption {
    font-size: 12px;
    padding-bottom: 23px;
  }

  #top #cover .carousel .carousel-navi>div {
    display: none;
  }

  #top #cover .recent {
    bottom: 84px;
    right: auto;
    width: 94%;
    margin-left: 6%;
    overflow: hidden;
  }

  #top #cover .recent .recent-header {
    -webkit-justify-content: start; /* Safari */
    justify-content: flex-start;
    margin-left: 2%;
  }

  #top #cover .recent .recent-header div.recent-all a {
    font-size: 10px;
  }

  #top #cover .recent .recent-header .label img {
    width: 102px;
  }

  #top #cover .recent .recent-items {
    -webkit-justify-content: start; /* Safari */
    justify-content:         flex-start;
  }

  #top #cover .recent .recent-items .item {
    padding-left: 15px;
    overflow: hidden;
    width: 90px;
  }
  #top #cover .recent .recent-items .item .photo .number {
    left: -12px;
    top: 14px;
  }
  #top #cover .recent .recent-items .item .photo .number span {
    font-size: 15px;
  }
  #top #cover .recent .recent-items .item .photo img {
    width: 90px;
  }

  #top #cover .recent .recent-items .item h3 {
    font-size: 10px;
    padding-top: 14px;
  }

  #top #cover .scroll-logo {
    margin-left: -12px;
  }

  #top #cover .scroll-logo img {
    width: 24px;
  }

  #top .section-block {
    width: 100%;
  }

  #top .section-block {
    overflow: hidden;
  }

  #top #cover .scroll-logo {
    bottom: 29px;
  }

  #top .section-block, .section-block-full {
    padding-top: 75px;
  }

  #top .section-block .title, .section-block-full .title {
    padding-bottom: 36px;
  }

  #top .section-block .title h4, .section-block-full .title h4 {
    font-size: 10px;
    margin-top: 13px;
  }

  #top #hot-episodes .all-link>a>span, #top #person .all-link>a>span,
  #top #scenes .all-link>a>span, #top #about .all-link>a>span {
    font-size: 10px;
  }

  /*hot episode*/
  #top #hot-episodes .section-block .title>img, #hot-episodes .title>img {
    width: 157px;
  }
  #top #hot-episodes .episodes {
    justify-content: center;
  }
  #top #hot-episodes .episodes .item {
    padding:13px 10px 27px;
    overflow: hidden;
  }

  #top #hot-episodes .episodes .item .thumb .number {
    left: -10%;
  }

  #top #hot-episodes .episodes .item .thumb .photo {
    height: 175px;
  }

  #top #hot-episodes .episodes .item .thumb .photo img{
    height: 100%;
  }

  #top #hot-episodes .episodes .item .thumb h3 {
    font-size: 10px;
  }
  #top #hot-episodes .episodes .item .thumb .number span {
    font-size: 30px;
  }

  #top #hot-episodes .episodes .item .caption, #top #hot-episodes .episodes .item .link {
    font-size: 10px;
    margin-top: 15px;
    margin-bottom: 0px;
  }
  #top #hot-episodes .episodes .item .link span {
    font-size: 10px;
  }

  #top #hot-episodes .episodes .title {
    width: 227px;
  }


/* projects */
  #top #projects{
    padding-bottom: 40px;
  }
  #top #projects img {
    width: 110px;
  }
  #top #projects .text {
    padding: 30px 5% 40px ;
  }

  #top #projects .project {
    display: block;
    margin: 4%;
  }

  #top #projects .left {
    width: 100%;
    padding: 0;
  }
  #top #projects .left h2 {
    font-size: 14px;
  }
  #top #projects .left h2 {
    font-size: 24px;
  }

  #top #projects .left .caption {
    font-family: 'Karla', sans-serif;
    margin-top: 6px;
    margin-bottom: 10px;
  }
  #top #projects .left .text {
    min-height: 190px;
    font-size: 12px;
    line-height: 1.6rem;
  }

  #top #projects .project-1 .left .pj-title {
    padding: 155px 5% 10px;
    background: url('../images/parts/top/projects/project-1.jpg') no-repeat center;
  }

  #top #projects .project-1 .left .pj-title:after {
    content: url(../images/common/logo_bottom_sp.svg);
    position: absolute;
    margin-top: -20px;
    right: 40px;
  }
  #top #projects .project-2 .left .pj-title {
    padding: 155px 5% 10px;
    background: url('../images/parts/top/projects/project-2.jpg') no-repeat center;
  }

  #top #projects .project-2 .left .pj-title:after {
    content: url(../images/common/logo_bottom_sp.svg);
    position: absolute;
    margin-top: -20px;
    right: 40px;
  }
  #top #projects .right {
    display:none;
  }

  #top #projects .right:after {
    right: 40px;
  }

  #top #solutions .solutions .solution .title {
    padding-bottom: 1px;
  }

/* solutions */
  #top #solutions .title img{
    width: 120px;
  }
  #top #solutions .section-block-cont {
    width: 100%;
    padding-bottom: 40px;
  }
  #top #solutions .solutions {
    display: block;
    width: 86.55%;
    margin: 0px 6.67%;
    padding: 0 0 80px 0;
  }
  #top #solutions .solutions .solution {
    width: 94%;
    margin: 0 3%;
    padding: 0 0 80px 0;
  }

  #top #solutions .solutions .solution .title {
    font-size: 16px;
  }

  #top #solutions .solutions .solution .subtitle {
    font-size: 12px;
    font-family: 'Karla', sans-serif;
  }

  #top #solutions .solutions .solution .text {
    font-size: 12px;
    line-height: 1.6rem;
  }

  #top #solutions .solutions .solution .more span {
    width: 100%;
  }



  #top #person .section-block .title>img, #person .title>img {
    width: 88px;
  }

  #top #person .carousel-block {
    width: 100%;
    overflow: hidden;
  }

  #top #person .carousel-block #person-carousel {
    margin-bottom: 34px;
    flex: 1 0 400px;
  }

  #top #person .carousel-block .navi-btn.swiper-prev, #top #person .carousel-block .navi-btn.swiper-next {
    display: none;
  }

  #top #person .carousel-block #person-carousel .swiper-pagination-bullets {
    display: none;
  }

  #top #person .carousel-block #person-carousel .swiper-wrapper ul {
    justify-content: flex-start;
    margin-left: 4%;
  }

  #top #person .carousel-block #person-carousel .swiper-wrapper ul li.item {
    margin-left: 2%;
    margin-right: 2%;
  }

  #top #person .carousel-block #person-carousel .swiper-wrapper ul li.item a .photo {
    width: 75px;
    height: 75px;
  }

  #top #person .carousel-block #person-carousel .swiper-wrapper ul li.item a .photo img {
    width: 75px;
    height: 75px;
  }

  #top #person .carousel-block #person-carousel .swiper-wrapper ul li.item a h4 {
    font-size: 10px;
  }

  #top #person .carousel-block #person-carousel .swiper-wrapper ul li.item a .caption {
    font-size: 8px;
    width: 75px;
  }

  /* scenes */

  #top #scenes .section-block .title>img, #scenes .title>img {
    width: 83px;
  }

  #top #scenes .block ul {
    width: 100%;
    margin: 0;
    overflow: hidden;
    justify-content: center;
  }

  #top #scenes .block ul li {
    padding: .5%;
    width: 30.5%;
  }

  #top #scenes .block ul li .photo img{
    width: 100%;
  }

  /* about */

  #top #about .section-block .title>img, #about .title>img {
    width: 74px;
  }

  #top #about .lead {
    width: 85%;
    margin: 0 7.5%;
    font-size: 12px;
    line-height: 2em;
  }

#top #about .background {
  width: 100%;
  overflow: hidden;
}

/* ############# */
/* SINGLE PAGE */
/* ############# */
  #single #description {
    width: 100%;
  }
  #single #cover::after {
    content:url(../images/common/single/down_arrow_sp.svg);
    top: 360px;
    margin-left: -6px;
  }
  #single #cover .photo {
    width: 100%;
    height: 440px;
  }
  #single #description {
    margin-top: 150px;
  }
  #single #cover .description {
    width: 100%;
    top: 110px;
    margin-top: 0;
  }
  #single #cover .description h1 {
    width: 85%;
    margin: 24px auto 10px;
  }
  #single #cover .description .caption {
    font-size: 12px;
    width: 80%;
    margin: 0 auto;
  }
  #single #cover .photo-thumb {
    margin: 0;
    left: 50%;
    margin-left: -64px;
    bottom: -10%;
    z-index: 5;
  }
  #single #cover .photo-thumb img{
    width: 125px;
  }
  #single #cover .description h1 {
    font-size: 21px;
  }
  #single #cover .description .episode img {
    width: 50%;
  }
  #single #description .lead {
    position: relative;
    margin: -100px 0 0 -78px;
    left: 50%;
  }
  #single #description .lead h2 {
    margin: 0;
  }
  #single #description .movie {
    margin: 0 auto;
    margin-top: 200px
  }
  #single #description .movie img {
    width: 80%;
    margin: 0 auto;
  }
  #single #cover .audio {
    left: 0;
    top: 330px;
    margin-left: 28%;
  }
  #single #description .profile {
    width: 85%;
    margin: 0 auto;
    text-align: center;
  }
  #single #description .profile .company {
    font-size: 12px
  }
  #single #description .profile .name {
    font-size: 16px;
  }
  #single .block-flex {
    width: 100%;
  }
  #single .block p {
    font-size: 12px;
  }
  #single .block-text-full {
    width: 85%;
    margin: 20px auto 60px;
  }
  #single .block-full {
    margin: 20px auto 0;
  }
  #single .block-full .photo-expand {
    overflow: hidden;
    margin-top: 80px;
  }
  #single .block-full .photo-expand img {
    width: 220%;
    margin-left: -50%;
  }
  #single .block-full .photo-expand .photo-lead {
    margin: -80% 0 0 -60%;
  }
  #single .block-full .photo-center {
    width: 85%;
  }
  #single .block-full .photo-center img {
    width: 100%;
  }
  #single #quote {
    width: 85%;
    margin: 40px auto 0;
  }
  #single #quote .lead {
    left: 0;
    line-height: 0em;
  }
  #single #quote .lead h2 {
    font-size: 16px;
    line-height: 2.3em;
  }
  #single #quote .lead::before {
    content: url(../images/common/single/dquotes02_sp.svg);
    margin-top: 80px;
  }
  #single #quote .lead::after {
    content: url(../images/common/single/dquotes01_sp.svg);
    margin-top: 80px;
  }
  #single .block-flex {
    display: block;
  }
  #single .block-flex .photo-right {
    width: 85%;
    margin: 20px auto 0;
  }
  #single .block-flex .photo-right img {
    width: 100%;
  }
  #single .block-flex .photo-left {
    width: 85%;
    margin: 20px auto 0;
  }
  #single .block-flex .photo-left img {
    width: 100%;
  }
  #single .block-flex .text-left {
    width: 85%;
    margin: 20px auto 0;
  }
  #single .block-flex .text-right {
    width: 85%;
    margin: 20px auto 0;
  }

  /* project */
  #project #cover .description h1 {
    font-size: 26px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  #project #cover .description h3 {
    font-size: 18px;
    margin-top: 16px;
  }

  #project .block p {
    font-size: 12px;
  }

  #project #cover .description {
    top: 250px;
  }

  #project .block-flex .text-expand {
    width: 84%;
    padding: 0 8%;
    margin: 0;
  }

  #project .block-flex {
    width:100%;
  }

  #project .block p.caption {
    padding-top: 0;
  }

  #project .block p.copy {
    padding-top: 10px;
  }

  #project .thumb {
    margin-top: 40px;
  }

  #project .thumb img {
    width: 100%;
  }
  #project .thumb .photo {
    margin-top: 16px;
    margin-bottom: 16px;
  }
  #project .btn-coming {
    font-size: 16px;
    border: 2px #eaeaea solid;
    margin-top: 40px;

  }

  /* solution */

  #solution .block-flex {
    width: 84%;
    padding: 0 8%;
  }

  #solution #cover .description h1 {
    font-size: 18px;
    margin-top: 12px;
  }

  #solution .block h3 {
    padding-top: 0;
    font-size: 16px;
  }

  #solution .block p {
    font-size: 12px;
  }

  #solution .block .text ul li {
    font-size: 12px;
    line-height: 1.5em;
  }

  #solution .block .text ul li:first-child {
    margin-top: 12px;
  }

  #solution .block .partner p {
    font-size: 12px;
  }

}