/*

-generalParts
  -transition
  -activeUnderline
  -verticalLine
  -nav
  -button
  -tableStyle

-globalHeader
-newsList

-globalFooter

-pages
  -Projects
  -news

  -contact

*/


html { font-size: 62.5%; -webkit-font-smoothing: antialiased;}
body {
  font-family: 'Lato', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
  font-size: 1.3rem;
  color: #4c4c4c;
  line-height: 2;
  letter-spacing: 0.1rem;
  padding-top: 200px;
}
pre {
  font-family: 'Lato', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
}
a {
  font-weight: bold;
  color: #4c4c4c;
  transition: all .1s ease-in;
}

a:link { text-decoration: none; color: #4c4c4c;}
a:visited { text-decoration: none; color: #4c4c4c;}
a:hover { text-decoration: none; color: #a5a5a5; }
a:active { text-decoration: none; color: #a5a5a5; }

.cf:before,
.cf:after {
  content: " ";
  display: table;
}

.cf:after { clear: both; }

.indent {
  display: block;
  text-indent: 1em;
}

h1, h2, h3, h4, h5, h6, ul, li, p {
  margin: 0;
  padding: 0;
}
ul { list-style: none; }
img { vertical-align: bottom; }

img.full { max-width: 100%; }

.alphanumeric,
.sortMenu,
.projectDate,
.projectCategory,
.newsListTitle,
.projectListTitle,
.nav,
.pageTitle,
.blockTitle,
#pageTop,
.pageLeadText,
.copy,
.categoryTitle,
#top_main .serviceImage span,
.categoryMenu {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
}

.blockSe { display: none; }
.blockSp { display: none; }
.blockTab { display: none; }
@media screen and (max-width: 1199px) {
  .blockTab { display: block; }
}
.blockPc { display: block; }



/* --------------------------------------------------
generalParts
-------------------------------------------------- */
#fullScreenMenu,
#fullScreenMenuTrigger,
#locationIcon { display: none; }

.sortMenu,
.lazy,
#otherProjects,
#projectBrowser,
#contactForm { display: none; }

html.js .lazy,
html.js .sortMenu,
html.js #otherProjects,
html.js #projectBrowser,
html.js #contactForm { display: block; }


/* transition
-------------------------------------------------- */
a,
.newsListModule.new,
.formButton input[type="submit"],
#fullScreenMenuTrigger .iconPath,
#fullScreenMenu {
  transition: all .1s ease-in;
}

#fullScreenMenuTrigger .activePath {
  transition: all .3s ease-out;
}



/* activeUnderline
-------------------------------------------------- */
#page_projects .nav li.page_projects:after,
#page_services .nav li.page_services:after,
#page_about .nav li.page_about:after,
#page_news .nav li.page_news:after,
#page_recruit .nav li.page_recruit:after,
#page_contact .nav li.page_contact:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  height: 2px;
  width: 100%;
  background-color: #4c4c4c;
}


/* verticalLine
-------------------------------------------------- */
.newsListModule .newsListTitle:after,
.projectThumbs li a .caption .projectCategory:before,
.projectDetail .projectCategory:before,
.copy span:after {
  content: "|";
  color: #d9d9d9;
  display: inline-block;
  margin: 0 0.5rem;
  text-align: center;
}


/* nav
-------------------------------------------------- */
.nav {font-size: 1.1rem;}
.nav li {
  float: left;
  margin-left: 1.3rem;
}
.nav li:first-child { margin-left: 0; }

.nav li a:hover {
  text-decoration: none;
  color: #a5a5a5;
}

.nav li {position: relative;}

.nav li.here a:hover {color: #4c4c4c;}





/* button
-------------------------------------------------- */
.button {
  display: inline-block;
  line-height: 1;
}
.button a {
  position: relative;
  line-height: 1;
  border: 2px solid #4c4c4c;
  display: block;
  text-align: center;
}
.button a:hover {
  background-color: #4c4c4c;
  color: #fff;
}

.smallButton a {
  font-size: 1.1rem;
  width: 130px;
  padding: 3px 0 5px;
}

.largeButton a {
  font-size: 1.3rem;
  width: 230px;
  padding: 15px 0;
}

.button.largeButton.xtoneService a {
  width: 100%;
}


.button.white a {
  border-color: #fff;
  color: #fff;
}
.button.white a:hover {
  background-color: #fff;
  color: #4c4c4c;
}

.button.blank a:after {
  content: url(../img/icon_newWindow_bold.svg);
  display: block;
  width: 17px;
  height: 15px;
  position: absolute;
  right: -3px;
  top: -3px;
  background-color: #fff;
  text-align: right;
  vertical-align: top;
}



/* tableStyle
-------------------------------------------------- */
.tableView .col-sm-1,
.tableView .th {
  color: #a5a5a5;
  padding-right: 0;
  padding-bottom: 20px;
  min-width: 85px;
}
.tableView .col-sm-7,
.tableView .td { padding-bottom: 20px; }
.tableView .col-sm-7 p { margin-top: 1.5rem; }
.tableView .col-sm-7 p:first-child { margin-top: 0; }


/* --------------------------------------------------
globalHeader
-------------------------------------------------- */
#globalHeader {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  padding-top: 30px;
  z-index: 1000;
  transition: all .3s ease-out;
  background-color: #fff;
}
#globalHeader.fixed,
body.hasRecentNews #globalHeader.fixed {
  padding-top: 15px!important;
  padding-bottom: 15px;
}
#globalHeader:hover { background-color: #fff; }


#globalHeader h1 {
  float: left;
  width: 140px;
  line-height: 1;
  position: relative;
  margin-top: 2px;
}
#globalHeader h1 span {
  font-size: 0.1rem;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  color: #fff;
  opacity: 0;
}

#globalHeader h1 svg {
  overflow: visible;
  vertical-align: bottom;
  width: 100%;
}
#globalHeader h1 svg .logoPath { fill: #4c4c4c; }


#globalHeader .navArea {
  float: right;
  text-align: right;
}
#globalHeader .navArea .pickup { margin-top: 15px; }
#globalHeader .navArea .pickup .button { margin-left: 5px; }

#globalHeader .navArea ul li.page_blog a {
  display: flex;
  align-items: center;
}
#globalHeader .navArea  ul li.page_blog a:after {
  display: block;
  content: "";
  width: 9px;
  height: 9px;
  margin-top: -2px;
  margin-left: 2px;
  background-image: url(../img/icon_newWindow.svg);
  background-position: center center;
  background-repeat: no-repeat;
}


/* --------------------------------------------------
module_newsList
-------------------------------------------------- */
.newsListModule { font-size: 1.0rem; }
.newsListModule .container {
  display: flex;
}
.newsListModule .newsListTitle:after {
  display: inline;
}

.newsListModule ul {
  overflow: hidden;
}
.newsListModule ul li .alphanumeric { color: #d9d9d9; }
.newsListModule ul li.pdf:before {
  content: url(../img/icon_pdf.svg);
  display: inline-block;
  margin-right: 0.3rem;
  vertical-align: bottom;
}


.newsListModule.new {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2rem;
  min-height: 2rem;
  line-height: 1.8;
  overflow: hidden;
  background-color: #4c4c4c;
  display: none;
  z-index: 1001;

  transition: height .3s cubic-bezier(0.77, 0, 0.175, 1);
}
.newsListModule.new ul li.pdf:before { content: url(../img/icon_pdf_white.svg); }

.newsListModule.new .newsListTitle,
.newsListModule.new a { color: #fff; }
.newsListModule.new a:hover { color: #a5a5a5; }
.newsListModule.old {
  display: block;
  margin-top: 30px;
}

/* --------------------------------------------------
hasRecentNews
-------------------------------------------------- */
body.hasRecentNews #globalHeader { padding-top: 60px; }
body.hasRecentNews .newsListModule.new { display: block; }
body.hasRecentNews .newsListModule.old { display: none; }



/* --------------------------------------------------
globalFooter
-------------------------------------------------- */
#globalFooter #pageTop a {
  font-size: 1.1rem;
  line-height: 1;
  display: block;
  padding: 20px 0;
  text-align: center;
  border-bottom: 1px solid #d9d9d9;
}
body.android #pageTop {
  z-index: 100;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}
body.android #pageTop:before {
  content: url(../img/arrow_pageTop.svg);
  text-align: center;
  display: block;
  margin-bottom: -40px;
}

body.android #pageTop a { text-indent: -9999px; }


#globalFooter .belt {
  color: #fff;
  background-color: #4c4c4c;
  padding: 60px 0;
}

#globalFooter .siteProfile {
  padding-top: 60px;
  padding-bottom: 60px;
  position: relative;
}

.module_recruitPromo,
.module_contactPromo {
  text-align: center;
  color: #a5a5a5;
  font-size: 1.1rem;
}
.module_recruitPromo p,
.module_contactPromo p {
  margin-bottom: 20px;
}

.blogBanner { background: #000; }
.blogBanner img { width: 100%; }

#globalFooter .nav { margin-top: 15px; }

#globalFooter .nav .ex-link a {
  display: flex;
  align-items: center;
}

#globalFooter .nav .ex-link a:after {
  display: block;
  content: "";
  width: 9px;
  height: 9px;
  margin-top: -2px;
  margin-left: 2px;
  background-image: url(../img/icon_newWindow.svg);
  background-position: center center;
  background-repeat: no-repeat;
}

.address >img,
.address >p,
.address >button {
  float: left;
  line-height: 1;
  font-weight: bold;
}

.address >img {
  width: 97px;
  vertical-align: bottom;
}

.address >p {
  font-size: 0.9rem;
  margin: 0 30px 0 15px;
  line-height: 1.2rem;
}

.copy {
  text-align: right;
  font-size: 0.9rem;
  position: absolute;
  right: 15px;
  bottom: 60px;
}



/* --------------------------------------------------
pages
-------------------------------------------------- */
.pageBody { padding-bottom: 100px; }
.pageBody .pageTitle,
.block .blockTitle {
  font-size: 2.0rem;
  text-align: center;
  height: 75px;
  letter-spacing: 2px;
}

.block,
.newsBody .paragraph { margin-bottom: 80px; }

.block .blockTitle {
  height: 155px;
  line-height: 1;
}

.block .blockTitle:before,
.newsBody .paragraph:before {
  content: "";
  display: block;
  height: 2px;
  background-color: #e3e3e3;
  width: 70px;
  margin: 0 auto 80px;
}

.block .blockTitle.noDivider {
  padding: 80px 0 0;
}
.block .blockTitle.noDivider:before {
  content: none;
}

.blockTitle_outline { display: none; }



