@charset "utf-8";
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body{
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
	margin: 0 auto !important;
	background-image: url(../images/p001bg.jpg);
	background-repeat: repeat;
	background-color: #323230 !important;
	overflow-x: hidden;
}

main.main {
  background: transparent !important;
  padding-bottom: 0px !important;
}

h1,h2,h3,h4{
	padding: 0;
	margin: 0;
}
img{
	display: block;
	width: 100%;
	height: auto;
}
.pc{
	display: block;
}
.sp{
	display: none;
}
/* サイト流入　フェードイン */
.result {
    opacity: 0;
}
.loading {
    left:50%;
    top:50%; 
    position: fixed;
}
@media only screen and (max-width: 767px){
	html, body {
		width: 100%;
		background-image: url(../images/s001bg.jpg);
	}
	.pc{
			display: none;
		}
	.sp{
		display: block;
	}
}

/*---------- 以下コンテンツ ----------*/
/* ふんわり表示animation */
div.fadeup_area img {
    opacity: 0;
    transform: translateY(-40px);
    transition: opacity 0.8s, transform 0.8s;
}
/* active クラスがついたら表示 */
div.fadeup_area img.active {
    opacity: 1;
    transform: translateY(0);
}
/* ふんわり表示animation */


/* ふんわり表示 左からanimation（修正後） */
div.fadeleft_area img {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s, transform 0.8s;
}
/* ★fadeleft_area に修正 */
div.fadeleft_area img.active {
    opacity: 1;
    transform: translateX(0);
}

/* ふんわり表示　右から　animation（修正後） */
div.faderight_area img {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s, transform 0.8s;
}
/* ★faderight_area に修正 */
div.faderight_area img.active {
    opacity: 1;
    transform: translateX(0);
}

div.fadeleft_area,
div.faderight_area,
section {
    overflow: hidden;
}

/*----- header -----*/
header{
    padding: 0;
	background-image: url(../images/p001bg.jpg);
}
.header_logo{
    width: 100%;
    margin: 0 auto;
}
@media only screen and (max-width: 767px){
    header{
        padding: 0;
		background-image: url(../images/s001bg.jpg);
		width: 100%;
    }
    .header_logo{
        width: 100%;
        margin: 0 auto;
    }
}

/*----- product -----*/
section.product h2 img{
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    width: 38%;
}
.product_area{
    background-image: url(../images/p002bg.jpg);
    padding: 0 0 2%;
    background-size: cover;
    background-position: top center; 
}
.product_area h1 img{
    max-width: 1920px;
    margin: 0 auto ;
    width: 46%;
}


@media only screen and (max-width: 1400px) and (min-width: 768px) {
    .product_area img{
        margin: 0% auto 0;
    }
}
@media only screen and (max-width: 767px){
    .product_area{
        padding: 0;
    }
    section.product h2 img{
        width: 98%;
    }
	.product_area h1 img{
		width: 100%;
    }	
}

/*----- menu -----*/
section.menu h2 img{
    max-width: 1920px;
    margin: 0;
    position: relative;
    z-index: 10;
    width: 71%;
}
.menu_area{
    background-image: url(../images/p004bg.jpg);
    padding: 0 0 2%;
    background-size: cover;
    background-position: top center; 
}

.menu_area .menu_title img{
    max-width: 1920px;
    margin: 0 auto ;
    width: 18%;
}

.menu_area h1 img{
    max-width: 1920px;
    margin: 0 auto ;
    width: 50%;
}

.menu_area h3 img{
    max-width: 1920px;
    margin: 0 auto ;
    width: 46%;
}

@media only screen and (max-width: 1400px) and (min-width: 768px) {
    .menu_area img{
        margin: 0% auto 0;
    }
}
@media only screen and (max-width: 767px){
    .menu_area{
        padding: 0%;
		background-image: url(../images/s004bg.jpg);
		background-size: contain;
        background-repeat: repeat-y;
    }
    section.menu h2 img{
        width: 76%;
    }
	.menu_area .menu_title img{
    width: 60%;
    }
	.menu_area h1 img{
    width: 100%;
    }
	.menu_area h3 img{
    width: 100%;
    }	
}

