/* 画像ボーダーなし、下揃え */
img{
	border : 0px;
	}
/* 文字の縦位置 */
.m{
	vertical-align : middle;
	}
.vm{
	vertical-align : middle;
	}
.mt10{
	margin-top : 10px;
	}
.mt20{
	margin-top : 20px;
	}
.mt30{
	margin-top : 30px;
	}
.mt50{
	margin-top : 50px;
	}
.mb10{
	margin-bottom : 10px;
	}
.mb20{
	margin-bottom : 20px;
	}
.mb30{
	margin-bottom : 30px;
	}
.mb50{
	margin-bottom : 50px;
	}

/* リンク */
a:link { color: #fff; text-decoration : none;}
a:visited { color: #fff; text-decoration : none;}
a:hover { color: #fff; text-decoration : underline;}
a:active { color: #fff; text-decoration : none;}
a:focus{ outline:none;}

/* 線 */
hr {border-top: 1px dashed #CCC;}

.hover a:hover{
	opacity:0.7;
	filter: alpha(opacity=70);        /* ie lt 8 */
	-ms-filter: "alpha(opacity=70)";  /* ie 8 */
	-moz-opacity:0.7;                 /* FF lt 1.5, Netscape */
	-khtml-opacity: 0.7;              /* Safari 1.x */
	zoom:1;
	}

/* フロート類 */
.fl{
	float : left;
	margin-right : 40px;
	}
.fr{
	float : right;
	margin-left : 40px;
	}
.cr{
	clear : both;
	}
.crr{
	clear : right;
	}

.clear:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clear{
  min-height: 1px;
}

* html .clear{
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}

/* センター */
.ce{
	text-align : center;
	}
.rr{
	text-align : right;
	}
.ll{
	text-align : left;
	}
/* P　マージンなし */
p{
	margin : 0;
	}
sup{
	vertical-align: baseline;
	position:relative;
	top:-2px
	}

.f10{
	font-size : 10px;
	line-height : 1.5;
	}
.f12{
	font-size : 12px;
	}
.f14{
	font-size : 14px;
	}
.f16{
	font-size : 16px;
	}
.f18{
	font-size : 18px;
	}
.f20{
	font-size : 20px;
	}
.f26{
	font-size : 26px;
	}
.f30{
	font-size : 30px;
	}
.f40{
	font-size : 40px;
	}

.ind{
	text-indent : -1em;
	margin-left : 1em;
	}
.ind2{
	text-indent : -2em;
	margin-left : 2em;
	}
.bold{
	font-weight : bold;
	}


.green{
	color : #0063af;
	}
.blue{
	color : #1fb48d;
	}
.red{
	color : #cc0000;
	}

form{
	margin : 0;
	}
textarea{
	font-size : 14px;
	}
table{
	font-size : 1em;
	line-height : 1.5;
	}

.nowrap{
	white-space : nowrap;
	}

ul,ol{
	list-style : none;
	margin : 0;
	padding : 0;
	}

/* ボディ全体 */
body{
	padding : 0;
	text-align : center;
	line-height : 1.5;
	}
body {
	width: 100%;
	min-width: 1000px;
	height: 100%;
	margin: 0 auto;
	color: #000000;
	background-color: #ffffff;
	font-size: 13px;
	font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif;
}
/* ヘッダ */
#head{
	color : #000;
	background : linear-gradient(90deg, #FFF 70%, #e4e5e5 30%);
	background-size : cover;
	}
.head_bg {
	background: url(../images/index/bg_head1.jpg) no-repeat center;
	background-size: auto 100%;
}
#head .wrapper{
	width : 1000px;
	margin : 0 auto;
	padding: 30px 0;
	text-align : left;
	}
#head .wrapper h1{
	float : left;
	width : 350px;
	margin : 0;
	padding : 0;
	}
#head .wrapper .s_logo{
	float : left;
	margin : 15px 0 0 200px;
	padding : 0;
	}

#head .wrapper #head_search{
	float : right;
	width: 360px;
	text-align : right;
	}
#head .wrapper #head_search ul{
	margin : 0 0 5px 0;
	}
#head .wrapper #head_search li{
	background : url('../images/common/h_arrow.png') no-repeat center left;
	float : right;
	padding : 0 0 0 13px;
	margin : 0 0 0 20px;
	font-size : 10px;
	color : #09428f;
	}
