@charset "utf-8";
figure, img {
  line-height: 0
}

a, body {
  color: #030f32
}

figure img, header {
  width: 100%
}

blockquote, body, code, dd, div, dl, dt, fieldset, figure, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul {
  margin: 0;
  padding: 0
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

fieldset, img {
  border: 0
}

address, caption, cite, code, dfn, em, strong, th, var {
  font-style: normal;
  font-weight: 400
}

ol, ul {
  list-style: none
}

caption, th {
  text-align: left
}

.back, .btn, .center, .sectionTit, .sectionTit span {
  text-align: center
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: 400
}

q:after, q:before {
  content: ''
}

abbr, acronym {
  border: 0;
  font-variant: normal
}

sup {
  vertical-align: text-top
}

sub {
  vertical-align: text-bottom
}

input, select, textarea {
  /* font-family: inherit; */
  font-size: inherit;
  font-weight: inherit
}

legend {
  color: #000
}

body, html {
  height: 100%
}

body {
  background: #FFF;
  /* font-family: Avenir, "Noto Sans Japanese", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif; */
  font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: .03em;
  word-wrap: break-word;
  overflow-wrap: break-word
}

img {
  max-width: 100%;
  height: auto;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%
}

::-moz-selection {
  background: #030f32;
  color: #fff
}

::selection {
  background: #030f32;
  color: #fff
}

.home .contact, header {
  background: #fff
}

a {
  text-decoration: none;
  -webkit-transition: all .3s ease;
  transition: all .3s ease
}

footer, footer a {
  color: #999
}

.keyvisual .info, header {
  -webkit-transition: .5s all 1s ease
}

.bold {
  font-weight: 700
}

.sectionTit, header .gNavi li {
  font-weight: 600;
  /* font-family: Montserrat, sans-serif */
}

.subTxt {
  font-size: .8em;
  line-height: 1.4em
}

.clearfix:after {
  content: "";
  display: block;
  clear: both
}

header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  transition: .5s all 1s ease
}

footer, footer .copy, header .gNavi, header .logo {
  position: absolute
}

header .logo {
  /* top: 15px; */
  top: 5px;
  left: 5%;
  /* width: 130px */
  width: 250px;
}

header .logo svg {
  /* width: 130px */
  width: 200px;
  height: 23px;
  fill: #030f32
}

.home header {
  top: -60px
}

.home.load header {
  top: 0
}