/*----- specification -----*/
section.specification h2 img{
    max-width: 1920px;
    margin: 0;
    position: relative;
    z-index: 10;
    width: 71%;
}
.specification_area{
    background-image: url(../images/p005bg.jpg);
    padding: 6% 0 2%;
    background-size: cover;
    background-position: top center; 
}

section.specification .right img{
    max-width: 1920px;
    margin: 0 0 0 auto;
    position: relative;
    z-index: 10;
    width: 71%;
}

.specification_area .specification_title img{
    max-width: 1920px;
    margin: 0 auto ;
    width: 30%;
}

.specification_area h1 img{
    max-width: 1920px;
    margin: 0 auto ;
    width: 87%;
}

.specification_area h3 img{
    max-width: 1920px;
    margin: 0 auto ;
    width: 36%;
}

@media only screen and (max-width: 1400px) and (min-width: 768px) {
    .specification_area img{
        margin: 0% auto 0;
    }
}
@media only screen and (max-width: 767px){
    .specification_area{
        background-image: url(../images/s006bg.jpg);
		padding: 16% 0 2%;
    }
    section.specification .right img{
    	width: 88%;
	}
	section.specification h2 img{
    	width: 88%;
		padding-bottom: 3%;
	}
	.specification_area .specification_title img{
    	width: 30%;
	}

	.specification_area h1 img{
    	width: 87%;
	}

	.specification_area h3 img{
    	width: 90%;
	}
}

/*----- CtaArea -----*/
section.CtaArea{
    background-image: url(../images/p006bg.jpg);
    padding: 6% 0 10%;
    background-size: cover;
    background-position: top center;
}

section.CtaArea .CtaArea_title img{
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    width: 44%;
}


section.CtaArea .CtaArea_oscimg img{
    max-width: 1920px;
    margin: 1% auto ;
    position: relative;
    z-index: 10;
    width: 46%;
}

section.CtaArea .CtaArea_text img{
    max-width: 1920px;
    margin: 0 auto 1%;
    position: relative;
    z-index: 10;
    width: 46%;
}

.cta_base{
    position: relative;
    max-width: 1350px;
    width: 46%;
    margin: 0 auto;
}
.CtaBtn{
    width: 62%;
    z-index: 10;
    margin: 0 auto;
}
.CtaBtn img.b_btn{
    cursor: pointer;
    opacity: 1 !important;
    transform-origin: top center;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

/* ボタン挙動 */
.CtaBtn img.b_btn:hover,
.CtaBtn img.b_btn:active {
    box-shadow: 0 0 8px rgba(55, 55, 55, 0.6);
}

.cp{
    width: 50%;
	margin: 20% auto 0;    
}

.cp img{
    position: relative;
    width: 18%;
	margin: 0 auto;
}

@media only screen and (max-width: 767px){
    section.CtaArea{
        background-image: url(../images/s007bg.jpg);
    	padding: 2% 0 50%;
    	background-size: cover;
    	background-position: top center;
    }
	
	section.CtaArea .CtaArea_title img{
    	width: 90%;
	}

	section.CtaArea .CtaArea_oscimg img{
    	width: 100%;
	}
	
	section.CtaArea .CtaArea_text img{
    	width: 96%;
	}
	
    .cta_base{
        width: 100%;
		margin: 4% auto 0;
    }
    .CtaBtn {
        position: relative;
        width: 90%;
        z-index: 10;
        margin-left: 5%;
    }
}

#button{
    background-color: #000000;
    color: #000000;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 26px 0;
    text-align: center;
    width: 100%;
    display: flex;
	flex-wrap: wrap;
	justify-content:center;
	z-index: 999;
	box-sizing: border-box;
}

#button > *{
    width: calc( 12% ) ;
	margin: 0 1.6%;
}

#button > * > *{
    background: #000000;
    position: relative;
    overflow: hidden;
}

#button img {
    	opacity: 1 !important;
    	transform: none !important;
	}

a img:hover{
	filter: brightness(0.6);
	transform: scale(1.06, 1.06);
    transition: 0.4s;
}

@media only screen and (max-width: 767px){
	#button > *{
    	width: calc( 43% ) ;
		margin: 0;
	}
	#button{
    padding: 4% 0;
	justify-content:space-evenly;
	}	
}