@charset "utf-8";

html{
	font-size: 62.5%;
}
body{
	font-size: 1.6rem;
	font-size: 16px;
	line-height: 1.6;
}

#wrapper{
	max-width: 1920px;
	margin-left: auto;
	margin-right: auto;
}

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

/* コンテンツ幅 */
.fitWidthA{
	max-width: 1090px;
	margin-left: auto;
	margin-right: auto;
}


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

/* footer */
#footer{
	background-color: #e3bd50;
	padding: 44px 0 18px;
}
.socialLinkWrap .socialLinkList{
	display: flex;
	justify-content: center;
	gap: 0 72px;
	margin-bottom: 45px;
}
.socialLinkWrap .socialLinkList li{
	width: 66px;
}
.copyLight{
	font-size: 1.2rem;
	color: #36516f;
	text-align: center;
}

/* タイトル */
.titleA{
	width: 471px;
	text-align: center;
	margin: 0 auto 30px;
}
.titleB{
	font-size: 3.6rem;
	text-align: center;
	margin-bottom: 78px;
}
.titleB span{
	font-size: 2.4rem;
}
.titleB .subTtl{
	display: block;
}
.titleC{
	position: relative;
	text-align: center;
	margin-bottom: 40px;
}
.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{
	color: #e3bd50;
	font-size: 3.0rem;
	background: url(/lp/HarryPotterMagicChristmasbyLOFT/img/img_decoration.png) center left 24px no-repeat,
							url(/lp/HarryPotterMagicChristmasbyLOFT/img/img_decoration.png) center right 24px no-repeat #36516f;
	background-size: 28px 31px;
	padding: 0 70px;
	position: relative;
}

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

/* その他 */
.paragraph{
	margin-bottom: 30px;
}

/* リスト */
.noteList{
	font-size: 1.4rem;
	line-height: 1.85;
	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.jpg) top center;
}

/* main */
.mainImgWrap{
	background: #36516f;
	text-align: center;
}

/* firstCategory */
.firstCategory{
	color: #36516f;
	padding: 70px 0 77px;
	
}
.firstCategory .catchphrase{
	width: 67%;
	margin: 0 auto 46px;
}
.firstCategory .readText{
	font-size: 2.0rem;
	font-weight: bold;
	margin-bottom: 50px;
}
.firstCategory .periodBlock{
	text-align: center;
	margin-bottom: 43px;
}
.firstCategory .periodBlock .periodText{
	display: inline-block;
	border: 4px solid #e3bd50;
	background: #ffffff;
	padding: 20px 36px;
}
.firstCategory .infoText{
	display: flex;
	justify-content: center;
	padding-left: 1em;
	text-indent: -1em;
}
.firstCategory .infoText:before{
	content: "※";
	text-indent: -2.2em;
}

.insideLinkWrap{
	background-color: #36516f;
	padding: 40px 0;
}
.insideLinkWrap .insideLinkList{
	display: flex;
	justify-content: center;
	gap: 0 7%;
}
.insideLinkWrap .insideLinkList li{
	width: 30%;
}
.insideLinkWrap .insideLinkList li .linkBtn{
	display: block;
	border: 4px solid #e3bd50;
	padding: 7px;
}
.insideLinkWrap .insideLinkList li .linkBtn span{
	display: block;
	padding: 22px 0;
	text-align: center;
	border: 2px solid #e3bd50;
}

/* productCategory */
.productCategory{
	padding: 70px 0 72px;
}
.productCategory .slideWrap{
  display: flex;
	align-items: center;
	gap: 3%;
  margin-bottom: 114px;
	width: 80%;
	max-width: 1130px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}
.productCategory .slideWrap.layoutChange{
	flex-direction: row-reverse;
}
.productCategory .mainSlider{
	width: 460px;
	position: relative;
	padding: 28px;
}
.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 .mainSlider .slider {
	margin-bottom: 0;
}

.productCategory .subSlider{
	width: calc(100% - 423px + 3%);
}
.productCategory .subSlider .sliderNav{
	background: url(/lp/HarryPotterMagicChristmasbyLOFT/img/bg_product.png) center repeat;
	background-size: cover;
	box-shadow: 8px 8px 8px rgba(95, 71, 57, 0.4);
	width: 80%;
	margin-right: auto;
	position: relative;
}
.productCategory .subSlider .sliderNav::after{
	content: "";
	display: block;
	width: 92px;
	height: 81px;
	background: url(/lp/HarryPotterMagicChristmasbyLOFT/img/img_cart.png) center no-repeat;
	background-size: contain;
	position: absolute;
	right: -5px;
	bottom: 0;
}

.productCategory .slideWrap.layoutChange .subSlider .sliderNav{
	margin-left: auto;
	margin-right: 0;
}

.productCategory .slideWrap .slick-track {
  display: flex;
}
.productCategory .slideWrap .subSlider .slick-slide{
	height: auto;
	display: flex;
	flex-direction: column;
}
.productCategory .slideWrap .subSlider .slick-slide a{
	display: block;
	padding: 30px;
	text-decoration: none;
}

.productCategory .slideWrap .slick-prev, 
.productCategory .slideWrap .slick-next{
	width: 80px;
	height: 80px;
	z-index: 1;
}

