@charset "UTF-8";

/* 共通 --------------------------------------------------- */

#Wrapper {
	opacity: 0;
}

/* アニメーション */
.InView1,
.InView2,
.InView3,
.InView4 {
	/*transform: translate(0, 25px);
	-webkit-transform: translate(0, 25px);*/
	opacity: 0;
}

.InView1 {
	transition: 0.75s ease-in-out 0.1s;
}

.InView2 {
	transition: 0.75s ease-in-out 0.5s;
}

.InView3 {
	transition: 0.75s ease-in-out 0.5s;
}

.InView4 {
	transition: 0.75s ease-in-out 0.5s;
}

.Effect1 {
	/*transform: translate(0, 0);
	-webkit-transform: translate(0, 0);*/
	opacity: 1;
}

#second {
	background: #f1e9de;
	margin-bottom: 100px;
}

#first {
	background: #c8c7cb;
}

/* キービジュアル --------------------------------------------------- */

#ScrollText {
	position: relative;
	margin: 0;
	padding: 0 0 16px 0;
	text-align: center;
}

#ScrollText::after {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	right: 50%;
	width: 15px;
	height: 15px;
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	transform: translateX(50%) rotate(135deg);
}

@media only screen and (max-width: 767px) {
	#KeyVisual {
		margin-bottom: 30px;
	}

	#KeyVisual2 {
		margin: 50px 0;
		border-radius: 20px;
		-webkit-border-radius: 20px;
	}

	#ScrollText p {
		font-size: 90%;
	}
}

@media print, screen and (min-width: 768px) {
	#KeyVisual {
		margin-bottom: 50px;
	}

	#KeyVisual2 {
		max-width: 1100px;
		margin: 180px auto 50px auto;
	}

	#KeyVisual2 img {
		border-radius: 20px;
		-webkit-border-radius: 20px;
	}

	#ScrollText p {
		font-size: 166%;
	}
}

@media print, screen and (min-width: 1090px) {
}

/* セクション --------------------------------------------------- */

.SectionWrap a {
	display: block;
	color: #000;
}

.Movie {
	position: relative;
	line-height: 0;
}

.IconVolume {	
	cursor: pointer;	
	position: absolute;
    bottom: 72px;
    right: 16px;
	z-index: 10;
}


@media only screen and (max-width: 767px) {
	.SectionWrap {
		padding: 6% 25px 0 25px;
	}

	.IconVolume {	
		width: 44px;
		height: 44px;	
	}

	.SectionMain .RRox {
		font-size: 233%;
		line-height: 1em;
	}

	.SectionMain .LRBox {
		margin-top: 20px;
	}

	.SectionMain .MdsItem1 {
		width: 100%;
	}

	.SectionMain .MdsItem1 .MdsItem1Box {
		margin-top: 20px;
		text-align: center;
	}

	.SectionMain .MdsItem1 .MdsItem1Box .Mds1 {
		font-size: 188%;
		line-height: 1em;
	}

	.SectionMain .MdsItem1 .MdsItem1Box p {
		margin-top: 14px;
		font-size: 110%;
	}

	.SectionMain .Mds2 {
		font-size: 7.5vw;
		line-height: 1.2em;
		text-align: center;
	}

	.SectionMain .ItemMain {
		width: 100%;
		margin-bottom: 15px;
	}

	.SectionMain .ItemMain video,
	.SectionMain .ItemSub img {
		border-radius: 20px;
		-webkit-border-radius: 20px;
	}

	.SectionMain .ItemMain video {
		width: 100%;
		height: auto;
	}

	.SectionMain .LeadUnit {
		margin-top: 20px;
		text-align: center;
	}

	.SectionMain .Lead1 {
		font-size: 106%;
		line-height: 1.5em;
	}

	.SectionMain .BtnBuy1 {
		display: inline-block;
		padding: 7px 20px 7px 20px;
		font-size: 160%;
		line-height: 1em;
		letter-spacing: 0.1em;
		background-color: #fff;
	}

	.SectionMain .BtnBuy1 span {
		display: inline-block;
		padding: 5px 0 5px 30px;
		background: url(../img/Icon_Cart1.png) no-repeat;
		background-position: 0 45%;
		background-size: 24px auto;
	}

	/* Extra */
	.SectionMain.Extra .Photo {
		margin-top: 20px;
	}
	.SectionMain.Extra .Movie {
		margin-top: 20px;
	}
}