/* top
-------------------------------------------------- */

#top_main .pageLeadText{
  font-size: 1.6rem;
  text-align: center;
  margin-bottom: 40px;
}

#top_main .serviceImage{
  display: flex;
  justify-content: center;
  align-items: center;
}

#top_main .serviceImage .serviceImageItem{
  display: flex;
  align-items: center;
}

#top_main .serviceImage .serviceImageItem:before {
  content: "";
  display: block;
  height: 9px;
  width: 9px;
  background: url(../img/icon_cross.svg);
  margin: 16px 32px;
}

#top_main .serviceImage .serviceImageItem:first-child:before {
  content: none;
}

#top_main .serviceImage span {
  font-size:  1.6rem;
  background: #eee;
  font-weight: bold;
  height:  55px;
  line-height: 55px;
  display: block;
  text-align: center;
  width: 158px;
}

#top_service p,
#top_projects p
{
  font-size: 1.5rem;
  text-align: center;
}

.button.largeButton.topMore {
  margin: 40px auto 0;
  display:  flex;
  justify-content: center;

}

.button.largeButton.topMore a {
  width: 233px;
}

.categoryMenu {
  margin: 32px auto 60px;
  width: 100%;
  max-width: 880px;
}

.categoryMenu ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

}
.categoryMenu ul li {
  margin: 4px;
}
.categoryMenu ul li a {
  line-height: 1;
  border: 2px solid #4c4c4c;
  display: block;
  text-align: center;
  padding: 5px 24px;
  font-size: 1.3rem;
}

.categoryMenu ul li a:hover {
  background-color: #4c4c4c;
  color: #fff;
}


.categoryTitle{
  font-size: 1.6rem;
  margin-bottom: 8px;
}

body#page_top .projectContainerBox{
  width: 100%;
  margin: 0 auto;
  padding-top: 40px;
  max-width: 880px;
}

body#page_top .projectContainerBox:first-child{
  padding-top: 0;
}


body#page_top .projectThumbsTop{
  display: flex;
}

body#page_top .projectThumbsTop li{
  border-right: 1px solid #ededed;
  border-bottom: 1px solid #ededed;
  border-top: 1px solid #ededed;
  font-size: 1.3rem;
}

body#page_top .projectThumbsTop li:first-child{
  border-left: 1px solid #ededed;
}

body#page_top .projectThumbsTop li a {
  display: block;
}

body#page_top .projectThumbsTop li a img {
  width: 100%;
  display: block;
  }



/* projects
-------------------------------------------------- */
.sortMenu {
  font-size: 1.1rem;
  text-align: center;
  margin-bottom: 30px;
}
.sortMenu ul li {
  display: inline-block;
  position: relative;
}

.sortMenu ul li a {
  display: block;
  height: 1em;
  line-height: 1;
  border-left: 1px solid #d9d9d9;
  padding: 0 0.8rem;
  text-align: center;
}
.sortMenu ul li:first-child a { border: 0; }

.sortMenu ul li.here a:after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 3px;
  background: #4c4c4c;
}

.sortMenu ul li a { color: #a5a5a5; }
.sortMenu ul li a:hover,
.sortMenu ul li.here a { color: #4c4c4c; }

.projectListTitle { display: none; }

.projectThumbs {
  position: relative;
  overflow: hidden;
}
.projectThumbs.filtering li {
  opacity: 0;
}

body#page_projects:not(.detail) .projectThumbs li {
  display: none;
}

body#page_projects .projectThumbs.ALL li,
body#page_projects .projectThumbs.WEB li.WEB,
body#page_projects .projectThumbs.APP li.APP,
body#page_projects .projectThumbs.etc li.etc,
body#page_projects .projectThumbs.Xtone li.Xtone
{ display: block; }

body#page_projects .projectBlock {
  margin-bottom: 30px;
}

.projectThumbs li {
  z-index: 1;
  position: relative;
  font-size: 1.1rem;
  padding: 0;
  height: 300px;
  overflow: hidden;
  opacity: 1;
}

.projectThumbs li a {
  display: block;
}

.projectThumbs li a img {
  width: 100%;
  display: block;
}

.projectThumbs li a canvas {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
}

.projectThumbs li a .caption {
  padding-top: 10px;
  padding-right: 30px;
}
.projectThumbs li a .caption .projectDate,
.projectThumbs li a .caption .projectCategory { float: left; }

.projectThumbs li a .caption .projectTitle { clear: both; }




/* #page_projects.detail
-------------------------------------------------- */
#page_projects.detail .projectProfile {}
#page_projects.detail .projectProfile .projectThumbnail {
  position: relative;
  left: -30px;
}

.projectDetail .projectDate,
.projectDetail .projectCategory {
  float: left;
  line-height: 1;
}

h3.projectTitle {
  clear: both;
  font-size: 2rem;
  line-height: 1.2;
  padding: 5px 0 40px;
}

.projectCatch {
  font-weight: bold;
  font-size: 1.3rem;
  margin-bottom: 10px;
}

ul.client:before,
.projectLink:before {
  content: "";
  display: block;
  height: 2px;
  width: 30px;
  background-color: #a5a5a5;

  margin-top: 30px;
  margin-bottom: 30px;
}

.projectLink ul li a {
  display: inline-block;
  text-decoration: underline;
  max-width: 300px;
  padding-right: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
}
.projectLink ul li a:after {
  position: absolute;
  top: -1px;
  right: 0;
  content: url(../img/icon_newWindow.svg);
}


.projectImage { margin-top: 90px; }
.projectImage > div {
  padding: 0;
  border: 5px solid #f4f4f4;
}

#page_projects.detail .projectProfile .projectThumbnail img,
#page_projects.detail .projectImage img { width: 100%; }

#page_projects.detail .projectImage img {
  float: left;
  border: 5px solid #f4f4f4;
}
#page_projects.detail .projectImage img.half { width: 50%; }
#page_projects.detail .projectImage .videoContainer { border: 5px solid #f4f4f4; }


#page_projects.detail #projectBrowser {
  position: fixed;
  left: 0;
  top: 93px;
  width: 100%;
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity .3s ease-out;
  z-index: 100;
}

#page_projects.detail #projectBrowser.visible {
  opacity: 1;
  height: auto;
}
#page_projects.detail #projectBrowser .next { text-align: right; }
#page_projects.detail #projectBrowser > div a {
  display: block;
  width: 100%;
  padding: 15px;
  line-height: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#page_projects.detail #projectBrowser .prev a:before,
#page_projects.detail #projectBrowser .next a:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 15px;
  height: 26px;
  margin-top: -13px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px auto;
}


#page_projects.detail #projectBrowser .prev a { padding-left: 40px; }
#page_projects.detail #projectBrowser .prev a:before {
  left: 30px;
  background-image: url(/assets/img/arrow_prev.svg);
}
#page_projects.detail #projectBrowser .next a { padding-right: 40px; }
#page_projects.detail #projectBrowser .next a:after {
  right: 30px;
  background-image: url(/assets/img/arrow_next.svg);
}

.videoContainer {
  position: relative;
  padding-bottom: 56.25%;
  width: 100%;
  height: 0;
  overflow: hidden;
}
.videoContainer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.freeVideoContainer {
  width: 100%;
}
.videoContainer.freeVideoContainer {
  font-size: 0;
  padding-bottom: 0;
  height: auto;
}
.videoContainer.freeVideoContainer video {
  width: 100%;
}

#page_projects.detail #otherProjects { margin-bottom: 0; }



/* services
-------------------------------------------------- */

#service_main {
  margin-bottom: 0;
}

#service_main .pageLeadText{
  font-size: 1.6rem;
  text-align: center;
  margin-bottom: 30px;
}

#service_main p {
  font-size: 1.5rem;
  text-align: center;
}

#serviceIntroText p:not(.introFooter) {font-size: 1.5rem;}
#serviceIntroText p { margin-bottom: 20px; }
#serviceIntroText p.introFooter {text-align: center;}
#serviceIntroText p.introFooter:before {
  content: "";
  display: block;
  height: 2px;
  background-color: #e3e3e3;
  width: 70px;
  margin: 30px auto;
}

#servicePoint .servicePointList{
  display: flex;
  flex-wrap: wrap;
  max-width: 750px;
  margin: 0 auto;
}

#servicePoint .servicePointList li{
  border: 1px solid #e3e3e3;
  padding: 60px 46px;
  margin-left: 20px;
  width: calc((100% - 20px) / 2);
  margin-top: 20px;
}

#servicePoint .servicePointList li:nth-child(odd){
  margin-left: 0;
}

#servicePoint .servicePointList li:first-child, #servicePoint .servicePointList li:nth-child(2){
  margin-top: 0;
}

#servicePoint .servicePointList li .servicePointListImage{
  width: 78px;
  margin: 0 auto;
  height: 138px;
}

#servicePoint .servicePointList li .servicePointListImage img{
  width: 100%;
}

#servicePoint .servicePointList li .servicePointListText strong{
  text-align: center;
  font-weight: bold;
  font-size: 1.5rem;
  display: block;
  margin-bottom: 16px;
}

#servicePoint .servicePointList li .servicePointListText p{
  font-size: 1.5rem;
}




