@charset "utf-8";

/*--------------------------------------------------------------------------------
■スマートフォン： halloween26
--------------------------------------------------------------------------------*/
body{
	margin: 0 0 10vw;
}
#halloween26 h2,
#halloween26 h3,
#halloween26 h4,
#halloween26 h5,
#halloween26 h6 {
	margin: 0;
}



main.str-content section:not(#halloween26) {
	padding: 0 !important;
}


#halloween26 {
	color: #f8f6f6;
	position: relative;
	background: #231816;
	padding: 0 0 7vw !important;
}
#halloween26::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0.2vw;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 17vw;
	background: url(../../images/page/halloween26/f-bg.png) repeat-x 0 0;
	background-size: auto 17vw;
}

main.str-content h2 {
	display: block;
	font-size: 1em;
	-webkit-margin-before: 0 !important;
	-webkit-margin-after: 0 !important;
	-webkit-margin-start: 0 !important;
	-webkit-margin-end: 0 !important;
	font-weight: normal;
}
main.str-content h3 {
	-webkit-margin-before: 0 !important;
	-webkit-margin-after: 0 !important;
	-webkit-margin-start: 0 !important;
	-webkit-margin-end: 0 !important;
}
main.str-content h4 {
	-webkit-margin-before: 0 !important;
	-webkit-margin-after: 0 !important;
	-webkit-margin-start: 0 !important;
	-webkit-margin-end: 0 !important;
}

/********** フッターのスキマをリセット **********/
#ym-footer .footer-contents-list {
	padding: 0;
}



/* ----------------------------------------
ページ内共通設定
---------------------------------------- */
.page-main {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
}
.page-main * {
	font-family: "Noto Sans JP", sans-serif;
}
.font-creepster {
	font-family: "Creepster", system-ui;
	font-weight: 400;
	font-style: normal;
}
#halloween26 .page-content-inner {
	position: relative;
	width: 74vw;
	margin: 0 auto;
}
#halloween26 img {
	display: block;
}
#halloween26 a {
	text-decoration: none;
}





/* ----------------------------------------
メイン画像
---------------------------------------- */
#halloween26 .img-main {
	position: relative;
}
#halloween26 .img-main .img-main-box {
	position: relative;
	margin: 0;
}
#halloween26 .img-main img {
	display: block;
	width: 90vw;
	height: auto;
	margin: 3vw auto 0;
}


/* ----------------------------------------
メインフレーム
---------------------------------------- */
#halloween26 .main-frame {
	position: absolute;
	top: -6vw;
	right: 0;
	left: 0;
}
#halloween26 .main-frame img {
	display: block;
	width: 100%;
	height: auto;
}


/* ----------------------------------------
背景
---------------------------------------- */
#halloween26 .page-content-bg {
	background: #231816;
}
#halloween26 .page-content-bg-wave-purple{
	background: #ddd2e2
}

/* ----------------------------------------
About
---------------------------------------- */
#halloween26 .about {
	position: relative;
	padding: 16vw 0 0;
}

/* about-box */
#halloween26 .about .about-box {

}


/********** 見出し **********/
#halloween26 .about h2 {
	text-align: center;
	line-height: 1;
}
#halloween26 .about h2 .en-title {
	display: block;
	margin: 0 0 2vw;
	font-size: 6.4vw;
	font-weight: 700;
}
#halloween26 .about h2 .ja-title {
	display: block;
	margin: 0 0 8vw;
	font-size: 4vw;
	font-weight: 400;
}

/********** テキスト **********/
#halloween26 .about .txt {
	text-align: center;
}
#halloween26 .about .txt.txt-kuzureta {
	padding: 0 0 12vw;
}
#halloween26 .about .txt.txt-1998nen {
	padding: 0 0 13vw;
}
#halloween26 .about .txt p {
	line-height: 1.8;
	font-size: 3.6vw;
}

/********** ブラウニー画像 **********/
#halloween26 .about .img-brownie {
	width: 67vw;
	margin: 0 auto 8vw;
}
#halloween26 .about .img-brownie img {
	display: block;
	margin: 0 auto;
}




/* ----------------------------------------
3つの秘密
---------------------------------------- */
#halloween26 .oishikunaru-himitsu {
	padding: 0 0 12vw;
}


/********** 角丸 **********/
#halloween26 .oishikunaru-himitsu .oishikunaru-himitsu-box {
	position: relative;
	z-index: 3;

	width: 74vw;
	margin: 0 auto;
	padding: 8vw 4vw 3vw;
	border-radius: 20px;
	color: #000;
	background: #f6f6f6;
}

