@charset "utf-8";



/*================================
header

================================*/

#header{
	position:fixed;
	z-index:10;
	top:0px;
	left:0px;
	width:100%;
	height: auto;
	min-width:1100px;
	background: #073021;
	text-align: center;
	opacity:0;
	filter: alpha(opacity=0);
	}
@media screen and (max-width: 480px) {
#header{
	position: relative;
	width:100%;
	height: auto;
	min-width:100%;
	}
	}


#header .btn0{
	width:256px;
	height: auto;
	cursor:pointer;
	}
@media screen and (max-width: 480px) {
#header .btn0{
	width:60%;
	}
	}


#header .btn7{
	position: absolute;
	top:0;
	right:60px;
	width:40px;
	height: auto;
	cursor:pointer;
	}
@media screen and (max-width: 480px) {
#header .btn7{
	right:40px;
	width:28px;
	}
	}

#header .btn5{
	position: absolute;
	top:0;
	right:20px;
	width:40px;
	height: auto;
	cursor:pointer;
	}
@media screen and (max-width: 480px) {
#header .btn5{
	right:10px;
	width:28px;
	}
	}

#header a:hover img{
	opacity:0.75;
	filter: alpha(opacity=75);
	}


/*================================

Xmasイメージ

================================*/

#iwrapper{
	position:fixed;
	top:0px;/*100px*/
	left:0px;
	width:100%;
	min-width:1100px;
	height: 800px;
	margin:0 auto;
	padding: 0 0;
	background: #000;
	}
@media screen and (max-width: 480px) {
#iwrapper{
	position: relative;
	min-width:100%;
	height: auto;
	}
	}


/*================================

visual

================================*/

#visual{
	width:100%;
	height: auto;
	min-height: 800px;
	margin: 0 auto;
	/*min-height:800px;*/
	padding:0 0;
	position: relative;
	background:#000;
	}
@media screen and (max-width: 480px) {
#visual{
	min-height: 400px;
	}
	}


.wa {
	margin: 0 0 0 -300px;
	position: absolute;
	top: 300px;
	left: 50%;
	width: 600px;
	height: 200px;
	text-align:center;
	}
@media screen and (max-width: 480px) {
.wa {
	margin: -50px 0 0 -150px;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 300px;
	height: 100px;
	text-align:center;
	}
	}

.wa img{
	width: 600px;
	height: 200px;
	display:none;
	}
@media screen and (max-width: 480px) {
.wa img{
	width: 300px;
	height: 100px;
	}
	}


.precious {
	margin: 0 0 0 -300px;
	position: absolute;
	top: 300px;
	left: 50%;
	width: 600px;
	height: 200px;
	text-align:center;
	}
@media screen and (max-width: 480px) {
.precious {
	display: none;
	margin: -50px 0 0 -150px;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 300px;
	height: 100px;
	text-align:center;
	}
	}

.precious img{
	width: 600px;
	height: 200px;
	display:none;
	}
@media screen and (max-width: 480px) {
.precious img{
	width: 300px;
	height: 100px;
	}
	}


/*================================

空ラッパー

================================*/

#kwrapper{
	width:100%;
	min-width:1100px;
	height: 800px;
	margin:0 auto 0;
	padding: 0 0;
	z-index:0;
	}
@media screen and (max-width: 480px) {
#kwrapper{
	display: none;
	}
	}


/*================================

pintrest

================================*/
#pwrapper{
	width:100%;
	min-width:1100px;
	height: auto;
	min-height:10px;
	max-height:20000px;
	margin:0 auto;
	background:#dcdcdc;
	z-index:3;
	}
@media screen and (max-width: 480px) {
#pwrapper{
	min-height:440px;
	min-width:100%;
	}
	}

#pwrapperin{
	position: relative;
	width:100%;
	height: 100%;
	}

#pintrest{
	width:1080px;
	height: auto;
	max-height:5000px;
	position: relative;
	margin:0 auto;
	padding:20px 0 40px;
	text-align: center;
	}
