/* ヘッダ */



.header {padding: 10px 0 0 0;
  display: block;
    position: fixed;
	 background-color:transparent;
    box-sizing: border-box;
}


.header.scrolling {
   background-color: rgba(0,0,0,0.8);
}


.header{z-index:100; width: 100%; padding: 6px 0px 0px 0px;}

#box{z-index:100; width: 100%;max-width:1336px;margin: 0 auto;}

/* グローバルナビ */

#logo{width: 100%;max-width: 315px;float: left;}
#logo img{width: 100%}
ul#navi{float: left;margin-left: 30px;}
ul#navi li{color: #fff;font-size: 16px; font-weight: 900;height: 46px;width:auto;padding: 0em 1.4em 0em 1.4em;}
ul#navi li span{font-size: 13px}
ul#navi li a{color: #fff;text-decoration: none;}
ul#navi li.cripo{ border-left: 1px solid #fff;text-align: center;float: left;}
ul#navi li.service{border-left: 1px solid #fff;text-align: center;float: left;}
ul#navi li.release{border-left: 1px solid #fff;text-align: center;float: left;}
ul#navi li.about{border-left: 1px solid #fff;text-align: center;float: left;}
ul#navi li.mail{border-left: 1px solid #fff;text-align: center;float: left;}
ul#navi li.drw{border-left: 1px solid #fff;text-align: center;float: left;}





/*ドロワ*/



#navTgl {
  display: none;
}
 
label.open,
label.close {
  cursor: pointer;
  top: 0;
  left: 0;
}
 
.open {
  z-index: 2;
  width: 20%;
  text-align: center;
  -webkit-transition: background-color .6s, -webkit-transform .6s;
  transition: background-color .6s, transform .6s;
}
 
#navTgl:checked + .open {
  background-color: indianRed;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}
 
.close {
  pointer-events: none;
  z-index: 999999999;
  width: 100%;
  height: 100%;
  transition: background-color .6s;
}
 
#navTgl:checked ~ .close {
  pointer-events: auto;
  background-color: rgba(0,0,0,.3);
}
 
/* :::::: drawer menu :::::: */
 
.menus {
  z-index: 1;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.6);
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition: -webkit-transform .6s;
  transition: transform .6s;
  overflow:auto;
}
 
#navTgl:checked ~ .menus {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
 
.menus p,
.menus li a {
  color: white;
  display: block;
}
 
.menus p {
  text-align: center;
}
 
.menus ul {
  padding: 5% 0 0 0 ;
  list-style-type:none;
}
 
.menus li {display: block;
  border-bottom: 1px solid rgba(255,255,255,.6);
  font-size: 1em;
  line-height: 1.5em;
  margin: 0 auto;
  clear: both;
}
 
.menus li:first-child {
  border-top: 1px solid rgba(255,255,255,.6);
}
 
.menus li a {
  display: block;
  padding: 1em 2em;
  text-decoration: none;
  transition: background-color .6s;
}
 
.menus li a:hover {
	background-color: #555;
}
 







.button {
  flex: 1 1 auto;
  margin: 0px;
  padding: 0px;

  text-align: center;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: .3s;
}
.button:after {
  position: absolute;
  transition: .3s;
  content: '';
  width: 0;
  left: 50%;
  bottom: 0;
  height: 3px;
  background: #f7f7f7;
}
.button:nth-of-type(2):after {
  position: absolute;
  transition: .3s;
  content: '';
  width: 0;
  left: 50%;
  bottom: 0;
  height: 3px;
  background: #f7f7f7;
}
.button:nth-of-type(3):after {
  position: absolute;
  transition: .3s;
  content: '';
  width: 0;
  left: 50%;
  bottom: 0;
  height: 3px;
  background: #f7f7f7;
}
.button:nth-of-type(4):after {
  position: absolute;
  transition: .3s;
  content: '';
  width: 0;
  left: 50%;
  bottom: 0;
  height: 3px;
  background: #f7f7f7;
}
.button:nth-of-type(5):after {
  position: absolute;
  transition: .3s;
  content: '';
  width: 0;
  left: 50%;
  bottom: 0;
  height: 3px;
  background: #f7f7f7;
}
.button:nth-of-type(6):after {
  position: absolute;
  transition: .3s;
  content: '';
  width: 0;
  left: 50%;
  bottom: 0;
  height: 3px;
  background: #f7f7f7;
}
.button:hover {
  cursor: pointer;
}
.button:hover:after {
  width: 100%;
  left: 0;
}