footer {
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 50px 5%;
  background: #222;
  font-size: 11px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

.textBlock, .wrap {
  -webkit-box-sizing: border-box
}

footer a:hover {
  opacity: .6
}

footer .logo {
  margin-bottom: 20px;
  width: 115px
}

.complete .lead, .error404 .lead, footer .address {
  margin-bottom: 60px
}

footer .logo svg {
  width: 115px;
  height: 21px;
  fill: #999
}

footer .copy {
  bottom: 50px;
  right: 5%
}

.wrap {
  position: relative;
  min-height: 100%;
  padding: 60px 0 263px;
  box-sizing: border-box
}

.home .wrap {
  padding-top: 0
}

.section.service {
  padding-bottom: 0
}

.sectionTit span {
  display: block;
  color: #999;
  font-weight: 400
}

.lead {
  font-size: 16px
}

.back a, .btn a, .btn input {
  display: inline-block;
  min-width: 250px;
  padding: 18px 0;
  text-align: center;
  -webkit-appearance: none;
  border-radius: 0;
  cursor: pointer
}

.btn .main, .formWrap .btn input {
  background: #030f32;
  color: #fff;
  border: 1px solid #030f32
}

.back a, .btn .sub, .loading {
  background: #fff
}

.btn .sub {
  border: 1px solid #030f32;
  font-weight: 700
}

.back a {
  border: 1px solid #eee
}

.loading {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%
}

.keyvisual {
  position: relative
}

.keyvisual .catch, .keyvisual .img, .keyvisual .info, .keyvisual .ph, .keyvisual:before, .scroll, .scroll:after {
  position: absolute
}

.keyvisual:before {
  content: '';
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 75%;
  background: rgba(3, 15, 50, .05)
}

.keyvisual .ph {
  top: 90px;
  right: 0;
  width: 80%;
  height: 75%
}

.keyvisual .ph span {
  display: block;
  height: 100%
}

.keyvisual .img {
  top: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover
}

.keyvisual .catch {
  overflow: hidden;
  color: #030f32;
  top: 50%;
  left: 5%;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  letter-spacing: .08em;
  z-index: 2
}

.keyvisual .catch .en {
  display: block;
  margin: 0 0 20px;
  font-size: 6.5vw;
  /* font-family: Montserrat, sans-serif; */
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1em
}

.keyvisual .slide li {
  display: none
}

.keyvisual .slide li.current {
  display: block
}

.keyvisual .current .img {
  -webkit-animation: scale 8s linear 0s forwards;
  animation: scale 8s linear 0s forwards
}

.keyvisual .slide li.current .ph .blockAnime::before {
  -webkit-animation: showBlock1 1s cubic-bezier(0, 1.07, 1, 1) 0s forwards, hideBlock1 1s cubic-bezier(0, 1.07, 1, 1) 5.7s forwards;
  animation: showBlock1 1s cubic-bezier(0, 1.07, 1, 1) 0s forwards, hideBlock1 1s cubic-bezier(0, 1.07, 1, 1) 5.7s forwards
}

@-webkit-keyframes scale {
  0% {
    -webkit-transform: scale(1)
  }
  100% {
    -webkit-transform: scale(1.13)
  }
}

@keyframes scale {
  0% {
    transform: scale(1)
  }
  100% {
    transform: scale(1.13)
  }
}

@-webkit-keyframes showBlock1 {
  0%, 20% {
    left: 101%
  }
  100%, 90% {
    left: 205%
  }
}

@keyframes showBlock1 {
  0%, 20% {
    left: 101%
  }
  100%, 90% {
    left: 205%
  }
}

@-webkit-keyframes hideBlock1 {
  0% {
    left: 0;
    opacity: 1
  }
  100%, 30% {
    left: 101%
  }
}

@keyframes hideBlock1 {
  0% {
    left: 0;
    opacity: 1
  }
  100%, 30% {
    left: 101%
  }
}

.keyvisual .slide .catch .blockAnime_inner {
  opacity: 0
}

.keyvisual .slide .current .catch .blockAnime_inner {
  -webkit-animation: showTxt 1s linear .5s forwards, hideTxt 1s linear 4.8s forwards;
  animation: showTxt 1s linear .5s forwards, hideTxt 1s linear 4.8s forwards
}

.keyvisual .slide .current .catch .blockAnime::before {
  -webkit-animation: showBlock2 1s cubic-bezier(0, 1.07, 1, 1) .5s forwards, hideBlock2 1s cubic-bezier(0, 1.07, 1, 1) 4.8s forwards;
  animation: showBlock2 1s cubic-bezier(0, 1.07, 1, 1) .5s forwards, hideBlock2 1s cubic-bezier(0, 1.07, 1, 1) 4.8s forwards
}

@-webkit-keyframes showBlock2 {
  0% {
    left: 0
  }
  50% {
    left: 101%
  }
  100% {
    left: 205%
  }
}

@keyframes showBlock2 {
  0% {
    left: 0
  }
  50% {
    left: 101%
  }
  100% {
    left: 205%
  }
}

@-webkit-keyframes hideBlock2 {
  0% {
    left: 0
  }
  50% {
    left: 101%
  }
  100% {
    left: 205%
  }
}

@keyframes hideBlock2 {
  0% {
    left: 0
  }
  50% {
    left: 101%
  }
  100% {
    left: 205%
  }
}

@-webkit-keyframes showTxt {
  0%, 50% {
    opacity: 0
  }
  100%, 51% {
    opacity: 1
  }
}

@keyframes showTxt {
  0%, 50% {
    opacity: 0
  }
  100%, 51% {
    opacity: 1
  }
}

@-webkit-keyframes hideTxt {
  0%, 50% {
    opacity: 1
  }
  100%, 51% {
    opacity: 0
  }
}

@keyframes hideTxt {
  0%, 50% {
    opacity: 1
  }
  100%, 51% {
    opacity: 0
  }
}

.keyvisual .info {
  bottom: -100px;
  left: 5%;
  font-size: 13px;
  transition: .5s all 1s ease
}

.load .keyvisual .info {
  bottom: 30px
}

.keyvisual .info a:hover {
  color: #0047ce
}

.home .date {
  font: 400 13px Montserrat, sans-serif
}

.home .category {
  display: inline-block;
  margin: 0 5px 0 0;
  padding: 0 4px;
  font-size: 11px;
  background: #d5dbec;
  color: inherit;
  vertical-align: 1px
}

.scroll {
  opacity: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 70px;
  z-index: 1;
  -webkit-transition: .5s all 1s ease;
  transition: .5s all 1s ease
}

.textBlock, .titleArea .ph {
  -webkit-transition: all 1s ease
}

.load .scroll {
  opacity: 1
}

.scroll:after {
  width: 100%;
  height: 100%;
  display: block;
  content: "";
  top: 0;
  background: #030f32;
  -webkit-animation: scroll 1.2s linear 0s infinite;
  animation: scroll 1.2s linear 0s infinite
}

.article_keyvisual.figure:before, .blockAnime::before, .textBlock .title:after {
  content: ''
}

@-webkit-keyframes scroll {
  0% {
    height: 0%;
    top: 0;
    bottom: auto
  }
  46% {
    height: 100%;
    top: 0;
    bottom: auto
  }
  50%, 54% {
    height: 100%;
    bottom: 0;
    top: auto
  }
  100% {
    height: 0%;
    bottom: 0;
    top: auto
  }
}

@keyframes scroll {
  0% {
    height: 0%;
    top: 0;
    bottom: auto
  }
  46% {
    height: 100%;
    top: 0;
    bottom: auto
  }
  50%, 54% {
    height: 100%;
    bottom: 0;
    top: auto
  }
  100% {
    height: 0%;
    bottom: 0;
    top: auto
  }
}

.titleArea .ph {
  position: relative;
  top: 0;
  opacity: 0;
  line-height: 0;
  overflow: hidden;
  transition: all 1s ease
}

.titleArea .ph.fadeIn {
  opacity: 1
}

.titleArea .ph.fadeIn img {
  -webkit-animation: scale 8s linear 0s forwards;
  animation: scale 8s linear 0s forwards
}

.textBlock {
  text-align: left;
  box-sizing: border-box;
  transition: all 1s ease
}

.textBlock .title {
  font: 600 30px Montserrat, sans-serif
}

.textBlock .title .number {
  display: block;
  margin-bottom: 10px;
  font-size: 24px
}

.textBlock .title:after {
  display: block;
  width: 60px;
  height: 1px;
  margin: 30px 0;
  background: #030f32
}

.consulting .titleArea {
  text-align: right
}

.contact, .formWrap .btn, .pager, .pager a, .pager span {
  text-align: center
}

.consulting .textBlock {
  color: #fff;
  background: #030f32
}

.consulting .textBlock .title:after {
  background: #fff
}

.serviceList h4 {
  margin: 0 0 30px;
  font-weight: 600
}

.serviceList h4 span {
  display: block;
  margin: 5px 0 0;
  font: 600 12px Montserrat, sans-serif;
  color: #999
}

.serviceList h4 svg {
  float: left;
  margin: 0 10px 0 0;
  width: 50px;
  height: 50px;
  fill: none;
  stroke: #000;
  stroke-width: 6;
  stroke-miterlimit: 10
}

.infoList li, .journalList li, .philosophy li, .serviceList li {
  position: relative;
  opacity: 0;
  top: 30px;
  -webkit-transition: all 1s ease;
  transition: all 1s ease
}

.infoList li.fadeIn, .journalList li.fadeIn, .philosophy li.fadeIn, .serviceList li.fadeIn {
  opacity: 1;
  top: 0
}

.article_keyvisual {
  position: relative;
  background-size: cover;
  background-position: 50% 50%
}

.article_keyvisual .inner {
  position: relative;
  z-index: 2
}

.article_keyvisual.noimage {
  background-image: linear-gradient(60deg, #3d3393 0, #2b76b9 37%, #2cacd1 65%, #35eb93 100%)
}

.info.detail .article_keyvisual .date {
  color: #fff;
  margin: 0
}

.info.detail .article_keyvisual .date .category {
  background: rgba(255, 255, 255, .6);
  min-width: initial;
  padding: 1px 10px 0
}

.article_keyvisual.figure:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: rgba(3, 15, 50, .5)
}

.blockAnime, .catch .blockAnime, .catch .blockAnime_inner, .shareBlock li {
  display: inline-block
}

.shareBlock {
  margin: 0 0 60px;
  padding: 25px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee
}

.shareBlock li {
  vertical-align: middle;
  margin: 0 15px 0 0;
  font-size: 22px
}

.shareBlock li:last-child {
  margin: 0
}

.shareBlock .share {
  font: 600 11px Montserrat, sans-serif
}

.shareBlock .hatena svg {
  width: 19px;
  fill: #030f32
}

.info.detail .article_keyvisual .title {
  color: #fff
}

.contact {
  background: #f8f8f8
}

.contact .lead {
  margin-bottom: 30px
}

.contact .btn {
  font: 600 20px Montserrat, sans-serif
}

.info.detail .date, .infoList .date {
  /* font-family: Montserrat, sans-serif */
}

.blockAnime {
  position: relative;
  overflow: hidden
}

.blockAnime::before {
  position: absolute;
  display: block;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  background: #030f32;
  z-index: 2;
  -webkit-transform: translate3d(-101%, 0, 0);
  transform: translate3d(-101%, 0, 0);
  -webkit-transition: .3s all .1s cubic-bezier(0, 1.07, 1, 1);
  transition: .3s all .1s cubic-bezier(0, 1.07, 1, 1)
}

.consulting .blockAnime::before {
  background: #fff
}

.section .blockAnime_inner {
  opacity: 0
}

.section .show2 .blockAnime_inner {
  opacity: 1
}

.show.blockAnime::before {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0)
}

