@charset "utf-8";
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

 2015.06.16 ver0.0.0.1  @emix
 productscontents.css

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* **************************************************************
共通
************************************************************** */
body {
 overflow-y: scroll;
}
@media screen and (min-width:769px) {
	.simg{display:none!important;}
	.pimg{display:block!important;}
	.dwn{display:block;}
}
@media screen and (max-width:768px) {
	.pimg{display:none!important;}
	.simg{display:block!important;}
	.dwn{display:none;}

}
small{    font-size: 14px;}
@media screen and (max-width:550px) {

	small {
    font-size: 14px;
    display: block;
    margin-top: 5px;
}
}
/*header*/
@media screen and (max-width:768px) {
	.pamquz {
    
		padding-top: 0;}
		header #logo {
    float: left;
    width: 100%;
    height: 60%;
    background: url(../images/common/logo.png) no-repeat left;
    background-size: contain;
    opacity: 1;
}
	header #logo {
  
    position: absolute;
   top: 15%;
}
	header #navi {
    display: none;
}
	
/*menu*/
	/*　ハンバーガーボタン　*/
.hamburger {
  display : block;
  position: fixed;
  z-index : 3;
  right : 13px;
  top   : 14px;
  width : 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;
}
.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left    : 6px;
  background : #fff;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 10px;
}
.hamburger span:nth-child(2) {
  top: 20px;
}
.hamburger span:nth-child(3) {
  top: 30px;
}

/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top : 16px;
  left: 6px;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 16px;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}

nav.globalMenuSp {
  position: fixed;
  z-index : 2;
  top  : 0;
  left : 0;
  color: #000;
  background: #fff;
  text-align: center;
  transform: translateY(-100%);
  transition: all 0.6s;
  width: 100%;
}

nav.globalMenuSp ul {
  background: #000;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

nav.globalMenuSp ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  border-bottom: 1px solid #fff;
}
nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
nav.globalMenuSp ul li:hover{
  background :#333;
}

nav.globalMenuSp ul li a {
  display: block;
  color: #fff;
  padding: 1.5em 0;
  text-decoration :none;
	font-size: 14px;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  transform: translateY(0%);
}



}
@media screen and (max-width: 768px){
nav.globalMenuSp ul li a {
   
	padding: 1em 0;}
}
@media screen and (max-width: 425px){
	.hamburger {
    
		top: 10px;}
	
	header {
    height: 40px;
}
	#update li {
  
    height: 150px;
}
}
@media screen and (max-width:375px){
	
	header #logo {
    float: left;
    width: 100%;
    height: 60%;
    background: url(../images/common/logo.png) no-repeat left;
    background-size: contain;
    opacity: 1;
}
	.hamburger {
  
    top:9px;
	}