/* key */

#key,#key02{width: 100%}
#key .key01{
	background-image: url(../images/key/img01.jpg);
	background-position: center top;
	background-repeat: no-repeat;
	-moz-background-size: cover;
	background-size: cover;
	z-index: 1;
	
} 
#key .mask,#key02 .mask{
	background-image: url(../images/key/mask.png);
	background-position: center top;
	background-repeat: no-repeat;
	-moz-background-size: cover;
	background-size: cover;
	z-index: 2
} 
#key .key01 .catch{
	width: 100%;
	max-width: 1336px;
	margin: 0 auto;
	z-index: 3;
	font-size: 50px;
	color: #fff;
	padding-top: 24%;
	padding-right: 0px;
	padding-left: 2%;
	padding-bottom: 1%;
} 
#key .key01 .subcatch{
	width: 100%;
	max-width: 1336px;
	z-index: 3;
	font-size: 32px;
	color: #fff;
	padding: 0% 0px 0% 2%;
	margin: 0 auto 7% auto;
} 




#key02 .key02{
	background-image: url(../images/key/img02.jpg);
	background-position: center top;
	background-repeat: no-repeat;
	-moz-background-size: cover;
	background-size: cover;
	z-index: 1;
	
} 

#key02 .key02 .catch{
	width: 100%;
	max-width: 1336px;
	margin: 0 auto;
	z-index: 3;
	font-size: 40px;
	color: #fff;
	padding-top: 130px;
	padding-right: 0px;
	padding-left: 2%;
	padding-bottom: 1%;
} 
#key02 .key02 .subcatch{
	width: 100%;
	max-width: 1336px;
	z-index: 3;
	font-size: 20px;
	color: #fff;
	padding: 0% 0px 0% 2%;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0%;
} 



#key {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin-bottom: 80px;
}

#key02 {
  position: relative;
  width: 100%;
  padding-top: 25.25%;
  margin-bottom: 80px;
}

#key .key01 {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

#key02 .key02 {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 300px !important;
}


#key {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
#key .mask {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

#key02 {
  position: relative;
  width: 100%;
  padding-top: 25.25%;
}
#key02 .mask {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

a.services{display: block; width: 380px; height: auto; background:#147696;color: #fff; text-align: center;font-size: 30px;padding: 10px 0px 10px 0px;margin: 0 auto; }


/* 5つのポイント */

ul#point5{
	width: 100%;
	max-width: 1330px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 266px;
}
ul#point5 li{width: 20%;max-width: 266px;float: left;text-align: center;}
ul#point5 li img{width: 100%;max-width: 151px; margin:0px 0px 50px 0px;}
ul#point5 li .title{
	margin-bottom: 50px;
	font-size: 20px;
	text-align: center;
	text-shadow: 0px 0px rgba(229,16,131,1.00);
}
ul#point5 li .text{font-size: 18px;line-height: 30px;width: 100%; max-width: 210px; text-align: left;margin: 0 auto;}



/* 制作実績 */

ul#performance{
	width: 100%;
	max-width: 1330px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 266px;
}
ul#performance li{
	width:46%;
	float: left;
	text-align: center;
}

ul#performance li.rmg{margin-right: 6%}

