@charset "Shift_jis";

/*  -----------------------------
for smart phone
-------------------------- */

@media screen and (max-width: 768px) {
    body {
        padding-top: 0;
    }
	.top-contents{
        width: 100%;
	    margin: 0 auto 40px;
	    overflow: hidden;
	    padding: 50px 0 10px 0;
    }
	section {
		padding: 3%;
        width: 100%;
		box-sizing: border-box;
	}
    .header {
        background: #ffffff;
        position: static;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 999;
    }
    .header h1 {
        height: 20px;
		padding-right: 7px;
		padding-left: 3px;
    }
    .header h1 img {
        height: 20px;
    }
	
	h2.officalBtn {
		width: 40px;
		border-left: 1px solid #000;
		padding-left: 2px;
	}

	.header p {
		width: 200px;
		margin-left:auto;
		padding-right: 3px;
		text-align: right;
	}

	div#PCfooter {
		display: none;
	}
	
	div#SPfooter{
		display:block;
	}
	
    footer.sp {
        padding: 10px 0;
        text-align: center;
        display: block;
        line-height: 1.2;
        font-size: 10px;
    }


	/* ----------------------------------
	reviewBox
	------------------------------------ */
	.reviewBox {
		width: 100%;
		float: none;
	}

	.reviewBox li {
		width: 100%;
	}

	.reviewBox ul {
		display: block;
	}

	.reviewBox li:nth-child(2n) {
	    margin-left: 0px;
	}

	.newsBox .pic img {
		width: 100%;/*任意の横幅を指定*/
		height: auto;/*任意の高さを指定*/
		object-fit: fill;
	}



	/* ----------------------------------
	rightBox
	------------------------------------ */
	.rightBox {
	    width: 100%;
	    margin-top: 45px;
	    float: none;
	}

	.btn_official a {
	    width: 100%;
	}

	.btn_technology a {
	    width: 100%;
	}


	/* ----------------------------------
	aboutBox
	------------------------------------ */
	.aboutBox {
	    width: 100%;
		padding-bottom: 40px;
	}

	.aboutBox h3.title_brand {
		width: 100%;
	}

	.aboutBox p.text {
		width: 100%;
		font-size: 16px;
		margin-bottom: 10px;
		text-align: left;
	}

	.br-pc {
		display: none;
	}



	/* -----------------------------
	slide 
	-------------------------- */
	div#slideArea {
	    width: 100%;
		margin: auto;
	}
	.bx-wrapper .bx-prev::after {
	    left: 0;
	    content: "\f053";
		opacity: 60%;
	}
	.bx-wrapper .bx-next::after {
	    right: 0;
	    content: "\f054";
		opacity: 60%;
	}
	.bx-wrapper .bx-pager.bx-default-pager a {
	  width: 10px;
	  height: 10px;
	  -moz-border-radius: 5px;
	  -webkit-border-radius: 5px;
	  border-radius: 5px;
	}

	.bx-wrapper .bx-caption {
		padding: 3px;
	}

	.bx-wrapper .bx-caption span {
		font-size: 14px;
		line-height: 1.2;
	}


}