/* ---------------------------------------------
lightAnimation
--------------------------------------------- */
@-webkit-keyframes animation {
  0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  4.9% { opacity: 0; -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  5% { opacity: 1; -webkit-transform: matrix3d(0.6, 0, 0, 0, 0, 0.8, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.6, 0, 0, 0, 0, 0.8, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  5.72% { -webkit-transform: matrix3d(0.806, 0, 0, 0, 0, 0.903, 0, 0, 0, 0, 1, 0, 0, -7.579, 0, 1); transform: matrix3d(0.806, 0, 0, 0, 0, 0.903, 0, 0, 0, 0, 1, 0, 0, -7.579, 0, 1); }
  5.85% { -webkit-transform: matrix3d(0.839, 0, 0, 0, 0, 0.919, 0, 0, 0, 0, 1, 0, 0, -8.893, 0, 1); transform: matrix3d(0.839, 0, 0, 0, 0, 0.919, 0, 0, 0, 0, 1, 0, 0, -8.893, 0, 1); }
  6.28% { -webkit-transform: matrix3d(0.928, 0, 0, 0, 0, 0.964, 0, 0, 0, 0, 1, 0, 0, -11.832, 0, 1); transform: matrix3d(0.928, 0, 0, 0, 0, 0.964, 0, 0, 0, 0, 1, 0, 0, -11.832, 0, 1); }
  6.43% { -webkit-transform: matrix3d(0.951, 0, 0, 0, 0, 0.976, 0, 0, 0, 0, 1, 0, 0, -12.332, 0, 1); transform: matrix3d(0.951, 0, 0, 0, 0, 0.976, 0, 0, 0, 0, 1, 0, 0, -12.332, 0, 1); }
  6.7% { -webkit-transform: matrix3d(0.985, 0, 0, 0, 0, 0.993, 0, 0, 0, 0, 1, 0, 0, -12.639, 0, 1); transform: matrix3d(0.985, 0, 0, 0, 0, 0.993, 0, 0, 0, 0, 1, 0, 0, -12.639, 0, 1); }
  7.15% { -webkit-transform: matrix3d(1.021, 0, 0, 0, 0, 1.01, 0, 0, 0, 0, 1, 0, 0, -11.978, 0, 1); transform: matrix3d(1.021, 0, 0, 0, 0, 1.01, 0, 0, 0, 0, 1, 0, 0, -11.978, 0, 1); }
  7.2% { -webkit-transform: matrix3d(1.023, 0, 0, 0, 0, 1.012, 0, 0, 0, 0, 1, 0, 0, -11.852, 0, 1); transform: matrix3d(1.023, 0, 0, 0, 0, 1.012, 0, 0, 0, 0, 1, 0, 0, -11.852, 0, 1); }
  7.69% { -webkit-transform: matrix3d(1.037, 0, 0, 0, 0, 1.018, 0, 0, 0, 0, 1, 0, 0, -10.558, 0, 1); transform: matrix3d(1.037, 0, 0, 0, 0, 1.018, 0, 0, 0, 0, 1, 0, 0, -10.558, 0, 1); }
  7.87% { -webkit-transform: matrix3d(1.037, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, -10.141, 0, 1); transform: matrix3d(1.037, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, -10.141, 0, 1); }
  8.17% { -webkit-transform: matrix3d(1.035, 0, 0, 0, 0, 1.018, 0, 0, 0, 0, 1, 0, 0, -9.647, 0, 1); transform: matrix3d(1.035, 0, 0, 0, 0, 1.018, 0, 0, 0, 0, 1, 0, 0, -9.647, 0, 1); }
  8.65% { -webkit-transform: matrix3d(1.028, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 0, -9.37, 0, 1); transform: matrix3d(1.028, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 0, -9.37, 0, 1); }
  9.72% { -webkit-transform: matrix3d(1.008, 0, 0, 0, 0, 1.004, 0, 0, 0, 0, 1, 0, 0, -9.909, 0, 1); transform: matrix3d(1.008, 0, 0, 0, 0, 1.004, 0, 0, 0, 0, 1, 0, 0, -9.909, 0, 1); }
  10.62% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10.15, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10.15, 0, 1); }
  11.57% { -webkit-transform: matrix3d(0.998, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, -10.037, 0, 1); transform: matrix3d(0.998, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, -10.037, 0, 1); }
  12.59% { -webkit-transform: matrix3d(0.998, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, -9.964, 0, 1); transform: matrix3d(0.998, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, -9.964, 0, 1); }
  14.54% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10.009, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10.009, 0, 1); }
  15.28% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10.004, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10.004, 0, 1); }
  16.51% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -9.998, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -9.998, 0, 1); }
  18.48% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10, 0, 1); }
  19% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10, 0, 1); }
  20.43% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10, 0, 1); }
  21.67% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10, 0, 1); }
  83.23% { opacity: 1; -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10, 0, 1); }
  83.33% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10, 0, 1); }
  84.05% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -4.857, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -4.857, 0, 1); }
  84.77% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.214, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.214, 0, 1); }
  85.49% { opacity: 0; -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.523, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.523, 0, 1); }
  86.2% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.933, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.933, 0, 1); }
  88.05% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.206, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.206, 0, 1); }
  89.91% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.062, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.062, 0, 1); }
  93.61% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.004, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.004, 0, 1); }
  97.33% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

@keyframes animation {
  0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  4.9% { opacity: 0; -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  5% { opacity: 1; -webkit-transform: matrix3d(0.6, 0, 0, 0, 0, 0.8, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.6, 0, 0, 0, 0, 0.8, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  5.72% { -webkit-transform: matrix3d(0.806, 0, 0, 0, 0, 0.903, 0, 0, 0, 0, 1, 0, 0, -7.579, 0, 1); transform: matrix3d(0.806, 0, 0, 0, 0, 0.903, 0, 0, 0, 0, 1, 0, 0, -7.579, 0, 1); }
  5.85% { -webkit-transform: matrix3d(0.839, 0, 0, 0, 0, 0.919, 0, 0, 0, 0, 1, 0, 0, -8.893, 0, 1); transform: matrix3d(0.839, 0, 0, 0, 0, 0.919, 0, 0, 0, 0, 1, 0, 0, -8.893, 0, 1); }
  6.28% { -webkit-transform: matrix3d(0.928, 0, 0, 0, 0, 0.964, 0, 0, 0, 0, 1, 0, 0, -11.832, 0, 1); transform: matrix3d(0.928, 0, 0, 0, 0, 0.964, 0, 0, 0, 0, 1, 0, 0, -11.832, 0, 1); }
  6.43% { -webkit-transform: matrix3d(0.951, 0, 0, 0, 0, 0.976, 0, 0, 0, 0, 1, 0, 0, -12.332, 0, 1); transform: matrix3d(0.951, 0, 0, 0, 0, 0.976, 0, 0, 0, 0, 1, 0, 0, -12.332, 0, 1); }
  6.7% { -webkit-transform: matrix3d(0.985, 0, 0, 0, 0, 0.993, 0, 0, 0, 0, 1, 0, 0, -12.639, 0, 1); transform: matrix3d(0.985, 0, 0, 0, 0, 0.993, 0, 0, 0, 0, 1, 0, 0, -12.639, 0, 1); }
  7.15% { -webkit-transform: matrix3d(1.021, 0, 0, 0, 0, 1.01, 0, 0, 0, 0, 1, 0, 0, -11.978, 0, 1); transform: matrix3d(1.021, 0, 0, 0, 0, 1.01, 0, 0, 0, 0, 1, 0, 0, -11.978, 0, 1); }
  7.2% { -webkit-transform: matrix3d(1.023, 0, 0, 0, 0, 1.012, 0, 0, 0, 0, 1, 0, 0, -11.852, 0, 1); transform: matrix3d(1.023, 0, 0, 0, 0, 1.012, 0, 0, 0, 0, 1, 0, 0, -11.852, 0, 1); }
  7.69% { -webkit-transform: matrix3d(1.037, 0, 0, 0, 0, 1.018, 0, 0, 0, 0, 1, 0, 0, -10.558, 0, 1); transform: matrix3d(1.037, 0, 0, 0, 0, 1.018, 0, 0, 0, 0, 1, 0, 0, -10.558, 0, 1); }
  7.87% { -webkit-transform: matrix3d(1.037, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, -10.141, 0, 1); transform: matrix3d(1.037, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, -10.141, 0, 1); }
  8.17% { -webkit-transform: matrix3d(1.035, 0, 0, 0, 0, 1.018, 0, 0, 0, 0, 1, 0, 0, -9.647, 0, 1); transform: matrix3d(1.035, 0, 0, 0, 0, 1.018, 0, 0, 0, 0, 1, 0, 0, -9.647, 0, 1); }
  8.65% { -webkit-transform: matrix3d(1.028, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 0, -9.37, 0, 1); transform: matrix3d(1.028, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 0, -9.37, 0, 1); }
  9.72% { -webkit-transform: matrix3d(1.008, 0, 0, 0, 0, 1.004, 0, 0, 0, 0, 1, 0, 0, -9.909, 0, 1); transform: matrix3d(1.008, 0, 0, 0, 0, 1.004, 0, 0, 0, 0, 1, 0, 0, -9.909, 0, 1); }
  10.62% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10.15, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10.15, 0, 1); }
  11.57% { -webkit-transform: matrix3d(0.998, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, -10.037, 0, 1); transform: matrix3d(0.998, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, -10.037, 0, 1); }
  12.59% { -webkit-transform: matrix3d(0.998, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, -9.964, 0, 1); transform: matrix3d(0.998, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, -9.964, 0, 1); }
  14.54% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10.009, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10.009, 0, 1); }
  15.28% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10.004, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10.004, 0, 1); }
  16.51% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -9.998, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -9.998, 0, 1); }
  18.48% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10, 0, 1); }
  19% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10, 0, 1); }
  20.43% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10, 0, 1); }
  21.67% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10, 0, 1); }
  83.23% { opacity: 1; -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10, 0, 1); }
  83.33% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10, 0, 1); }
  84.05% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -4.857, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -4.857, 0, 1); }
  84.77% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.214, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.214, 0, 1); }
  85.49% { opacity: 0; -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.523, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.523, 0, 1); }
  86.2% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.933, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.933, 0, 1); }
  88.05% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.206, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.206, 0, 1); }
  89.91% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.062, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.062, 0, 1); }
  93.61% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.004, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.004, 0, 1); }
  97.33% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}


/* services 202106
-------------------------------------------------- */
.service .block { 
  max-width: 750px;
  margin: 0 auto 80px;
  font-size: 14px;
}

.service {
  display: none;
  opacity: 0;
}

.servicesShow {
  display: block;
  opacity: 1;
  animation-name: displayAnime;
  animation-duration: .5s;
  animation-fill-mode: forwards;
}

@keyframes displayAnime{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


.servicesSortMenu {
  position: sticky;/*固定する*/
  position: -webkit-sticky;/*Safari用ベンダープレフィックス*/
  top: 72px;
  z-index: 100;
  background: #fff;
  padding: 20px 0;
  margin: -20px 0 -14px;
}

.servicesSortMenu ul li {
   position: relative;
}

.servicesSortMenu ul li:first-child:after {
  content: '';
  position: absolute;
  right: 0;
  top: -35%;
  height: 170%;
  width: 1px;
  background-color: #d9d9d9;
}

.servicesSortMenu ul li a {
  width: 152px;
  font-size: 12px;
  position: relative;
  border: none;
}

.servicesSortMenu ul li.here a::after {
  position: absolute;
  bottom: -12px;
  left: 0;
  right: 0;
  width: 92%;
  margin: auto;
}

.service .serviceTitle {
  padding: 80px 0 36px;
  line-height: 1.5;
  letter-spacing: 2px;
  height: auto;
  position: relative;
}

.service .serviceTitle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  height: 2px;
  background-color: #e3e3e3;
  width: 70px;
  margin: 0 auto;
}

.service table.border {
  margin-bottom: 30px;
  width: 100%;
}
.service table.space {
  width: 100%;
}

