@charset "UTF-8";

/* ////////////////////////////////////////

 layout

//////////////////////////////////////// */
section {
	background: #f3f3f3;
}

.common-wrapper {
	max-width: 1000px;
	height: auto;
	margin: 0px auto 40px;
	background: #fff;
}

.common-wrapper .main-area {
	max-width: 85%;
	height: auto;
	margin: 0 auto;
}


/* ////////////////////////////////////////

 main-area

//////////////////////////////////////// */
/* heading h1 //////////*/
.common-wrapper .main-area .heading-area-top {
	width: 100%;
	height: auto;
	margin: 0 auto 20px;
}

.common-wrapper .main-area .heading-area-top h1 {
	width: auto;
	height: 0;
	margin: 0;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

.common-wrapper .main-area .heading-area-top img {
	display: block;
	margin: 0 auto;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* heading h2,h3 //////////*/
.common-wrapper .main-area .text-area .heading-area h2,
.common-wrapper .main-area .movie-area .heading-area h2,
.common-wrapper .main-area .product-area .heading-area h2,
.common-wrapper .main-area .product-area .heading-area h3 {
	width: auto;
	height: 0;
	margin: 0;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

/* p //////////*/


/* img //////////*/
.common-wrapper .main-area .heading-area-top img,
.common-wrapper .main-area .text-area .heading-area img,
.common-wrapper .main-area .movie-area .heading-area img,
.common-wrapper .main-area .product-area .heading-area img,
.common-wrapper .main-area .product-area .product-wrap .ph img,
.common-wrapper .main-area .product-area .product-wrap .ph-sp img,
.common-wrapper .main-area .product-area .product-wrap .buy-btn a img {
	margin: 0 auto;
	max-width: 100%;
}


/* product area //////////*/
.common-wrapper .main-area .product-area .product-wrap .ph {
	display: block;
}

.common-wrapper .main-area .product-area .product-wrap .ph-sp {
	display: none;
}

.common-wrapper .main-area .heading-area-top .buy-btn-wrap .buy-btn,
.common-wrapper .main-area .product-area .product-wrap .buy-btn a {
	width: 100%;
	height: auto;
}

.common-wrapper .main-area .heading-area-top .buy-btn-wrap .buy-btn a:hover,
.common-wrapper .main-area .product-area .product-wrap .buy-btn a:hover,
.common-wrapper .main-area .text-area .buy-btn a:hover {
	opacity: 0.8;
}


/* ////////////////////////////////////////

 sp

//////////////////////////////////////// */
@media screen and (max-width:640px)  {

	/* layout //////////*/
	.common-wrapper {
		max-width: 100%;
		height: auto;
	}

	.common-wrapper .main-area {
		max-width: 90%;
		height: auto;
		margin: 0 auto;
	}

	.common-wrapper .main-area .movie-area,
	.common-wrapper .main-area .product-area,
	.common-wrapper .main-area .text-area {
		width: 100%;
		height: auto;
		margin: 20px auto;
	}

	/* img //////////*/


  /* produxt area //////////*/
  .common-wrapper .main-area .product-area .heading-area,
  .common-wrapper .main-area .product-area .product-wrap {
    width: 90%;
    height: auto;
		margin: 0 auto;
  }

  .common-wrapper .main-area .product-area .product-wrap .ph {
    display: none;
  }

  .common-wrapper .main-area .product-area .product-wrap .ph-sp {
    display: block;
  }

	.common-wrapper .main-area .product-area .product-wrap .buy-btn {
		width: 100%;
		height: auto;
		padding-bottom: 20px;
		text-align: center;
	}

  .common-wrapper .main-area .product-area .product-wrap .buy-btn a {
  	width: 100%;
  	height: auto;
  }

}