#head .wrapper #head_search li a{
	color : #09428f;
	}
#head .wrapper #head_search .form{
	position : relative;
	background : url('../images/common/google.png') no-repeat center right;
	padding : 0 50px 0 0;
	margin : 0 0 5px 0;
	}
#head .wrapper #head_search .form .search_ico{
	position : absolute;
	top : 5px;
	left : -20px;
	}

.gsc-control-cse {
	margin: 0 !important;
	padding: 5px 0 !important;
	border: none !important;
	background: none !important;
}
.gsc-input input {
	padding: 2px 0 !important;
}
.gscb_a {margin-top: -5px !important;}

#head .wrapper .main{
	width : 1000px;
	position : relative;
	height : 380px;
	color : #fff;
	box-sizing : border-box;
	padding : 50px 0 0 0;
}
#head .wrapper .main h2{
	width : 600px;
	line-height : 1.2;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
	font-size : 50px;
	margin : 0 0 10px 0;
}
#head .wrapper .main .text{
	width : 610px;
	line-height : 2;
}
#head .wrapper .main .top_dl_catalog{
	position: absolute;
	bottom: 0;
	left: 50px;
	z-index: 2;
}
#head .wrapper .main .top_dl_catalog a{
	display: inlein-block;
	margin-right: 10px;
	width: 100%;
	height: 100%;
}
#head .wrapper .main .top_dl_catalog a:hover{opacity: 0.5;}
#head .wrapper .main .top_dl_catalog a img{width: 300px;}

#head .wrapper ul#navi{
	width : 100%;
}
#head .wrapper ul#navi img:hover {
	filter: brightness(150%);
}
#head .wrapper ul#navi li{
	float : left;
	margin : 0 0 0 26px;
}
#head .wrapper ul#navi li:first-child{
	margin : 0;
}

#head .wrapper ul#navi2{
	float : right
}
#head .wrapper ul#navi2 li{
	float : left;
	margin : 0 0 0 26px;
}
#head .wrapper ul#navi2 li.first{
	margin : 0;
}



/* コンテンツ */
#content{
	padding : 80px 0;
	width : 1000px;
	margin : 0 auto;
	text-align : left;
	}
#content h2{
	font-size : 24px;
	margin : 0 0 30px 0;
	border-bottom : solid 2px #000;
	}




/* カタログ */

#catalogue{
	}
#catalogue .wrapper{
	display : none;
	padding : 0;
	width : 1000px;
	margin : 0 auto;
	}
#catalogue h2{
	background : url('../images/common/catalogue_title_bg.jpg') repeat-x top left;
	margin : 0;
	cursor : pointer;
	}
#catalogue h2 span{
	display : block;
	width : 1000px;
	background : url('../images/common/catalogue_arrow.png') no-repeat right;
	margin : 0 auto;
	}
#catalogue h2.active span{
	width : 1000px;
	background : url('../images/common/catalogue_arrow2.png') no-repeat right;
	margin : 0 auto;
	}
#catalogue .list{
	width : 941px;
	margin : 60px auto 30px;
	text-align : left;
	}
#catalogue .list .sub_box{
	float : right;
	margin : 20px 0 0 0;
	}
#catalogue .list .sub_box a{
	color : #09428f;
	}
#catalogue .list ul{
	margin : 20px 0 0 0;
	}
#catalogue .list li{
	float : left;
	margin : 0 30px 0 0;
	border-right : dotted 1px #ccc;
	padding : 0 20px 0 0;
	font-size : 12px;
	}
#catalogue .list li.last{
	border : none;
	}
#catalogue .btn{
	margin : 100px 0 0 0;
	}


#catalogue .list li ul{
	margin : 0;
	}
#catalogue .list li li{
	float : none;
	margin : 0 0 0 18px;
	padding : 0;
	border : none;
	list-style : disc;
	}


/* フッター */

#foot{
	background : #333;
	margin : 0 auto;
	padding : 10px 0;
	color : #fff;
	font-size : 12px;
	}
#foot h2{
	padding : 20px 0 5px 0;
	margin : 0;
/*	font-family: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif; */
	font-size : 24px;
	font-weight: normal;
	line-height: 1.5;
	}