.show2.blockAnime::before {
  -webkit-transform: translate3d(105%, 0, 0);
  transform: translate3d(105%, 0, 0)
}

.infoList li {
  border-top: 1px solid #ccc
}

.infoList li:last-child {
  border-bottom: 1px solid #ccc
}

.info.detail .category, .infoList .category {
  display: inline-block;
  margin: 0 5px 0 0;
  min-width: 110px;
  font-size: 11px;
  background: #d5dbec;
  color: inherit;
  text-align: center;
  vertical-align: 1px
}

.info.detail .date {
  margin: 0 0 20px;
  font-weight: 400
}

.info.detail li .date {
  margin: 0 0 10px
}

.info.detail .text {
  padding: 40px 0 60px;
  line-height: 2em;
  font-size: 15px
}

.info.detail .text a {
  text-decoration: underline
}

.pager {
  margin: 40px 0 0
}

.pager a, .pager span {
  display: inline-block;
  width: 43px;
  border: 1px solid #030f32;
  line-height: 40px
}

.pager span {
  background: #030f32;
  color: #fff;
  font-weight: 700
}

.pager a.next, .pager a.prev {
  width: 60px;
  font-size: 12px
}

.company table {
  width: 100%
}

.company th {
  width: 25%;
  padding-right: 1%
}

