@charset "utf-8";

@media only screen and (max-width: 959px) { 
/* CSS Document */
body {    font:16px/1.231 Helvetica,"ヒラギノ角ゴ Pro W3";	-webkit-text-size-adjust:none;background:#FFF;color:#333;}

.pc100 {width:100%;}
.pc20 {width:20%;}
.pc30 {width:30%;}
.pc40 {width:40%;}
.pc50 {width:50%;}
.pc60 {width:60%;}
.pc75 {width:75%;}
.pc70 {width:70%;}
.pc80 {width:80%;}
.pc90 {width:90%;}
.pc {display:none;}
.innerSS {width:90%;margin: 0 auto; position:relative;}
.innerS {width:94%;margin: 0 auto;}
.inner {width:96%;margin: 0 auto; position:relative;}
.innerM {width:96%; margin: 0 auto; position:relative;}
.innerL {width:98%; margin: 0 auto; position:relative;}
.innerXL {width:100%;margin: 0 auto; position:relative;}
a {text-decoration:none;}
.center,.spcenter {text-align:center;}
.tR {text-align:right;}
.tL {text-align:left;}
.pd50 {padding:30px 0;}
.pd30 {padding:30px 0;}
.top50 {margin-top:50px;}
.top80 {margin-top:80px;}
.first {padding-top:70px;}
img.img100 {max-width:100% !important;height:auto !important;}
img.img60 {max-width:60% !important;height:auto !important;}
.img100 {}
.whiteBg {background-color:#FFF;}

.pd100 {padding:50px 0;}
.bpd50 {padding-bottom:50px;}
.tpd50 {padding-top:50px;}
span.spbr:before  {content: "\A" ;	white-space: pre ;}
p {line-height:1.4em;}
.sptop10 {margin-top:10px;} 
.sptop20 {margin-top:20px;} 
.spunder10 {margin-bottom:20px;}
.spunder20 {margin-bottom:20px;}
.spunder30 {margin-bottom:30px;}
.spunder50 {margin-bottom:50px;}
.sptop30 {margin-top:30px}
img.img100 {max-width:100% !important;height:auto !important;}
.whiteBg {background:#fff;}
#i1,#i2 ,#i3{
  margin-top:-120px;
  padding-top:120px;
}
p.sppd20 {padding:20px;line-height:1.6em;}
p.sppd10 {padding:10px;}
.spspd10 {padding: 0 10px;}
.spspd20 {padding: 0 20px;}
.spd20 {padding:20px 0;}
span.bl {color:#333 !important;}
.sphidden {display:none;}
.ptop100 {padding-top:30px;}
.top40 {margin-top:30px;}
.under20 {margin-bottom:20px;}
/*.ani {position:relative;opacity: 0;top:-10px;}
.ani.ani-in { opacity: 1;transition: all 1s;top:0;transition-timing-function: cubic-bezier(.23, 1, .32, 1);transition-delay:0.3s;}*/
/*********************************/
img {max-width:100% !important;height:auto !important;}
/***共通********/

#top-head,.top-head .discription,#top-head img,#top-head .toplogo,#top-head .btm {transition: all 0.3s ease-out;}
#top-head {width:100%; height:60px;z-index:995;position:fixed;background:#fff;}
#top-head .toplogo {width:250px;margin-top:10px;float:left;margin-left:0px;}
#top-head .toplogo img {width:100%;}
#top-head.fixed {width:100%; height:50px;z-index:995;box-shadow:0px 1px 8px -4px #4c4c4c;}
#top-head.fixed .toplogo {margin-top:10px;width:60%;}
#top-head .navHead {display:none;}

#top-head .btm {position:absolute;right:0;top:0;width:60px;}
#top-head.fixed .btm {width:50px;}
.first {padding-top:60px;}
/***トップムービー部分**********/

.box01 {
float:right;
width:90%;
  background:linear-gradient(45deg,  transparent 20px, #AFB4DB 20px);
  background-position: bottom left, top left, top right, bottom right;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position:relative;
  top:0;
  right:0;
  z-index:2;
  padding:20px 0 50px 0;
}
.box01 h1 {position:absolute;font-size:1.2em;top:100px;color:#fff;text-shadow: 3px 3px 1px rgba(8,8,8,0.6);z-index:9;font-style:italic;width:100%;text-align:center;margin-left:-5%;}
.box01 h1.ani.ani-in {}
.fifth {position:relative;text-align:center;top:-90px;width:60%;z-index:99;margin:0px auto 0 auto;}
.box01 .Main {max-width:960px;width:120%;height:200px;overflow:hidden;position:relative;left:-25%;}

.inBox { position:relative;width:100%;margin-top:-100px;}
.inBox .box02 {
width:100%;
  background:linear-gradient(315deg,  transparent 20px, #D5D8EC 20px);
  background-position: bottom left, top left, top right, bottom right;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position:relative;
  top:0px;
  right:0;
  z-index:0;
  padding:0px;
}

.inBox .content{
background:url(../images/pin.png) repeat-y left top;
background-size:30% 50%;
width:100%;
position:relative;
/*background-attachment: fixed;*/
margin:50px auto;
}
.inBox .content .in {
width:90%;
margin:0px auto;
}
.content .in h2 {
text-align:center;
font-size:1.4em;margin:30px 0 10px 0;
background:url(../images/point.png) no-repeat center bottom;
padding:50px 0;
line-height:1.4em;
}
.content .in h2:before {
position:absolute;
content:url(../img/top/ourwork.png);
top:20px;
right:0;
}
.content .in p {font-size:0.85em;line-height:1.8em;}
.content .in .backBt3 {cursor:pointer;z-index:9999;}


.inBox .Main {background:url(../images/p01.jpg) no-repeat center top;width:100%;height:200px;overflow:hidden;position:relative;background-size:cover;z-index:100;}
.inBox .Main.up {top:60px !important;}
.inBox .Main.up.ani-in {top:25px !important;}

.factory {background:url(../images/factory_sp.jpg) no-repeat left center;margin-top:50px;
height:80vh;background-attachment: fixed;
z-index:-1;
}

.factory .mat { 
position:relative;
top:10vh;
width:70%;
margin:0 auto;
padding:20px;
 background:
    linear-gradient(45deg,  transparent 0px, rgba(255,255,255,.8) 0px),
    linear-gradient(135deg, transparent 20px, rgba(255,255,255,.8) 20px),
    linear-gradient(225deg, transparent 0px, rgba(255,255,255,.8) 0px),
    linear-gradient(315deg, transparent 20px, rgba(255,255,255,.8) 20px);
  background-position: bottom left, top left, top right, bottom right;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  box-shadow: -11px 10px 12px -10px rgba(0,0,0,0.6);
  }
.factory .mat h2 {text-align:center;font-size:1.3em;margin:30px 0 10px 0;
background:url(../images/point.png) no-repeat center bottom;
padding:0 0 50px 0;
line-height:1.3em;
}
.factory .mat h2:before {position:absolute;content:url(../img/top/fa.png);
top:20px;right:50px;}
.factory .mat p {font-size:0.9em;line-height:1.6em;margin:0 auto;}

.tate {text-align:center;margin-top:10px;}

.recruit {position:relative;padding:50px 0;}
.recruit h2 {text-align:center;font-size:1.4em;margin:30px 0 10px 0;
background:url(../images/point.png) no-repeat center bottom;
padding:0 0 50px 0;
}
.recruit h2:before {position:absolute;content:url(../img/top/recruit.png);
top:40px;}
.recruit p {width:90%;margin:0 auto;font-size:0.85em;line-height:1.8em;}

.recruit .block ul {display: flex;  flex-wrap: wrap;  align-items: center;  justify-content: space-between;width:96%;margin:10px auto;}
.recruit .block li {position:relative;z-index:-1;width:30%;margin-bottom:10px;}
.recruit .block li img {max-width:100%;}

.v {
position: relative;
width:100%;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
}

 .v iframe {
background:#fff;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


/***Products*******/

.product1 {background:url(../images/p01_sp.jpg) no-repeat center top;  background-attachment: fixed;height:100vh;color:#FFF;position:relative;}

.product1 .block {width:100%;position:fixed;top:100px;right:0px;}

.product1 h1 {text-align:center;font-family: 'Roboto', sans-serif;margin-bottom:20px;color:#A48ED3;}
.product1 h2 {text-align:center;font-size:1.4em;margin-bottom:20px;line-height:1.4em;}
.product1 p {font-size:0.9em;line-height:1.4em;width:84%;margin:0 auto;}
.product1 .under20 {margin-bottom:10px;}

.product2 {background:url(../images/p02_sp.jpg) no-repeat center center;background-size:cover;
color:#FFF;position:relative;border-top:10px solid #ccc;padding-bottom:50px;}
.product2 h2 {text-align:center;font-size:1.4em;margin-bottom:20px;line-height:1.4em;}
.product2 p {font-size:0.9em;line-height:1.4em;width:84%;margin:0 auto;}
.product2 .under20 {margin-bottom:10px;}
.product2 .block {width:100%;margin:30px auto 0 auto;}
.sticky{

}

/**会社概要****/
.head-about {background:url(../images/main_sp.jpg) no-repeat center center;height:100px;}
.head-factory {background:url(../images/main_sp.jpg) no-repeat center center;height:100px;}
.head-equipment {background:url(../images/main_sp.jpg) no-repeat center center;height:100px;}


.factoryP {margin-bottom:50px;}
.factoryP .cont {width:100%;}
.factoryP .boxB .cont {float:right;}

.factoryP .boxA {
min-height:460px;
float:right;
width:calc(95% - 40px);
  background:linear-gradient(45deg,  transparent 20px, #AFB4DB 20px);
  background-position: bottom left, top left, top right, bottom right;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position:relative;
  top:0;
  right:0;
  z-index:2;
  padding:20px;
}
.factoryP img {max-width:100%;}
.factoryP h2 {text-align:center;margin:20px 0;font-size:1.4em;}
.factoryP p {font-size:0.85em;line-height:1.8em;}
.factoryP .boxA .Main1 {
position:relative;right:0;top:0px;width:100%;height:250px;overflow:hidden;
background:url(../images/f01.jpg) no-repeat center center;background-size:cover;
}
.factoryP .boxA .Main2 {
position:relative;right:0;top:0px;width:100%;height:250px;overflow:hidden;
background:url(../images/f08.jpg) no-repeat center center;background-size:cover;
}
.factoryP .boxA .sub {position:relative;top:10px;margin-top:20px;width:100%;left:0%;}

.factoryP .boxB {
min-height:460px;
width:calc(95% - 40px);
  background:linear-gradient(315deg,  transparent 20px, #D5D8EC 20px);
  background-position: bottom left, top left, top right, bottom right;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position:relative;
  top:0px;
  right:0;
  z-index:0;
  padding:10px 20px;
}

.factoryP .boxB .sub {position:relative;top:10px;margin-top:20px; width:100%;right:0%;}
.factoryP .boxB .Main1 {

}
.factoryP .boxB .Main2 {
position:relative;left:0;top:0px;width:100% ;height:250px;
background:url(../images/f03.jpg) no-repeat center center;background-size:cover;
}

.spIn {width:90%;margin:0 auto 40px auto;font-size:0.9em;}

/***共通************/

.pan,.pan a {color:#eee;font-size:.85em;}
.pan a:hover {color:#E20A16;}
span.color {color:#B1714D;}


.ani {opacity:0;transition: all 0.9s;}
.ani.ani-in {opacity:1;transition-delay:.3s}

.up {opacity:0;transition: all 0.6s;position:relative;top:-5px;}
.up.ani-in {opacity:1;transition-delay:.6s;top:0;}
.up.t1.ani-in {opacity:1;transition-delay:.9s;top:0;}
.up.t2.ani-in {opacity:1;transition-delay:1.2s;top:0;}
.up.t3.ani-in {opacity:1;transition-delay:1.5s;top:0;}

/***企業情報*************/
h1.title {text-align:center;font-size:1.8em;
margin:20px 0;
background:url(../images/point.png) no-repeat center bottom;
padding:0 0 50px 0;
 }
h2.title {text-align:center;font-size:1.5em;
margin:30px 0;
background:url(../images/point.png) no-repeat center bottom;
padding:0 0 50px 0;
color:#6B47B8;
 }
img.img100 {width:100%;}


.pager {margin-bottom:10px;text-align:center;}
/***フッター********/
.foot {background:#444444;border-top:20px solid #A48ED3;color:#fff;position:relative;}
.foot .inner {padding:30px 0;}
.foot img {width:80%;}
.foot .address {position:relative; left:0px;top:0px;}
.foot a {color:#fff;}

/***お問合せ*********/
.contact {color:#333;}
.privacy {width:96%; margin:0 auto;padding:20px 0;line-height:1.4em;}
.privacy h2 {text-align:center;font-size:1.3em;margin-bottom:20px;background:#6873BB;color:#fff;border-radius:20px;padding:10px 0; }
.privacy .box {background-color:rgba(255,255,255,.7);padding:10px;border:1px solid #888;height:200px;overflow:auto;margin:20px 0;}
.privacy dt{margin-bottom:10px;margin-top:20px;border-bottom:1px dotted #333;padding-bottom:5px;}
.privacy dd{margin-bottom:10px;font-size:0.9em;padding-left:10px;line-height:160%;}
.disc li {list-style-type: disc;margin-left:10px;font-size:0.9em;}
.form h1 {text-align:center;font-size:1.8em;margin-bottom:20px;background:#43A036;color:#fff;border-radius:20px;padding:10px 0; }
.form button {margin:0 10px;}
.form h3 {text-align:center;margin:100px 0 30px 0;font-size:1.5em;}
.form .box {background-color:rgba(255,255,255,.7);padding:30px;border:1px solid #43A036;margin-bottom:100px;}

.mail h2 {text-align:center;font-size:1.2em;margin-bottom:20px;background:#00A0E9;color:#fff;border-radius:20px;padding:10px 0;}

/***TABLE***************/


table.tableA {width:100%;font-size:.9em;margin-bottom:30px;}
.tableA th {border:1px dotted #ccc;padding:5px;background-color:#efefef;text-align:center;line-height:1.4em;}
.tableA td {border:1px solid #ccc;padding:5px;text-align:center;vertical-align:middle;text-align:center;line-height:1.4em;background:#FFF;}
.tableA span {font-size:0.8em;}

table.tableB {width: 98%;font-size:0.9em;margin-bottom:30px;margin-left:auto;margin-right:auto;}
.tableB th {font-weight:normal;padding:10px 10px;text-align:center;line-height:1.5em;color:#FFF;display:block;background:#6873BB;border-radius:20px;}
.tableB td {padding:5px 10px;text-align:left;line-height:1.5em;display:block;}

table.tableC {width:100%;line-height:150%;margin-bottom:30px; }
.tableC th {border-bottom:1px dotted #333;font-weight:normal;padding:10px;background-color:#efefef;text-align:left;vertical-align:top;font-size:.9em;}
.tableC td {border-bottom:1px dotted #333;padding:10px;vertical-align:top;font-size:.9em;}

.over {width:100%;overflow-x:scroll !important;position:relative;border-top:3px dotted #84A3FF;border-bottom:3px dotted #84A3FF;background:#FFF;padding:20px 0;}
.over:before {position:absolute;content:"スライドします →";color:#84A3FF;padding:0px 5px;font-size:.9em;top:20px;margin-bottom:20px;left:0;}
.over .tableC {width:700px;font-size:.9em;}

/***INPUT******************************/
textarea{
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   -o-border-radius: 5px;
   -ms-border-radius: 5px;
   border:#a9a9a9 1px solid;
   -moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.2),0 0 2px rgba(0,0,0,0.3);
   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2),0 0 2px rgba(0,0,0,0.3);
   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2),0 0 2px rgba(0,0,0,0.3);
   height:25px;
   padding:10px;
}
select {
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   -o-border-radius: 5px;
   -ms-border-radius: 5px;
   border:#a9a9a9 1px solid;
   -moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.2),0 0 2px rgba(0,0,0,0.3);
   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2),0 0 2px rgba(0,0,0,0.3);
   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2),0 0 2px rgba(0,0,0,0.3);
   height:25px;
   padding:0 3px;
}

input[type=text],input[type=email],input[type=tel],input[type=number]{
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   -o-border-radius: 5px;
   -ms-border-radius: 5px;
   border:#a9a9a9 1px solid;
   -moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.2),0 0 2px rgba(0,0,0,0.3);
   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2),0 0 2px rgba(0,0,0,0.3);
   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2),0 0 2px rgba(0,0,0,0.3);
   height:25px;
   padding:0 3px;
}
 
input[type=text]:focus {
   border:solid 1px #20b2aa;
}
 
 input[type=image]:hover{filter: alpha(opacity=75); -moz-opacity:0.75; opacity:0.75; }
 
label:after  {content: "\A" ;	white-space: pre ;}
 
input[type=text], select { 
   outline: none;
}

.radio {
  box-sizing: border-box;
  -webkit-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
  position: relative;
  display: inline-block;
  margin: 0 10px 8px 0;
  padding: 5px 10px 5px 42px;
  border-radius: 8px;
  background-color: #efefef;
  vertical-align: middle;
  cursor: pointer;
}
.radio:hover {  background-color: #e2edd7;}
.radio:hover:after {  border-color: #53b300;}
.radio:after {  -webkit-transition: border-color 0.2s linear;
  transition: border-color 0.2s linear;
  position: absolute;
  top: 50%;
  left: 15px;
  display: block;
  margin-top: -10px;
  width: 16px;
  height: 16px;
  border: 2px solid #FF7373;
  border-radius: 6px;
  content: '';
}

.radio:before {  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
  position: absolute;
  top: 50%;
  left: 20px;
  display: block;
  margin-top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ff0000;
  content: '';
  opacity: 0;
}
input[type=radio]:checked + .radio:before {
  opacity: 1;
}

/***ボタン関連****/

.backBt3::before,
.backBt3::after {	position: absolute;	z-index: -1;	display: block;	content: '';}
.backBt3,.backBt3::before,.backBt3::after {	-webkit-box-sizing: border-box;	-moz-box-sizing: border-box;	box-sizing: border-box;	-webkit-transition: all .3s;	transition: all .3s;}
.backBt3 {	position: relative;		background-color: #333;	border: 1px solid #333;	color: #FFF;	overflow: hidden;	display: inline-block;	width: 240px;	height: 50px;	text-align: center;	text-decoration: none;	line-height: 48px;	outline: none;	border-radius:30px;}
.backBt3:hover {color:#fff;}
.backBt3::after {	top: 0;	left: 0;	width: 100%;	height: 100%;	-webkit-transform: scale(.5);	transform: scale(.5);}
.backBt3:hover::after {	background:#999; 	-webkit-transform: scale(1);	transform: scale(1);}

/***ボタン関連****/
.BTN::before,
.BTN::after {position: absolute;	z-index: -1;display: block;content: '';}
.BTN,
.BTN::before,
.BTN::after {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-transition: all .3s;transition: all .3s;}

.BTN {position: relative;z-index: 2;color: #fff;overflow: hidden;display: inline-block;height: 44px;text-align: center;text-decoration: none;line-height: 40px;padding:0 50px;top:0;
  background:
    linear-gradient(45deg,  transparent 0px, #6873BB 0px),
    linear-gradient(135deg, transparent 10px, #6873BB 10px),
    linear-gradient(225deg, transparent 0px, #6873BB 0px),
    linear-gradient(315deg, transparent 10px, #6873BB 10px);
  background-position: bottom left, top left, top right, bottom right;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}
.BTN:hover {color:#fff;top: -3px;}
.BTN::after {top: 0px;left: 0;width: 100%;height: 100%;-webkit-transform: scale(.5);transform: scale(.5);}
.BTN:hover::after {	 
  background:
    linear-gradient(45deg,  transparent 0px, #4570DE 0px),
    linear-gradient(135deg, transparent 10px, #4570DE 10px),
    linear-gradient(225deg, transparent 0px, #4570DE 0px),
    linear-gradient(315deg, transparent 10px, #4570DE 10px);
  background-position: bottom left, top left, top right, bottom right;
  background-size: 50% 50%;
  background-repeat: no-repeat;
-webkit-transform: scale(1);	transform: scale(1);
}



/***ナビ************/

#content01 {}
#content01 a {color: #fff;}

.modal-content {padding-top:30px;width:100%;margin:0px auto;position: relative;}
.close-content01 {position: absolute; right:10px;top: 10px;font-size: 24px;cursor: pointer;border:1px #fff solid;width:50px;text-align:center;}
.close-content01:after {content:'×';color:#fff; }
.close-content01:hover {background:#cc0000; }

.modalList {margin-top:20px;padding-bottom:50px;width:96%;height:90vh;overflow:auto;display:block;}
.modalList h2 {font-size:1.1em;padding:10px 0; margin:10px;text-align:center;color:#6873BB;background-color:rgba(255,255,255,1);border-radius:20px;}
.modalList ul {width:100%;margin-bottom:15px;}
.modalList li {margin:2% 5%;text-align:left;}
.modalList li a {display:block;padding:5px 0 5px 20px;position:relative;font-size:1.4em;transition: all .3s;}
.modalList li a:before {content:">>";position:absolute;left:-10px;top:5px;transition: all .3s;}
.modalList li a:hover {background:#464426;border-radius:20px;transition: all .3s;}


/**********************/
#page-top img {width:60px;}
#page-top {
	position: fixed;
	bottom:0px;
	right: 0px;
	z-index:9999;
}


/****************/

#plan,#insta {display:none;}


/***ふるふる*************/
.furufuru {
-webkit-animation:furufuru 3s infinite linear alternate;
animation:furufuru 3s infinite linear alternate;
transition: all 0.3s ease;    -webkit-transition: all 0.3s ease;    -moz-transition: all 0.3s ease;    -o-transition: all 0.3s ease;
}

@keyframes furufuru {
0% {transform:translate(0, 0) rotate(-5deg);}
50% {transform:translate(0, -5px) rotate(0deg);}
100% {transform:translate(0, 0)rotate(5deg);}
}


/**プログラム部分****/
.wig{margin-top:30px;}

}