@charset "UTF-8";

#contents ul,#contents ul li {
    list-style: none;
}

.sp {
	display: none;
}

a:hover img {
	opacity: 1;
}

.flexBox {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

#compressor img {
	width: auto;
	max-width: 100%;
}

#compressor {
	font-family: "dnp-shuei-gothic-gin-std", sans-serif;
	text-align: center;
	font-size: 16px;
}

#mainVisual {
	/*background: url("../image/mian_bg.jpg") no-repeat 50% 0;*/
	margin-bottom: 40px;
}



#ancLink {
	margin: 0 0 100px;
}

#ancLink li {
	width: 32.5%;
}

#ancLink li a {
	display: block;
	border: 1px solid #231815;
	padding: 30px;
}

#ancLink li a .name {
	margin-bottom: 15px;
}

#ancLink li a .name img {
	width: auto;
	height: 100px;
}

#ancLink li a .productPhoto {
	margin-bottom: 15px;
}

#ancLink li a .btn {
	background: #231815;
	width: 80%;
	margin: 0 auto;
	padding:15px 0; 
	border-radius: 50px;
	position: relative;
}

#ancLink li a .btn img {
	width: 35%;
	margin: 0 auto;
}

#ancLink li a .btn:after {
	content:"";
	position: absolute;
	top: 50%;
	right: 25px;
	background: url("../image/list_btn_after.svg") no-repeat 0 0;
	background-size: 100%;
	width: 18px;
    height: 15px;
    transform: translateY(-50%);
}

#compressor section {
    margin-bottom: 200px;
}

h2 {
    background: none;
    padding: 0;
    margin: 0 auto 50px;
    width: 940px;
}

.slider {
    margin-bottom: 100px;
}

.productSlider {
	width: 100%;
	max-width: 840px;
	margin: 0 auto;
}

.productSlider img {
	width: 100%;
}

ul.features.flexBox {
    width: 80%;
    margin: 0 auto 100px;
    gap: 10px;
}

ul.features.flexBox li {
    margin: 0;
}

h3 {
	background: none;
	padding: 25px 85px;
	border: 2px solid #231815;
	width: 12%;
	margin: 0 auto 50px;
}

h3:after {
	display: none;
}

.use h3,.accessory h3 {
	background: #231815;
}

.point div {
    margin-bottom: 140px;
}

.use {
	margin-bottom: 65px;
}

.use ul.flexBox {
	width: 100%;
    max-width: 1120px;
    margin: 0 auto 20px;
}

.use ul.flexBox li {
	width: 23.5%;
    margin: 0;
}

#compressor .use p {
	text-align: left;
}


#orca .use ul.flexBox li {
	width: 49%;
}

.movie {
    max-width: 1000px;
    margin: 0 auto 100px;
}

.youtube {
    position: relative;
    width: 80%;
    padding: 45% 0 0 0;
	margin: 0 auto;
}

.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.spec {
    margin-bottom: 100px;
}

.spec .flexBox div {
    width: 55%;
}

.spec .flexBox div img {
    width: 100%;
}

.spec .flexBox div:last-child {
    width: 40%;
}

.spec .flexBox div table {
    width: 100%;
	margin: 0;
	padding: 0;
}

.spec .flexBox table .bgBlack {
	background: #231815;
	text-align: center;
	color: #fff;
}

.spec .flexBox table th,table tr:nth-child(2n+1) {
	background: none;
	font-weight: normal;
}

.spec .flexBox table,.spec .flexBox table th,.spec .flexBox table td {
	border: 1px solid #231815;
	text-align: center;
}

.spec .flexBox table th.bgGray {
    background: #808080;
    color: #fff;
}

.product .flexBox {
	align-items: center;
}

.product .flexBox .photo {
    width: 55%;
	text-align: center;
}

.product .flexBox .productBtn {
    width: 40%;
	text-align: center;
}

.accessory {
	margin-bottom: 100px;
}

#compressor .product .flexBox .photo img {
    width: 75%;
}

#compressor .product .flexBox .productBtn .name {
	text-align: center;
	margin-bottom: 85px;
}

