@import url(https://fonts.googleapis.com/css?family=Rokkitt:400,700);
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/* CSS Document */

* {
  margin: 0;
  padding: 0;
}

a img { border: none; }

a {
  color: #000;
  text-decoration: none;
}

a:hover { color: #1d4293; }

body {
  font-size: 13px;
  font-family: 'Noto Sans Japanese', sans-serif;
  /*  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; */
  line-height: 1.6;
  padding-top: 73px;
  min-width: 960px;
}

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

/*
  * classes
  */
 
.hide { display: none; }

.section { margin-bottom: 20px; }

.sub-section { margin-bottom: 10px; }

.large { font-size: 150%; }

.small { font-size: 80%; }

.text-left { text-align: left; }

.text-center { text-align: center; }

.text-right { text-align: right; }

.pull-left { float: left; }

.pull-right { float: right; }

.block-center {
  margin-left: auto;
  margin-right: auto;
}

.btn {
  line-height: 1;
  font-family: 'Rokkitt', serif;
  border: 2px solid #fff;
  color: #fff;
  text-decoration: none;
  font-size: 20px;
  display: inline-block;
  vertical-align: bottom;
  overflow: hidden;
  position: relative;
}

.btn-black {
  color: #000;
  border-color: #000;
}

.btn a {
  color: #fff;
  text-decoration: none;
  display: block;
  padding: 10px 25px 8px 25px;
}

.btn-black a { color: #000; }

.btn-gray {
  background: #251e1c;
  color: #fff;
}

.btn-arrow a:before {
  font-family: 'Rokkitt', serif;
  -webkit-transform: scaleY(3);
  -moz-transform: scaleY(3);
  -o-transform: scaleY(3);
  transform: scaleY(3);
  content: ">";
  vertical-align: bottom;
  display: inline-block;
  margin-right: 10px;
  font-size: 16px;
  position: relative;
  top: -1px;
}

.btn-lg { font-size: 16px; }

.btn-xlg { font-size: 24px; }

.table { border-collapse: collapse; }

.table td,
.table th {
  padding: 10px;
  vertical-align: top;
}

.table-contact { margin: 20px auto; }

.table-contact th {
  text-align: right;
  border-right: 1px solid #000;
}

.table-contact td { text-align: left; }

.well {
  background: #eee;
  padding: 20px;
  margin: 0 0 20px 0;
}

.sub {
  font-size: 60%;
  font-family: 'Noto Sans Japanese', sans-serif;
}

/*
 * layouts
 */

.container {
  width: 960px;
  padding: 0 10px;
  box-sizing: border-box;
  margin: 0 auto;
}

/*
 * header
 */
#header {
  background: #fff;
  padding: 15px 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  min-width: 960px;
}

#header h1 { float: left; }

#header h1 img { vertical-align: bottom; }

/*
 * menu
 */
#menu {
  font-family: 'Rokkitt', serif;
  float: right;
  border-right: 1px solid #000;
  margin-top: 5px;
}

#menu li {
  display: block;
  border-left: 1px solid #000;
  font-size: 18px;
  float: left;
}

#menu li a {
  color: #000;
  text-decoration: none;
  display: inline-block;
  width: 130px;
  text-align: center;
  height: 36px;
  line-height: 36px;
}
/*
#menu li:hover .menu-name { display: none; }
*/
#menu li small {
  display: none;
  font-weight: 300;
  position: relative;
  top: -2px;
  font-size: 14px;
  font-family: 'Noto Sans Japanese', sans-serif;
}
/*
#menu li:hover small { display: block; }
*/
#sp-menu { display: none; }

/*
 * movie
 */
.movie {
  width: 100%;
  height: 0;
  padding-bottom: 56%;
  position: relative;
}

.movie .over {
  position: absolute;
  width: 100%;
  height: 100%;
  /*  background: rgba(0,0,0,0.4); */
  z-index: 10;
  text-align: center;
}

.movie .over p { margin: 20px 0; }

.movie .over .container {
  positoin: absolute;
  padding-top: 22%;
  left: 0;
}

.movie .arrow-u {
  position: absolute;
  width: 100%;
  bottom: 20px;
  text-align: center;
  min-width: 960px;
}

.movie #video {
  position: absolute;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  width: 100%;
  height: 0;
  padding-bottom: 56%;
  z-index: 9;
  min-width: 960px;
}