#foot h2 span {
	display: block;
	color: #CCC;
	font-size: 0.6em;
}
#foot .foot_area {
	width: 100%;
	padding-bottom: 20px;
	border-bottom: 2px solid #FFF;
}
#foot .wrapper{
	width : 1000px;
	padding : 45px 0 0 0;
	margin : 0 auto;
	text-align : left;
	}
#foot .near {
  display: block;
  width: 490px;
  margin: 0 auto 2em;
  padding: 0.5em 1em;
  box-sizing: border-box;
  color: #EFEFEF;
  text-align: center;
  border: 1px solid #CCC;
}
#foot .wrapper .office_left{
	width : 500px;
	float : left;
	}
#foot .wrapper .office_right{
	width : 500px;
	float : left;
	}
#foot .office_right a {
  color: #f90;
}

#foot .wrapper .office_left ul,
#foot .wrapper .office_right ul{
	margin : 0 0 30px 0;
	}
#foot .wrapper .office_left ul li,
#foot .wrapper .office_right ul li{
	margin : 0 0 10px 0;
	}
#foot .wrapper .office_left ul li span,
#foot .wrapper .office_right ul span{
	color: #CCC;
}
#foot .wrapper .office_left h3,
#foot .wrapper .office_right h3{
	font-weight : bold;
	font-size : 16px;
	margin : 0 0 10px 0;
	}
#foot .wrapper .office_left h4,
#foot .wrapper .office_right h4{
	font-weight : bold;
	font-size : 14px;
	margin : 0;
	}

#foot .wrapper .office_left2{
	width : 820px;
	float : left;
	}
#foot .wrapper .office_right2{
	width : 180px;
	float : left;
	}
#foot .wrapper .office_left2 h3,
#foot .wrapper .office_right2 h3{
	font-weight : bold;
	font-size : 18px;
	margin : 0 0 20px 0;
	text-align : center;
	}
#foot .wrapper .office_left2 li{
	width : 250px;
	float : left;
	}
#foot .wrapper .office_left2 li,
#foot .wrapper .office_right2 li{
	margin : 0 0 5px 0;
	}

#foot .wrapper ul#foot_navi{
	margin : 0 0 10px 0;
	}
#foot .wrapper ul#foot_navi li{
	padding : 0 0 0 15px;
	margin : 0 30px 0 0;
	float : left;
	background : url('../images/common/f_arrow.jpg') no-repeat center left;
	}
#foot .wrapper .logo{
	text-align : right;
	margin : 0 0 30px 0;
	}
#foot .wrapper .logo p{
	margin : 0 0 5px 0;
	}
#foot #copy{
	border-top : solid 2px #fff;
	padding : 5px 0 0 0;
	text-align : right;
	}
#foot #copy p{
	width : 1000px;
	margin : 0 auto;
	}








/*** index.html ***/





/* 製品一覧 */

#products{
	}
#products .obi {
	margin: 0;
	width: 100%;
	height: 140px;
	background: #dcdddd;
	}
#products .products{
	border-top : solid 4px #bbbbbb;
	}
#products .products .open_btn{
	border-bottom : solid 3px #bbbbbb;
	cursor:pointer;
	}
#products .products .open_btn .catalogue{
	width : 1000px;
	margin : 0 auto;
	text-align : right;
	padding : 43px 110px 0 0;
	}