.service table.border tr {
  border-top: 1px solid #E3E3E3;
}
.service table.border tr:last-child {
  border-bottom: 1px solid #E3E3E3;
}
.service table.border th, td {
  vertical-align: top;
  text-align: left;
}
.service table.border th, .service table.space th {
  padding: 30px 8px;
  font-size: 16px;
}

.service table.border td, .service table.space td {
  padding: 30px 8px;
  font-size: 14px;
}

.service table.space tr {
  display: flex;
  flex-wrap: wrap;
}

.service table.space th {
  padding-top: 0;
  padding-bottom: 0;
}

.service table.space td {
  padding: 5px 8px 40px;
}


#serviceContents .serviceContents01 .innerWrap {
  border: 3px solid #E3E3E3;
  margin: 72px auto 12px auto;
  padding: 10px 10px 30px;
  display: flex;
  justify-content: center;
  max-width: 750px;
}

#serviceContents .serviceContents01 .serviceTitle {
  padding: 80px 0 36px;
}

#serviceContents .serviceContents01 .serviceTitle::before {
  background: none;
}

#serviceContents .serviceContents01 .inner {
  margin: -84px 0 0 0;
  width: calc(100% / 3);
}

#serviceContents .serviceContents01 .inner p {
  position: relative;
  padding: 198px 0 0 0;
  height: 2rem;
  width: 235px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  margin: auto;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.5;
}

#serviceContents .serviceContents01 .inner p::after {
  content: "";
  position: absolute;
  top: 64.5px;
  left: 31px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 12px;
  border-color: transparent transparent transparent #E3E3E3;
}

#serviceContents .serviceContents01 .inner p::before {
  content: "";
  position: absolute;
  top: 0;
  right: 8px;
  left: 0;
  margin: auto;
  width: 150px;
  height: 142px;
  background-size: contain;
  background-repeat: no-repeat;
}

#serviceContents .serviceContents01 .innerUserexperience p::before {
  background-image: url(/assets/img/services/contents/circle_userexperience_pc.png);
}

#serviceContents .serviceContents01 .innerUIdesign p::before {
  background-image: url(/assets/img/services/contents/circle_uidesign_pc.png);
}

#serviceContents .serviceContents01 .innerEngineering p::before {
  background-image: url(/assets/img/services/contents/circle_engineering_pc.png);
}


#serviceContents small {
  font-size: 14px;
  display: block;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}

#serviceContents small.notes {
  text-align: left;
}

#serviceContents .flexWrap {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (min-width: 992px){
  #serviceContents .serviceContents02 .flexWrap {
    justify-content: space-evenly;
  }
}

#serviceContents .serviceContents03 dl {
  width: calc(50% - 10px);
  padding: 40px;
  border: 1px solid #E3E3E3;
  margin: 10px;
  text-align: center;
}

#serviceContents .serviceContents03 dl:nth-child(1),
#serviceContents .serviceContents03 dl:nth-child(2){
  margin-top: 0;
}

#serviceContents .serviceContents03 dl:nth-child(odd){
  margin-left: 0;
}

#serviceContents .serviceContents03 dl:nth-child(even){
  margin-right: 0;
}

#serviceContents .serviceContents03 img {
  max-width: 78px;
  margin-bottom: 18px;
}

#serviceContents .serviceContents03 dl dt {
  font-weight: bold;
  font-size: 14px;
  position: relative;
  margin-bottom: 18px;
}

#serviceContents .serviceContents03 dl dd {
  font-size: 14px;
  margin: 0;
  text-align: left;
}


#serviceContents .serviceContents04 .pictWrap {
  position: relative;
  max-width: 750px;
  margin: 0 auto;
  padding: 20px 0 0;
}

#serviceContents .serviceContents04 img {
  position: absolute;
  width: 200px;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: -1;
}
#serviceContents .serviceContents04 .textWrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

#serviceContents .serviceContents04 .inner {
  text-align: left;
  min-width: 320px;
  max-width: 320px;
}

#serviceContents .serviceContents04 .graphRight {
  text-align: right;
}

#serviceContents .serviceContents04 .inner h5 {
  display: block;
  font-weight: bold;
  font-size: 16px;
  margin: 0 0 25px;
  position: relative;
  padding: 0 0 8px;
}

#serviceContents .serviceContents04 .inner h5::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #A5A5A5;
}

#serviceContents .serviceContents04 .graphRight h5::after {
  left: auto;
  right: 0;
}

#serviceContents .serviceContents04 .inner strong {
  display: block;
  font-size: 14px;
  margin: 0 0 10px;
  line-height: 1.65;
}

#serviceContents .serviceContents04 .inner p {
  font-size: 14px;
  line-height: 1.65;
}

#serviceContents .serviceContents04 .inner:nth-child(even) h5::before {
  right: auto;
  left: 0;
}


#serviceContents .serviceContents05 table.border th {
  width: 215px;
  text-align: center;
  vertical-align: middle;
}

@media screen and (min-width: 992px) {
  #serviceContents .serviceContents05 .flexWrap {
     justify-content: space-evenly;
  }
}
.serviceProject .serviceTitle {
  padding: 80px 0 30px
}

.serviceProject .serviceTitle::before {
  background: none;
}

.serviceProject small {
  font-size: 14px;
  text-align: center;
  display: block;
  padding: 0 0 80px;
}

.serviceProjectItem {
  display: flex;
  margin-bottom: 80px;
}

.serviceProjectInner {
  width: 100%;
  max-width: 375px;
  padding-right: 50px;
}

.serviceProjectItem h5 {
  font-weight: bold;
  font-size: 16px;
  padding: 0 0 10px;
  position: relative;
  line-height: 1;
  letter-spacing: 0.2rem;
}

.serviceProjectMethod {
  background-color: #f1f1f1;
  text-align: center;
  line-height: 1;
  padding: 16px 0;
  position: relative;
  margin: 28px 0;
  z-index: 3;
}

.serviceProjectMethod:first-child {
  margin-top: 0;
}

.serviceProjectMethod:last-child {
  margin-bottom: 0;
}

.serviceProjectMethod::after {
  content: "";
  position: absolute;
  bottom: -18px;
  left: 0;
  right: 0;
  width: 0;
  height: 0;
  margin: auto;
  border-style: solid;
  border-width: 8px 6px 0 6px;
  border-color: #e3e3e3 transparent transparent transparent;
}

.serviceProjectMethod:last-of-type::after {
  border: none;
}

.methodWrap {
  width: 100%;
  padding-right: 30px;
}

.OptionPoint {
  position: relative;
  z-index: 0;
}

.MethodOptionWrap {
  position: absolute;
  top: 21px;
  right: -24px;
  width: 24px;
  height: 148px;
  border-top: 3px solid #e3e3e3;
  border-bottom: 3px solid #e3e3e3;
  border-right: 3px solid #e3e3e3;
  z-index: -2;
}

.MethodOptionWrap::before {
  content: "";
  position: absolute;
  top: -10.5px;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 11px 8px 0;
  border-color: transparent #E3E3E3 transparent transparent;
  background-color: #ffffff;
}

.serviceProjectMethodOption {
  position: absolute;
  top: 20px;
  right: -20px;
  width: 1rem;
  line-height: 1.2;
  font-size: 13px;
}

.serviceProjectFlow img {
  width: 100%;
}

.serviceProjectFlowTitle {
  border: 2px solid #4C4C4C;
  width: 62px;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 13px;
  writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  line-height: 1.2;
  letter-spacing: .2rem;
}

.serviceProjectFlowTitle.first{
  flex-wrap: wrap;
  align-content: center;
  height: 75px;
}

.serviceProjectFlowTitle.first p.space{
  padding-top: 1.5em;
}

.serviceProjectFlowTitle span {
  text-combine-upright: all;
  -webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
}