header {
   
    height: 40px;
}
	header #logo {
    position: absolute;
    top: 15%;
}
}
a img:hover{opacity: 0.80;}
#subpage .wrapper {
    margin: 0 auto 70px;
}
/* --------------------------------------------------------------
　製品情報
--------------------------------------------------------------- */
/* --------------------------------------------------------------
　全体のアコーディオン
--------------------------------------------------------------- */
/*====================================================================
.s_01 .accordion_one
====================================================================*/
.section.s_06{
  max-width: 1080px;
  margin: 0px auto 20px;
  width: 100%!important;
  padding: 0;
}
.s_06 .accordion_one {
	max-width: 100%;
  width: 100%!important;
  margin: 0 auto;
}
.s_06 .accordion_one .accordion_header {
      background:#392E96;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  padding: 20px 3%;
  text-align:left;
  position: relative;
  z-index: +1;
  cursor: pointer;
  transition-duration: 0.2s;
}
.s_06 .accordion_one:nth-of-type(2) .accordion_header {
    background-color: #ff9a05;
}
.s_06 .accordion_one:nth-of-type(3) .accordion_header {
    background-color: #1c85d8;
}
.s_06 .accordion_one .accordion_header:hover {
  opacity: .8;
}
.s_06 .accordion_one .accordion_header .i_box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  right:3%;
  width: 40px;
  height: 40px;
 /* border: 1px solid #fff;*/
  margin-top: -20px;
  box-sizing: border-box;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transform-origin: center center;
  /*transition-duration: 0.2s;*/
}
.s_06 .accordion_one .accordion_header .i_box .one_i {
  display: block;
  width: 18px;
  height: 18px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transform-origin: center center;
  transition-duration: 0.2s;
  position: relative;
}
.s_06 .accordion_one .accordion_header.open .i_box {
  -webkit-transform: rotate(-360deg);
  transform: rotate(-360deg);
}
.s_06 .accordion_one .accordion_header .i_box .one_i:before, .s_06 .accordion_one .accordion_header .i_box .one_i:after {
  display: flex;
  content: '';
  background-color: #fff;
  border-radius: 10px;
  width: 18px;
  height: 4px;
  position: absolute;
  top: 7px;
  left: 0;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  transform-origin: center center;
}
.s_06 .accordion_one .accordion_header .i_box .one_i:before {
  width: 4px;
  height: 18px;
  top: 0;
  left: 7px;
}
.s_06 .accordion_one .accordion_header.open .i_box .one_i:before {
  content: none;
}
.s_06 .accordion_one .accordion_header.open .i_box .one_i:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.s_06 .accordion_one .accordion_inner {
  display: none;
  padding:0 30px 0;
  /*border-left: 2px solid #db0f2f;
  border-right: 2px solid #db0f2f;
  border-bottom: 2px solid #db0f2f;
  box-sizing: border-box;*/
}
/*.s_06 .accordion_one .accordion_inner :last-of-type{
  display: none;
  padding:30px 0;
}*/
.s_06 .accordion_one:nth-of-type(2) .accordion_inner {
  border-left: 2px solid #ff9a05;
  border-right: 2px solid #ff9a05;
  border-bottom: 2px solid #ff9a05;
}
.s_06 .accordion_one:nth-of-type(3) .accordion_inner {
  border-left: 2px solid #1c85d8;
  border-right: 2px solid #1c85d8;
  border-bottom: 2px solid #1c85d8;
}
.s_06 .accordion_one .accordion_inner .box_one {
  height:auto;
	text-align: left;
}
.s_06 .accordion_one .accordion_inner p.txt_a_ac {
  margin: 0;
}
.accordion_last{
	padding-top: 30px;
}
@media screen and (max-width: 1024px) {
  .s_06 .accordion_one .accordion_header {
    font-size: 18px;
  }
  .s_06 .accordion_one .accordion_header .i_box {
    width: 30px;
    height: 30px;
    margin-top: -15px;
  }
}
@media screen and (max-width: 767px) {
  .s_06 .accordion_one .accordion_header {
    font-size: 16px;
    text-align: left;
    padding: 15px 60px 15px 15px;
  }
}
@media screen and (max-width: 375px) {
.s_06 .accordion_one .accordion_header {
	font-size: 15px;}
}
/* --------------------------------------------------------------
popup
--------------------------------------------------------------- */
.img1{
	max-width: 320px;
    width: 280px;
	margin-left: 20px;
    float: right;
}
.box2{
	display:flex;
justify-content: space-between;
}
/*popup*/

.img_f{
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 100%;
	max-width: 100%;
	margin: 30px auto;
}
.img_f.cen{
	    width: 80%;
    max-width: 100%;
	justify-content: center;
	margin: 30px auto 0;
}
.img_f.box{
	
	width:75%;
	max-width: 100%;

}
.img_f a{
 
	width: calc(100% / 4 - 0.3rem );
    height: 140px;
    overflow: hidden;
}
.img_f .img2{
 margin: 0 1%;
	width: calc(100% / 2 - 15rem );
    height: auto;
	
}
.img_f .img3{
	height: auto;
		width: calc(100% / 3 - 1rem );

}
.img_f .img3 img{
  max-width:600px;
	    width: 100%;
}
.img_f .img2 img{
  max-width: 400px;
	width: 100%;
}
.img_f a img{
  max-width: 210px;
	/* width: 100%;*/
}
@media screen and (max-width:1024px){
.img_f .img2 {
    width: calc(100% / 2 - 12rem );
}
}
@media screen and (max-width:900px){
.img_f .img2 {
    width: calc(100% / 2 - 8rem );
}
}
@media screen and (max-width: 768px){
	.img_f.cen {
		width: 100%;}
	.img_f .img2 {
    width: calc(100% / 2 - 6rem );
}
	.img_f.box {
		width: 100%;}

	}
@media screen and (max-width: 550px){
	.img1 {
    width: 60%;
    margin: 30px auto 0;
    float: none;
    display: block;
}
	.box2 {
    display: block;
}
	.img_f .img3{
		 width: calc(100% / 2 - 0.3rem );
		    margin: 5px 0 0;
	}
	.img_f .img2 {
    width: calc(100% / 2 - 0.5rem );

    margin: 0 auto;
}
	.img_f a {
		width: calc(100% / 2 - 1.5rem );
	margin: 0 auto 10px;
}
}
@media screen and (min-width: 426px){
		span.sp_only {
 display:none;
}
}
@media screen and (max-width: 425px){
	
	
	.img_f a {
		 width: calc(100% / 2 - 0.3rem );
		height: 120px;}
	.img_f {
    
    margin: 20px auto 10px;
}
	
	}