.active{
		background: #61c1e6;
		background: -moz-linear-gradient(top,  #61c1e6 0%, #33aede 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#61c1e6), color-stop(100%,#33aede));
		background: -webkit-linear-gradient(top,  #61c1e6 0%,#33aede 100%);
		background: -o-linear-gradient(top,  #61c1e6 0%,#33aede 100%);
		background: -ms-linear-gradient(top,  #61c1e6 0%,#33aede 100%);
		background: linear-gradient(to bottom,  #61c1e6 0%,#33aede 100%);
		}
#products .products .tgr{
	}
#products .products .tgr .wrapper{
	background : url('../images/index/close.png') no-repeat right center;
	color : #616161;
	margin : 0 auto;
	width : 1000px;
	height : 220px;
	position : relative;
	text-align : left;
	}
#products .products .tgr.active{
	background: -moz-linear-gradient(top,  #fdfdfe 0%, #b1c0d3 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfe), color-stop(100%,#b1c0d3));
	background: -webkit-linear-gradient(top,  #fdfdfe 0%,#b1c0d3 100%);
	background: -o-linear-gradient(top,  #fdfdfe 0%,#b1c0d3 100%);
	background: -ms-linear-gradient(top,  #fdfdfe 0%,#b1c0d3 100%);
	background: linear-gradient(to bottom,  #fdfdfe 0%,#b1c0d3 100%);
	}
#products .products .tgr.active .wrapper{
	background : url('../images/index/open.png') no-repeat right center;
	}
#products .products .tgr .wrapper .image{
	position : absolute;
	top : 40px;
	left: -120px;
	height: 180px;
	}
#products .products .tgr .wrapper .image img{
	width: auto;
	filter: grayscale(100%);
	opacity: 0.15;
}
#products .products .tgr .wrapper .image_list{
	position : absolute;
	top : 75px;
	left : 180px;
	overflow : hidden;
	}
#products .products .tgr .wrapper .image_list li{
	float : left;
	}
#products .products .tgr .wrapper .image_list li img{
	height : 120px;
	}
#products .products .tgr .wrapper .image_list.small li img{
	height : 80px;
	}
#products .products .tgr .wrapper .name{
	position : absolute;
	left : 0px;
	top : 15px;
	font-size : 28px;
	font-weight : bold;
	line-height : 1.2;
	letter-spacing : -1px;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
	}
#products .products .tgr .wrapper .name span{
	margin-left: 10px;
	font-size : 16px;
	}
#products .products .tgr .wrapper .series h3{
	position : absolute;
	right : 60px;
	top : -5px;
	font-size : 16px;
	padding : 6px;
	border : solid 1px #616161;
	display : block;
	font-weight: normal;
	}




#products .products ul{
	display : none;
	width : 1000px;
	margin : 0 auto;
	}
#products .products ul li{
	padding : 20px 0;
	border-top : solid 3px #bbbbbb;
	}
#products .products ul li:first-child{
	border : none;
	}

#products .products ul table{
	width : 100%;
	line-height : 1.3;
	}
#products .products ul table th{
	font-weight : normal;
	height : 20px;
	padding: 3px 5px;
	font-size: 0.8em;
	font-weight: normal;
	border: 1px solid #CCC;
	}
#products .products ul table th:nth-last-child(5){width : 150px;}
#products .products ul table th:nth-last-child(4){width : 150px;}
#products .products ul table th:nth-last-child(3){width : 60px;}
#products .products ul table th:nth-last-child(2){width : 60px;}
#products .products ul table th:nth-last-child(1){width : 60px;}

#products .products ul table td{
	vertical-align : middle;
	text-align : center;
	font-size: 0.9em;
	}
#products .products ul table td p{
	margin : 0 0 10px 0;
	}
#products .products ul table td.cate{
	width : 100px;
	}
#products .products ul table td .cate{
	vertical-align : middle;
	display : table-cell;
	border : solid 2px #808080;
	width : 80px;
	height : 80px;
	font-size : 12px;
	}
#products .products ul table td.image{
	width : 140px;
	}
#products .products ul table td.name{
	font-size : 16px;
	text-align : left;
	width : 300px;
	}
#products .products ul table td.check img{
	vertical-align : middle;
	}
#products .products ul table td.check a:hover{
	opacity:0.7;
	filter: alpha(opacity=70);        /* ie lt 8 */
	-ms-filter: "alpha(opacity=70)";  /* ie 8 */
	-moz-opacity:0.7;                 /* FF lt 1.5, Netscape */
	-khtml-opacity: 0.7;              /* Safari 1.x */
	zoom:1;
	}
	#products .products ul table td.check input{
		display: block;
		width: 30px;
		height: 30px;
		margin: 25px auto 0 auto;
		}
#products .products ul table td span{
	display: block;
	background-color: #ff6666;
	font-size: 0.8em;
	color:#FFF;
	border-radius: 5px;
	padding: 3px;
	box-sizing: border-box;
}

#products .products ul table .futa{
	display : table-cell;
	}
#products .products ul table .futa li{
	border : none;
	white-space : nowrap;
	vertical-align : middle;
	margin : 0 0 10px 0;
	padding : 0;
	font-size : 12px;
	text-align : left;
	}
#products .products ul table .futa li img{
	vertical-align : middle;
	}