.serviceProjectFlowSection {
  margin-bottom: 40px;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.serviceProjectFlowSection:after {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 25px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 6px 0 6px;
  border-color: #4c4c4c transparent transparent transparent;
}

.serviceProjectFlowSection:last-child:after {
  border: none;
}


.serviceProjectFlowRowGroup {
  display: inline-flex;
  flex-wrap: wrap;
  width: calc(100% - 75px);
}

.serviceProjectFlowRow {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.serviceProjectFlowRow:nth-child(2) {
  margin-top: 10px;
}

.serviceProjectFlowRowGroupDevelop .serviceProjectFlowRow:nth-child(2){
  margin-top: 24px;
}

.serviceProjectFlowRowTitle {
  display: block;
  width: 100%;
  font-weight: bold;
  margin: 0 2px 10px;
  font-size: 12px;
  line-height: 1;
}

.serviceProjectFlowRowTitle:last-child {
  margin: 24px 0 0;
}

/*1列目*/
.serviceProjectFlowParts {
  background: #f1f1f1;
  height: 75px;
  max-width: 190px;
  width: calc(33% - 34px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  text-align: center;
  font-size: 12px;
  line-height: 16px;
  position: relative;
  margin-right: calc(29px + 5px);
}

.serviceProjectFlowParts::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -29px;
  width: 0;
  height: 0;
  margin: auto;
  border-style: solid;
  border-width: 37px 0 37px 29px;
  border-color: transparent transparent transparent #f1f1f1;
}

/*2列目*/
.serviceProjectFlowRowStep {
  margin-left: 33px;
}

.serviceProjectFlowRowStep .serviceProjectFlowParts {
  max-width: 180px;
  width: calc(33% - 34px);
}

/*くっついたパーツ*/
.serviceProjectFlowPartsConnect {
  margin: 0;
}
.serviceProjectFlowRowStep .serviceProjectFlowPartsConnect {
  width: 100%;
  max-width: calc(180px + 34px);
}
.serviceProjectFlowPartsConnectWrap{
  width: 66%;
  display: flex;
}
.serviceProjectFlowPartsConnectWrap .serviceProjectFlowRowStep .serviceProjectFlowParts,
.serviceProjectFlowPartsConnectWrap .serviceProjectFlowParts {
  width: 100%;
}


.serviceProjectFlowPartsConnectArrow{
  position: relative;
}

.serviceProjectFlowPartsConnectArrow::after {
  border: none;
  content: "";
  position: absolute;
  right: -13px;
  top: 0;
  bottom: 0;
  margin: auto;
  background-image: url("/assets/img/services/project/arrowConnect.svg");
  width: 26px;
  height: 16px;
  background-size: contain;
  background-position: center;
  z-index: 1;
}

.serviceProjectFlowPartsEnd {
   max-width: 220px;
   width: 33%;
   margin: 0;
}
.serviceProjectFlowPartsEnd::after {
   border: none;
}

.serviceProjectFlowParts span {
  display: block;
  font-weight: 400;
}


/* ---------------------------------------------
pointsAnimation
--------------------------------------------- */
/*@keyframes pointsAnimation {
  0% { background-position: left 0; }
  100% { background-position: left -330px; }
}
@-webkit-keyframes pointsAnimation {
  0% { background-position: left 0; }
  100% { background-position: left  -330px; }
}*/


/* ---------------------------------------------
menuIconAnimation
--------------------------------------------- */
@-webkit-keyframes obj2 {
  0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  1.1% { -webkit-transform: matrix3d(0.951, 0.31, 0, 0, -0.31, 0.951, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.951, 0.31, 0, 0, -0.31, 0.951, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  2.2% { -webkit-transform: matrix3d(0.866, 0.5, 0, 0, -0.5, 0.866, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.866, 0.5, 0, 0, -0.5, 0.866, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  3.3% { -webkit-transform: matrix3d(0.795, 0.607, 0, 0, -0.607, 0.795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.795, 0.607, 0, 0, -0.607, 0.795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  4.4% { -webkit-transform: matrix3d(0.748, 0.664, 0, 0, -0.664, 0.748, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.748, 0.664, 0, 0, -0.664, 0.748, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  6.61% { -webkit-transform: matrix3d(0.708, 0.707, 0, 0, -0.707, 0.708, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.708, 0.707, 0, 0, -0.707, 0.708, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  8.78% { -webkit-transform: matrix3d(0.701, 0.713, 0, 0, -0.713, 0.701, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.701, 0.713, 0, 0, -0.713, 0.701, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  22.12% { -webkit-transform: matrix3d(0.707, 0.707, 0, 0, -0.707, 0.707, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.707, 0.707, 0, 0, -0.707, 0.707, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  33.33% { -webkit-transform: matrix3d(0.707, 0.707, 0, 0, -0.707, 0.707, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.707, 0.707, 0, 0, -0.707, 0.707, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  66.57% { -webkit-transform: matrix3d(0.707, 0.707, 0, 0, -0.707, 0.707, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.707, 0.707, 0, 0, -0.707, 0.707, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  66.67% { -webkit-transform: matrix3d(0.707, 0.707, 0, 0, -0.707, 0.707, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.707, 0.707, 0, 0, -0.707, 0.707, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  67.77% { -webkit-transform: matrix3d(0.891, 0.453, 0, 0, -0.453, 0.891, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.891, 0.453, 0, 0, -0.453, 0.891, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  68.87% { -webkit-transform: matrix3d(0.966, 0.259, 0, 0, -0.259, 0.966, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.966, 0.259, 0, 0, -0.259, 0.966, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  69.97% { -webkit-transform: matrix3d(0.991, 0.133, 0, 0, -0.133, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.991, 0.133, 0, 0, -0.133, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  71.07% { -webkit-transform: matrix3d(0.998, 0.059, 0, 0, -0.059, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.998, 0.059, 0, 0, -0.059, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  73.27% { -webkit-transform: matrix3d(1, 0.001, 0, 0, -0.001, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0.001, 0, 0, -0.001, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  75.44% { -webkit-transform: matrix3d(1, -0.008, 0, 0, 0.008, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, -0.008, 0, 0, 0.008, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  88.79% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

@keyframes obj2 {
  0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  1.1% { -webkit-transform: matrix3d(0.951, 0.31, 0, 0, -0.31, 0.951, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.951, 0.31, 0, 0, -0.31, 0.951, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  2.2% { -webkit-transform: matrix3d(0.866, 0.5, 0, 0, -0.5, 0.866, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.866, 0.5, 0, 0, -0.5, 0.866, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  3.3% { -webkit-transform: matrix3d(0.795, 0.607, 0, 0, -0.607, 0.795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.795, 0.607, 0, 0, -0.607, 0.795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  4.4% { -webkit-transform: matrix3d(0.748, 0.664, 0, 0, -0.664, 0.748, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.748, 0.664, 0, 0, -0.664, 0.748, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  6.61% { -webkit-transform: matrix3d(0.708, 0.707, 0, 0, -0.707, 0.708, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.708, 0.707, 0, 0, -0.707, 0.708, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  8.78% { -webkit-transform: matrix3d(0.701, 0.713, 0, 0, -0.713, 0.701, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.701, 0.713, 0, 0, -0.713, 0.701, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  22.12% { -webkit-transform: matrix3d(0.707, 0.707, 0, 0, -0.707, 0.707, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.707, 0.707, 0, 0, -0.707, 0.707, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  33.33% { -webkit-transform: matrix3d(0.707, 0.707, 0, 0, -0.707, 0.707, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.707, 0.707, 0, 0, -0.707, 0.707, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  66.57% { -webkit-transform: matrix3d(0.707, 0.707, 0, 0, -0.707, 0.707, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.707, 0.707, 0, 0, -0.707, 0.707, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  66.67% { -webkit-transform: matrix3d(0.707, 0.707, 0, 0, -0.707, 0.707, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.707, 0.707, 0, 0, -0.707, 0.707, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  67.77% { -webkit-transform: matrix3d(0.891, 0.453, 0, 0, -0.453, 0.891, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.891, 0.453, 0, 0, -0.453, 0.891, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  68.87% { -webkit-transform: matrix3d(0.966, 0.259, 0, 0, -0.259, 0.966, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.966, 0.259, 0, 0, -0.259, 0.966, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  69.97% { -webkit-transform: matrix3d(0.991, 0.133, 0, 0, -0.133, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.991, 0.133, 0, 0, -0.133, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  71.07% { -webkit-transform: matrix3d(0.998, 0.059, 0, 0, -0.059, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.998, 0.059, 0, 0, -0.059, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  73.27% { -webkit-transform: matrix3d(1, 0.001, 0, 0, -0.001, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0.001, 0, 0, -0.001, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  75.44% { -webkit-transform: matrix3d(1, -0.008, 0, 0, 0.008, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, -0.008, 0, 0, 0.008, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  88.79% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}


@-webkit-keyframes obj3 {
  0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  1.1% { -webkit-transform: matrix3d(0.951, -0.31, 0, 0, 0.31, 0.951, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.951, -0.31, 0, 0, 0.31, 0.951, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  2.2% { -webkit-transform: matrix3d(0.866, -0.5, 0, 0, 0.5, 0.866, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.866, -0.5, 0, 0, 0.5, 0.866, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  3.3% { -webkit-transform: matrix3d(0.795, -0.607, 0, 0, 0.607, 0.795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.795, -0.607, 0, 0, 0.607, 0.795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  4.4% { -webkit-transform: matrix3d(0.748, -0.664, 0, 0, 0.664, 0.748, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.748, -0.664, 0, 0, 0.664, 0.748, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  6.61% { -webkit-transform: matrix3d(0.708, -0.707, 0, 0, 0.707, 0.708, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.708, -0.707, 0, 0, 0.707, 0.708, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  8.78% { -webkit-transform: matrix3d(0.701, -0.713, 0, 0, 0.713, 0.701, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.701, -0.713, 0, 0, 0.713, 0.701, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  22.12% { -webkit-transform: matrix3d(0.707, -0.707, 0, 0, 0.707, 0.707, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.707, -0.707, 0, 0, 0.707, 0.707, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  33.33% { -webkit-transform: matrix3d(0.707, -0.707, 0, 0, 0.707, 0.707, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.707, -0.707, 0, 0, 0.707, 0.707, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  66.57% { -webkit-transform: matrix3d(0.707, -0.707, 0, 0, 0.707, 0.707, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.707, -0.707, 0, 0, 0.707, 0.707, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  66.67% { -webkit-transform: matrix3d(0.707, -0.707, 0, 0, 0.707, 0.707, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.707, -0.707, 0, 0, 0.707, 0.707, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  67.77% { -webkit-transform: matrix3d(0.891, -0.453, 0, 0, 0.453, 0.891, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.891, -0.453, 0, 0, 0.453, 0.891, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  68.87% { -webkit-transform: matrix3d(0.966, -0.259, 0, 0, 0.259, 0.966, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.966, -0.259, 0, 0, 0.259, 0.966, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  69.97% { -webkit-transform: matrix3d(0.991, -0.133, 0, 0, 0.133, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.991, -0.133, 0, 0, 0.133, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  71.07% { -webkit-transform: matrix3d(0.998, -0.059, 0, 0, 0.059, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.998, -0.059, 0, 0, 0.059, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  73.27% { -webkit-transform: matrix3d(1, -0.001, 0, 0, 0.001, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, -0.001, 0, 0, 0.001, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  75.44% { -webkit-transform: matrix3d(1, 0.008, 0, 0, -0.008, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0.008, 0, 0, -0.008, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  88.79% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

@keyframes obj3 {
  0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  1.1% { -webkit-transform: matrix3d(0.951, -0.31, 0, 0, 0.31, 0.951, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.951, -0.31, 0, 0, 0.31, 0.951, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  2.2% { -webkit-transform: matrix3d(0.866, -0.5, 0, 0, 0.5, 0.866, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.866, -0.5, 0, 0, 0.5, 0.866, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  3.3% { -webkit-transform: matrix3d(0.795, -0.607, 0, 0, 0.607, 0.795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.795, -0.607, 0, 0, 0.607, 0.795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  4.4% { -webkit-transform: matrix3d(0.748, -0.664, 0, 0, 0.664, 0.748, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.748, -0.664, 0, 0, 0.664, 0.748, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  6.61% { -webkit-transform: matrix3d(0.708, -0.707, 0, 0, 0.707, 0.708, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.708, -0.707, 0, 0, 0.707, 0.708, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  8.78% { -webkit-transform: matrix3d(0.701, -0.713, 0, 0, 0.713, 0.701, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.701, -0.713, 0, 0, 0.713, 0.701, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  22.12% { -webkit-transform: matrix3d(0.707, -0.707, 0, 0, 0.707, 0.707, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.707, -0.707, 0, 0, 0.707, 0.707, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  33.33% { -webkit-transform: matrix3d(0.707, -0.707, 0, 0, 0.707, 0.707, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.707, -0.707, 0, 0, 0.707, 0.707, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  66.57% { -webkit-transform: matrix3d(0.707, -0.707, 0, 0, 0.707, 0.707, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.707, -0.707, 0, 0, 0.707, 0.707, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  66.67% { -webkit-transform: matrix3d(0.707, -0.707, 0, 0, 0.707, 0.707, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.707, -0.707, 0, 0, 0.707, 0.707, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  67.77% { -webkit-transform: matrix3d(0.891, -0.453, 0, 0, 0.453, 0.891, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.891, -0.453, 0, 0, 0.453, 0.891, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  68.87% { -webkit-transform: matrix3d(0.966, -0.259, 0, 0, 0.259, 0.966, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.966, -0.259, 0, 0, 0.259, 0.966, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  69.97% { -webkit-transform: matrix3d(0.991, -0.133, 0, 0, 0.133, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.991, -0.133, 0, 0, 0.133, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  71.07% { -webkit-transform: matrix3d(0.998, -0.059, 0, 0, 0.059, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.998, -0.059, 0, 0, 0.059, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  73.27% { -webkit-transform: matrix3d(1, -0.001, 0, 0, 0.001, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, -0.001, 0, 0, 0.001, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  75.44% { -webkit-transform: matrix3d(1, 0.008, 0, 0, -0.008, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0.008, 0, 0, -0.008, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  88.79% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

@-webkit-keyframes fade {
  0% {opacity: 1;}
  2% {opacity: 0;}
  68% {opacity: 0;}
  72% {opacity: 1;}
  100% {opacity: 1;}
}
@keyframes fade {
  0% {opacity: 1;}
  2% {opacity: 0;}
  68% {opacity: 0;}
  72% {opacity: 1;}
  100% {opacity: 1;}
}


/* ---------------------------------------------
mapMarkerAnimation
--------------------------------------------- */
@-webkit-keyframes mapMarkerAnimation {
  0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  1.75% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2.206, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2.206, 0, 1); }
  3.45% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 3.1, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 3.1, 0, 1); }
  4.7% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 3.153, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 3.153, 0, 1); }
  5.16% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 3.077, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 3.077, 0, 1); }
  6.86% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2.468, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2.468, 0, 1); }
  9.41% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1.072, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1.072, 0, 1); }
  10.26% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.584, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.584, 0, 1); }
  13.66% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.055, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.055, 0, 1); }
  14.11% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.216, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.216, 0, 1); }
  18.72% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -2.019, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -2.019, 0, 1); }
  23.67% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.593, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.593, 0, 1); }
  24.32% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.485, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.485, 0, 1); }
  29.93% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.476, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.476, 0, 1); }
  33.68% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.037, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.037, 0, 1); }
  35.54% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.204, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.204, 0, 1); }
  41.04% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.391, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.391, 0, 1); }
  50% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.158, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.158, 0, 1); }
  52.15% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.088, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.088, 0, 1); }
  63.26% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.072, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.072, 0, 1); }
  85.49% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.013, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.013, 0, 1); }
  100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

@keyframes mapMarkerAnimation {
  0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  1.75% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2.206, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2.206, 0, 1); }
  3.45% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 3.1, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 3.1, 0, 1); }
  4.7% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 3.153, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 3.153, 0, 1); }
  5.16% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 3.077, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 3.077, 0, 1); }
  6.86% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2.468, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2.468, 0, 1); }
  9.41% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1.072, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1.072, 0, 1); }
  10.26% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.584, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.584, 0, 1); }
  13.66% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.055, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.055, 0, 1); }
  14.11% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.216, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.216, 0, 1); }
  18.72% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -2.019, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -2.019, 0, 1); }
  23.67% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.593, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.593, 0, 1); }
  24.32% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.485, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.485, 0, 1); }
  29.93% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.476, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.476, 0, 1); }
  33.68% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.037, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.037, 0, 1); }
  35.54% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.204, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.204, 0, 1); }
  41.04% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.391, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.391, 0, 1); }
  50% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.158, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.158, 0, 1); }
  52.15% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.088, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.088, 0, 1); }
  63.26% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.072, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.072, 0, 1); }
  85.49% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.013, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.013, 0, 1); }
  100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}


/* ---------------------------------------------
sliderAnimation
--------------------------------------------- */
@-webkit-keyframes sliderAnimation {
  0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  2.58% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 25.714, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 25.714, 0, 0, 1); }
  5.17% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 43.929, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 43.929, 0, 0, 1); }
  7.75% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 52.614, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 52.614, 0, 0, 1); }
  10.33% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 54.667, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 54.667, 0, 0, 1); }
  17% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 51.031, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 51.031, 0, 0, 1); }
  23.66% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 49.688, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 49.688, 0, 0, 1); }
  37% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 50.021, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 50.021, 0, 0, 1); }
  39.9% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 50.015, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 50.015, 0, 0, 1); }
  40% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 50.015, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 50.015, 0, 0, 1); }
  42.58% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 24.294, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 24.294, 0, 0, 1); }
  45.17% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 6.073, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 6.073, 0, 0, 1); }
  47.75% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.615, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.615, 0, 0, 1); }
  50.33% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -4.668, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -4.668, 0, 0, 1); }
  50.39% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -4.667, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -4.667, 0, 0, 1); }
  57% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1.032, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1.032, 0, 0, 1); }
  60% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  63.66% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.312, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.312, 0, 0, 1); }
  77% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.021, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.021, 0, 0, 1); }
  90.39% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.001, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.001, 0, 0, 1); }
  100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

@keyframes sliderAnimation {
  0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  2.58% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 25.714, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 25.714, 0, 0, 1); }
  5.17% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 43.929, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 43.929, 0, 0, 1); }
  7.75% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 52.614, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 52.614, 0, 0, 1); }
  10.33% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 54.667, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 54.667, 0, 0, 1); }
  17% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 51.031, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 51.031, 0, 0, 1); }
  23.66% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 49.688, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 49.688, 0, 0, 1); }
  37% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 50.021, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 50.021, 0, 0, 1); }
  39.9% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 50.015, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 50.015, 0, 0, 1); }
  40% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 50.015, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 50.015, 0, 0, 1); }
  42.58% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 24.294, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 24.294, 0, 0, 1); }
  45.17% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 6.073, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 6.073, 0, 0, 1); }
  47.75% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.615, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.615, 0, 0, 1); }
  50.33% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -4.668, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -4.668, 0, 0, 1); }
  50.39% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -4.667, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -4.667, 0, 0, 1); }
  57% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1.032, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1.032, 0, 0, 1); }
  60% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  63.66% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.312, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.312, 0, 0, 1); }
  77% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.021, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.021, 0, 0, 1); }
  90.39% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.001, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.001, 0, 0, 1); }
  100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}