.productCategory .slideWrap .slick-prev{
	left: -80px;
}
.productCategory .slideWrap .slick-next{
	right: -80px;
}
.productCategory .slideWrap .slick-prev:before,
.productCategory .slideWrap .slick-next:before{
	content: none;
}
.productCategory .slick-dots{
	bottom: -40px;
}
.productCategory .slick-dots li{
	margin: 0 12px;
}
.productCategory .slick-dots li button{
	background-color: #36516f;
	width: 18px;
	height: 18px;
	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%;
}
.productTextList{
	margin-bottom: 20px;
}
.productTextWrap .productName{
	font-size: 2.0rem;
	font-weight: bold;
}
.productTextWrap .productName .workName{
	display: block;
	font-size: 1.8rem;
	font-weight: bold;
}
.productTextWrap .productName .kinds{
	font-size: 1.6rem;
	font-weight: bold;
}
.productPrice{
	font-size: 2.0rem;
	text-align: right;
	font-weight: bold;
}

.productDetail{
	font-size: 2.0rem;
	font-weight: bold;
	display: flex;
	justify-content: space-between;
}
.productExplanation{
	border-top: 4px dotted #79838a;
	padding-top: 23px;
	margin-top: auto;
}
.productDetail .subName{
	font-size: 1.6rem;
}

/* outlineCategory */
.outlineCategory{
	color: #fff;
	padding: 60px 0 80px;
	background: url(/lp/HarryPotterMagicChristmasbyLOFT/img/bg_outline.png) center top no-repeat;
	position: relative;
	overflow: hidden;
}
.outlineCategory .titleA{
	margin-bottom: 40px;
}
.ornamentWrap{
	width: 1920px;
	margin: 0 auto;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}
.ornamentInner{
	position: relative;
}

.outlineCategory .ornamentImg{
	position: absolute;
	opacity: 0;
}
.outlineCategory .ornamentImg.ornament01{
	top: -95px;
	left: 59px;
}
.outlineCategory .ornamentImg.ornament02{
	top: -10px;
	left: 173px;
}
.outlineCategory .ornamentImg.ornament03{
	top: -95px;
	left: 286px;
}
.outlineCategory .ornamentImg.ornament04{
	top: -163px;
	left: 400px;
}
.outlineCategory .ornamentImg.ornament05{
	top: 0;
	left: 513px;
}
.outlineCategory .ornamentImg.ornament06{
	top: -85px;
	left: 627px;
}
.outlineCategory .ornamentImg.ornament07{
	top: -50px;
	right: 625px;
}
.outlineCategory .ornamentImg.ornament08{
	top: -190px;
	right: 512px;
}
.outlineCategory .ornamentImg.ornament09{
	top: -50px;
	right: 399px;
}
.outlineCategory .ornamentImg.ornament10{
	top: 0;
	right: 285px;
}
.outlineCategory .ornamentImg.ornament11{
	top: -125px;
	right: 172px;
}
.outlineCategory .ornamentImg.ornament12{
	top: -20px;
	right: 59px;
}
.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 .outlineBlock{
	text-align: center;
	margin-bottom: 72px;
}
.outlineCategory .outlineBlock .outlineInfoBlock{
	font-size: 2.2rem;
}
.outlineCategory .storeText{
	margin-bottom: 23px;
}

.outlineCategory .storeText .netStoreBtn{
	display: inline-block;
	background: #ffffff;
	border-radius: 19px;
	text-decoration: none;
	line-height: 1;
	padding: 2px;
	position: relative;
}
.outlineCategory .storeText .netStoreBtn::after{
	content: "";
	width: 13px;
	height: 13px;
	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:hover{
	opacity: 0.8;
}

.outlineCategory .storeText .netStoreBtn span{
	display: inline-block;
	border-radius: 19px;
	border: 1px solid #36516f;
	color: #36516f;
	font-size: 1.8rem;
	font-weight: bold;
	padding: 3px 28px;
}
.outlineCategory .outlineBlock .note{
	margin-bottom: 30px;
}
.outlineCategory .outlineBlock .noteList{
	margin-left: 9%;
}
.outlineCategory .infoText{
	margin-bottom: 20px;
}
.outlineCategory .infoText span{
	font-size: 2.4rem;
}
.outlineCategory .gameInfoImg{
	width: 64%;
	margin: 0 auto 40px;
}
.outlineCategory .explanation{
	font-size: 2.0rem;
	margin-bottom: 13px;
}
.gameInfoWrap{
	font-size: 2.0rem;
	margin-left: 9%;
}
.gameInfoWrap .gameInfoBlock{
	display: flex;
	line-height: 2;
}
.outlineCategory .appDlBtn{
	width: 365px;
	border-radius: 24px;
	background: #fff;
	padding: 2px;
	margin: 0 auto 30px;
	position: relative;
}
.outlineCategory .appDlBtn::after{
	content: "";
	width: 16px;
	height: 16px;
	background: url(/lp/HarryPotterMagicChristmasbyLOFT/img/img_arrow.png) center no-repeat;
	background-size: contain;
	position: absolute;
	top: 0;
	right: 20px;
	bottom: 0;
	margin: auto;
}

.outlineCategory .appDlBtn a{
	display: block;
	text-decoration: none;
	border: 2px solid #36516f;
	border-radius: 20px;
	color: #36516f;
	padding: 2px 4px;
}
.outlineCategory .appDlBtn:hover{
	opacity: 0.8;
}

.outlineCategory .diagnosticsImg{
	margin-bottom: 43px;
}
.outlineCategory .diagnosticsNote{
	font-size: 2.0rem;
	text-align: center;
}

.relText{
	width: 28%;
	margin: 0 auto 40px;
}

/* カートボタン */
.cartBtn{
	width: 105px;
	position: fixed;
	left: 20px;
	bottom: 0;
}

/* ページ */
.pageTopBtn{
	width: 89px;
	position: fixed;
	right: 20px;
	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);
	}
}