@charset "utf-8";

/* mainWrapper
================================================== */
#mainWrapper {
	position: relative;
	overflow: hidden;
}
/* movieArea
================================================== */
#movieArea {
}
/* movieBg
================================================== */
#movieBg {
}
#movieBg img{
	width: 100%;
}

/* movieBox
================================================== */
#movieBox {
	position: fixed;
	z-index: 0;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	margin: 0 auto;
	height: auto;
}
@media screen and (max-width: 600px) {
	#movieBox {
	}
}
#movieBox video{
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
}
@media screen and (max-width: 600px) {
	#movieBox video{
		width: 220%;
		height: auto;
		padding: 0;
		margin: 0 0 0 -60%;
	}
}

/* sectionWrapper
================================================== */
#sectionWrapper {
	padding: 0;
	background-color: #eee;
	position: relative;
	z-index: 10;
}

/* sectionArea
================================================== */
#sectionArea {
	position: relative;
}

/* bgW
================================================== */
.bgColor {
	background-color: #fff;
}

/* sectionTit
================================================== */
.sectionTit {
	mix-blend-mode: difference;
	position: absolute;
	top: 5%;
	left: 5%;
	z-index: 1;
	color: #999999;
}
.sectionTit h2 {
	margin: 0;
	font-size: 500%;
	line-height: 90%;
}
@media screen and (max-width: 1600px) {
	.sectionTit h2 {
		font-size: 5vw;
	}
}
@media screen and (max-width: 800px) {
	.sectionTit {
		top: 3%;
	}
}
@media screen and (max-width: 600px) {
	.sectionTit h2 {
		font-size: 180%;
	}
}
.sectionTit h2 span {
	font-size: 70%;
}

/* linkBtnArea
================================================== */
.linkBtnArea {
	padding: 3% 10%;
}
/* onlineBtn */
.onlineBtn {
	width: 100%;
	padding-bottom: 5%;
}
.onlineBtn a {
	display: block;
	background: #000;
	color: #fff;
	text-align: center;
	padding: 2% 0;
	font-size: 200%;
	letter-spacing: 0.1em;
}
@media screen and (max-width: 1600px) {
	.onlineBtn a {
		font-size: 2vw;
	}
}
@media screen and (max-width: 600px) {
	.onlineBtn a {
		font-size: 120%;
		padding: 3% 0;
	}
}
.onlineBtn a:hover{
	color: #fff;
	background-color: #444;
}

/* newsArea
================================================== */
/* newsArea */
#newsArea {
	position: relative;
	z-index: 0;
	padding: 11% 5% 0;
	font-size: 0;
}
@media screen and (max-width: 1000px) {
	#newsArea {
		padding: 13% 3% 0;
	}
}
@media screen and (max-width: 600px) {
	#newsArea {
		padding: 15% 0 5% 0;
	}
}
/* newsBox */
.newsBox {
	display: inline-block;
	vertical-align: top;
	margin: 0 2%;
	width: 21%;
}
@media screen and (max-width: 900px) {
	.newsBox {
		margin: 3.5%;
		width: 43%;
	}
}
@media screen and (max-width: 600px) {
	.newsBox {
		display: inherit;
		margin: 10% auto 0;
		width: 70%;
	}
}
/* newsPhoto */
@media screen and (max-width: 600px) {
	.newsPhoto {
		float: none;
		width: 100%;
	}
}
/* newsTxt */
.newsTxt {
	font-size: 16px;
}
@media screen and (max-width: 600px) {
	.newsTxt {
		float: none;
		width: 100%;
	}
}
.newsTxt .newsDay{
	font-size: 60%;
	line-height: 100%;
	padding: 5% 0 2%;
}
.newsTxt h3{
	font-weight: bold;
	margin: 0;
	padding: 0;
	line-height: 140%;
}
@media screen and (max-width: 600px) {
	.newsTxt h3{
		font-size: 3.6vw;
	}
}

/* shopArea
================================================== */
@media screen and (max-width: 800px) {
	#shopArea {
		padding: 14% 0 0;
	}
}
#shopArea .shopLeft{
	width: 50%;
	padding: 9% 0 0 10%;
	float: left;
}
#shopArea .shopRight{
	width: 50%;
	padding: 9% 0 0 5%;
	float: right;
}
@media screen and (max-width: 800px) {
	#shopArea .shopLeft{
		width: 100%;
		padding: 5% 10% 0;
		float: none;
	}
	#shopArea .shopRight{
		width: 100%;
		padding: 5% 10% 0;
		float: none;
	}
}
#shopArea .txtLeft{
	width: 50%;
	padding: 3% 0 0 10%;
	float: left;
}
@media screen and (max-width: 800px) {
	#shopArea .txtLeft{
		width: 100%;
		padding: 5% 10% 0;
		float: none;
	}
}
#shopArea .txtLeft h3{
	font-size: 160%;
}
#shopArea .txtLeft p{
	padding-bottom: 2%;
}

/* shopPhArea
================================================== */
#shopPhArea .shopPhLeft{
	width: 53%;
	padding: 0 5% 0 0;
	float: left;
}
#shopPhArea .shopPhRight{
	width: 47%;
	padding: 0 10% 0 0;
	float: right;
}
#shopPhArea .shopPhRight div{
	padding-bottom: 10.4%;
}
@media screen and (max-width: 800px) {
	#shopPhArea .shopPhLeft{
		width: 100%;
		padding: 5% 10% 0;
		float: none;
	}
	#shopPhArea .shopPhRight{
		width: 100%;
		padding: 5% 10% 0;
		float: none;
	}
}

/* youtubeBox
================================================== */
/* youtubeBox */
.youtubeBox {
	padding: 0 10% 5%;
}
@media (max-width: 800px) {
	.youtubeBox {
		padding: 0 0 5%;
	}
}
.youtube {
	position: relative;
	padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
	height: 0;
	overflow: hidden;
}
.youtube iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* onlineTit
================================================== */
.onlineTit {
	top: 7%;
}

/* onlineShopArea
================================================== */
@media screen and (max-width: 800px) {
	#onlineShopArea {
		padding: 14% 0 0;
	}
}
#onlineShopArea .onlineShopPh{
	width: 90%;
	padding: 9% 0 0;
}
@media screen and (max-width: 800px) {
	#onlineShopArea .onlineShopPh{
		width: 100%;
		padding: 5% 10% 0;
		float: none;
	}
}

/* onlineShopPhArea
================================================== */
#onlineShopPhArea .onlineShopPhRight{
	width: 53%;
	padding: 0 0 0 5%;
	float: right;
}
#onlineShopPhArea .onlineShopPhLeft{
	width: 47%;
	padding: 0 0 0 10%;
	float: left;
}
#onlineShopPhArea .onlineShopPhLeft div{
	padding-bottom: 10.4%;
}
@media screen and (max-width: 800px) {
	#onlineShopPhArea .onlineShopPhRight{
		width: 100%;
		padding: 5% 10% 0;
		float: none;
	}
	#onlineShopPhArea .onlineShopPhLeft{
		width: 100%;
		padding: 5% 10% 0;
		float: none;
	}
}