/* ---------------------------------------------
typeAnimation
--------------------------------------------- */
@keyframes typeAnimation {
  0% { background-position: left 0; }
  100% { background-position: left -220px; }
}
@-webkit-keyframes typeAnimation {
  0% { background-position: left 0; }
  100% { background-position: left  -220px; }
}

.dealRecordList {
  text-align: center;
  font-size: 0;
}
.dealRecordList li {
  font-size: 1.3rem;
  display: inline-block;
  width: 50%;
}




/* #page_news
-------------------------------------------------- */
#page_news .newsList li {
  padding: 20px 0;
  border-bottom: 1px solid #e3e3e3;
}
#page_news .newsList li:first-child { border-top: 1px solid #e3e3e3; }
#page_news .newsList li .alphanumeric {color: #a5a5a5; padding-left: 2px;}
#page_news .newsList li.pdf:before {
  content: url(../img/icon_pdf.svg);
  margin-right: 0.5rem;
}

/* temporary style */
.newLogoBox {
  width: 48%;
  margin: 60px auto 0;
  text-align: center;
}
.newLogoBox .caption {
  opacity: .5;
  margin-bottom: 15px;
  font-size: 11px;
  margin-left: -5px;
}



/* #page_news.detail
-------------------------------------------------- */
#page_news.detail .newsArticle .newsTitle {
  border-top: 1px solid #e3e3e3;
  padding-top: 30px;
  margin-bottom: 60px;
}
#page_news.detail .newsArticle .newsTitle .alphanumeric {
  padding-left: 0.5rem;
  color: #a5a5a5;
}

#page_news.detail .companyName {
  text-align: right;
  margin-bottom: 20px;
}
#page_news.detail .companyName li {
  display: inline-block;
  text-align: right;
  padding-left: 1rem;
}

.paragraphTitleL {
  font-size: 2.0rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 60px;
}
.paragraph .paragraphTitle {font-weight: bold;}
.newsArticle .newsBody .paragraph p,
.newsArticle .newsBody .paragraph .listView { margin-top: 2rem; }
.newsArticle .newsBody .paragraph .imgBlock,
.newsArticle .newsBody .paragraph .smallInfoBlock,
.newsArticle .newsBody .paragraph .tableView { margin-top: 3rem; }
.newsArticle .newsBody .paragraph a { text-decoration: underline; }

.newsArticle .newsBody .paragraph .listView { list-style: disc; }

.newsArticle .newsBody .paragraph .imgBlock { text-align: center; }
.newsArticle .newsBody .paragraph .imgBlock .imgCaptionTitle {
  font-weight: bold;
  padding-bottom: 1rem;
}
.newsArticle .newsBody .paragraph .imgBlock .imgCaption {
  padding-top: 1rem;
  color: #a5a5a5;
}
.newsArticle .newsBody .paragraph .imgBlock img { max-width: 100%; }

.newsArticle .newsBody .paragraph .smallInfoBlock {
  border: 1px solid #a5a5a5;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.newsArticle .newsBody .paragraph .smallInfoBlock > div > p:first-child {margin-top: 0;}
.right { text-align: right; }

.newsArticle .newsBody .paragraph .strongArea {
  padding: 0.5rem;
  text-align: center;
  background-color: #e3e3e3;
}


#page_news.detail .articleFooter {
  background-color: #f8f8f8;
  text-align: center;
  padding: 60px 0;
}

#page_news.detail .articleFooter .downloadModule .button a:before {
  content: url(../img/icon_pdf.svg);
  vertical-align: bottom;
  display: inline-block;
  margin-right: 0.3rem;
}
#page_news.detail .articleFooter .downloadModule .button a:hover:before {
  content: url(../img/icon_pdf_white.svg);
}


#page_news.detail .articleFooter p {
  margin-bottom: 20px;
  font-weight: bold;
}


#page_news.detail .backLink {
  margin-top: 20px;
  text-align: center;
}
#page_news.detail .backLink a {text-decoration: underline;}



/* #page_about
-------------------------------------------------- */
.coverImg{
  height: 300px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  margin: -80px 0 80px;
  position: relative;
}
.coverImgCopyright{
  position: absolute;
  right: 5px;
  bottom: 5px;
  background-image: url("/assets/img/copyright.png");
  background-size: contain;
  width: 85px;
  height: 10px;
}

.coverImg.coverImgAbout{
  background-image: url("/assets/img/cover_about_pc.jpg");
}