.movie #video video {
  position: absolute;
  width: 100%;
  height: 100%;
}

#sp-slide { display: none; }

#sp-slide img { width: 100%; }

/*
 * concept-copy
 */

#service { padding: 100px 0 0 0; }

.concept-cooy {
  font-size: 20px;
  margin-bottom: 50px;
}

/*
 * service
 */
#icon a {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  width: 190px;
  height: 190px;
}

#icon img {
  width: 100%;
  position: relative;
}

#service-list {
  text-align: center;
  margin: 40px 0;
  height: 150px;
}

.service-wrapper {
  position: relative;
  min-width: 960px;
}

.service {
  display: inline-block;
  color: #1d4293;
  text-align: center;
  font-size: 11px;
  width: 120px;
}

.service-content {
  background: #000;
  color: #fff;
  padding: 60px;
  width: 400px;
  position: relative;
  z-index: 1;
  line-height: 2;
}

.sp-service-icon { display: none; }

.service-content h2 {
  font-size: 36px;
  line-height: 1;
  margin-bottom: 10px;
  font-family: 'Rokkitt', serif;
}

.service-content p { font-weight: 100; }

.service-header {
  font-size: 16px;
  margin-bottom: 10px;
}

.service-image {
  position: absolute;
  z-index: 0;
}

/*
 * ex
 */
.ex-title {
  color: #b6c2ff;
  font-size: 42px;
  line-height: 42px;
  font-family: 'Rokkitt', serif;
}

.ex-title img {
  vertical-align: middle;
  display: inline-block;
  margin-bottom: 8px;
}

.ex-header {
  font-size: 20px;
  margin-bottom: 10px;
}

.ex-image {
  margin-bottom: 40px;
  text-align: center;
}

.ex-container {
  color: #fff;
  width: 800px;
}

.ex-content {
  width: 550px;
  float: left;
  font-weight: 100;
}

.ex-content p { margin-bottom: 1em; }

.ex-button {
  width: 200px;
  float: right;
}

.service-more { margin: 20px 0 0 0; }

/*
 * marketing
 */
#marketing { height: 700px; }

#marketing .service-content {
  top: 220px;
  left: 0;
}

#b1 {
  top: 0;
  right: 10%;
}

/*
 * planning
 */
#planning { height: 800px; }

#planning .service-content {
  top: 300px;
  left: 360px;
}

#b2 {
  top: 0;
  right: 0;
}

#b3 {
  top: 100px;
  left: 3%;
}

/*
 * creative
 */
#creative { height: 800px; }

#creative .service-content {
  top: 350px;
  left: 50px;
}

#b4 {
  top: 0;
  left: 0;
}

#b5 {
  top: 150px;
  left: 50%;
}

#b6 {
  top: 550px;
  right: 0;
}

/*
 * it
 */
#it { height: 800px; }

#it .service-content {
  top: 350px;
  left: 400px;
}

#b7 {
  top: 0;
  left: 5%;
}

/*
 * printing
 */
#printing { height: 900px; }

#printing .service-content {
  top: 350px;
  left: 10px;
}

#b8 {
  top: 0;
  right: 0;
}

#b9 {
  top: 300px;
  left: 50%;
}

/*
 * logistics
 */
#logistics { height: 750px; }

#logistics .service-content {
  top: 350px;
  left: 400px;
}

#b10 {
  top: 0;
  left: 0;
}

/*
 * hr
 */
#hr { height: 1000px; }

#hr .service-content {
  top: 350px;
  left: 50px;
}

#b11 {
  top: 0;
  right: 10%;
}

/*
 * footer
 */

#footer-action {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 40px;
}

#footer-action li {
  display: inline-block;
  margin: 10px;
}

#footer-action li .btn {
  font-size: 24px;
  padding: 5px 0;
}

#footer { border-top: 1px solid #666; min-width: 960px; }

.footer-logo {
  width: 40%;
  float: left;
  padding-top: 40px;
}

.footer-link {
  padding-top: 40px;
  padding-bottom: 40px;
  width: 30%;
  float: left;
}

.header-footer-link {
  font-family: 'Rokkitt', serif;
  padding-left: 13px;
  font-size: 24px;
}

.footer-link ul { list-style: none; }