/********** 見出し **********/
#halloween26 .oishikunaru-himitsu h2 {
	padding: 0 0 8vw;
	text-align: center;
}
#halloween26 .oishikunaru-himitsu h2 .heading-label-1 {
	position: relative;
	display: block;
	font-weight: 400;
	font-size: 4vw;
}
#halloween26 .oishikunaru-himitsu h2 .heading-label-2 {
	display: block;
	font-weight: 700;
	font-size: 4.8vw;
}


/********** リスト **********/
#halloween26 .oishikunaru-himitsu ul {
	list-style: none;

	width: 100%;
	margin: 0;
	text-align: center;

	box-sizing: border-box;
}

#halloween26 .oishikunaru-himitsu ul li {
	text-align: center;
	margin: 0 0 5vw;
}

/* テキストを中央寄せ */
#halloween26 .oishikunaru-himitsu ul li .list-unit {
	text-align: center;
}
#halloween26 .oishikunaru-himitsu ul li .heading {
	margin:0 0 2vw;
	font-weight: 700;
	font-size: 4vw;
}
#halloween26 .oishikunaru-himitsu ul li .thumb-txt{
	display: flex;
	align-items: center;
}
#halloween26 .oishikunaru-himitsu ul li .thumb {
	margin:0 5vw 0 1vw;
}
#halloween26 .oishikunaru-himitsu ul li .thumb img {
	display: block;
	margin: 0 auto;
	width: 24.5vw;
}
#halloween26 .oishikunaru-himitsu ul li .txt p {
	line-height: 1.6;
	font-size: 3.4vw;
	text-align: left;
}




/* ----------------------------------------
魔女もときめく、NYの夜
---------------------------------------- */
#halloween26 .spooky_night_in_ny {
	padding: 0 0 31vw;
}
#halloween26 .spooky_night_in_ny .illust-obake{
	position: relative;
	height: 46vw;
}
#halloween26 .spooky_night_in_ny .illust-obake img{
	position: absolute;
	top: 0;
	left: calc(50% - 25vw);
	width: 50vw;
	height: 29vw;
}
/********** 見出し **********/
#halloween26 .spooky_night_in_ny h2 {
	text-align: center;
	line-height: 1;
}
#halloween26 .spooky_night_in_ny h2 .en-title {
	display: block;
	margin: 0 0 4vw;
	font-size: 8.4vw;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: #ffffff;
}
#halloween26 .spooky_night_in_ny h2 .ja-title {
	display: block;
	font-size: 4.4vw;
	font-weight: 400;
	margin: 0 0 10vw;
}

/********** テキスト **********/
#halloween26 .spooky_night_in_ny .txt {
	text-align: center;
	margin: 0 0 16vw;
}
#halloween26 .spooky_night_in_ny .txt p {
	line-height: 1.8;
	font-size:3.6vw;
}

/********** Have a spooky night!画像 **********/
#halloween26 .spooky_night_in_ny .illust-halloween-box {
	width: 100%;
}
#halloween26 .spooky_night_in_ny .illust-halloween-box img {
	display: block;
}



/* ----------------------------------------
ハロウィンフレーバー
---------------------------------------- */
#halloween26 .halloween_flavor {
	padding: 0 0 11vw;
}
#halloween26 .halloween_flavor .page-content-inner{
	width: auto;
}

/********** 見出し **********/
#halloween26 .halloween_flavor h2 {
	text-align: center;
	line-height: 1;
}
#halloween26 .halloween_flavor h2 .en-title {
	display: block;
	margin: 0 0 4vw;
	font-size: 8.4vw;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: #ffffff;
}
#halloween26 .halloween_flavor h2 .ja-title {
	display: block;
	font-size: 4.4vw;
	font-weight: 400;
	margin: 0 0 10vw;
}

/********** テキスト **********/
#halloween26 .halloween_flavor .txt {
	text-align: center;
	width: 74vw;
	margin: 0 auto 16vw;
}
#halloween26 .halloween_flavor .txt p {
	line-height: 1.8;
	font-size:3.6vw;
}
/********** 商品一覧 **********/
#halloween26 .halloween_flavor-collection-box .item-list ul li{
	padding: 0 0 11vw;
}
#halloween26 .halloween_flavor-collection-box .item-list ul li:last-child{
	padding: 0;
}
#halloween26 .halloween_flavor-collection-box .item-list ul li .item-unit{
	width: 100%;
}
#halloween26 .halloween_flavor-collection-box .item-list ul li .item-unit .name-details{
	width: 74vw;
	margin: 0 auto;
}
#halloween26 .halloween_flavor-collection-box .item-list ul li .item-unit .name-details .name-details-box{
	margin: 0 0 3.7vw;
}
#halloween26 .halloween_flavor-collection-box .item-list ul li .item-unit .name-details .item-catch{
	font-size: 4vw;
	margin: 0 0 2vw;
}
#halloween26 .halloween_flavor-collection-box .item-list ul li .item-unit .name-details h6{
	font-size: 5.8vw;
	color: #ffffff;
}
#halloween26 .halloween_flavor-collection-box .item-list ul li .item-unit .name-details .item-name{
	font-size: 3.4vw;
	margin: 0 0 8vw;
}
#halloween26 .halloween_flavor-collection-box .item-list ul li .item-unit .img-iflavor{
	width: 82vw;
	margin: 0 auto;
}