#aboutIntroText p:not(.introFooter) {font-size: 1.5rem;}
#aboutIntroText p { margin-bottom: 20px; }
#aboutIntroText p.introFooter {text-align: center;}
#aboutIntroText p.introFooter:before {
  content: "";
  display: block;
  height: 2px;
  background-color: #e3e3e3;
  width: 70px;
  margin: 30px auto;
}
#aboutIntroText p:last-child {
  margin: 0;
}

#page_about #about_philosophy p {
  font-size: 1.5rem;
  margin-top: 20px;
}
#page_about #about_philosophy p:first-child { margin-top: 0; }
#page_about #about_philosophy p:last-child {
  font-size: 1.5rem;
  text-align: right;
  margin-top: 30px;
}

#page_about .tableView {
  margin-bottom: -20px;
}

#page_about .tableView .col-sm-7 .head {
  padding: 15px 20px 20px;
  background-color: #f1f1f1;
  margin-bottom: 20px;
}
#page_about .tableView .col-sm-7 .head strong {
  font-weight: bold;
  display: block;
}
#page_about .tableView .col-sm-7 .head p {
  margin-top: 5px;
  letter-spacing: 0.08rem;
}

#map_canvas {
  min-height: 433px;
  margin-bottom: 10px;
}

#page_about .mapIntro p:first-child {
  display: block;
}

#page_about .mapIntro p {
  display: inline-block;
}

#page_about .mapIntro span {
  display: inline-block;
  padding: 0 4px;
}

#corporateHistory {margin-bottom: 0;}
#accessmap {padding-top: 80px;}

#accessmap #sp_map {display: none;}

#page_about .officeImg {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
#page_about .officeImg img {
  width: calc(50% - 4px);
}

/* #page_recruit
-------------------------------------------------- */
.coverImg.coverImgRecruit{
  background-image: url("/assets/img/cover_recruit_pc.jpg");
}

.recruit .pageBody p {
  font-size: 14px;
}

#page_recruit .pageBody img {width: 100%;}
#page_recruit img.sp { display: none; }

#page_recruit #jobs .row .col-sm-8 > p {
  text-align: center;
  font-weight: bold;
  margin-bottom: 30px;
  font-size: 14px;
}

#page_recruit #jobs ul li {
  color: #a5a5a5;
  margin-top: 10px;
  width: 100%;
  text-align: center;
  line-height: 1;
}

#page_recruit .row .col-sm-8 > p a{
  text-decoration: underline;
  font-weight: bold;
}
#page_recruit #jobs .row ul li a {
  display: block;
  border: 2px solid #4c4c4c;
  padding: 22px;
  font-size: 14px;
}

#page_recruit #jobs .row ul li p {
  padding: 24px;
  background-color: #F5F5F5;
}

#page_recruit #jobs .row ul li span {
  font-size: 12px;
  padding-left: 1.2rem;
  font-weight: 300;
}

#page_recruit #specialContents.workflow,
#page_recruit #specialContents.environment,
#specialContents.welfare {
  margin-bottom: 20px;
}

#page_recruit #specialContents h3 { display: none; }


.visualBanner {
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  width: 100%;
}

.visualBanner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
}

.visualBannerWorkflow {
  background-image: url("/assets/img/recruit/workflow_back.jpg");
  background-position: left center;
}
.visualBannerEnvironment{
  background-image: url("/assets/img/recruit/environment_back.jpg");
  background-position: right center;
}
.visualBannerOneday {
  background-image: url("/assets/img/recruit/oneday/oneday_back.jpg");
  background-position: center center;
}
.visualBannerWelfare {
  background-image: url("/assets/img/recruit/welfare_back.jpg");
  background-position: center center;
}
.visualBannerNumbers {
  background-image: url("/assets/img/recruit/numbers_back.jpg");
  background-position: center center;
}

.visualBanner .inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 15px;
  position: relative;
  z-index: 2;
  min-height: 221px;
}

.visualBanner .inner strong {
  font-size: 2.0rem;
  line-height: 1;
}
.visualBanner .inner p {
  font-weight: normal;
  line-height: 1.6;
  margin: 10px 0 18px;
}

@media screen and (max-width: 1199px) {
  #page_recruit #specialContents .row{
    display: flex;
    flex-wrap: wrap;
  }
  #page_recruit #specialContents .visualBanner .inner p {
    /*min-height: 80px;*/
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
  }
  #page_recruit #specialContents .visualBanner .innerGroup{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

#page_recruit.workflow .visualBanner p,
#page_recruit.environment .visualBanner p {
  margin-bottom: 0;
}

#page_recruit table {
  font-size: 14px;
}

#page_recruit table.border {
  margin: 36px auto 0;
  width: 100%;
}

#page_recruit table.border tr {
  border-top: 1px solid #e3e3e3;
}
#page_recruit table.border tr:last-child {
  border-bottom: 1px solid  #e3e3e3;
}
#page_recruit table.border th, td {
  vertical-align: top;
  text-align: left;
  padding: 20px;
}

#page_recruit table.border th {
  text-align: left;
  vertical-align: middle;
  width: 212px;
}

#page_recruit table.border td {
  line-height: 1.6;
  vertical-align: middle;
  padding-left: 30px;
  padding-right: 24px;
}

#page_recruit table.holiday tr td,
#page_recruit table.welfare tr td {
  line-height: 2;
}

#page_recruit table.holiday tr td:first-of-type{
  text-align: center;
  vertical-align: middle;
  width: 105px;
  padding-left: 10px;
}

#page_recruit table.holiday th {
  width: 135px;
}

#page_recruit table.welfare th {
  width: 206px;
}
#page_recruit table.welfare tr td:first-of-type {
  min-width: 190px;
}
#page_recruit table.border td small {
  font-size: 11px;
}

@media screen and (max-width: 992px) {
  #page_recruit table.border tr {
    display: flex;
    flex-wrap: wrap;
  }
  #page_recruit table.border th,
  #page_recruit table.border td {
    width: auto;
    padding: 20px 20px 10px;
  }
  #page_recruit table.border tr td:last-child {
    width: 100%;
    padding: 0px 20px 20px;
  }
}

@media screen and (min-width: 1200px) {
  #page_recruit table.holiday tr td:last-of-type {
    padding-right: 62px;
  }
  #specialContents{
    padding: 60px 76px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  #specialContents > .row > div:nth-child(1),
  #specialContents > .row > div:nth-child(2),
  #specialContents > .row > div:nth-child(3),
  #specialContents > .row > div:nth-child(4){
    margin-bottom: 40px;
  } 
}

@media screen and (max-width: 1199px) {
  #specialContents{
    padding: 0px 15px;
    display: flex;
    flex-wrap: wrap;
  }
  #specialContents > .row > div{
    display: flex;
    flex-grow: 1;
  }
  #specialContents > .row > div{
    margin-bottom: 20px;
  }
}


#page_recruit .contactModule .row >div p {margin-top: 1rem;}
#page_recruit .contactModule .row >div p:first-child {margin-top: 0;}
#page_recruit .contactModule .row >div p a {text-decoration: underline;}

#page_recruit .contactModule .row >div .contactButton {
  margin: 2rem auto;
  text-align: center;
}

#page_recruit .contactModule .point {
  margin-top: 30px;
  margin-bottom: 30px;
}
#page_recruit .contactModule .point > div {
  background-color: #e3e3e3;
  padding-top: 15px;
  padding-bottom: 15px;
}

#page_recruit .contactModule .point > div p.caption {
  margin-top: 30px;
  font-size: 1.1rem;
}

#page_recruit.environment .visualBanner {
  margin-top: -75px
}

#page_recruit.environment #workPoints .wpModule {
  margin-top: 80px;
}
#page_recruit.environment #workPoints .wpModule > h3 {
  text-align: center;
  margin: 72px auto 24px auto;
  line-height: 1;
  font-size: 20px;
}
#page_recruit.environment #workPoints .wpModule > img { display: block; }
#page_recruit.environment #workPoints .wpModule > p {
  font-size: 14px;
  text-align: center;
}


/* #page_workflow
-------------------------------------------------- */
#page_recruit.workflow h3.blockTitle { display: none; }

#page_recruit.workflow .numbersNote{
  margin-top: 10px;
  color: #757575;
  font-size: 12px;
  text-align: right;
}

#page_recruit.workflow .visualBanner {
  margin-top: -75px
}

#page_recruit.workflow ul.flowList {
  width: 100%;
  margin-top: 76px;
}
#page_recruit.workflow ul.flowList li{
  width: calc(100% / 6);
  display: inline-block;
  text-align: center;
  vertical-align: top;
  position: relative;
}

#page_recruit.workflow ul.flowList li:first-child:after{
  display: none;
}

@media screen and (max-width: 992px)  {
  #page_recruit.workflow ul.flowList li{
    width: calc(100% / 3);
  }
  #page_recruit.workflow ul.flowList li:nth-child(4):after{
    display: none;
  }
}

#page_recruit.workflow ul.flowList li a{
  display: block;
  margin-right: 20px;
}
#page_recruit.workflow ul.flowList li a em{
  display: block;
  font-size: 16px;
  font-style: normal;
  font-family: 'Roboto Condensed';
  font-weight: normal;
  color: #A5A5A5;
  padding-left: 4px;
}
#page_recruit.workflow ul.flowList li a span{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1.4em;
  font-weight: bold;
  background-color: #F1F1F1;
  height: 66px;
  position: relative;
  padding-left: 4px;
}
#page_recruit.workflow ul.flowList li a span:after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -19px;
  width: 0;
  height: 0;
  margin: auto;
  border-style: solid;
  border-width: 33px 0 33px 19px;
  border-color: transparent transparent transparent #f1f1f1;
}

#page_recruit.workflow .wpModule {
  margin-top: 90px; 
}


#page_recruit.workflow .wpModule > h3 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 20px;
}
#page_recruit.workflow .wpModule > h3 span{
  font-family: 'Roboto Condensed';
  font-size: 1.1em;
}

#page_recruit.workflow .wpModule > img { display: block; }
#page_recruit.workflow .wpModule > p { margin-top: 20px; font-size: 14px;}
#page_recruit.workflow .wpModule .pointBox {
  background-color: #f1f1f1;
  margin-top: 16px;
  padding: 15px 24px;
}
#page_recruit.workflow .wpModule .pointBox p {
  font-size: 13px;
}

#page_recruit.workflow .wpModule table.role{
  margin-top: 24px;
  width: 100%;
}
#page_recruit.workflow .wpModule table.role thead th{
  border-bottom: 1px solid #cacaca;
  line-height: 1;
  padding: 8px;
}

#page_recruit.workflow .wpModule table.role tbody th{
  border-bottom: 1px solid #cacaca;
  line-height: 1;
  padding: 20px;
  text-align: center;
  width: 160px;
}