.footer-link a { }

.footer-link li { margin: 5px 0; }

.footer-link a:before,
.footer-link .no-link:before {
  font-family: 'Rokkitt', serif;
  -webkit-transform: scaleY(3);
  -moz-transform: scaleY(3);
  -o-transform: scaleY(3);
  transform: scaleY(3);
  content: ">";
  vertical-align: middle;
  display: inline-block;
  margin-right: 6px;
  margin-top: 2px;
  font-size: 14px;
  color: #aaa;
}

#footer-menu {
  border-top: 1px solid #666;
  min-width: 960px;
  padding: 20px 0;
}

#footer-menu ul { list-style: none; }

#footer-menu ul li {
  display: inline-block;
  margin-right: 20px;
}

#footer-menu ul li a { }

.credit { float: right; }

/*
 * mgp-arrow
 */
 
.mfp-arrow-left:before,
 .mfp-arrow-right:before {
  font-family: 'Rokkitt', serif;
  -webkit-transform: scaleY(3);
  -moz-transform: scaleY(3);
  -o-transform: scaleY(3);
  transform: scaleY(3);
  vertical-align: middle;
  display: inline-block;
  margin-right: 6px;
  margin-top: 2px;
  font-size: 24px;
  color: #fff;
  font-weight: normal;
}

.mfp-arrow-left:before { content: "<"; }

.mfp-arrow-right:before { content: ">"; }

.mfp-arrow-left:before,
.mfp-arrow-left:after,
.mfp-arrow-right:before,
.mfp-arrow-right:after { border: none; }

/*
 * hover
 */

/* Sweep To Right */
.hvr-sweep-to-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.hvr-sweep-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #1d4293;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.hvr-sweep-to-right:hover,
.hvr-sweep-to-right:focus,
.hvr-sweep-to-right:active { color: white; }

.hvr-sweep-to-right:hover:before,
.hvr-sweep-to-right:focus:before,
.hvr-sweep-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

/* Underline From Center */
.hvr-underline-from-center {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}

.hvr-underline-from-center:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  right: 50%;
  bottom: 0;
  background: #1d4293;
  height: 4px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.hvr-underline-from-center:hover:before,
.hvr-underline-from-center:focus:before,
.hvr-underline-from-center:active:before {
  left: 0;
  right: 0;
}

.sp-block { display: inline-block; }

/*
 * block
 */

.flex { display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 0; padding-bottom: 0 }
.block {
  width: 470px;
  min-height: 470px;
}
/*.block {
  float: left;
  width: 470px;
  height: 470px;
}*/

.block-blue {
  background: #1d4293;
  color: #fff;
}

.block-blue a {
  text-decoration: none;
  color: #fff;
}

.block-header {
  font-family: 'Noto Sans Japanese', sans-serif;
  padding: 40px 40px 20px 40px;
  font-size: 20px;
  line-height: 1;
}

.block-header-lg { font-size: 40px; }

.block-content {
  padding: 0 40px 40px 40px;
  line-height: 1.6;
  font-size: 14px;
}

.block-content p { margin: 0.5em 0; }

.block-section { margin-bottom: 20px; }

.block-white .btn { border-color: #000; }

.block-white .btn a { color: #000; }

.block-white .hvr-sweep-to-right a:hover { color: #fff; }

.block-blue .hvr-sweep-to-right:before { background: #fff; }

.block-blue .hvr-sweep-to-right a:hover { color: #1d4293; }

.block-image {
  text-align: center;
  padding: 40px;
}

/*
 * page
 */
 
.page { padding-bottom: 80px; }

.page p { margin: 1em 0; }

.page .recruit.work h4 { margin-top: 1em; }
.page .recruit.work h4 + p { margin: 0 0 1em 0; }

.page-header {
  font-family: 'Rokkitt', serif;
  color: #1d4293;
  font-size: 40px;
  margin-top: 20px;
}

.page-header small {
  font-size: 20px;
  vertical-align: middle;
  font-family: 'Noto Sans Japanese', sans-serif;
}

/*
 * vision
 */
#vision .block-header { font-family: 'Rokkitt', serif; }

#vision .block-content { line-height: 2; }

/*
 * mfp
 */
 
.mfp-bg { opacity: 1; }


.mfp-wrap, .mfp-bg { min-width: 960px; }