.company td, .company th {
  padding: 0 0 30px;
  vertical-align: top
}

.form {
  margin: 40px 0 20px
}

.form dt {
  margin: 0 0 10px;
  font-weight: 700
}

.form dd {
  margin: 0 0 20px
}

.form label {
  display: block;
  -webkit-transition: all .3s ease;
  transition: all .3s ease
}

.form .wpcf7-list-item {
  display: inline-block;
  margin: 0 0 5px
}

.form input[type=text], .form input[type=email], .form input[type=tel], .form input[type=url], .form input[type=date], .form textarea {
  display: block;
  width: 100%;
  padding: 10px;
  background: #fff;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 3px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none
}

.form input[type=checkbox]:checked+span {
  font-weight: 700;
  color: #0047ce
}

.form .form2col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

.form .form2col .wpcf7-form-control-wrap {
  width: 49%
}

.form .form2col .wpcf7-form-control-wrap:first-child {
  margin-right: 2%
}

.form .required {
  padding: 1px 5px 0;
  background: #bd9219;
  color: #fff;
  font-size: 10px;
  vertical-align: 2px
}

.formWrap .notes {
  margin: 0 0 20px;
  padding: 20px;
  font-size: 12px;
  background: #f8f8f8
}

.formWrap .notes .bold {
  margin: 0 0 5px
}