#page_recruit.workflow .wpModule table.role td{
  border-bottom: 1px solid #cacaca;
  line-height: 1.6em;
  padding: 20px 40px;
  vertical-align: middle;
}

/* #page_recuruit
-------------------------------------------------- */
#page_recruit .fullBox:after{
  content: "";
  clear: both;
  display: block;
}
#page_recruit .fullBox .half{
  width: 41.7%;
  float: left;
}
#page_recruit .fullBox .half + .half{
  width: 41.7%;
  float: right;
}
#page_recruit .block .fullBox .half .blockTitle:before{
  background-color: transparent;
}
#page_recruit .pageBody .block .fullBox .half img{
  display: block;
}

@media screen and (min-width: 992px){
  #page_recruit .fullBox .half{
    margin-left: 8.3%;
    padding: 0 15px 0 0;
    box-sizing: border-box;
  }
  #page_recruit .fullBox .half + .half{
    margin-left: 0;
    margin-right: 8.3%;
    padding: 0 0 0 15px;
    box-sizing: border-box;
  }
  #page_recruit .fullBox .half .col-sm-offset-2{
    margin-left: 0;
  }
  #page_recruit .fullBox .half .col-sm-8{
    width: 100%;
  }
  #page_recruit .fullBox .half #specialContents{
    margin-bottom: 0;
  }
}

@media screen and (max-width: 992px){
  #page_recruit .fullBox .half{
    width: 100%;
    float: none;
  }
  #page_recruit .fullBox .half + .half{
    width: 100%;
    float: none;
  }
  #page_recruit .fullBox .half #specialContents{
    margin-bottom: 0;
  }
}

/* #page_contact
-------------------------------------------------- */

#page_contact .block {
  margin-bottom: 40px;
}

.inputItem:first-child {position: relative;}
.inputItem,
.comfirmItem {margin-bottom: 40px;}

.inputItem label,
.comfirmItem label {
  display: inline-block;
  align-items: center;
  line-height: 1.3;
  margin-bottom: 16px;
  font-size: 1.4rem;
  font-weight: bold;
}

.inputItem select,
.inputItem input[type="text"],
.inputItem input[type="email"],
.inputItem input[type="tel"],
.inputItem input[type="url"],
.inputItem textarea,
.comfirmItem .entryContent,
.customSelectInner,
.categorySelectSp {
  display: block;
  width: 100%;
  min-height: 54px;
  border: 1px solid #4C4C4C;
  border-radius: 0;
  padding: 8px 22px;
  font-size: 1.4rem;
  color: #4C4C4C;
  word-break: break-all;
  -webkit-appearance: none;
}

.inputItem select {
  display: flex;
  align-items: center;
}

.inputItem select {
  height: 54px;
}

.inputItem textarea {
  min-height: 270px;
  padding: 20px 22px;
}

label.requiredItem:after {
  display: inline-block;
  vertical-align: middle;
  content: '(必須)';
  height: 18px;
  margin-left: 4px;
  font-size: 1.2rem;
  font-weight: normal;
  color: #F10000;
}

.fileFormLabel_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}

label.fileFormLabel {
  display: flex;
  flex-shrink: 0;
  width: 230px;
  height: 48px;
  margin-bottom: 0;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1.3rem;
  font-weight: bold;
  background-color: #4c4c4c;
  color: #fff;
  cursor: pointer;
}

label.fileFormLabel > input[type="file"] {
  width: 1px;
  visibility: hidden;
}

label.fileFormLabel:before {
  display: inline-block;
  content: '';
  width: 14px;
  padding-top: 14px;
  margin-right: 4px;
  background: url(../img/icon_upload.svg) center center no-repeat;
}

span#resume_file_name {
  display: inline-block;
  height: auto;
  margin-left: 16px;
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1.2;
  text-align: right;
  word-break: break-all;
}

.customSelectInner { line-height: 36px; }
.customSelect:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 6px 0 6px;
  border-color: #000000 transparent transparent transparent;
  position: absolute;
  top: 62px;
  right: 18px;
}

#inputError {
  display: none;
}

.categorySelect {
  display: grid;
  gap: 10px;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  justify-content: space-between;
  align-content: space-between;
  margin-bottom: 48px;
}

.categorySelect input[type=radio] {
  display: none;
}

.categorySelect .button {
  display: block;
}

.categorySelect .button label {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #888888;
  color: #999999;
  background-color: #F5F5F5;
  text-align: center;
  line-height: 1;
  cursor: pointer;
}

.categorySelect .largeButton label {
  font-size: 1.4rem;
  height: 62px;
  padding: 15px 0;
}

.categorySelect .largeButton input[type=radio]:checked+label {
  font-weight: bold;
  border: 2px solid #4C4C4C;
  color: #4C4C4C;
  background-color: #FFFFFF;
}

#page_contact .headerText {
  font-size: 1.6rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 60px;
}

.inputItem textarea { height: 160px; }
.inputItem .inputCaption {
  margin-top: 10px;
  color: #888888;
  font-size: 1.2rem;
  line-height: 1.3;
}

.inputItem label+.inputCaption {
  margin: -4px 0 16px 0;
  color: #4C4C4C;
}

.privacyPolicy {
  display: flex;
  flex-direction: column;
  margin: 60px auto 0;
  text-align: center;
  justify-content: center;
}
.privacyPolicy label {
  margin-bottom: 12px;
}

.privacyPolicy input[type="checkbox"] {
  display: none;
}

.privacyPolicy label span {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.privacyPolicy label span::before {
  display: block;
  flex-shrink: 0;
  content: '';
  width: 14px;
  padding-top: 14px;
  margin-right: 8px;
}

.privacyPolicy label span::before {
  background: url(../img/icon_check_off.svg) center center no-repeat;
}

.privacyPolicy label input[type="checkbox"]:checked + span::before {
  background: url(../img/icon_check_on.svg) center center no-repeat;
}

.privacyPolicy a {
  text-decoration: underline;
}

#confirm {
  border: solid 1px #4C4C4C;
  padding: 60px 60px 20px 60px;
}

#confirm .comfirmItem label {
  font-weight: normal;
}

.comfirmItem .entryContent {
  min-height: auto;
  border: none;
  padding: 0 0 0 12px;
  font-size: 1.4rem;
  line-height: 1;
  font-weight: bold;
}

.comfirmItem #confirm_type {
  text-align: center;
  font-weight: bold;
  margin-bottom: 60px;
}

.comfirmItem .entryContent.long {
  height: auto;
  margin: 0;
  line-height: 2;
}

.comfirmItem #confirm_message {
  white-space: normal;
}

.formButton {padding-top: 30px;}
.formButton input[type="button"],
.formButton input[type="submit"],
#confirmButton,
.loading {
  position: relative;
  z-index: 10;
  text-align: center;
  background: #fff;
  display: block;
  width: 233px;
  height: 44px;
  border: 2px solid #4c4c4c;
  font-size: 1.3rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
  margin: 0 auto;
  transition: all .1s ease-in;
}

.loading {
  opacity: 0;
  margin-top: -44px;
  background: #fff url(../img/loading.gif) center center no-repeat;
  z-index: 1;
}

.transmission .loading {
  opacity: 1;
  position: relative;
  z-index: 20;
}
.transmission .formButton input[type="button"],
.transmission .formButton input[type="submit"],
.transmission #confirmButton,
.transmission .comfirmItem.formButton > div { opacity: 0;}

.formButton input[type="submit"]:hover,
#confirmButton:hover {
  background-color: #4c4c4c;
  color: #fff;
}
#confirmButton:disabled, #submitButton:disabled {
  background: #fff;
  border-color: #eee;
  color: #eee;
}
input#privacy {
  margin-right: 8px;
  vertical-align: top;
}

.comfirmItem.formButton {
  position: relative;
  margin-top: 30px;
}
.comfirmItem.formButton > div {
  position: absolute;
  left: 0;
  top: 30px;
  height: 44px;
  line-height: 44px;
}
.comfirmItem.formButton > div:before {
  content: "←";
  display: inline-block;
  margin-right: 0.5rem;
}
.comfirmItem.formButton > div a { text-decoration: underline; }
.comfirmItem.formButton > div a { text-decoration: none; }

label.error {
  color: red;
  margin-top: 1rem;
}

.hasError {
  color: red;
  margin: 1rem 0;
  font-weight: bold;
  text-align: center;
}

.inputArea,
.confirmArea { display: none; }

#contactForm.input .inputArea,
#contactForm.confirm .confirmArea { display: block; }

.resultArea {
  text-align: center;
  min-height: 200px;
}

.resultMessage {
  font-size: 1.6rem;
  font-weight: bold;
}

.confirmArea .largeButton a, .resultArea .largeButton a {
  margin: 60px auto;
}

.categorySelectSp {
  display: none;
}

/* #page_privacy
-------------------------------------------------- */
#page_privacy .row .col-sm-8 > p:first-child,
#page_privacy .row .col-sm-8 > p:last-child {
  text-align: right;
  margin-bottom: 40px;
  font-size: 1.1rem;
}

#page_privacy ol {
  margin-left: 0;
  padding-left: 0;
}
#page_privacy ol li {
  margin-top: 30px;
  margin-left: 0;
  padding-left: 0;
}
#page_privacy ol li strong {
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}
#page_privacy ol li strong span {display: none;}
#page_privacy .innerList li {
  margin-top: .5em;
  margin-left: 0;
  padding-left: 0;
  list-style-type: none;
}

#projectContainer {
  position: relative;
}

#projectContainer canvas {
  position: absolute;
  top: 0;
  left: -15px;
  z-index: 2;
}


/* #page_error
-------------------------------------------------- */
#page_error .container .row {
  margin-bottom: 30px;
  text-align: center;
}
#page_error .container .largeButton a {
  margin: 0 auto;
}

figure { margin-top: 2rem; text-align: center; }
figure img { max-width: 100%; }
figure figcaption { line-height: 1.8; }

.list_table { margin-top: 2rem; }
.list_table caption {
  text-align: left;
}
.list_table th {
  position: relative;
  text-align: left;
  padding-right: 20px;
}
.list_table th:after {
  content: ':';
  position: absolute;
  right: 5px;
}

.youtube {
  position: relative;
  height: 0;
  overflow: hidden;
}
.youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.youtube.press170821,
.youtube.yubitsumugi {
  padding: 30px 0 56.25%;
}

.badge {
  text-align: center;
}
.badge li {
  display: inline-block;
  margin: 10px;
}

.large_banner {
  text-align: center;
  margin: 4em 0;
}