@media screen and (max-width: 480px) {
#pintrest{
	float: none;
	width:250px;
	height: auto;
	min-height:200px;
	padding:20px 0 0;
	text-align: left;
	font-size:10px;
	}
#pintrest #pt{
	width:100%;
	height: auto;
	margin:0 auto;
	}
	}

#pintrest #titletool {
	width:100%;
	height: auto;
	text-align: center;
	}
#pintrest #titletool img{
	width: 350px;
	height: auto;
	}
@media screen and (max-width: 480px) {
#pintrest #titletool img{
	width:100%;
	height: auto;
	}
	}



/*================================

boncadeau

================================*/
#bwrapper{
	width:100%;
	min-width:1100px;
	height: auto;
	min-height:100px;
	max-height:20000px;
	margin:0 auto;
	background:#fff;
	z-index:4;
	}
@media screen and (max-width: 480px) {
#bwrapper{
	min-width:100%;
	}
	}

#bwrapperin{
	position: relative;
	width:100%;
	height: 100%;
	background: #fff;
	}

#shop{
	width:1080px;
	height: auto;
	max-height:5000px;
	position: relative;
	margin:0 auto;
	padding:20px 0 40px;
	line-height:2;
	}
@media screen and (max-width: 480px) {
#shop{
	float: none;
	width:90%;
	height: auto;
	min-height:200px;
	text-align: left;
	font-size:10px;
	line-height:1.8;
	}
	}

#shop #titletool {
	width:100%;
	height: auto;
	margin-bottom:20px;
	text-align: center;
	}
#shop #titletool img{
	width:auto;
	height: auto;
	}
@media screen and (max-width: 480px) {
#shop #titletool img{
	width:100%;
	height: auto;
	}
	}

#shop img.ppsi{
	width:350px;
	float: left;
	margin-right:50px;
	}
@media screen and (max-width: 480px) {
#shop img.ppsi{
	width:100%;
	float: none;
	margin-right:0;
	margin-bottom:20px;
	}
	}


#shop img.bon{
	}
@media screen and (max-width: 480px) {
#shop img.bon{
	margin-top:20px;
	width:100%;
	}
	}



/*================================

ツール

================================*/
#twrapper{
	width:100%;
	min-width:1100px;
	height: auto;
	min-height:100px;
	max-height:20000px;
	margin:0 auto;
	background:#fff;
	border-top:1px solid #dedede;
	z-index:5;
	}
@media screen and (max-width: 480px) {
#twrapper{
	min-width:100%;
	}
	}

#twrapperin{
	position: relative;
	width:100%;
	height: 100%;
	background: #fff;
	}

#tool{
	width:1080px;
	height: auto;
	max-height:5000px;
	position: relative;
	margin:0 auto;
	padding:20px 0 60px;
	text-align: center;
	}
@media screen and (max-width: 480px) {
#tool{
	float: none;
	width:90%;
	height: auto;
	min-height:200px;
	text-align: left;
	font-size:10px;
	}
	}

#tool #titletool {
	width:100%;
	height: auto;
	text-align: center;
	}
#tool #titletool img{
	width:350px;
	height: auto;
	}
@media screen and (max-width: 480px) {
#tool #titletool img{
	width:100%;
	height: auto;
	}
	}

#tool #package {
	width:100%;
	height: auto;
	margin:10px auto 0;
	overflow: hidden;
	}
@media screen and (max-width: 480px) {
#tool #package {
	width:95%;
	margin:0 auto 0;
	}
	}

#tool #package .plock{
	display: block;
	position: relative;
	float: left;
	width:330px;
	height: auto;
	margin:0 15px;
	text-align :left;
	font-size:10px;
	}
@media screen and (max-width: 480px) {
#tool #package .plock{
	display: block;
	float: none;
	width:100%;
	height: auto;
	margin:0 auto;
	font-size:10px;
	}
	}

#tool #package .plock img{
	display: block;
	width:70%;
	height: auto;
	margin:0 auto;
	}
@media screen and (max-width: 480px) {
#tool #package .plock img{
	width:60%;
	display: block;
	margin:0 auto;
	height: auto;
	}
	}