/* ==============================
レスポンシブ対応
=============================== */

/* =======index-1500px以上の場合に適応======= */
@media screen and (min-width:1500px){
	
	
	#index h1 {
		font-size: 120px;
	}
	
	#index h4 {
		font-size: 30px;
	}
	
	#index h2 {
		font-size: 45px;
	}
	
	.contents {

	}
}
	
/* =======index-1500px以下の場合に適応======= */

@media screen and (max-width:1500px) {
	
	#index #wrap {
		width: 100%;
	}
}
	

/* =======1200px以下の場合に適応======= */

@media screen and (max-width:1200px) {
	
	#wrap {
		width: 100%;	
	}
	
	#hero {
		height: 100%;
		background-repeat: no-repeat;
		background-position: top center;
		background-attachment: fixed;
		background-size: contain;
	}

	#header-contents {
	}
	
	.footer-contents {
		width: 100%;
	}

}	

/* =======1080px以下の場合に適応======= */

@media screen and (max-width:1080px) {
	
	.pc-contents {
		display: none;
	}
	
	#global-nav {
		overflow: scroll;
	}
	
	nav{
		padding: 0;
	}
	
	nav ul{
		display: block;
	}
	
	nav li.has-child ul,
	nav li.has-child ul ul{
  position: relative;
	left:0;
	top:0;
	width:100%;
	visibility:visible;/*JSで制御するため一旦表示*/
	opacity:1;/*JSで制御するため一旦表示*/
	display: none;/*JSのslidetoggleで表示させるため非表示に*/
	transition:none;/*JSで制御するためCSSのアニメーションを切る*/
	}

	/*矢印の位置と向き*/
	nav ul li.has-child.active::before {
	content: '\e5ce';
	font-family: 'Material Icons';
	font-size: 24px;
	color: #864d00;
	padding: 0px 3px 0px 0px;
	position: absolute;
	left: 2px;
	top: 20px;
	}
	
	/* ハンバーガーメニューのためのスタイル */
	
	#nav-toggle {
		display: block;
		border: solid 1px #864d00;
		border-radius: 5px;
		padding: 10px;
		background-color: #ffffff;
	}

	#global-nav {
		position: fixed;
		right: -300px;
		top: 0;
		height: 100%;
		width: 250px;
		padding-top: 90px;
		background: #ffffff;
		-webkit-transition: .35s ease-in-out;
		transition: .35s ease-in-out;
	}

	.global-nav li {
		display: block;
		margin: 10px 0px 0px 10px;
		font-size: 15px;
		list-style: none;
		text-align: left;
		}
	
		nav ul li li a{
		padding:0px 10px 5px 35px;
		}
	
	.global-nav a:link,
	.global-nav a:visited {
		color: #864d00;
		font-size: 17px;
		width: auto;
		display: block;
		text-decoration: none;
		text-align: left;
		line-height: 130%;
		border-radius: 0px;
		border: 0px;
		font-weight:normal;
		padding: 10px 25px;
		}

	.global-nav a:hover {
		color: #e28200;
		}

	/* ナビゲーションの開閉 */
	.open {
		overflow: hidden;
	}
	.open #overlay {
		display: block;
	}
	.open #global-nav  {
		-webkit-transform: translate3d(-300px,0,0);
		transform: translate3d(-300px,0,0);
	}

	/* 3本線の動き */
	.open #nav-toggle span {
		background: #864d00;
	}
	
	.open #nav-toggle span:nth-child(1) {
		top: 20px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	
	.open #nav-toggle span:nth-child(2) {
		width: 0;
		left: 50%;
	}
	
	.open #nav-toggle span:nth-child(3) {
		top: 20px;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	/* z-index */
	#overlay {
		z-index: 200;
	}
	#global-nav {
		z-index: 300;
	}
	#nav-toggle {
		z-index: 400;
	}
	
	div.thankstext {
	padding: 0px 0px;
	}
	
}

/* =======755px以下の場合に適応======= */

@media screen and (max-width:755px) {
	
	.pc-contents02 {
		display: none;
	}
	
	.mobile-contents {
		display: contents;
	}
	
	#index #wrap {
		height: 170vw;
	}
	
	#index .contents {
		margin-top: 0px;
		padding-top: 0px;
		background-image: url(../images/bg_index_755.jpg);
	}
	
	#index h1 {
		font-size: 10vw;
	}
	
	#index h4 {
		font-size: 3vw;
	}
	
	#index h2 {
		font-size: 4vw;
	}
	
	header {
		margin-bottom: 30px;
	}
	
	#header-bg {
	}
	
	#wrap.peg {
		background-image: url(../images/bg_peg_755.jpg);
	}

	#wrap.pickguard {
		background-image: url(../images/bg_pickguard_755.jpg);
	}

	#wrap.making {
		background-image: url(../images/bg_making_755.jpg);
	}

	#wrap.aboutus {
		background-image: url(../images/bg_aboutus_755.jpg);
	}
	
	#wrap.waterdrop {
		background-image: url(../images/bg_waterdrop_755.jpg);
	}
	
	#wrap.popcorn {
		background-image: url(../images/bg_popcorn_755.jpg);
	}
	
	#wrap.colorsample {
		background-image: url(../images/bg_colorsample_755.jpg);
	}
	
	#wrap.contactus {
		background-image: url(../images/bg_contactus_755.jpg);
	}
	
	#wrap.products {
		background-image: url(../images/bg_products_755.jpg);
	}
	
	#wrap.privacy-policy {
		background-image: url(../images/bg_privacy-policy_755.jpg);
	}
		
	.contents {
		padding-top: 30vw;
	}
		
	section.half-columb {
  	width: 100%;
	}
	
	.flex-box {
		flex-wrap: wrap;
	}
	
	.flex-item,
	.flex-item30,
	.flex-item70 {
		width: 100%;
		margin: 8px;
	}
	
	h1 {
		font-size: 25px;
	}
	
	h2 {
		font-size: 22px;
	}
	
	.flex-box {
		flex-wrap: wrap;
	}
	
	.text-box {
		width: 100%;
	}

.image-box {
		width: 100%;
	}

	ul.image-list03 li {
		padding: 10px;
		width: 50%;
	}
	
	ul.image-list05 li {
	width: 25%;
	}
	
	ul.products-nav li {
	width: 100%;	
	}
	
}/* 755px以下の場合に適応 ここまで*/


/* =======550px以下の場合に適応======= */

@media screen and (max-width:550px) {
	
	#index #wrap {
		height: 250vw;
	}
	
	#index #header-bg {
		padding-bottom: 0px;
	}
	
	#index .contents {
		background-image: url(../images/bg_index_550.jpg);
		padding-top: 20px;
	}
	
	#index h1 {
		font-size: 15vw;
	}
	
	#index h4 {
		font-size: 5vw;
	}
	
	#index h2 {
		font-size: 5vw;
	}

	h3.midashi01 {
	font-size: 20px;
	padding: 0px 0px 0px 70px;
	}

	h3.midashi01 span {
		font-size: 20px;
	}
	
	.contents {
		padding-top: 26vw;
		margin: 0px 10px;
	}
	
	section.contact h2 {
	font-size: 22px;
	}
	
	ul.products-nav li a {
		font-size: 15px;
	}
	
	ul.image-list05 li {
	padding: 5px;
	width: 33%;
}

	
}/* 550px以下の場合に適応 ここまで*/