#compressor .product .flexBox .productBtn .name img {
	width: auto;
	height: 135px;
}

#compressor .product .flexBox .productBtn .btnList {
	text-align: right;
	width: 60%;
    margin: 0 auto;
}

#compressor .product .flexBox .productBtn .btnList li {
	margin-bottom: 25px;
}

#compressor .product .flexBox .productBtn .btnList li a {
	display: block;
	background: #231815;
	padding: 18px 15px;
}

#compressor .product .flexBox .productBtn .btnList li a img {
	width: 84%
}



/* --------------------------------------------------------------     スマホ */

@media screen and  (min-width: 320px) and (max-width: 767px) {
	.pc {
		display: none;
	}
	
	.sp {
		display: block;
	}
	
	#compressor {
		font-size: 14px;
	}
	
	#mainVisual {
		margin-bottom: 20px;
		background-size: cover;
	}
	
	#mainVisual .inner {
		padding: 35px 0 15px;
	}
	
	#ancLink {
		margin: 0 0 50px;
	}
	
	#ancLink li {
		width: 100%;
	}	
	
	#ancLink li a {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		padding: 15px;
	}
	
	#ancLink li a .name {
		width: 55%;
		margin-bottom: 5px;
	}
	
	#ancLink li a .productPhoto {
		width: 40%;
		margin-bottom: 5px;
	}
	
	#ancLink li a .btn {
		width: 60%;
		padding: 0;
	}
	
	#ancLink li a .btn img {
		width: auto;
		margin: 10px auto;
		height: 18px;
	}
	
	#ancLink li a .btn:after {
		right: 20px;
		width: 14px;
		height: 11px;
	}
	
	#compressor section {
		margin-bottom: 50px;
	}
	
	h2 {
		width: 85%;
	}	

	.productSlider {
		width: 90%;
	}	
	
	ul.features.flexBox {
		width: 94%;
		margin: 0 auto 40px;
		gap: 0;
	}	
	
	ul.features.flexBox li {
		width: 23.5%;
		margin: 0 2% 2% 0;
	}
	
	ul.features.flexBox li:nth-child(4n) {
		margin: 0 0 2% 0;
	}

	h3 {
		padding: 10px 0;
		width: 60%;
		margin: 0 auto 25px;
		box-sizing: border-box;
	}	
	
	#compressor h3 img {
		width: auto;
		height: 22px;
	}

	.point div {
		margin-bottom: 70px;
	}
	
	.use {
		margin-bottom: 50px;
	}	
	
	.movie {
		margin: 0 auto 50px;
	}	
	
	.youtube {
		width: 100%;
		padding: 56.25% 0 0 0;
	}	
	
	.spec {
		margin-bottom: 50px;
	}	

	.spec .flexBox div {
		width: 100%;
		margin-bottom: 40px;
	}	
	
	.spec .flexBox div:last-child {
		width: 100%;
		margin-bottom: 0;
	}	
	
	table th, table td {
		padding: 10px 5px;
	}
	
	.product .flexBox .photo {
		width: 100%;
		margin-bottom: 20px;
	}

	.product .flexBox .productBtn {
		width: 100%;
	}	
	
	#compressor .product .flexBox .productBtn .name {
		margin-bottom: 40px;
	}	
	
	#compressor .product .flexBox .productBtn .btnList {
		width: 80%;
	}
	
	.accessory {
		margin-bottom: 50px;
	}	
	
	
	
	
	
	
	
	
	

 
}









#pageTop {
    display: none;
    position: fixed;
    bottom: 35px;
    right: 20px;
    text-decoration: none;
    z-index: 1000;
    text-align: center;
    padding: 12px;
    background: #231815;
    font-weight: bold;
    font-size: 90%;
    width: 30px;
    height: 30px;
    border-radius: 50px;
}

#pageTop a:hover {
	text-decoration: none;
}

#pageTop a img {
	width: 100%;
}

@media screen and (max-width: 768px) {
	#pageTop {
		bottom: 10px;
		right: 10px;
		padding: 10px;
		font-size: 70%;
		width: 25px;
    	height: 25px;
	}
}