ul#performance li img{
	width: 100%;
	max-width: auto;
	margin: 0px 0px 50px 0px;
	border: solid #eee;
	padding: 2%
}
ul#performance li .title{
	margin-bottom: 50px;
	font-size: 20px;
	text-align: center;
	text-shadow: 0px 0px rgba(229,16,131,1.00);
}
ul#performance li .text{
	font-size: 18px;
	line-height: 30px;
	width: 100%;
	text-align: left;
	margin: 0 auto;
}


/* コンテンツ見出し */

h2{font-size: 32px;text-align: center;margin: 0px auto 100px auto;position: relative;
line-height: 1.4;
padding:0.25em 3.6em;
display: inline-block;
top:0;}


h2:before,h2:after{ 
  position: absolute;
top: 0;
  content:'';
width: 8px;
height: 100%;
display: inline-block;
}
h2:before{
border-left: solid 1px black;
border-top: solid 1px black;
border-bottom: solid 1px black;
  left: 0;
}
h2:after{
  content: '';
  border-top: solid 1px black;
  border-right: solid 1px black;
  border-bottom: solid 1px black;
  right: 0;
}

h2:first-letter{font-size: 32px;}



h2 span{
	font-size: 18px;
	text-shadow: 0px 0px rgba(226,16,135,1.00);
}

h3{font-size: 32px;margin: 0px auto 72px auto;}
h4{font-size: 32px;margin: 0px auto 20px auto;}

/* コンテンツ */
.contents{width: 100%;max-width: 1336px;margin: 0 auto; }
/* コンテンツ　ワード領域 */
.word{padding: 1%;line-height: 2em;}

/* コンテンツ　背景*/
.PINK{
	background-color:#E40D7E;
	margin: 0px 0px 155px 0px;
	padding-top: 20px;
	padding-bottom: 20px;
}
.LightLightBlue{background: hsla(150,8%,95%,1.00);margin: 0px 0px 155px 0px;}


.White{background:  rgba(255,255,255,1.00);margin: 0px 0px 155px 0px;}

.check{font-size: 24px;color: #fff;}
.checkwp{
	background-image: url(../images/top/checkwp.jpg);
}

.photobox{position: relative;float: left;width: 55%}
.photobox img{width: 100%;max-width:100% }
.photobox .icon{position: absolute;right:-10px;top:30px}
.photobox .icon2{position: absolute;left: -10px;top:30px}
.photobox p{
	padding: 15px 0 0 0;
	margin-top: 30px;
	margin-bottom: 45px;
}

.textbox{float: left; width: 45%;}
.textbox p{
	padding: 3%;
	width: 70%;
	font-size: 18px;
	line-height: 36px;
	margin-top: 55px;
}

/* ceo */

#ceo{background-image: url(../images/top/ceo_wp.png);
	background-repeat: no-repeat;
	width: 459px;
padding: 37px 0 46px 0;
	margin:105px  auto 155px auto;	
}


a.ceo{width: 200px;padding: 13px 0 13px 0;display: block;margin: 0 auto 22px auto;text-align: center; background: rgba(4,14,36,1.00);color: #fff; text-decoration: none;}

p.name{text-align: center;margin-bottom: 10px;font-size: 20px;}
p.arw{text-align: center}


/* news*/

.Lbox{float: left;width:150px;}
.Rbox{float: left;}


#newsWrap{
	width: 100%;
	background: hsla(150,8%,95%,1.00);
	padding-top: 105px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 106px;
}

ul#newsList{
	width: 100%;
	max-width: 1336px;
	background: hsla(0,0%,100%,1.00);
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	position: relative;

}
.bg_line{height: 1px;background: hsla(150,8%,95%,1.00); margin: 0px 0px 150px 0px}
.bg_line_sub{height: 1px;background: hsla(150,8%,95%,1.00); margin: 0px 0px 30px 0px}


ul#newsList a.list{
	display: block;
	position: absolute;
	right: 0;
	top: -80px;
	text-align: center;
	color: #fff;
	padding: 10px;
	background-color: #147696
}

