@charset "utf-8";
html, body{
	width:100%;
	height:100%;
	-webkit-font-smoothing: antialiased;
}
html{overflow-y: scroll;font-size: 625%;}

.clearfix:after {
	content: "."; 
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix {
	min-height: 1px;
}
* html .clearfix {
	height: 1px;
	/*ﾂ･*//*/
	height: auto;
	overflow: hidden;
	/**/
}

a:link {color: #ffffff;text-decoration: none;}
a:visited {color: #ffffff;text-decoration: none;}
footer a:link, footer a:visited{text-decoration: underline;}
.btn:hover{background-color: #ffffff; color: #000000; cursor: pointer; transition: all .3s ease-out;}
.sharebtn li:hover, .banner li:hover, .GoodsArea ul li a:hover{opacity: .5; cursor: pointer; transition: all .3s ease-out;}

.both{clear:both;}
.block{display: block;}
.nodisp{
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	height: 0;
}
img{
	max-width: 100%;
	height: auto;
    display: block;
	margin: 0;
	padding: 0;
	vertical-align: bottom;
}

iframe[name="google_conversion_frame"] { position: absolute; top: 0; }

body{
	position: relative;
	width: 100%;
	color: #ffffff;
	background-color: #000000;
	font-size: .14em;
	line-height: 1.6em;
	font-weight: 400; 
	font-feature-settings: "halt" 1;
	word-wrap: break-word;
	text-align: center;
}

section{
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

.flexbox{
	position: relative;
	margin: 0 auto;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.flexbetween{justify-content: space-between;}
.flexaround{justify-content: space-around;}
.flexcenter{justify-content:center;}
.flexaligncenter{align-items: center;}
.flexbox .box{
	position: relative;
	margin: 0;
	width: 100%;
	box-sizing: border-box;
}

#wrap{position: relative;width: 100%;margin:0 auto; padding:0;overflow: hidden;}
#bg{
	position: fixed;
	width: 100%;
	height: 100vh;
	top:0;
	left: 0;
	background-color: #000000;
	background-image: url('../img/bg_main.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
	z-index: -1;
}
#endWrap{
	position: relative;
	margin: 50px auto;
	padding: 50px 0;
	width: calc(100% - 44px);
	border: solid 2px #ffffff;
	background-color:#000000;
}
.btn{
	position: relative;
	display: inline-block;
	margin: 20px auto;
	padding: 10px 50px;
	border: solid 2px #ffffff;;
	width: auto;
	color: #ffffff;
	font-weight: 900;
}
.btn::after{
	position: absolute;
	content: '';
	top:0;
	right: 10px;
	width: 20px;
	height: 100%;
	background-image: url('../img/arrow.svg');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 0 50%;
}

h2{
	position: relative;
	margin:  0 auto 30px auto;
	font-size: .20rem;
	font-weight: 900;
}

.clearImg{
	position: relative;
	margin: 0 auto 20px auto;
	width: calc(100% - 40px);
}
.letterImg{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 40px);
	transform: translateX(1.5%);
}
.continueImg{
	position: relative;
	margin: 20px auto;
	width: calc(100% - 160px);
}

.GoodsArea{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 80px);
}
.GoodsArea ul li{
	margin: 0 0 10px 0 !important;
}

.enq{
	position: relative;
	margin: 30px auto 0 auto;
}

.shareArea{
	position: relative;
	margin:  0 auto 10px auto;
	padding: 20px 10px;
	background-color: rgba(255,255,255,.25);
	width: calc(100% - 60px);
}
.shareArea p{
	position: relative;
	margin: 0 auto;
	padding: 10px;
	font-weight: 900;
	font-size: .14rem;
}
.shareArea ul.sharebtn{
	position: relative;
	margin: 20px auto 0 auto;
}
.shareArea ul.sharebtn li{
	position: relative;
	margin:  10px auto 15px auto;
}
.shareArea ul.sharebtn li a{
	position: relative;
	display: block;
	padding: 10px 20px;
	font-size: .14rem;
	font-weight: 700;
	line-height: 1.4em;
}
/*.shareArea ul.sharebtn li a::after{
	position: absolute;
	content: '';
	top:0;
	left: 10px;
	width: 20px;
	height: 100%;
	background-image: url('../img/twi.svg');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 0 50%;
}*/
.shareArea ul.sharebtn li:nth-child(1) a{background-color: #029CFF;}
.shareArea ul.sharebtn li:nth-child(2) a{background-color: #9D0002;}
.shareArea ul.sharebtn li:nth-child(3) a{background-color: #5E00A4;}

.LinkArea{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 40px);
}
.LinkArea h4{
	position: relative;
	margin: 10px auto;
	padding: 5px 20px;
	background-color: #ffffff;
	color: #000000;
	font-weight: 900;
}
.LinkArea ul.banner{margin: 0 auto;}
.LinkArea ul.banner li{
	position: relative;
	width: calc(50% - 4px);
	margin: 5px 2px;
}
.LinkArea ul.banner li p{
	position: relative;
	padding: 5px;
	font-size: .12rem;
}

footer{
	position: relative;
	margin: 50px auto 0 auto;
    padding: 20px 0 40px 0;
    text-align: center;
	background-color: #000000;
	font-size: .12rem;
	line-height: 2.4em;
}
footer p span{
	position: relative;
	display: block;
	font-size: .10rem;
	padding-top: 10px;
	line-height: 1.2em;
}

.attention{
	position: relative;
	margin: 10px auto 0 auto;
	background-color: #ffffff;
	color: #000000;
	padding: 10px 15px;
	width: calc(80% - 30px);
	font-weight: 700;
}
.sp{ display: block; }
.pc{ display: none; }

/* ----- pc ----- */
@media screen and (min-width: 769px) {
	
	.sp{ display: none; }
	.pc{ display: block; }
    
    body{font-size: .16em;}
		
	#wrap{min-width: 1200px;}

	#endWrap{
		margin: 80px auto;
		padding: 80px 0;
		width: 960px;
		border: solid 3px #ffffff;
	}
	.btn{
		margin: 50px auto;
		padding: 20px 90px;
	}
	.btn::after{width: 35px;}

	h2{
		margin:  0 auto 80px auto;
		font-size: .32rem;
	}

	.clearImg{
		width: 880px; 
		margin: 0 auto 20px auto;
	}
	.continueImg{
		margin:0 auto 50px auto;
		width: 420px;
	}
	.letterImg{
		margin: 0 auto 50px auto;
		transform: translateX(11px);
		width: 680px;
	}

	.GoodsArea{width: 860px;margin: 40px auto 0 auto;}
	.GoodsArea ul li{width: 420px !important;}

	.enq{margin: 40px auto 0 auto;}
	.enq .btn{margin: 30px auto 0 auto;}

	.shareArea{
		margin:  10px auto 20px  auto;
		padding: 40px 80px;
		width: 560px;
	}
	.shareArea p{font-size: .16rem;}
	.shareArea ul.sharebtn{
		margin: 30px auto 0 auto;
		width: 400px;
	}
	.shareArea ul.sharebtn li{margin:  10px auto 20px auto;}
	.shareArea ul.sharebtn li a{
		padding: 12px 20px;
		font-size: .16rem;
	}
	.shareArea ul.sharebtn li a::after{
		left: 15px;
		width: 26px;
	}

	.LinkArea{width: 720px;}
	.LinkArea h4{
		margin: 20px auto 20px auto;
		padding: 8px 20px;
	}
	.LinkArea ul.banner li{width: 39%; margin: 0px 35px 35px 30px;}
	.LinkArea ul.banner li p{font-size: .14rem;}
	
	footer{
		margin: 180px auto 0 auto;
		padding: 50px 0 70px 0;
		font-size: .14rem;
		line-height: 1.8em;
	}
	footer p span{
		font-size: .12rem;
		padding-top: 16px;
		line-height: 2.6em;
	}

}