@charset "utf-8";

html{
	font-size: 62.5%;
}
body{
	font-size: 1.5rem;
	font-size: 15px;
	line-height: 1.7;
	letter-spacing: 0;
}
#wrapper{
	width: 100%;
}

/* 非表示 */
.spNone{
	display: none;
}

/* コンテンツ幅 */
.fitWidthA{
	padding-left: 20px;
	padding-right: 20px;
}

/* header */
#header{
	background-color: #e3bd50;
	padding: 10px 0;
}
#header .logoImg{
	width: 47px;
	margin: 0 auto;
}

/* footer */
#footer{
	background-color: #e3bd50;
	padding: 20px 0 16px;
}
.socialLinkWrap .socialLinkList{
	display: flex;
	justify-content: center;
	gap: 0 10%;
	margin-bottom: 20px;
}
.socialLinkWrap .socialLinkList li{
	width: 50px;
}
.copyLight{
	color: #36516f;
	font-size: 1.1rem;
	text-align: center;
}

/* タイトル */
.titleA{
	width: 63%;
	margin: 0 auto 10px;
}
.titleB{
	font-size: 1.8rem;
	text-align: center;
	margin-bottom: 15px;
}
.titleB span{
	font-size: 1.2rem;
}
.titleB .subTtl{
	display: block;
}
.titleC{
	position: relative;
	text-align: center;
	margin-bottom: 18px;
}
.titleC::before{
	content: "";
	width: 100%;
	height: 1px;
	display: block;
	background-color: #e3bd50;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
.titleC span{
	display: inline-block;
	color: #e3bd50;
	font-size: 1.7rem;
	background: url(/lp/HarryPotterMagicChristmasbyLOFT/img/img_decoration.png) center left 10px no-repeat,
							url(/lp/HarryPotterMagicChristmasbyLOFT/img/img_decoration.png) center right 10px no-repeat #36516f;
	background-size: 16px 18px;
	padding: 0 32px;
	position: relative;
}

/* 背景 */
.bgA{
	background: #36516f;
}

/* その他 */
.paragraph{
	margin-bottom: 14px;
}
.note{
  font-size: 1.2rem;
}

/* リスト */
.noteList{
	font-size: 1.2rem;
	line-height: 2.4;
	text-align: left;
}
.noteList li{
	padding-left: 1.1em;
	text-indent: -1.1em;
}

.noteList li::before{
	content: "※";
}

.mainContents{
	background: url(/lp/HarryPotterMagicChristmasbyLOFT/img/bg_contents_sp.jpg) top center repeat-y;
	background-size: contain;
}


/* firstCategory */
.firstCategory{
	color: #36516f;
	padding: 30px 0 32px;
	
}
.firstCategory .catchphrase{
	width: 85%;
	margin: 0 auto 22px;
}
.firstCategory .readText{
	font-size: 1.4rem;
	font-weight: bold;
  line-height: 2.18;
	padding: 0 20px;
	margin-bottom: 28px;
}
.firstCategory .periodBlock{
	text-align: center;
	margin-bottom: 22px;
}
.firstCategory .periodBlock .periodText{
	display: inline-block;
	border: 2px solid #e3bd50;
	background: #ffffff;
	padding: 10px 18px;
}

.firstCategory .infoText{
  font-size: 1.2rem;
	display: flex;
	justify-content: center;
  width: 88%;
  margin: 0 auto;
  padding-left: 1em;
  text-indent: 0em;
}
.firstCategory .infoText:before{
	content: "※";
	text-indent: -1.2em;
}

.insideLinkWrap{
	background-color: #36516f;
	padding: 20px 0;
}
.insideLinkWrap .insideLinkList{
	display: flex;
	justify-content: center;
	gap: 0 5%;
}
.insideLinkWrap .insideLinkList li{
	width: 43%;
}
.insideLinkWrap .insideLinkList li .linkBtn{
	display: block;
	border: 2px solid #e3bd50;
	padding: 3px;
}
.insideLinkWrap .insideLinkList li .linkBtn span{
	display: block;
	padding: 11px 0;
	text-align: center;
	border: 1px solid #e3bd50;
}
.insideLinkWrap .insideLinkList li .linkBtn span img{
	width: 46%;
  vertical-align: middle;
  margin: 0 auto;
}

/* productCategory */
.productCategory{
	padding: 20px 0 86px;
}
.productCategory .slideWrap{
  margin-bottom: 63px;
	position: relative;
}
.productCategory .mainSlider{
	width: 290px;
	height: 290px;
	padding: 18px;
	margin: 0 auto 15px;
	position: relative;
}
.productCategory .mainSlider::after{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: url(/lp/HarryPotterMagicChristmasbyLOFT/img/bg_mainSlider.png) top center no-repeat;
	background-size: contain;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
}
.productCategory .subSlider{
  width: 90%;
	margin: 0 auto;
}

.productCategory .subSlider .sliderNav{
  background: url(/lp/HarryPotterMagicChristmasbyLOFT/img/bg_product.png) center repeat;
	background-size: cover;
	box-shadow: 4px 4px 4px rgba(95, 71, 57, 0.4);
}
.productCategory .subSlider .sliderNav::after{
	content: "";
	display: block;
	width: 46px;
	height: 40px;
	background: url(/lp/HarryPotterMagicChristmasbyLOFT/img/img_cart.png) center no-repeat;
	background-size: contain;
	position: absolute;
	right: -5px;
	bottom: 0;
}

.productCategory .slick-dotted.slick-slider{
	margin-bottom: 0;
}
.productCategory .slideWrap .slick-track {
  display: flex;
}
.productCategory .slideWrap .slick-slide{
	height: auto;
	display: flex;
	flex-direction: column;
}
.productCategory .slideWrap .slick-slide a{
	display: block;
	text-decoration: none;
}

.productCategory .slideWrap .slick-prev, 
.productCategory .slideWrap .slick-next{
	width: 40px;
	height: 40px;
  top: 25%;
}
.productCategory .slideWrap .slick-prev{
	left: 0;
}
.productCategory .slideWrap .slick-next{
	right: 0;
}
.productCategory .slick-dots{
	bottom: -40px;
}
.productCategory .slick-dots li{
	margin: 0 12px;
}
.productCategory .slick-dots li button{
	background-color: #36516f;
	width: 12px;
	height: 12px;
	border-radius: 50%;
}
.productCategory .slick-dots li.slick-active button{
	background-color: #e3bd50;
}
.productCategory .slick-dots li button:before,
.productCategory .slick-dots li.slick-active button:before{
	color: unset;
}

.productTextWrap{
	color: #363636;
	display: flex;
	flex-direction: column;
	height: 100%;
  padding: 9px 15px 0;
}
.productTextWrap .productName{
	font-weight: bold;
}
.productTextWrap .productName .workName{
	display: block;
	font-weight: bold;
}
.productTextWrap .productName .kinds{
	font-size: 1.3rem;
	font-weight: bold;
}
.productPrice{
	font-size: 1.3rem;
	text-align: right;
	font-weight: bold;
}
.productTextList{
	margin-bottom: 5px;
}

.productDetail{
	font-weight: bold;
}
.productDetail .price{
	font-size: 1.3rem;
	display: block;
	text-align: right;
}

.productExplanation{
	font-size: 1.3rem;
	border-top: 2px dotted #79838a;
  min-height: 65px;
	padding-top: 16px;
	margin: auto 0 8px;
}
.productDetail .subName{
	font-size: 1.3rem;
}


/* outlineCategory */
.outlineCategory{
	background: url(/lp/HarryPotterMagicChristmasbyLOFT/img/bg_outline_sp.png) left top no-repeat;
	background-size: contain;
	color: #fff;
	padding: 20px 0 25px;
	position: relative;
	overflow: hidden;
}
.outlineCategory .outlineBlock{
	text-align: center;
	margin-bottom: 15px;
}
.outlineCategory .outlineBlock .outlineInfoBlock{
	font-size: 1.4rem;
  padding: 0 5px;
}

.ornamentWrap{
	width: 100%;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}
.ornamentInner{
	position: relative;
}

.outlineCategory .ornamentImg{
	width: 3%;
	position: absolute;
	opacity: 0;
}
.outlineCategory .ornamentImg.ornament02{
	top: -65px;
	left: 2%;
}
.outlineCategory .ornamentImg.ornament06{
	top: -20px;
	left: 9%;
}
.outlineCategory .ornamentImg.ornament07{
	top: -74px;
	left: 14%;
}
.outlineCategory .ornamentImg.ornament10{
	top: -60px;
	right: 14%;
}
.outlineCategory .ornamentImg.ornament11{
	top: -25px;
	right: 7%;
}
.outlineCategory .ornamentImg.ornament12{
	top: -94px;
	right: 2%;
}
.ornamentMove{
	animation-name: ornamentMove;
	animation-duration: 1.1s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}
@keyframes ornamentMove {
  0%   { 
		transform: translateY(-100%);
		opacity: 0;
	}
  10%  { 
		transform: translateY(-25%);
		opacity: 1;
	}
  25%  { 
		transform: translateY(0);
	}
  40%  { 
		transform: translateY(-30%);
	}
  55%  { 
		transform: translateY(0);
	}
  70%  { 
		transform: translateY(-10%);
	}
  80%  { 
		transform: translateY(0);
	}
  90%  { 
		transform: translateY(-5%);
	}
  100% { 
		transform: translateY(0%);
		opacity: 1;
	}
}

.outlineCategory .storeText{
	margin-bottom: 13px;
}

.outlineCategory .storeText .netStoreBtn{
	display: inline-block;
	background: #ffffff;
	border-radius: 15px;
	font-size: 1.7rem;
	text-decoration: none;
	line-height: 1;
	padding: 2px;
	position: relative;
}
.outlineCategory .storeText .netStoreBtn::after{
	content: "";
	width: 8px;
	height: 8px;
	background: url(/lp/HarryPotterMagicChristmasbyLOFT/img/img_arrow.png) center no-repeat;
	background-size: contain;
	position: absolute;
	top: 0;
	right: 10px;
	bottom: 0;
	margin: auto;
}

.outlineCategory .storeText .netStoreBtn span{
	display: inline-block;
	border-radius: 12px;
	border: 1px solid #36516f;
	color: #36516f;
	font-size: 1.4rem;
	font-weight: bold;
	padding: 5px 20px;
	line-height: 1;
}
.outlineCategory .outlineBlock .note{
	text-align: center;
	margin-bottom: 14px;
}

.outlineCategory .infoText{
	font-size: 1.7rem;
	margin-bottom: 20px;
}
.outlineCategory .infoText span{
	font-size: 1.3rem;
}
.outlineCategory .gameInfoImg{
	width: 80%;
	margin: 0 auto 20px;
}
.outlineCategory .explanation{
	font-size: 1.4rem;
	text-align: left;
	margin-bottom: 8px;
}

.gameInfoWrap{
	text-align: left;
	font-size: 1.3rem;
}
.gameInfoWrap .gameInfoBlock{
	display: flex;
	margin-bottom: 10px;
}
.gameInfoWrap .gameInfoBlock dt{
	width: 65px;
}
.gameInfoWrap .gameInfoBlock dd{
	width: calc(100% - 65px);
}

.outlineCategory .appDlBtn{
	width: 70%;
	border-radius: 24px;
	background: #fff;
	line-height: 1;
	padding: 2px;
	margin: 0 auto 15px;
	position: relative;
}
.outlineCategory .appDlBtn::after{
	content: "";
	width: 8px;
	height: 8px;
	background: url(/lp/HarryPotterMagicChristmasbyLOFT/img/img_arrow.png) center no-repeat;
	background-size: contain;
	position: absolute;
	top: 0;
	right: 10px;
	bottom: 0;
	margin: auto;
}


.outlineCategory .appDlBtn a{
	display: block;
	text-decoration: none;
	border: 1px solid #36516f;
	border-radius: 20px;
	color: #36516f;
	padding: 5px 0;
}

.outlineCategory .diagnosticsImg{
	width: 80%;
	margin: 0 auto 12px;
}
.outlineCategory .diagnosticsNote{
	font-size: 1.2rem;
}

	
.relText{
	width: 92%;
	margin: 0 auto;
}

/* カートボタン */
.cartBtn{
	width: 17%;
	position: fixed;
	left: 3%;
	bottom: 0;
}

/* ページ */
.pageTopBtn{
	width: 15%;
	position: fixed;
	right: 2%;
	bottom: 0;
}

/* フェードイン */
.move{
	opacity: 0;
}
.fadeIn{
	animation: fadeIn 0.8s ease-out 0.5s forwards;
}
@keyframes fadeIn {
	0%{
		opacity: 0;
		transform: translateY(30px);
}
	100%{
		opacity: 1;
		transform: translateY(0);
	}
}