/* ----------------------------------------
ハロウィンコレクション
---------------------------------------- */
#halloween26 .halloween_collection {
	padding: 34vw 0 30vw;
	color: #000000;
}

/********** 見出し **********/
#halloween26 .halloween_collection h2 {
	margin: 0 0 4vw;
	text-align: center;
	line-height: 1;
}
#halloween26 .halloween_collection h2 .en-title {
	display: block;
	margin: 0 0 4vw;
	font-size: 8.4vw;
	font-weight: 700;
	letter-spacing: 0.06em;
}
#halloween26 .halloween_collection h2 .ja-title {
	display: block;
	font-size: 4.4vw;
	font-weight: 400;
	margin: 0 0 10vw;
}

/********** テキスト **********/
#halloween26 .halloween_collection .txt {
	text-align: center;
	margin: 0 0 18vw;
}
#halloween26 .halloween_collection .txt p {
	line-height: 1.8;
	font-size:3.6vw;
}
/********** 商品一覧 **********/
#halloween26 .halloween_collection .item-list ul li{
	margin: 0 0 20vw;
}
#halloween26 .halloween_collection .item-list ul li:last-child{
	margin: 0;
}
#halloween26 .halloween_collection .item-list ul li .page-content-inner{
	width: 100%;
}
#halloween26 .halloween_collection .item-list ul li .item-img{
	width: 100%;
	margin: 0 0 5vw;
}
#halloween26 .halloween_collection .item-list ul li .item-unit-box{
	display: grid;
	justify-content: center;
	margin: 0 0 6vw;
	text-align: right;
}
#halloween26 .halloween_collection .item-list ul li .item-name{
	font-size: 4.4vw;
	line-height: 1.47
}
#halloween26 .halloween_collection .item-list ul li .item-price{
	font-size: 4.4vw;
	display: flex;
	justify-content: flex-end;
}
#halloween26 .halloween_collection .item-list ul li .item-price .item-value-box {
	line-height: 1.25;
}
#halloween26 .halloween_collection .item-list ul li .item-price .item-value{
	font-size: 5.6vw;
	margin: 0 0 0 1vw;
}

/* 購入はこちら */
#halloween26 .halloween_collection .btn-details {
	display: flex;
	justify-content: center;
}
#halloween26 .halloween_collection .btn-details a {
	display: flex;
	justify-content: center;
	align-items: center;
	
	width: 58vw;
	height: 12vw;
	border-radius: 90px;
	font-size: 4.4vw;
	color: #fff;
	background: #231815;
}


/* ----------------------------------------
review
---------------------------------------- */
#halloween26 .review {
	padding: 12vw 0 38vw;
}



/********** 見出し **********/
#halloween26 .review h2 {
	display: flex;
	justify-content: center;

	width: 100%;
	text-align: center;
	color: #ffffff;
}
#halloween26 .review h2 .label {
	display: block;
}
#halloween26 .review h2 .label .label-en {
	display: block;
	font-size: 8vw;
	padding: 0 0 3vw;
	font-weight: 400;
}
#halloween26 .review h2 .label .label-ja {
	display: block;
	font-weight: 400;
	font-size: 4.4vw;
	margin: 0 0 15vw;
}




#halloween26 .review .review-box {
margin: 0 auto;
}
#halloween26 .review .review-box .review-list {
	padding: 0 9vw;
}
#halloween26 .review .review-box .slick-slide {
	width: 65.2vw;
	padding: 13vw 1.5vw 0;
}
#halloween26 .review .review-box .slick-slide .review-unit-box {
	padding: 3vw;
	border-radius: 3vw;
	font-size: 3.4vw;
	background-color: #fff;
	color: #000000;
}
#halloween26 .review .review-box .slick-slide .review-unit {
	height: 114vw;
	padding: 6vw 3vw 3vw;
	border-radius: 2.5vw;
	background-color: #ddd2e2;
	position: relative;
}
#halloween26 .review .review-box .slick-slide .review-unit .review-icon{
	width: 26vw;
	height: 26vw;
	margin: 0 auto;
	position: absolute;
	top: -13vw;
	left: calc(50% - 13vw);
}