@media print, screen and (min-width: 768px) {
	#Contents {
		margin: 0 50px;
	}

	.SectionWrap {
		max-width: 1100px;
		margin: 0 auto;
		padding-top: 150px;
	}

	.IconVolume {
		width: 50px;
		height: 50px;
	}

	.SectionMain {
		position: relative;
	}

	.SectionMain .LRBox {
		width: 100%;
	}

	.SectionMain .MdsItem1 {
		position: absolute;
		z-index: 1;
		width: 100%;
		display: flex;
		height: 96%;
		text-align: center;
		align-items: center;
	}

	.SectionMain .MdsItem1 .MdsItem1Box {
		width: 49%;
		text-align: center;
	}

	.SectionMain .MdsItem1 .MdsItem1Box .Mds1 {
		font-size: 366%;
		line-height: 1em;
		font-weight: 700;
	}

	.SectionMain .MdsItem1 .MdsItem1Box p {
		font-size: 166%;
		margin: 20px 0 0 0;
		line-height: 1.5em;
	}

	.SectionMain .MdsItem2 {
		position: absolute;
		z-index: 100;
		width: 100%;
		display: flex;
		height: 18%;
		text-align: center;
		align-items: center;
	}

	.SectionMain .Mds2 {
		line-height: 1.2em;
		width: 49%;
	}

	.SectionMain .Mds2.RBox {
		margin: 0 0 0 51%;
	}

	.SectionMain .ItemMain {
		width: 49%;
	}

	.SectionMain .ItemSub {
		margin-top: 18%;
		width: 49%;
	}

	.SectionMain .ItemMain video,
	.SectionMain .ItemSub img {
		border-radius: 20px;
		-webkit-border-radius: 20px;
	}

	.SectionMain .ItemMain video {
		width: 100%;
		height: auto;
	}

	.SectionMain .LeadUnit {
		margin-top: 5%;
		text-align: center;
	}

	.SectionMain .Lead1 {
		font-size: 206%;
		line-height: 1.3em;
	}

	.SectionMain .BtnBuy1 {
		display: inline-block;
		padding: 6px 24px;
		border: none;
		font-size: 190%;
		line-height: 1em;
		letter-spacing: 0.02em;
		background-color: #fff;
	}

	.SectionMain .BtnBuy1 span {
		display: inline-block;
		padding: 5px 0 3px 28px;
		background: url(../img/Icon_Cart1.png) no-repeat;
		background-position: 0;
		background-size: 24px auto;
	}

	/* Extra */
	.SectionMain.Extra .Photo {
		margin-top: 30px;
	}

	.SectionMain.Extra .Movie {
		margin-top: 30px;
	}

	.SectionMain.Extra .LeadUnitExtra {
		display: flex;
		flex-wrap: wrap;
	}

	.SectionMain.Extra .LeadUnit {
		margin-top: 0;
		margin-right: 50px;
	}
}

@media print, screen and (min-width: 768px) and (max-width:1100px)  {
	.SectionMain .Mds2 {
		font-size: 3.6vw;
		line-height: 1.2em;
		width: 49%;
	}
}

@media print, screen and (min-width: 1100px) {
	.SectionMain .Mds2 {
		font-size: 310%;
		line-height: 1.2em;
		width: 49%;
	}
}

/* フッターセクション --------------------------------------------------- */
#FooterMds {
	text-align: center;
}

#FooterMds p {
	letter-spacing: 0.1em;
}

@media only screen and (max-width: 767px) {
	#FooterMds {
		font-size: 100%;
		margin: 50px 0 100px 0;
	}

	#FooterMds h3 {
		margin: 30px 0;	
	}
}

@media print, screen and (min-width: 768px) {
	#FooterMds {
		font-size: 153%;
		margin: 100px 0;
	}
	
	#FooterMds h3 {
		margin: 50px 0;
	}
}

/* MORE ITEMSボタン --------------------------------------------------- */

.BtnMore {
	text-align: center;
}

.BtnMore a {
	display: inline-block;
	background: #fff url(../img/Icon_Btn1.png) no-repeat;
	background-position: 95% 50%;
	border: 1px solid #000;
	font-weight: 300;
	color: #000;
	text-align: center;
	letter-spacing: 0.1em;
	text-decoration: none;
}

@media only screen and (max-width: 767px) {
	.BtnMore {
		width: 90%;
		margin: 0 auto 50px auto;
	}

	.BtnMore a {
		width: 100%;
		padding: 10px 0;
		background-size: 15px auto;
		font-size: 129%;
	}
}

@media print, screen and (min-width: 768px) {
	.BtnMore {
		margin: 0 auto 8% auto;
	}

	.BtnMore a {
		width: 300px;
		padding: 15px 0;
		background-size: 18px auto;
		font-size: 140%;
	}
}