.formWrap .btn {
  font-weight: 700
}

div.wpcf7 .ajax-loader {
  display: none!important
}

span.wpcf7-not-valid-tip {
  font-size: 11px!important
}

div.wpcf7-validation-errors {
  border: 2px solid red!important;
  color: red
}

.form .wpcf7-not-valid {
  background: #ffe6e6!important
}

.support .text {
  margin: 0 0 20px
}

.decimalList {
  list-style: decimal;
  padding: 0 0 0 1.5em
}

.decimalList li {
  margin: 0 0 10px
}

@media screen and (min-width:960px) {
  .sp, header .navBtn {
    display: none
  }
  .philosophy li, .shareBlock {
    text-align: center
  }
  a, input {
    -webkit-transition: all .3s ease 0s;
    transition: all .3s ease 0s
  }
  header {
    height: 60px
  }
  .keyvisual .info p, .titleArea .ph, header .gNavi li, header .gNavi li a {
    display: inline-block
  }
  header .gNavi {
    position: absolute;
    top: 15px;
    right: 5%
  }
  header .gNavi li {
    margin: 0 0 0 30px
  }
  header .gNavi li a {
    position: relative
  }
  header .gNavi li a::before {
    position: absolute;
    bottom: -25px;
    left: 0;
    content: '';
    width: 100%;
    height: 3px;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: right;
    transform-origin: right;
    -webkit-transition: transform .7s cubic-bezier(.19, 1, .22, 1);
    -webkit-transition: -webkit-transform .7s cubic-bezier(.19, 1, .22, 1);
    transition: -webkit-transform .7s cubic-bezier(.19, 1, .22, 1);
    transition: transform .7s cubic-bezier(.19, 1, .22, 1);
    transition: transform .7s cubic-bezier(.19, 1, .22, 1), -webkit-transform .7s cubic-bezier(.19, 1, .22, 1);
    /* background-color: #000; */
    background-color:#fff;
  }
  header .gNavi li a:hover::before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: left;
    transform-origin: left
  }
  .btn a:hover, .formWrap .btn input:hover {
    -webkit-box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22)
  }
  .btn .sub:hover {
    background: #030f32;
    color: #fff
  }
  .infoList li a:hover, .journalList a:hover, .shareBlock a:hover {
    color: #0047ce
  }
  .back a:hover {
    border: 1px solid #030f32
  }
  .section {
    padding: 100px 0
  }
  .sectionTit {
    margin: 0 0 70px;
    font-size: 45px
  }
  .sectionTit span {
    margin: 0 0 60px;
    font-size: 16px
  }
  .subTit {
    margin: 0 0 1em;
    font-size: 18px
  }
  .inner {
    max-width: 800px;
    margin: 0 auto
  }
  .keyvisual {
    height: 100vh
  }
  .keyvisual .catch {
    font-size: 2vw;
    font-weight: 700;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
  }
  .keyvisual .info {
    width: 50%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
  }
  .service .segment {
    position: relative;
    padding: 0 0 120px
  }
  .titleArea {
    position: relative;
    margin: 0 0 120px
  }
  .titleArea .ph {
    width: 80%
  }
  .textBlock {
    position: absolute;
    bottom: -40px;
    z-index: 3;
    padding: 50px;
    width: 35%;
    min-height: 100%;
    -webkit-box-shadow: 0 10px 40px rgba(0, 0, 0, .08);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .08)
  }
  .consulting .textBlock {
    left: 5%
  }
  .creative .textBlock {
    right: 5%;
    background: #fff
  }
  .creative:after {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    content: '';
    width: 100%;
    height: 75%;
    background: #f8f8f8
  }
  .journalList, .serviceList {
    padding: 0 5%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
  }
  .journalList li, .serviceList li {
    width: calc(94% / 3);
    margin: 0 3% 0 0
  }
  .journalList li, .serviceList li, ::-ms-backdrop {
    width: 33.33333%
  }
  .journalList li:last-child, .serviceList li:last-child {
    margin: 0
  }
  .serviceList h4 {
    font-size: 15px
  }
  .journalList {
    margin: 0 0 40px
  }
  .journalList a {
    display: block
  }
  .journalList figure {
    position: relative;
    margin: 0 0 15px;
    line-height: 0;
    top: 0;
    -webkit-transition: all .3s ease 0s;
    transition: all .3s ease 0s
  }
  .journalList .date {
    margin: 0 0 10px
  }
  .journalList .tit {
    margin: 0 0 15px;
    font-weight: 700;
    line-height: 1.6em
  }
  .journalList a:hover figure {
    top: -5px;
    -webkit-box-shadow: 0 14px 20px rgba(0, 0, 0, .2), 0 10px 15px rgba(0, 0, 0, .2);
    box-shadow: 0 14px 20px rgba(0, 0, 0, .2), 0 10px 15px rgba(0, 0, 0, .2)
  }
  .infoList li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 40px 0
  }
  .infoList li a:hover {
    background: #f8f8f8;
    padding-left: 20px
  }
  .infoList li .date {
    margin: 0 20px 0 0
  }
  .infoList li .tit {
    width: 510px;
    font-weight: 700
  }
  .info.detail .title {
    font-size: 30px
  }
  .info.detail .text a:hover {
    text-decoration: none;
    color: #0047ce
  }
  .journal .infoList li a {
    display: block
  }
  .journal .infoList figure {
    width: 120px;
    float: left
  }
  .journal .infoList .date {
    margin: 0 0 10px
  }
  .journal .infoList .date, .journal .infoList .tit {
    padding-left: 130px
  }
  .journal .infoList .tit {
    width: 600px
  }
  .article_keyvisual {
    display: table;
    width: 100%;
    height: 380px;
    margin-top: -60px;
    background-attachment: fixed
  }
  .article_keyvisual .inner {
    display: table-cell;
    vertical-align: middle;
    padding: 0 12%
  }
  .info.detail .article_keyvisual .title {
    margin: 0 0 1.5em;
    font-size: 26px;
    line-height: 1.6em
  }
  .shareBlock .hatena a:hover svg {
    fill: #0047ce
  }
  .philosophy li {
    margin: 0 0 60px
  }
  .philosophy li:last-child {
    margin: 0
  }
  .philosophy li .bold {
    font-size: 24px
  }
  .formWrap {
    width: 80%;
    margin: 0 auto
  }
  .form .wpcf7-list-item {
    width: 50%
  }
}