/* 次へ・前へ */
#halloween26 .review .review-box .slick-arrow {
	display: block;
	
	position: absolute;
	top: 50%;
	margin: 0 0 0;
	
	width: 5vw;
	height: 12vw;
	border: none;
	text-indent: -9999px;
	overflow: hidden;
	background: #fff;
	z-index: 2;
}
#halloween26 .review .review-box .slick-arrow.slick-prev {
	left: -5vw;
	background: url(../../images/page/halloween26/scroll-left.svg) no-repeat 0 0;
	background-size: 5vw 7.6vw;
}
#halloween26 .review .review-box .slick-arrow.slick-next {
	right: -6vw;
	background: url(../../images/page/halloween26/scroll-right.svg) no-repeat 0 0;
	background-size: 5vw 7.6vw;
}

/* review title */
#halloween26 .review .review-title {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10vw 0 0;
	font-size: 4vw;
	position: relative;
}
#halloween26 .review .review-title:after {
	content: "";
	background: url(../../images/page/halloween26/voice-parts.svg) no-repeat 0 0;
	background-size: 100%;
	width: 44vw;
	height: 9.7vw;
	position: absolute;
	bottom: -11vw;
	left: calc(50% - 22vw);
}

#halloween26 .review .review-box .slick-slide .review-txt {
	padding: 16vw 0 0;

}
#halloween26 .review .review-box .slick-slide .review-txt p {
	line-height: 1.9;
	font-size: 3.4vw;
}

#halloween26 .review .note{
	width: 82vw;
	margin: 5vw auto 0;
	text-align: right;
	font-size: 3.4vw;
	color: #ffffff;
}


/* ----------------------------------------
よくあるご質問
---------------------------------------- */
#halloween26 .faq {
	padding: 0 0 33vw;
}
#halloween26 .faq .page-content-inner{
	width: 84vw;
}


/********** 見出し **********/
#halloween26 .faq h2 {
	display: flex;
	justify-content: center;

	width: 100%;
	margin: 0 0 7vw;
	text-align: center;
	color: #ffffff;
}
#halloween26 .faq h2 .label {
	display: block;
}
#halloween26 .faq h2 .label .label-en {
	display: block;
	font-size: 8vw;
	padding: 0 0 3vw;
	font-weight: 400;
}
#halloween26 .faq h2 .label .label-ja {
	display: block;
	font-weight: 400;
	font-size: 4.4vw;
	margin: 0 0 15vw;
}




#halloween26 .faq .faq-box {
	width: 84vw;
	margin: 0 auto;
	color: #ffffff;
}
#halloween26 .faq .faq-box .section{
	margin: 0 0 6vw;
}
#halloween26 .faq .faq-box h3 {
	font-size: 4vw;
	font-weight: 500;
	padding: 0 0 1vw;
	line-height: 1.8;
	color: #ffffff;
	border: none;
}
#halloween26 .faq .faq-box h3::before {
	content: "Q.";
	font-size: 5.6vw;
	font-weight: 500;
	padding: 0 1vw 0 0;
}
#halloween26 .faq .faq-box .answer p{
	font-size: 3.6vw;
	line-height: 1.8;
	font-weight: 400;
}


/* ----------------------------------------
have_a_spooky_night
---------------------------------------- */
#halloween26 .have_a_spooky_night {
	padding: 0 0 30vw;
}

#halloween26 .have_a_spooky_night .page-content-inner{
	width: auto;
}


/********** 見出し **********/
#halloween26 .have_a_spooky_night h2 {
	font-size: 6.4vw;
	padding: 0 0 10vw;
	text-align: center;
	color: #ddd2e1;
	transform: rotate(5deg);
	-moz-transform: rotate(5deg);
	-webkit-transform: rotate(5deg);
}


#halloween26 .have_a_spooky_night .have_a_spooky_night-box {
	width: 74vw;
	margin: 0 auto;
}
#halloween26 .have_a_spooky_night .have_a_spooky_night-box .txt-box p{
	font-size: 3.6vw;
	line-height: 1.8;
	font-weight: 400;
	text-align: center;
	margin: 0 0 6vw;
}
have_a_spooky_night-img img{
	width: 100%;
}


/* ----------------------------------------
fix-bnr-halloween
---------------------------------------- */
/********** fix-bnr-halloween **********/
#halloween26 .fix-bnr-halloween {
	position: fixed;
	z-index: 10;
	
	bottom: 1vw;
	right: 1vw;
	width: 26vw;
}