ul#newsList li{
	color:#666;
	margin:0;
	padding:2em;
	margin-bottom:3px;
	border-bottom:1px dotted #ccc;
	line-height:120%;
	list-style-type:none;}

.catName{
	display:inline-block;
	padding:3px 8px;
	border:1px solid #ccc;
	border-radius:6px;
	line-height:100%;
	margin:0 2px;
}
.newMark{
	display:inline-block;
	border:1px solid #F00;
	padding:1px 4px;
	line-height:100%;
	background:#F00;
	color:#fff;
	box-shadow:1px 1px 1px #999;
	border-radius:8px;
	font-style:italic;
}
.comment{
	display:block;
	padding:3px 0;
	float:left;
	overflow:hidden;
	width:auto;
}
.thumbNailWrap{
	display:block;
	width:75px;
	float:left;
	overflow:hidden;
}
.linkTag,.title{
	display:block;
	margin:3px 0;
}



.thumbNailWrap{
	display:block;
	width:110px;
	float:left;
	height:80px;
	overflow:hidden;
}

/* Pager style（外部化可） */
.pager{
	text-align:right;
	padding:10px;
	clear:both;
}
/*ページャーボタン*/
.pager a{
    border: 1px solid #999;
    border-radius: 5px 5px 5px 5px;
    color: #333;
    font-size: 12px;
    padding: 3px 7px 2px;
    text-decoration: none;
	margin:0 1px;
}

/*現在のページのボタン*/
.pager a.current{
    background: #999;
    border: 1px solid #999;
    border-radius: 5px 5px 5px 5px;
    color: #fff;
    font-size: 12px;
    padding: 3px 7px 2px;
	margin:0 1px;
    text-decoration: none;
}

.pager a:hover{
    background:#999;
    color: #fff;
}

.overPagerPattern{
	padding:0 2px ;	
}

/* line */
.line{
	background-image: url(../images/top/line.png);
	height: 6px;
	width: 100%;
	max-width: 1336px;
	margin-left: auto;
	margin-right: auto;
}

/* 求人 */


.rectitle{margin:0px 0px 72px 0px; }
.recnote{margin:0px 0px 92px 0px; text-align: left;}
img.rec{width: 100%; max-width: 550px;}



/* 募集要項 */

.erl {
	margin: 0 16px 25px;
	position: relative
}
.erl a {
    display: block; }