/* お問い合わせ */
.contact_area {
	background: url(../images/index/bg_footer.jpg) no-repeat center;
	background-size: cover;
}
.contact {
  margin: 0 auto;
  width: 1000px;
  padding: 80px 0;
  text-align: center;
}
.contact .box {
  margin: 0 30px;
  display: inline-block;
  width: 360px;
  padding: 20px;
  color: #FFF;
  line-height: 1.5em;
  text-align: center;
  background: rgba(0,0,0,0.5);
}
.contact .box img{
  margin: 20px;
}
.contact .box p {
  margin-bottom: 20px;
  font-size: 2.0em;
  font-weight: bolder;
}
.contact .inquiry_form {
	display: block;
  margin: 10px 0;
  width: 100%;
  padding: 10px;
	box-sizing: border-box;
  text-align: center;
  color: #FFF;
	text-decoration: none;
  border-radius: 5px;
  background: #CC0000;
}
.contact .inquiry_form:hover {
	background: #F90;
}

/* facebook */
.main .jumpsns_area{
	margin-top: -63px;
	text-align: right;
}
.main .jumpsns_area .jumpsns{
	margin-top: 10px;
}
/*
.main .jumpsns_area .jumpsns{
  width: 384px;
  height: 80px;
  margin-top: 20px;
  border-radius: 5px;
  background: #FFF;
}
.main .jumpsns_area .jumpsns img{
  width: 50px;
  margin-right: 7px;
}
.main .jumpsns_area .jumpsns a{
  float: right;
  display: block;
  padding: 5px;
  border: 2px solid #014D8B;
  border-radius: 5px;
  margin: 5px 4px;
}
.main .jumpsns a span{
  display: inline-block;
  font-size: 1.2em;
  font-weight: bold;
  text-decoration: underline;
  color: #014D8B;
	vertical-align: top;
	margin-top: 10px;
}
*/

.sns_area{
	overflow: hidden;
	margin-top: -130px;
	padding-top: 130px;
}
.sns_area .sns{
	background: rgba(0,0,0,0.3);
	background-size:  cover;
	padding-top: 90px;
	padding-bottom: 90px;
	text-align: center;
}
.sns_area .sns .fb-page{
	margin: 5px 35px;
}

.sns_area .sns .linkbox{
	display: inline-block;
	margin: 5px 35px;
	width: 340px;
	text-align: center;
	background: #FFF;
	vertical-align: top;
}
.sns_area .sns .linkbox a{
	position: relative;
	margin: 5px 0;
	width: 100%;
	text-decoration: none;
}
.sns_area .sns .linkbox a img{
	width: 100%;
	border: 1px solid #CCC;
	box-sizing: border-box;
	display: inline-block;
	margin-top: 7px;
}
.sns_area .sns .linkbox a p{
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 3;
	width: 100%;
	padding: 10px 0;
	text-align: center;
	color: #FFF;
	background: rgba(0, 80, 160, 0.9);
}


#pagetop {
	display: none;
}
.footer_arw {
	display: block;
	width: 40px;
	height: auto;
	margin: 0;
	padding: 0;
	position: fixed;
	bottom: 50px;
	right: 50px;
}


/* googleフォント */
.wf-notosansjapanese { font-family: "Noto Sans Japanese"; }



/* --------------------------------------------------- */
/* animation */
/* --------------------------------------------------- */

/* 順番再生 */
li:nth-child(1) {animation-delay: 0;}
li:nth-child(2) {animation-delay: 0.2s;}
li:nth-child(3) {animation-delay: 0.4s;}
li:nth-child(4) {animation-delay: 0.6s;}
li:nth-child(5) {animation-delay: 0.8s;}
li:nth-child(6) {animation-delay: 1s;}
li:nth-child(7) {animation-delay: 1.1s;}
li:nth-child(8) {animation-delay: 1.2s;}
li:nth-child(9) {animation-delay: 1.3s;}
li:nth-child(10) {animation-delay: 1.4s;}
li:nth-child(11) {animation-delay: 1.5s;}
li:nth-child(12) {animation-delay: 1.6s;}
li:nth-child(13) {animation-delay: 1.7s;}
li:nth-child(14) {animation-delay: 1.8s;}
li:nth-child(15) {animation-delay: 1.9s;}
li:nth-child(16) {animation-delay: 2s;}
li:nth-child(17) {animation-delay: 2.1s;}
li:nth-child(18) {animation-delay: 2.2s;}
li:nth-child(19) {animation-delay: 2.3s;}
li:nth-child(20) {animation-delay: 2.4s;}