@media screen and (max-width: 375px){
.img1 {
	width: 100%;}
}
/* --------------------------------------------------------------
　lt
--------------------------------------------------------------- */
.lt{

}
.lt ul li{
	     list-style: disc;
}
.lt div{
margin-top:10px;
display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    
}
.lt div .nofx li{
	width: calc(100% / 1 );
}
.lt .bold{margin-top: 30px;}
.lt div ul{
display: block;
    width: calc(100% / 2 - 2rem );
        text-indent: -0.2rem;
    padding-left: 1.8rem;
}
/*box6*/
.box6{
	width:90%;
    margin: 0 auto;

	display:flex;
	/*justify-content: space-between;*/
	flex-wrap: wrap;
	margin-top: 30px;
	justify-content: flex-start;
}
.box6 a {
       width: calc(100% / 4 - 0.9em );
    height: 100%;
    overflow: hidden;
    margin: 0.3% 0.6%;
}
.box6 a img{
	max-width:640px;
    width: 100%;
    height: auto;
	}
@media screen and (max-width:1140px){

	.box6 a {
    width: calc(100% / 4 - 0.5rem );
    height:100%;
    
    margin:2px 4px;
}
}
@media screen and (max-width:768px){
	.box6 a {
    width: calc(100% / 3 - 0.5rem );
   
    overflow: hidden;
}
	.box6 {
		width: 100%;}
}
@media screen and (max-width:550px){
.box6 a {
    width: calc(100% / 2 - 0.5rem );
    

}
}
@media screen and (max-width:425px){

}
@media screen and (max-width:320px){

}
/*box5*/
.box5{
	width: 100%;
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 30px;
}
.box5 a {
   width: calc(100% / 5 - 0.5rem );
    margin-top: 5px;
}
.box5 a img{
	max-width: 480px;
    width: 100%;
    height: auto;
	}
/*box4*/
.box4{
	width: 100%;
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 30px;
}
.box4 a {
    width: calc(100% / 4 - 1rem );
}
.box4 a img{
	max-width: 298px;
    width: 100%;
    height: auto;
	}
@media screen and (min-width:1140px){
	.lt div {
    justify-content: flex-start;
}
	.lt div ul {
		width: calc(100% / 2 - 8rem );}
}
@media screen and (max-width:550px){
	.box4 a {
    width: calc(100% / 4 - 0.3rem );
}
	.box5 a {
    width: calc(100% / 3 - 0.5rem );
}
.lt ul li {
    width: calc(100% / 1 );
}
.lt div ul {
	display: block;}
}
@media screen and (max-width:425px){
	.lt div ul {
		width: calc(100% / 1 - 2rem );}
	.lt div {
		display: block;}
	.box4 a {
    width: calc(100% / 2 - 0.2rem );
		height: 98px;
    margin-top:8px;
    overflow: hidden;
}
}
@media screen and (max-width:375px){
.box5 a {
    width: calc(100% / 2 - 0.3rem );
}
}
/* --------------------------------------------------------------
　btn etc..
--------------------------------------------------------------- */
a:hover {
    text-decoration:none;
	opacity: 0.80;
}
.dlpdf_group{
	text-align: right;
	margin: 10px 0;
}
span.dlpdf {
	display: inline-block;
}

span.dlpdf a{
	background:#efefef;
	border: 1px solid #efefef;
	text-decoration: none;
	padding: 4px 10px;
	display: inline-block;
	line-height: 1;
	text-align: center;
	-webkit-border-radius: 21px;
	-moz-border-radius: 21px;
	border-radius: 21px;
	font-size: 11px;
	}
span.dlpdf a.noLink{color:#C9C9C9;}
span.dlpdf a:hover{
	background:#DDDDED;
	border: 1px solid #D3D3E0;	
}

@media screen and (max-width: 768px){
	.content {}

	.setBox .right {
    max-width: inherit;
    width: 100%!important;
    float: none!important;
    margin: 0 auto;
    display: block;
    text-align: center;
}
	#subpage .cf {
   /* margin-bottom: 30px;*/
}
	#subpage .mb50 {
    margin-bottom: 20px!important;
}
}
	@media screen and (max-width: 425px){

@media screen and (max-width: 330px){
#subpage h3.ttl {
    letter-spacing: -0.5px;
}
	small {

    letter-spacing: 0;
}
}
/* --------------------------------------------------------------

--------------------------------------------------------------- */
.setBox h4.subttl{
	width: 100%;
	font-size:16px;
	margin-bottom:5px;
	font-weight:normal;

	}
.setBox .lead {
	/*max-width: 940px;*/
    width: 100%;
    float: none;
}
.setBox .right {
	max-width:120px;
	width:22%;
	/*width: 11.2%;*/
	float: right;
}