/*================================================
 *  一般・共通設定
 ================================================*/
 html {
	width:100%;
  height: 100%;
	margin:0 auto;
	font-size: calc(1em * .625);
	color:#3f3339;
	font-family: -apple-system, BlinkMacSystemFont,"ヒラギノ角ゴ ProN W3",Hiragino Kaku Gothic ProN, "Helvetica Neue", Arial, "メイリオ", Meiryo, sans-serif, "Yu Gothic", YuGothic;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}
body {
	line-height:1.5;
	width: 100%;
  height: 100%;
  margin:0;
	padding:0;
  overflow-x: hidden;
}

article {
	overflow-x: hidden;
}

section {
	width:100%;
	margin:0 auto;
	padding:0;
}
ul, ol {
	list-style:none;
}
ul.banner {
	list-style:none;
  text-align: right;
  margin: 0;
  padding: 0;
  position: relative;
  top: 55%;
}
ul.banner li {
  display: inline-block;
  margin-right: 10px;
}
a {
	color:#32a0fa;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
	opacity: 0.7;
  -webkit-transition: .5s ease;
  -o-transition: .5s ease;
  transition: .5s ease;
}
em {font-weight:bold;}

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

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

/* PC・SP表示 */
ul.banner .dsp-pc {
  display: inline-block;
}
ul.banner .dsp-sp {
  display: none;
}


@media screen and (max-width: 768px) {
  ul.banner {
  	list-style:none;
    margin: 0 auto;
    padding: 0;
    position: relative;
    top: 56%;
    width: 320px;
  }
  ul.banner li {
    width: 100%;
    margin: 0 auto 2%;
    text-align: center;
  }
  ul.banner li img.ajst_banner {
    max-width: 20rem;
  }

  /* PC・SP表示 */
  ul.banner .dsp-pc {
    display: none;
  }
  ul.banner .dsp-sp {
    display: inline-block;
  }
}

img:before {
  content: "We're sorry, the image below is broken :(";
  display: block;
  margin-bottom: 10px;
}

img:after {
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}

/*================================================
 *  gameArea
 ================================================*/
#bg { position: fixed; width: 100%; height: 100%; max-width:1600px; z-index: 0; background: black; overflow: hidden;
  opacity: 0.0;
  -webkit-transition: opacity 2.0s 0.5s;
  -o-transition: opacity 2.0s 0.5s;
  transition: opacity 2.0s 0.5s;
  overflow-x: hidden;
}
#bg.active {
  opacity: 1.0;
}
#bg_parts_base { position: absolute; width: 100%; height: 100%; z-index: 1; background-size: 100% 100%; }
#bg_parts_01 { position: absolute; width: 100%; height: 100%; z-index: 2; background-size: 100% 100%; }
#bg_parts_02 { position: absolute; width: 100%; height: 100%; z-index: 3; background-size: 100% 100%; }
#bg_parts_03 { position: absolute; width: 100%; height: 100%; z-index: 4; background-size: 100% 100%; }
#content { height: 100%; margin: 0 auto; background-color: #000;}
#main { position: fixed; width: 100%; max-width:1600px; height: 100%; margin: 0 auto; }
#header { position: relative; width: 100%; margin: 0 auto;}
#score { position: absolute; top: 10%; left: 5%; margin: 8px; color:#fff; }
#score>.add1 { color:#999; }
#score>.add2 { color:#aaa; }
#score>.add3 { color:#daa; }
#score>.add4 { color:#ffa; }

.bg_parts_base_bg_spring { background: url('../../img/top/bg_spring.jpg') no-repeat; }
.bg_parts_01_bg_spring { background: url('../../img/top/bg_parts_01_spring.png') no-repeat; }
.bg_parts_02_bg_spring { background: url('../../img/top/bg_parts_02_spring.png') no-repeat; }
.bg_parts_03_bg_spring { background: url('../../img/top/bg_parts_03_spring.png') no-repeat; }
.bg_parts_base_bg_summer { background: url('../../img/top/bg_summer.jpg') no-repeat; }
.bg_parts_01_bg_summer { background: url('../../img/top/bg_parts_01_summer.png') no-repeat; }
.bg_parts_02_bg_summer { background: url('../../img/top/bg_parts_02_summer.png') no-repeat; }
.bg_parts_03_bg_summer { background: url('../../img/top/bg_parts_03_summer.png') no-repeat; }
.bg_parts_base_bg_autumn { background: url('../../img/top/bg_autumn.jpg') no-repeat; }
.bg_parts_01_bg_autumn { background: url('../../img/top/bg_parts_01_autumn.png') no-repeat; }
.bg_parts_02_bg_autumn { background: url('../../img/top/bg_parts_02_autumn.png') no-repeat; }
.bg_parts_03_bg_autumn { background: url('../../img/top/bg_parts_03_autumn.png') no-repeat; }
.bg_parts_base_bg_winter { background: url('../../img/top/bg_winter.jpg') no-repeat; }
.bg_parts_01_bg_winter { background: url('../../img/top/bg_parts_01_winter.png') no-repeat; }
.bg_parts_02_bg_winter { background: url('../../img/top/bg_parts_02_winter.png') no-repeat; }
.bg_parts_03_bg_winter { background: url('../../img/top/bg_parts_03_winter.png') no-repeat; }