/* フェイドイン（右から） */
.anime-fadein-right {visibility: hidden;}
.fadein-right {
	animation: fadeInRight 0.5s ease both;
	visibility: visible !important;
}
@-webkit-keyframes fadeInRight {
 0% { opacity: 0; -webkit-transform: translateX(20px); }
 100% { opacity: 1; -webkit-transform: translateX(0); }
}
@keyframes fadeInRight {
 0% { opacity: 0; transform: translateX(20px); }
 100% { opacity: 1; transform: translateX(0); }
}

/* フェイドイン（左から） */
.anime-fadein-left {visibility: hidden;}
.fadein-left {
	animation: fadeInLeft 0.5s ease both;
	visibility: visible !important;
}
@-webkit-keyframes fadeInLeft {
 0% { opacity: 0; -webkit-transform: translateX(-20px); }
 100% { opacity: 1; -webkit-transform: translateX(0); }
}
@keyframes fadeInLeft {
 0% { opacity: 0; transform: translateX(-20px); }
 100% { opacity: 1; transform: translateX(0); }
}

/* フェイドイン（上から） */
.anime-fadein-up {visibility: hidden;}
.fadein-up {
	animation: fadeInUp 0.5s ease both;
	visibility: visible !important;
}
@-webkit-keyframes fadeInUp {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInUp {
 0% { opacity: 0; transform: translateY(-20px); }
 100% { opacity: 1; transform: translateY(0); }
}

/* フェイドイン（下から） */
.anime-fadein-down {visibility: hidden;}
.fadein-down {
	animation: fadeInDown 0.5s ease both;
	visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; transform: translateY(20px); }
 100% { opacity: 1; transform: translateY(0); }
}

/* スライドイン（右から） */
.anime-slidein-right {visibility: hidden;}
.slidein-right {
	animation: slideInRight 0.5s ease both;
	visibility: visible !important;
}
@-webkit-keyframes slideInRight {
 0% { opacity: 0; -webkit-transform: translateX(2000px); }
 100% { opacity: 1; -webkit-transform: translateX(0); }
}
@keyframes slideInRight {
 0% { opacity: 0; transform: translateX(2000px); }
 100% { opacity: 1; transform: translateX(0); }
}

/* スライドイン（左から） */
.anime-slidein-left {visibility: hidden;}
.slidein-left {
	animation: slideInLeft 0.5s ease both;
	visibility: visible !important;
}
@-webkit-keyframes slideInLeft {
 0% { opacity: 0; -webkit-transform: translateX(-2000px); }
 100% { opacity: 1; -webkit-transform: translateX(0); }
}
@keyframes slideInLeft {
 0% { opacity: 0; transform: translateX(-2000px); }
 100% { opacity: 1; transform: translateX(0); }
}

/* --------------------------------------------------- */
/* download */
/* --------------------------------------------------- */
.download{
	margin: 0;
	width: 100%;
	background: rgba(0,0,0,0.6);
}
.fixed {
	position: fixed;
	top: 0;
	z-index: 10000;
}
.download .downloadIn{
	width: 1000px;
	margin: 0 auto;
}
.download .menuBtn {
	margin: 0 auto;
	padding: 10px 0;
	box-sizing: border-box;
}
.download .menuBtn .menuBtn_guide{
	position: relative;
	display: inline-block;
	margin: 0;
	width: 360px;
	height: 85px;
	padding: 10px 16px;
	box-sizing: border-box;
	text-align: justify;
	color: #FFF;
	opacity: 1;
	border-radius: 10px;
	background: #004EA2;
}
.download .menuBtn .menuBtn_guide::after{
	content: "";
	position: absolute;
	top: calc(50% - 10px);
	right: -30px;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 15px solid #004EA2;
	border-right: 15px solid transparent;
}
.download .menuBtn figure {
	display: inline-block;
	margin: 0 10px 0 0;
	height: 65px;
	padding: 0;
}
.download .menuBtn figure img {
	height: 100%;
	border-radius: 5px;
}
.download .menuBtn p.dl_guide {
	display: inline-block;
	margin: 0;
	width: 270px;
	height: 65px;
	padding: 0;
	vertical-align: top;
	text-align: justify;
}
.download .menuBtn p.dl{
	display: inline-block;
	vertical-align: top;
	padding: 0;
	margin: 0 0 0 20px;
}
.download .menuBtn p.dl a{
	display: block;
	height: 85px;
	width: 80px;
	background-color: #FFF;
	border: 3px solid #bbb;
	margin: 0 10px;
	padding: 14px 12px 0 12px;
	box-sizing: border-box;
	color: #616161;
	text-align: center;
	line-height: 1.1;
	opacity: 1;
}
.download .menuBtn p.dl a:hover{
	color: #FFF;
	background-color: #014D8B;
	border: 3px solid #FFF;
}
.download .menuBtn p.dl a .triangle{
	width: 0;
	height: 0;
	display: inline-block;
	border: 12px solid transparent;
	border-top: 12px solid #616161;
	margin-top: 10px;
	opacity: 1;
}
.download .menuBtn p.dl a:hover .triangle{
	width: 0;
	height: 0;
	display: inline-block;
	border: 12px solid transparent;
	border-top: 12px solid #FFF;
	margin-top: 10px;
}