@media screen and (max-width:960px) {
  .pc {
    display: none
  }
  body {
    font-size: 14px;
    line-height: 1.8;
    /* font-family: -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", sans-serif */
  }
  header {
    height: 60px
  }
  header .logo {
    /* top: 15px; */
    top: 5px;
  }
  header .gNavi {
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    height: 0;
    /* background: #030f32; */
    background: #fff;
    opacity: 0;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    overflow: hidden
  }
  .menuOpen header .gNavi {
    opacity: 1;
    height: 100%
  }
  header .gNavi li {
    border-bottom: 1px solid #212b4a
  }
  header .gNavi a {
    position: relative;
    display: block;
    padding: 16px 5%;
    /* color: #fff; */
    color: #000;
    font-size: 16px;
  }
  header .gNavi a:after {
    position: absolute;
    top: 50%;
    right: 5%;
    content: '\f105';
    font: 400 18px/0 FontAwesome
  }
  .navBtn {
    position: absolute;
    top: 18px;
    right: 5%;
    width: 30px;
    height: 26px
  }
  .navBtn span {
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    /* background: #030f32; */
    background: #000;
    -webkit-transition: all .3s ease 0s;
    transition: all .3s ease 0s
  }
  .navBtn span:first-child {
    top: 2px
  }
  .navBtn span:nth-child(2) {
    top: 12px
  }
  .navBtn span:last-child {
    top: 22px
  }
  .menuOpen .navBtn span:first-child {
    top: 12px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg)
  }
  .menuOpen .navBtn span:nth-child(2) {
    width: 0;
    right: 0
  }
  .menuOpen .navBtn span:last-child {
    top: 12px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg)
  }
  .section {
    padding: 60px 0
  }
  .page .section {
    padding: 40px 0 60px
  }
  .sectionTit {
    margin: 0 0 50px;
    font-size: 32px
  }
  .sectionTit span {
    margin: 0 0 40px;
    font-size: 14px
  }
  .subTit {
    margin: 0 0 1em;
    font-size: 16px;
    font-weight: 700
  }
  .inner {
    padding: 0 5%
  }
  .keyvisual {
    height: 88vh
  }
  .keyvisual .ph {
    top: 65px;
    width: 100%;
    height: 45%
  }
  .keyvisual .catch {
    top: 47%;
    font-size: 3.8vw;
    font-weight: 700;
    line-height: 1em
  }
  .keyvisual .catch span {
    margin-bottom: 2px
  }
  .keyvisual .catch .en {
    margin: 0 0 10px;
    font-size: 9vw;
    line-height: 1em
  }
  .keyvisual .info {
    width: 100%;
    background: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 20px 5%;
    position: fixed;
    bottom: -30%;
    left: 0;
    z-index: 99;
    opacity: 1
  }
  .keyvisual .info .date {
    margin-bottom: 5px
  }
  .keyvisual .info .tit {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
  }
  .load .keyvisual .info {
    bottom: 0
  }
  .load.scrolled .keyvisual .info {
    bottom: -100px;
    opacity: 0
  }
  .scroll {
    bottom: 85px;
    height: 50px
  }
  .textBlock .blockInner {
    padding: 50px 5%
  }
  .textBlock .title:after {
    margin: 25px 0
  }
  .serviceList {
    padding: 60px 5%
  }
  .serviceList li {
    margin: 0 0 50px
  }
  .serviceList li:last-child {
    margin: 0
  }
  .serviceList h4 {
    font-size: 16px
  }
  .creative {
    background: #f8f8f8
  }
  .contact .lead {
    line-height: 1.4em
  }
  .journalList {
    padding: 0 5% 30px
  }
  .journalList li {
    border-top: 1px solid #ccc
  }
  .journalList li:last-child {
    border-bottom: 1px solid #ccc
  }
  .journalList li a {
    display: block;
    padding: 15px 0
  }
  .journalList .date {
    margin: 0 0 3px;
    font-size: 12px
  }
  .journalList .tit {
    font-weight: 700;
    line-height: 1.6em
  }
  .infoList li a {
    display: block;
    padding: 20px 0
  }
  .infoList li .tit, .journalList li .tit {
    font-size: 15px;
    line-height: 1.4em;
    font-weight: 700
  }
  .infoList li .date {
    margin: 0 0 10px;
    font-size: 12px
  }
  .info.detail .title, .philosophy li .bold {
    font-size: 20px
  }
  .journal .infoList a {
    padding: 15px 0
  }
  .journal .infoList figure, .journalList figure {
    width: 30%;
    float: left
  }
  .journal .infoList .date, .journal .infoList .tit, .journalList .date, .journalList .tit {
    padding-left: 33%
  }
  .journal .infoList .category {
    min-width: initial;
    padding: 1px 5px 0
  }
  .journal .infoList li .date {
    margin: 0 0 3px
  }
  .article_keyvisual {
    margin: -60px 0 0;
    padding: 30px 0
  }
  .article_keyvisual .title {
    margin: 0 0 15px;
    line-height: 1.4em
  }
  .info.detail .article_keyvisual .date {
    margin: 0
  }
  .philosophy li {
    margin: 0 0 30px;
    text-align: center
  }
  .philosophy li:last-child {
    margin: 0
  }
  .form .wpcf7-list-item {
    width: 100%
  }
}