.goldfish { position: absolute; z-index: 35; opacity: 0; display: none; }
.gfbright { position: absolute; /*z-index: 110;*/ opacity: 0; display: none; }
.clearfix { clear: both; }

/*================================================
 * common settings
 ================================================*/
/* scarrow */
 .scarrow a.arrow {
  position: fixed;
  bottom: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
 	color: #32a0fa;
 	font-size: 1.1rem;
  font-weight: 600;
 	letter-spacing: .1em;
 	text-decoration: none;
 	-webkit-transition: opacity .3s;
 	-o-transition: opacity .3s;
 	transition: opacity .3s;
 }
 .scdownarrow a.arrow:hover {	opacity: .5; }
 #main a {
   padding-top: 5px;
   font-size: 1.4rem;
   color: #ffffff;
  }
 #main a span {
 	position: absolute;
 	top: -50%;
 	left: 50%;
 	width: 45px;
 	height: 45px;
 	margin-left: -23px;
 	border-left: 1px solid #ffffff;
 	border-bottom: 1px solid #ffffff;
 	-webkit-transform: rotate(-45deg);
 	-ms-transform: rotate(-45deg);
 	    transform: rotate(-45deg);
 	-webkit-animation: sdb05 1.5s infinite;
 	animation: sdb05 1.5s infinite;
 	-webkit-box-sizing: border-box;
 	        box-sizing: border-box;
 }
 #main a span:nth-of-type(1) {
 	-webkit-animation-delay: 0s;
 	animation-delay: 0s;
 }
 #main a span:nth-of-type(2) {
 	top: 0px;
 	-webkit-animation-delay: .15s;
 	animation-delay: .15s;
 }
 @-webkit-keyframes sdb05 {
 	0% {
 		-webkit-transform: rotate(-45deg) translate(0, 0);
 		opacity: 0;
 	}
 	50% {
 		opacity: 1;
 	}
 	100% {
 		-webkit-transform: rotate(-45deg) translate(-20px, 20px);
 		opacity: 0;
 	}
 }
 @keyframes sdb05 {
 	0% {
 		-webkit-transform: rotate(-45deg) translate(0, 0);
 		        transform: rotate(-45deg) translate(0, 0);
 		opacity: 0;
 	}
 	50% {
 		opacity: 1;
 	}
 	100% {
 		-webkit-transform: rotate(-45deg) translate(-20px, 20px);
 		        transform: rotate(-45deg) translate(-20px, 20px);
 		opacity: 0;
 	}
 }
 /* sec */
.sec {
  position:relative;
  z-index: 100;
  width:100%;
  margin:0 auto;
  padding-top: 8.333333333333%;
  background-color: #fff;
}
.sec::before{
  content: '';
  width: 8.333333333333%;
  height: 0;
  padding-top: 9%;
  margin-left: -4.125%;
  position: absolute;
  left: 50%;
}