#footer_pickup{
	background: #CCC;
	padding: 25px 0;
}
.product {
	display: flex;
	flex-wrap: wrap;
	width: 1000px;
	margin: 0 auto;
}
.product li {
	margin: 1%;
	display: block;
	width: 23%;
	box-sizing: border-box;
}
.product li a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
}
.product li img {
	margin: 0 ;
	width: 100%;
	border: 1px solid #CCC;
	box-sizing: border-box;
	background: #FFF;
}
.product li h3 {
	display: block;
	margin-top: -6px;
	width: 100%;
	padding: 10px 0 0;
	box-sizing: border-box;
	text-align: center;
	vertical-align: middle;
	color: #FFF;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.2;
}
.product li span {
	display: block;
	margin-top: 10px;
	width: 100%;
	padding: 3px 0;
	box-sizing: border-box;
	text-align: center;
	vertical-align: middle;
	color: rgba(255,255,255,0.8);
	font-size: 0.7em;
	font-weight: normal;
	border-top: 1px dashed rgba(255,255,255,0.3);
}
.product li .pro_guide {
	display: block;
	width: 100%;
	min-height: 85px;
	padding: 10px 5px;
	box-sizing: border-box;
	color: #333;
	font-size: 0.9em;
	background: #EFEFEF;
}
.product li .pro_guide h4 {
	color: #2c74bc;
	font-size: 1.2em;
	font-weight: bold;
}
.product li .mover {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	display: none;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
}
.product li .mover p {
	display: block;
	margin: 100px auto 0;
	width: 100px;
	padding: 5px 10px;
	color: #FFF;
	text-align: center;
	border: 1px solid #CCC;
	background: rgba(255,255,255,0.2);
}
.product li a:hover > .mover {
	display: block;
}

.bg_black{
  background: #333;
	border: 1px solid #333;
}
.bg_blue {
  background: #00acdd;
  border: 1px solid #00acdd;
}
.bg_green {
  background: #00b59d;
	border: 1px solid #00b59d;
}
.bg_red {
  background: #f05972;
	border: 1px solid #f05972;
}


/* ---------------------------------------------------
ポップアップ
--------------------------------------------------- */
.pop_search {
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 1000;
	width: 300px;
	animation: rotation 3s infinite linear;
}
.pop_search a:hover {
	filter: brightness(1.2);
}
.pop_delete {
	position: fixed;
	bottom: 316px;
	right: 0;
	z-index: 1001;
	width: 37px;
	animation: rotation 3s infinite linear;
}
.pop_delete img:hover {
	filter: saturate(250%);
}
@-webkit-keyframes rotation {
	0% {-webkit-transform: translateY(0);}
	5% {-webkit-transform: translateY(-10px);}
	10% {-webkit-transform: translateY(0);}
	15% {-webkit-transform: translateY(-10px);}
	20% {-webkit-transform: translateY(0);}
}
@keyframes rotation {
	0% {transform: translateY(0);}
	5% {transform: translateY(-10px);}
	10% {transform: translateY(0);}
	15% {transform: translateY(-10px);}
	20% {transform: translateY(0);}
}