.erl .child {
    display: none;
    margin-bottom: 75px;
    padding: 0;
    background: #fff;
    border: 1px solid #eaeaea; }
.erl .child .menu {
      background: #eaeaea;
      color: #5e5e5e; }
      .demo .child .menu:hover {
        background: #d0d0d0; }
.erl .child > li {
      margin: 4px 0;
      padding: 0 16px;
	  border-bottom: 1px dotted #dddddd; }
.erl .child > li:last-child {
	border-bottom: 0;
	padding-top: 15px;
	padding-right: 15px;
	padding-bottom: 15px;
	padding-left: 15px;
	
}




.switch .menu:after {
  position: absolute;
  top: 50%;
  left: 10px;
  margin-top: -1.4rem;
  content: '>';
  font-size: 1.4rem;
  font-weight: bold;
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  -moz-transition: all, 0.25s, linear;
  -o-transition: all, 0.25s, linear;
  -webkit-transition: all, 0.25s, linear;
  transition: all, 0.25s, linear; }
.switch .menu.active:after {
  -moz-transform: translate(0, 50%);
  -ms-transform: translate(0, 50%);
  -webkit-transform: translate(0, 50%);
  transform: translate(0, 50%);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg); }



.menu {
	display: block;
	position: relative;
	margin: 1px 0 0;
	padding-top: 15px;
	padding-right: 25px;
	padding-left: 10px;
	padding-bottom: 15px;
	background-color: hsla(221,100%,9%,1.00);
}



.erl .menu {
	background-color: #147696;
	color: #fff;
	padding: 0px 0px 11px 50px;
	width: 320px;
	margin: 0px 0px 70px 0px
}
.erl .menu:hover {
	background-color: #0c6380;
	text-decoration: none;
}
.lines{position: relative;}
.lines .erl_line{border-top: 1px solid hsla(221,96%,13%,1.00);width: 100%;position: absolute;top: 43px;}


.listbox .lbox{width: 30%; float: left; margin: 0px 0px 20px 0px;}
.listbox .rbox{width: 70%;float: left;margin: 0px 0px 20px 0px;}
.listbox .erlhr{border-bottom: solid 1px #ccc;width: 100%;height: 1px;margin: 0px 0px 20px 0px}




/* お問合わせ　*/



#formWrap {
	width:100%;
	margin:0 auto;
	color:#555;
	line-height:120%;
	font-size:90%;
}
table.formTable{
	width:100%;
	margin:0 auto;

}
table.formTable td,table.formTable th{
	border-top:1px solid #eee;
	padding:10px;
}
table.formTable th{
	width:30%;
	font-weight:normal;

	text-align:left;
}



/* フッター　*/

#f_logo{text-align: center; margin: 0px 0px 20px 0px;}
#f_logo img{width: 100%;max-width: 274px}
a#copy{display: block;text-align: center;margin: 0px 0px 20px 0px;text-decoration: none; color: #1d1d1d; }





/*トップへ戻るボタン*/
.topBtn {
  position:fixed; /*固定*/
  bottom:20px; /*場所を右下に移動*/
  right:20px; /*場所を右下に移動*/
  display:block; /*aタグをblock要素に変更*/
  background-color:rgba(0,0,0,0.5); /*以下、デザインはご自由に！！*/
  color:#fff;
  text-decoration:none;
  font-weight:bold;
  font-size:11px;
  width:60px;
  height:60px;
  text-align:center;
  line-height:22px;
  border-radius:30px;
  padding-top:30px;
  box-sizing:border-box;
}
.topBtn:before {
  content:'\25B2';
  position:absolute;
  top:10px;
  left:0;
  width:100%;
  text-align:center;
  font-size:20px;
}
.topBtn:hover {
  opacity:0.7;
}






table.entry { width: 100%;max-width: 1184px; margin: 0 auto; }
table.entry th,table.entry td  { padding: 10px; }
table.entry th  {
}
 
 table.entry .half{width: 48%; float: left; margin-right: 2%}
  table.entry .half02{width: 48%; float: left; }
 
  table.entry .full{width:100%;}
  
table.entry span{color: #008ad8}
  
table.entry input,
table.entry button,
table.entry textarea,
table.entry select {
border:solid 1px #eee;
padding: 5px;}
.bt{border:solid 1px #ccc;
padding:15px 30px;
margin:0 0 20px;
font-family:Arial, sans-serif;
font-size:1.2em;
text-transform:uppercase;
font-weight:bold;
color:#333;
cursor:pointer;}
 
/*----------------------------------------------------
  .entry
----------------------------------------------------*/
.entry th  { width: 30%; text-align: left; }
 
@media only screen and (max-width:480px){
    .entry { margin: 0 -10px; }
    .entry th,
    .entry td{
    width: 90%;
    display: block;
    border-top: none;
    }
	 table.entry .half{width:90%; margin: 0 auto;margin-bottom: 10px}
  table.entry .half02{width:90%; margin: 0 auto;margin-bottom: 10px}
 
  table.entry .full{width:90%; margin: 0 auto;margin-bottom: 10px}
  
  
  table.entry input,
table.entry button,
table.entry textarea,
table.entry select {
border:solid 1px #eee;
}
 .bt{border:solid 1px #ccc;
padding:15px 30px;
margin:0 0 20px;
font-family:Arial, sans-serif;
font-size:1.2em;
text-transform:uppercase;
font-weight:bold;
color:#333;
cursor:pointer;}
  
  .entry tr:first-child th {}
}