/* contents-box */
.contents-box {
  width: 100%;
  max-width: 160rem;
  margin: 0 auto;
  padding-top: 6rem;
  padding-bottom: 6rem;
  position: relative;
}
.contents-box:before{
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3rem 3.5rem 0 3.5rem;
  border-color: #fff transparent transparent transparent;
  content: "";
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
.contents-box .slider4 li a:hover { opacity: 1;}
.contents-box .slider4 li.selected a{ opacity: 1;}

/* buttons */
.button {
  box-shadow: inset 0 0 0 2px #fff;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  position: relative;
  display: block;
  width: 100%;
  margin: 0 auto;
}
a.button:hover{ opacity: 1; text-decoration: none;}
.button::before, .button::after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
}
.button.buttonwM {
  max-width: 18rem;
  padding: 3%;
}
.button.buttonwL {
  max-width: 32rem;
  padding: 1% 3%;
}
.button.buttonwLL {
  max-width: 35rem;
  padding: .5% 3%;
}
.button.buttonwLL::before,
.button.buttonwLL::after {
  position: relative;
}
.draw {
  -webkit-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
  opacity: 1;
}
.draw::before, .draw::after {
  border: 2px solid transparent;
  width: 0;
  height: 0;
}
.draw::before {
  top: 0;
  left: 0;
  opacity : 0;
}
.draw::after {
  bottom: 0;
  right: 0;
  opacity : 0;
}
.draw:hover {
  color: #32a0fa;
}
.draw.active:hover::before{
  border-top-color: #32a0fa;
  border-right-color: #32a0fa;
  -webkit-transition: all 0.5s 0.0s;
  -o-transition: all 0.5s 0.0s;
  transition: all 0.5s 0.0s;
}
.draw.active:hover::after{
  border-bottom-color: #32a0fa;
  border-left-color: #32a0fa;
  -webkit-transition: all 0.5s 0.0s;
  -o-transition: all 0.5s 0.0s;
  transition: all 0.5s 0.0s;
}
.draw.active {
  cursor: pointer;
}
.draw.active::before, .draw.active:after {
  width: 100%;
  height: 100%;
}
.draw.active::before {
  border-top-color: #fff;
  border-right-color: #fff;
  opacity : 1;
  -webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
  -o-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
  transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.draw.active::after {
  border-bottom-color: #fff;
  border-left-color: #fff;
  opacity : 1;
  -webkit-transition: opacity 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
  -o-transition: opacity 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
  transition: opacity 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}
/* flex  */
.flex{
  -js-display: flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (max-width: 768px) {
  .sec {
    padding-top: 8.333333333333rem;
  }
  .sec::before{
    content: '';
    width: 8rem;
    padding-top: 9rem;
    margin-left: -4.125rem;
  }
  .scarrow a.arrow {
    bottom: 50%;
  }
}

/*================================================
 * .header
 ================================================*/
 .header{
   position: fixed;
   z-index: 10000;
 }
 .logo img {
  max-width: 9.8rem;
  background-color: transparent;
 }
 .fb img {
  max-width: 2.4rem;
  background-color: transparent;
 }
.fb_sp{
  display: none;
}
/*================================================
* .mainNav
================================================*/
.mainNav {
  margin: 0 auto;
  padding: 0;
  max-width: 70rem;
  width: 100%;
}
.mainNav li {
  width: 10rem;
  height: 9rem;
  box-align: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;  /* 子要素をflexboxにより中央に配置する */
  text-align: center;
  position: relative;
  background-color: #000;
  font-weight: 600;
}
.navanimation::before,
.navanimation::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.navanimation,
.navanimation::before,
.navanimation::after {
	-webkit-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
}
.navanimation {
	position: relative;
	z-index: 2;
	overflow: hidden;
}
.navanimation::after {
	top: -100%;
	left: -100%;
	width: 100%;
	height: 100%;
}
.navanimation:hover::after {
	top: 0;
	left: 0;
	background-color: #32a0fa;
}
.mainNav > li.mainNavicon > a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 2.5rem 0 0;
}
.mainNav li.mainNavicon > a:hover {
  opacity: 1;
  text-decoration: none;
 }
.mainNav li.bgtrans { background-color: transparent; }
.mainNav > li.mainNavicon > a::after {
  content: "";
  position: absolute;
  width: 2.4rem;
  height: 2.3rem;
  left: 4rem;
}
.mainNav > li.works > a::after {
  background: url('../../img/common/ico_pc.png') no-repeat;
  -ms-background-size: contain;
  background-size: contain;
}
.mainNav > li.works > a:hover::after {
  background: url('../../img/common/ico_pc_o.png') no-repeat;
  -ms-background-size: contain;
  background-size: contain;
}
.mainNav > li.comp > a::after {
  background: url('../../img/common/ico_company.png') no-repeat;
  -ms-background-size: contain;
  background-size: contain;
}
.mainNav > li.comp > a:hover::after {
  background: url('../../img/common/ico_company_o.png') no-repeat;
  -ms-background-size: contain;
  background-size: contain;
}
.mainNav > li.news > a::after {
  background: url('../../img/common/ico_news.png') no-repeat;
  -ms-background-size: contain;
  background-size: contain;
}
.mainNav > li.news > a:hover::after {
  background: url('../../img/common/ico_news_o.png') no-repeat;
  -ms-background-size: contain;
  background-size: contain;
}
.mainNav > li.recruit > a::after {
  background: url('../../img/common/ico_recruit.png') no-repeat;
  -ms-background-size: contain;
  background-size: contain;
}
.mainNav > li.recruit > a:hover::after {
  background: url('../../img/common/ico_recruit_o.png') no-repeat;
  -ms-background-size: contain;
  background-size: contain;
}
.mainNav > li.contact > a::after {
  background: url('../../img/common/ico_contact.png') no-repeat;
  -ms-background-size: contain;
  background-size: contain;
}
.mainNav > li.contact > a:hover::after {
  background: url('../../img/common/ico_contact_o.png') no-repeat;
  -ms-background-size: contain;
  background-size: contain;
}
.mainNav > li.mainNavicon > a > span {
    position: relative;
    top: 45%;
    font-size: 1.1rem;
}
.mainNav > li.mainNavicon > a:hover > span { color: #fff; }
.social-icon a {
  display: block;
  margin: 0 .5rem 0 2.5rem;
  padding: 0;
  color: #fff;
}
.social-icon i {
  width: 2.4rem;
  height: 2.4rem;
  margin: 0;
  line-height: 2.4rem;
  text-align: center;
  border-radius: .3rem;
}
.social-icon i:before { padding: 0; line-height: 2.4rem; }
.social-icon .fa-facebook { background: #3b5998; }

@media screen and (max-width: 768px) {
  .mainNav{
    display: block;
    max-width: 100%;
  }
  .mainNav li{
    width: auto;
    text-align: left;
  }
  .mainNav > li.mainNavicon > a > span { padding-left: 10rem; }
  .mainNav > li.mainNavicon > a { padding-top: 0;}
  .mainNav > li.mainNavicon > a::after { top: 45%;}
  .mainNav li.bgtrans { display: none; }
  .fb_sp{
    display: block;
    position: absolute;
    right: 70px;
    top: 23px;
  }
}
/*================================================
 * .sec_1
 ================================================*/
.sec_1 { position: relative; }
.sec_1 figure{
  width: 100%;
  margin: 0 auto;
}
.sec_1 figure img{ vertical-align: bottom;}
.sec_1 .bgcolor {
   position: relative;
   background-color: #cac9c7;
 }
.sec_1 .contents-box {
  padding-top: 0;
  padding-bottom: 0;
}
.sec_1 .contents-box::before{ display: none;}
.sec_1 .contents-box > h1,
.sec_1 .contents-box > h2 {
  position: absolute;
  top: 20%;
  right: 10%;
  z-index: 100;
  padding: 0;
  margin: 0;
  font-size: 2.4rem;
  font-size: 1.26vw; /*24 / 1920*/
}

.sec_1 .contents-box > h1 {
  display: inline-block;
  -webkit-transition: opacity 1.0s ease-out 0.0s, -webkit-transform 1.0s ease-out 0.0s;
  transition: opacity 1.0s ease-out 0.0s, -webkit-transform 1.0s ease-out 0.0s;
  -o-transition: transform 1.0s ease-out 0.0s, opacity 1.0s ease-out 0.0s;
  transition: transform 1.0s ease-out 0.0s, opacity 1.0s ease-out 0.0s;
  transition: transform 1.0s ease-out 0.0s, opacity 1.0s ease-out 0.0s, -webkit-transform 1.0s ease-out 0.0s;
}
.sec_1 .contents-box > h2 {
  -webkit-transition: opacity 1.0s ease-out 0.5s, -webkit-transform 1.0s ease-out 0.5s;
  transition: opacity 1.0s ease-out 0.5s, -webkit-transform 1.0s ease-out 0.5s;
  -o-transition: transform 1.0s ease-out 0.5s, opacity 1.0s ease-out 0.5s;
  transition: transform 1.0s ease-out 0.5s, opacity 1.0s ease-out 0.5s;
  transition: transform 1.0s ease-out 0.5s, opacity 1.0s ease-out 0.5s, -webkit-transform 1.0s ease-out 0.5s;
}
.sec_1 .contents-box > h1.deactive {
  -webkit-transform: translateX(-30px);
      -ms-transform: translateX(-30px);
          transform: translateX(-30px);
  opacity: 0;
}
.sec_1 .contents-box > h2.deactive {
  -webkit-transform: translateY(+30px);
      -ms-transform: translateY(+30px);
          transform: translateY(+30px);
  top: 30%;
  opacity: 0;
}

.sec_1 .contents-box > h2{
  right: 8.5%;
  top: 20.5%;
}
.sec_1 .vrl {
   -webkit-writing-mode: vertical-lr;
   -ms-writing-mode: tb-lr;
   writing-mode: vertical-lr;
}

.sec_1 nav ul{
  width: 38.028333%;
  max-width: 73rem;
	margin-left: -19%;
  padding: 0;
  position: absolute;
  left: 50%;
  top: 66%;
  z-index: 1;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.sec_1 nav ul .md-btn:hover{
  cursor:pointer;
}

.sec_1 nav.open ul {
z-index: 1020;
}

.sec_1 .modal-area
{
    z-index: 1100;
}

/*PCのときだけモーダルオープン時にボタン移動*/
@media screen and (min-width: 768px) {
  .sec_1 nav.open ul {
    position: absolute;
    top: 0;
    left: 90%;
    margin-left: -25%;
    width: 25%;
  }
  .sec_1 nav.open ul .md-btn{
    background-size: 140%;
  }
}

.sec_1 nav ul li{
  width: 30.13698%;
  max-width: 22rem;
  margin-left: 4.794520547%;
  display: inline-block;
  vertical-align: top;
  -webkit-transition: all 0.5s ease-in-out 0s;
  -o-transition: all 0.5s ease-in-out 0s;
  transition: all 0.5s ease-in-out 0s;
  opacity: 1;
}
.sec_1 nav ul li.deactive {
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  opacity: 0;
}

.sec_1 nav ul li:first-child{  margin-left: 0; }
.sec_1 nav ul li a{
  display: block;
  position: relative;
  border-radius: 10%;
  border: .3rem solid #fff;
  background-color: rgba(255, 255, 255, 0.25);
  -o-transition: 0.3s ease-out all;
  transition: 0.3s ease-out all;
  -webkit-transition: 0.3s ease-out all;
  -moz-transition: 0.3s ease-out all;
  -ms-transition: 0.3s ease-out all;
  zoom: 1;
}
.sec_1 nav ul li a:hover,
.sec_1 nav ul li a.selected{
  border: .3rem solid #00a0e9;
  background-color: rgba(0, 160, 233, 0.25);
  border-radius: 50%;
  overflow: hidden;
  opacity: 1;
}
.sec_1 nav ul li .nav_1{
	background-image: url('../../img/common/sec_1_nav_1.png');
  background-position: center center;
  background-repeat: no-repeat;
  height: 0;
  padding-top: 100%;
  background-size: contain;
}
.sec_1 nav ul li .nav_2{
	background-image: url('../../img/common/sec_1_nav_2.png');
  background-position: center center;
  background-repeat: no-repeat;
  height: 0;
  padding-top: 100%;
  background-size: contain;
}
.sec_1 nav ul li .nav_3{
	background-image: url('../../img/common/sec_1_nav_3.png');
  background-position: center center;
  background-repeat: no-repeat;
  height: 0;
  padding-top: 100%;
  background-size: contain;
}
.dspnone{ display: none;}

@media screen and (max-width: 768px) {
  .sec_1 {
    padding-top: 9rem;
  }
  .sec_1 figure { overflow: hidden; }
  .sec_1 figure img{
    -webkit-transform: scale(1.4);
        -ms-transform: scale(1.4);
            transform: scale(1.4);
    padding-top: 2%;
    padding-right: 3%;
  }
  .sec_1 .contents-box > h1,
  .sec_1 .contents-box > h2{
    top: 0%;
    right: 4%;
    font-size: 2.34vw;
  }
  .sec_1 .contents-box > h2{
    right: 0.5%;
    top: 1%;
  }
  .sec_1 nav {
    background: #000;
    height: 9rem;
  }
  .sec_1 nav ul {
    top: 0.8rem;
    width: 22rem;
    position: relative;
    margin:  0 auto;
    left: auto;
    right: auto;
  }
  .sec_1 nav ul li .md-btn{
    background-size: 150%;
  }
}


/*================================================
 *  .sec_2
 ================================================*/
.sec_2::before{
  background: url('../../img/common/ico_pcL.png') no-repeat center center;
  background-size: contain;
  top: -3.5rem;
}
.sec_2 .bgcolor {
  position: relative;
  background-color: #000;
  width: 100%;
  margin: 0 auto;
}
.sec_2 .contents-box{
  background: url('../../img/common/bg_sec2.png') no-repeat center center fixed;
  background-size: cover;
  width: 88%;
  max-width: 160rem;
  margin: 0 auto;
  padding-bottom: 7rem;
}
.sec_2 .contents-box::before{ display: none;}
.sec_2 .works {
  width: 100%;
  max-width: 128rem;
  margin: 0 auto;
  padding: 0;
  font-size: 1.2rem;
  color: #fff;
  box-pack:start;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
.sec_2 .works li {
  box-orient: vertical;
  -webkit-box-orient: vertical;
  box-direction: normal;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.sec_2 .works .child-1 {
  width: 33%;
  margin-right: 1%;
}
.sec_2 .works .child-1 figure {
  margin: 0 auto;
  max-width: 38rem;
  padding: 2rem;
  width: 100%;
  background: url('../../img/common/img_work_frame.png') no-repeat center center;
  background-size: contain;
}
.sec_2 .works .child-2 { width: 63%; }
.sec_2 .works .child-2 .thmb {
  padding: 2% 0 0;
}
.sec_2 .works .child-2 .thmb li {
  box-orient:horizontal;
  -webkit-box-orient: horizontal;
  box-direction: normal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
  flex-direction: row;
  box-pack: start;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  width: 33.33333%;
}
.sec_2 .works .child-2 .thmb li img {
  max-width: 24rem;
  padding: 0 2%;
}
.sec_2 .works .child-2 h1 {
  color: #32a0fa;
  font-size: 1.8rem;
  font-weight: normal;
  margin-top: 0;
}
.sec_2 .works .child-2 dl,.sec_2 .works .child-2 p {
  overflow: hidden;
  width: 100%;
  color: #d2d2d2;
  font-size: 1.2rem;
}
.sec_2 .works .child-2 p { line-height: 2;}
.sec_2 .works .child-2 dl dt { float: left; }

.sec_2 nav ul {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  box-pack: center;
  padding: 0;
  margin: 2rem 0 0;
}
.sec_2 nav ul li{
   padding: 0 .5%;
 }
.sec_2 nav ul li a:hover { text-decoration: none; }
.sec_2 nav p.ico{
  text-align: center;
  height: 3.6rem;
  width: 3.6rem;
  border-radius: 50%;
  padding: 22.2225%;
  margin-bottom: .5rem;
  cursor: pointer;
}
.sec_2 li.all .ico { background-color: #f19149;}
.sec_2 li.web .ico { background-color: #a6ce46;}
.sec_2 li.app .ico { background-color: #13b5b1;}
.sec_2 li.sys .ico { background-color: #00a0e9;}
.sec_2 li .icotext{
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
}
.sec_2 li.all .icotext {color: #f19149; }
.sec_2 li.web .icotext { color: #a6ce46; }
.sec_2 li.app .icotext { color: #13b5b1; }
.sec_2 li.sys .icotext { color: #00a0e9; }
.sec_2 nav figure img{ max-width: 1.6rem; height: 1.6rem;}


/* AOSの影響で効いてない*/
 .sec_2 nav ul li{
   -webkit-transition: all 0.1s;
   -o-transition: all 0.1s;
   transition: all 0.1s;
 }

.sec_2 nav ul li a p {
  -webkit-transition: all 0.1s;
  -o-transition: all 0.1s;
  transition: all 0.1s;
}
.sec_2 nav ul li:hover .ico,
.sec_2 nav ul li:active .ico {
  -webkit-transform: scale(1.2);
      -ms-transform: scale(1.2);
          transform: scale(1.2);
}
.sec_2 nav ul li.selected .ico { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); }

.sec_2 nav  ul li { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); }

@media screen and (max-width: 768px) {
  .sec_2 .contents-box{
    width: 100%;
  }
  .sec_2::before{
    background-size: 110%;
    top: -2rem;
  }
  .sec_2 .works {
    box-orient: vertical;
    -webkit-box-orient: vertical;
    box-direction: normal;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;

    width: 96%;
  }
  .sec_2 .works .child-1,.sec_2 .works .child-2 { width: 100%;}
  .sec_2 .works .child-2 .thmb {
    box-orient: vertical;
    -webkit-box-orient: vertical;
    box-direction: normal;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .sec_2 .works .child-2 .thmb li {
    width: 100%;
    text-align: center;
  }
  .sec_2 .works .child-2 .thmb li img { padding: 0;}
  .sec_2 nav ul { margin-bottom: 2rem; }
  .sec_2 nav ul li{ padding: 0 2.5%; }
  .sec_2 nav ul li.selected{ padding: 0 2.5%; }

  .mainNav > li.mainNavicon > a > span {
      font-size: 1.2rem;
  }
}

/*================================================
 *  .sec_3
 ================================================*/
.sec_3 .bgcolor {
 position: relative;
 background-color: #f0f0f0;
 width: 100%;
 margin: 0 auto;
}
.sec_3::before {
  background: url('../../img/common/ico_newsL.png') no-repeat top center;
  background-size: contain;
  top: -6.5%;
}
.sec_3 .contents-box { width: 88%; }
.sec_3 .contents-box::before{ display: none;}
@media screen and (max-width: 768px) {
  .sec_3 .contents-box {
    width: 100%;
  }
  .sec_3::before {
    background-size: 110%;
    top: -2rem;
  }
}

/* .view */
 .view {
  width: 100%;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: pointer;
  display: block;
  margin-bottom: 10px;
}
.view:last-child { margin-bottom: 0; }
.view .mask,.view .content {
   width: 100%;
   height: 100%;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view .sliderImg {
   display: block;
   position: relative;
   object-fit: cover;
}
.view .mask > h2 {
   color: #fff;
   text-align: center;
   position: relative;
}
.view .mask > p {
   position: relative;
   color: #fff;
   font-size: 1.2rem;
   padding      :2%;
   text-align: justify;
}
.view-first .sliderImg {
   -webkit-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first:hover .sliderImg,
.view-first.selected .sliderImg{
   -webkit-filter: blur(5px);
   filter: blur(5px);
}
.view-first .mask {
   -webkit-transform: scale(0);
	-ms-transform: scale(0);
	    transform: scale(0);
   -webkit-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-first:active .mask,
.view-first:hover .mask,
.view-first.selected .mask {
  -webkit-transform: scale(1);
	-ms-transform: scale(1);
	    transform: scale(1);
}

.view-first:hover img,
.view-first.selected img {
  -webkit-transform: scale(1.02);
  -ms-transform: scale(1.02);
      transform: scale(1.02);
}
.view-first .mask.all { background-color: rgba(219,127,8, 0.7); }
.view-first .mask.web { background-color: rgba(166,206,70, 0.7); }
.view-first .mask.app { background-color: rgba(19,181,177, 0.7); }
.view-first .mask.sys { background-color: rgba(0,160,233, 0.7); }

.dummy-wrapper:before {
    content:"";
    display: block;
    padding-top: 100%; /* 高さを幅の100%に固定 */
}

/* .news  */
.news figure {
	position: relative;
	overflow: hidden;
	width: 100%;
  height: 100%;
  margin: 0;
}
.news figure:hover
{
    cursor  :pointer;
}
.news figcaption {
  padding: 4% 3%;
	position: absolute;
  bottom: 0;
  left: 0;
	z-index: 2;
	width: 100%;
	height: 55%;
	background: rgba(0,0,0,.8);
	-webkit-transition: .3s;
	-o-transition: .3s;
	transition: .3s;
  text-align: center;
}
.news figcaption .newsTtl {
  color: #00a0e9;
  font-size: 1.4rem;
  /*font-size: 0.729166666vw;*/
  padding: 0;
  margin: 0;
  text-align: left;
}
.news figcaption .newsTxt {
  color: #fff;
  font-size: 1.2rem;
  /*font-size: 0.625vw;*/
  text-align: left;
  margin: 4.5% 0;
}

@media screen and (min-width:769px) and (max-width:1200px) {
  .news figcaption {
    padding-top: 2%;
    line-height: 1.3;
  }
  .news figcaption .newsTtl {
    font-size: 1.4rem;
    overflow: hidden;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    white-space: nowrap;
  }
  .news figcaption .newsTxt {
    font-size: 1.2rem;
    overflow: hidden;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
  }
}
@media screen and (max-width: 768px) {
  .news figure{
    margin-bottom: 1rem;
  }
  .news figure img {
    width: 30%;
  }
  .news figcaption{
    padding: .5rem;
    text-align: left;
    width: 70%;
    height: 100%;
    right: 0;
    left: inherit;
  }
  .news figcaption .newsTtl{
    font-size: 1.3rem;
  }
  .news figcaption .newsTxt{
    font-size: 1.2rem;
  }
  .button.buttonwM{
    display: none;
  }
  .button.buttonwL{
    padding: 3%;
  }
}


#uiNewsDetail {
  width: 100%;
  max-width: 128rem;
  margin: 0 auto;
  padding: 0;
  font-size: 1.2rem;
  color: #fff;
  box-pack: start;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
#uiNewsDetail li {
  box-orient: vertical;
  -webkit-box-orient: vertical;
  box-direction: normal;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
#uiNewsDetail .child-1 {
  width: 33%;
  margin-right: 1%;
}
#uiNewsDetail .child-1 figure {
  margin: 0 auto;
  max-width: 38rem;
  padding: 2rem;
  width: 100%;
  background: url('../../img/common/img_work_frame.png') no-repeat center top;
  background-size: contain;
}

#uiNewsDetail .child-2 { width: 63%; }
#uiNewsDetail .child-2 .thmb {
  padding: 2% 0 0;
}
#uiNewsDetail .child-2 .thmb li {
  box-orient: horizontal;
  -webkit-box-orient: horizontal;
  box-direction: normal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  box-pack: start;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  width: 33.33333%;
}
#uiNewsDetail .child-2 .thmb li img {
  max-width: 24rem;
  padding: 0 2%;
}
#uiNewsDetail .child-2 h1 {
  color: #32a0fa;
  font-size: 1.8rem;
  font-weight: normal;
  margin-top: 0;
}
#uiNewsDetail .child-2 dl,#uiNewsDetail .child-2 p {
  overflow: hidden;
  width: 100%;
  color: #d2d2d2;
  font-size: 1.2rem;
}
#uiNewsDetail .child-2 p { line-height: 2;}
#uiNewsDetail .child-2 dl dt { float: left; }

#modalNews .button.buttonwM {
  padding       :1.2% 3%;
  text-align    :center;
}
@media screen and (max-width: 768px) {

  #uiNewsDetail {
    box-orient: vertical;
    -webkit-box-orient: vertical;
    box-direction: normal;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
      width: 96%;
  }
    #uiNewsDetail .child-1,
    #uiNewsDetail .child-2 { width: 100%;}
    #uiNewsDetail .child-1 figure
    {
        width   :100%;
        margin  :10px auto;
    }
    #uiNewsDetail .child-1 img
    {
        width   :100%;
    }
    #uiNewsDetail .child-2 .thmb {
      box-orient: vertical;
      -webkit-box-orient: vertical;
      box-direction: normal;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
    }
    #uiNewsDetail .child-2 .thmb li {
      width: 100%;
      text-align: center;
    }
    #uiNewsDetail .child-2 .thmb li img { padding: 0;}
}


/*================================================
 *  .sec4
 ================================================*/
.sec_4 .bgcolor {
  position: relative;
  background-color: #825899;
}
.sec_4::before{
  background: url('../../img/common/ico_recruitL.png') no-repeat top center;
  background-size: contain;
  top: -10%;
}
.sec_4 .contents-box.contents-box_C { text-align: center; color: #fff; }
.sec_4 .contents-box > .headerling {
  font-size: 1.4rem;
  font-weight: normal;
}
.sec_4 .contents-box > .headerling > .text-left {
  display: inline-block;
  text-align: left;
}
.fa.iconmgL{ margin-left: 9%; }

@media screen and (max-width: 768px) {
  .sec_4::before{
    background-size: 110%;
    top: -2rem;
  }
}

/*================================================
 *  .sec5
 ================================================*/
.sec_5 .bgcolor {
  position: relative;
  background-color: #f0f0f0;
}
.sec_5::before{
  background: url('../../img/common/ico_contactL.png') no-repeat top center;
  background-size: contain;
  top: -10%;
}
.sec_5 .contents-box.contents-box_C { text-align: center; }
.sec_5 .contents-box > .contactTxt {
  font-size: 1.4rem;
  margin-bottom: 1%;
}
.sec_5 .contents-box > .contactTxtRed {
  color: #ff5200;
}
.sec_5 .contents-box > .telno {
  color: #722d80;
  font-size: 2rem;
  line-height: 1;
  margin: 0 0 0.5%;
}
.sec_5 .contents-box > .bussinessHours {
  font-size: 1.1rem;
  margin: 0 0 1%;
}
.sec_5 .contents-box > .button {
  background-color: #722d80;
  border-radius: 1rem;
  -webkit-box-shadow: inset 0 0 0 0 #fff;
          box-shadow: inset 0 0 0 0 #fff;
  font-size: 1.4rem;
  line-height: 1.5;
  padding: 2rem 0 0.5rem;
}
.sec_5 .contents-box > a.button:hover{ opacity: .7; color: #fff;}
.fa.iconDspB{ display: block;}

#contactArea p.result
{
    font-size   :2rem;
    text-align  :center;
}



@media screen and (max-width: 768px) {
  .sec_5::before{
    background-size: 110%;
    top: -2rem;
  }
  .sec_1 .masage {
    -webkit-writing-mode: inherit;
    -ms-writing-mode: tb-lr;
    writing-mode: inherit;
    line-height: 4;
    width: 50%;
  }
  .sec_1 h1.masage {
  }
  .sec_1 h2.masage {
    right: 4.25%;
    top: 6%;
  }
}

/*================================================
 *  footer
 ================================================*/
.pagetop {
  color: #722d80;
  background-color: #fff;
  padding-top: 5rem;
  position:relative;
  z-index: 100;
  text-align: center;
}
.pagetop a { display: inline-block; }
.pagetop a:hover { text-decoration: none; }
.pagetop a::after {
  display:block;
  text-align: center;
  font-size: 1.2rem;
  line-height: 2;
  content: 'PAGE TOP';
}
.pagetop a::before {
  content:" ";
  display:block;
  margin: 0 auto;
  width:6rem;
  height:3.2rem;
  background:url("../../img/common/ico_pageTop.png") no-repeat 0 0;
  background-size:contain;
}
.footer {
  background-color: #313131;
  padding: 6rem 0 0;
  font-size: 1.2rem;
  position:relative;
  z-index: 100;
}
.footer .footmenu {
  max-width: 50rem;
  width: 100%;
  margin: 0 auto;
  border-top: solid .1rem #505050;
  border-bottom: solid .1rem #505050;
  -js-display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  box-pack: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 1.3rem 0;
}
.footer .footmenu, .footmenu a {  color: #dcdcdc; }
.footer .footmenu li {
  padding-right: 2rem;
}
.footer .footmenu li:last-child {
  padding-right: 0;
}
.footer .copyright{
  background-color: #000;
  margin: 6rem 0 0;
  padding: 1.6rem 0;
  text-align: center;
  color: #797979;
}

/* bxSliderの読み込み前に、スライダーが縦長にならないようにする暫定対応 */
#slider_works li,
#slider_news li {
  float: left;
}
#slider_works,
#slider_news {
  overflow: hidden;
}

#slider_works {
  height: 680px;
}
#slider_news {
  height: 340px;
}

@media screen and (max-width: 768px) {
  #slider_works {
    height: 1390px;
  }
  #slider_news {
    height: 448px;
  }
}