@charset "utf-8";
/* ===========================================
 * ROOT
 * ======================================== */
:root {
	--font-family_main: YakuHanJP,"Hiragino Sans", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", Meiryo, sans-serif;
}

/* ===========================================
 * RESET
 * ======================================== */
h1, h2, h3, h4, h5, h6,figure, dl, dt, dd, strong, small, b {
	padding: 0;
	margin: 0;
	display: block;
}
img {
	max-width: 100%;
	padding: 0;
	margin-inline: auto;   
	border: none;
	vertical-align: bottom;
	-webkit-backface-visibility: hidden;
	display: block;
}
a {
	text-decoration: none;
	outline: none;
  cursor: pointer;
}
p {
	padding: 0;
	margin: 0;
}
small {
	font-size: inherit;
}
ul, ol, li {
	list-style: none;
}
.clear {
	clear: both;
	margin: 0px;
	padding: 0px;
}
.clearfix {
	zoom: 1;
}
.clearfix::after {  
	content: '';
	display: block;
	clear: both;
}
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
*::before, *::after {
	display: block;
}

/* ===========================================
 * PC・SP
 * ======================================== */
.pc {
	display: block!important;
}
.sp {
	display: none!important;
}
@media screen and (max-width: 767px) {
    .pc {
			display: none!important;
		}
    .sp {
			display: block!important;
		}
}
.link {
	text-decoration: underline!important;
}
.link:hover {
	text-decoration: none!important;
}

/* ===========================================
 * COMMON
 * ======================================== */
.container {
  width: 100%;
  background-position: center center;
  background-size: 20px 20px;
	background-repeat: repeat;
  background-image: linear-gradient(0deg, transparent calc(100% - 1px), #669ece calc(100% - 1px)),linear-gradient(90deg, transparent calc(100% - 1px), #669ece calc(100% - 1px));
  background-color: #015eae;
}
.inner {
  width: min(100%, 1000px);
	max-width: none;/* 調整 */
	padding: 0;/* 調整 */
  margin-inline: auto;
}

/* ===========================================
 * NOTE
 * ======================================== */
.noteWrap {
	padding: 0.8rem 0;
	background-color: #ffffff;
}
.noteInner {
	width: min(100%, 1150px);
	padding-inline: 1.2em;
	margin-inline: auto;
}
.noteText {
	font: 400 12px / 1.25 var(--font-family_main);
	color: #000000;
}
.noteLink {
	font: 400 12px / 1.25 var(--font-family_main);
	color: #000000;
	text-decoration: underline;
}
.noteLink:hover {
	opacity: 1;
	text-decoration: none;
}
@media screen and (max-width: 767px) {
	.noteInner {
		width: fit-content;
	}
}

/* ===========================================
 * TOP
 * ======================================== */
.topWrap {
  width: 100%;
  margin-inline: auto;
	background: top center / min(100%, 1000px) auto no-repeat url(../img/top_bg_deco.svg);
}
.topInner {
	margin-inline: auto;
}
@media screen and (max-width: 767px) {
	.topWrap {
		padding-top: calc(20 / 750 * 100vw);
		background: none;
	}
	.topInner {
		width: 100%;
		background: top center / 100% auto no-repeat url(../img/top_bg_deco_sp.svg);
	}
}
/* Kv */
/* ======================================= */
.topKv {
	display: grid;
	grid-template-columns: min(calc(510 / 1000 * 100vw), 510px) auto;
}
.topKvTitle {
	width: fit-content;
	position: relative;
	z-index: auto;
}
.topKvTitle img {
	width: 100%;
}
.topKvImg {
	width: min(calc(359 / 1000 * 100vw), 359px);
	margin-top: min(calc(50 / 1000 * 100vw), 50px);
	position: relative;
	z-index: auto;
	filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.5));
}
.topKvImg img {
	width: 100%;
}
.topKvImg::before {
	--top_kv-img-size_wh: min(calc(307 / 1000 * 100vw), 307px);
	content: "";
	width: var(--top_kv-img-size_wh);
	aspect-ratio: 1 / 1;
	margin: auto;
	background: center / var(--top_kv-img-size_wh) var(--top_kv-img-size_wh) no-repeat url(../img/top_kv-img.jpg);
	display: block;
	position: absolute;
	z-index: 1;
	inset: 0;
}
.topKvlead {
	width: 100%;
	position: relative;
	z-index: auto;
}
.topKvlead img {
	width: 100%;
}
.topKvlead::before {
	--top_kv-lead_deco-size_wh: min(calc(175 / 1000 * 100vw), 175px);
	content: "";
	width: var(--top_kv-lead_deco-size_wh);
	aspect-ratio: 1 / 1;
	background: center / var(--top_kv-lead_deco-size_wh) var(--top_kv-lead_deco-size_wh) no-repeat url(../img/top_lead_deco.png);
	position: absolute;
	z-index: 1;
	left: min(calc(164 / 1000 * 100vw), 164px);
	bottom: min(calc(15 / 1000 * 100vw), 15px);
	filter: drop-shadow(4px 4px 4px rgba(35, 24, 21, 0.75));
}
@media screen and (max-width: 767px) {
	.topKv {
		grid-template-columns: 100%;
		grid-template-rows: auto auto;
		position: relative;
		z-index: auto;
	}
	.topKv::after {
		content: "";
		width: calc(108 / 750 * 100vw);
		aspect-ratio: 1 / 1;
		background: center / calc(108 / 750 * 100vw) auto no-repeat url(../img/top_kv-img_bk_deco_sp.svg);
		position: absolute;
		z-index: 2;
		bottom: calc(-40 / 750 * 100vw);
	}
	.topKvTitle {
		width: 100%;
	}
	.topKvImg {
		width: min(calc(648 / 750 * 100vw), 648px);
		margin-inline: auto;
		margin-top: calc(7 / 750 * 100vw);
		filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.5));
	}
	.topKvImg::before {
		--top_kv-img-size_wh: calc(558 / 750 * 100vw);
	}
	.topKvlead {
		margin-top: calc(40 / 750 * 100vw);
	}
	.topKvlead::before {
		--top_kv-lead_deco-size_wh: min(calc(316 / 750 * 100vw), 316px);
		left: min(calc(236 / 750 * 100vw), 236px);
		bottom: min(calc(156 / 750 * 100vw), 156px);
		filter: drop-shadow(3px 3px 3px rgba(35, 24, 21, 0.75));
	}
}
/* Stage */
/* ======================================= */
.topStage {
	--top_stage-bk_size_w: min(calc(1440 / 1000 * 100vw), 1440px);
	--top_stage-bk_size_h: min(calc(267 / 1000 * 100vw), 267px);
	width: 100%;
	height: var(--top_stage-bk_size_h);
	background: center / var(--top_stage-bk_size_w) var(--top_stage-bk_size_h) no-repeat url(../img/top_stage.png);
}
.topStageInner {
	height: 100%;
	position: relative;
	z-index: auto;
}
.topStageCaution {
	font: 400 10px / 1.0 var(--font-family_main);
	display: block;
	position: absolute;
	z-index: auto;
	right: min(calc(150 / 1000 * 100vw), 150px);
	bottom: min(calc(15 / 1000 * 100vw), 15px);
}
@media screen and (max-width: 767px) {
	.topStage {
		--top_stage-bk_size_w: 100%;
		--top_stage-bk_size_h: calc(366 / 750 * 100vw);
		background: center / var(--top_stage-bk_size_w) var(--top_stage-bk_size_h) no-repeat url(../img/top_stage_sp.png);
	}
	.topStageCaution {
		right: 0;
		bottom: 21px;
	}
}

/* ===========================================
 * CONTENTS
 * ======================================== */
.contentsWrap {
  width: 100%;
	padding-block: 0 30px;
  margin-inline: auto;
	margin-top: -21px;
}
.contentsInner {
	background: center 85px / 1000px auto repeat-y url(../img/contents_bg.svg);
}
.contentsBox {
	margin-bottom: 20px;
}
.contentsBox:last-child {
	margin-bottom: 0;
}
.contentsTitle {
	width: fit-content;
	margin-inline: auto;
	margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
	.contentsInner {
		padding-block: 0 40px;
		padding-inline: 30px;
		background: none;
	}
}
/* Area */
/* ======================================= */
.contentsArea {
	width: min(100%, 600px);
	padding-block: 30px;
	padding-inline: 75px;
	margin-inline: auto;
	border: 2px solid #000000;
	border-radius: 15px;
	background-position: center center;
	background-size: 12px 12px;
	background-repeat: repeat;
	background-image: linear-gradient(0deg, transparent calc(100% - 1px), rgba(0, 0, 0, 0.1) calc(100% - 1px)),linear-gradient(90deg, transparent calc(100% - 1px), rgba(0, 0, 0, 0.1) calc(100% - 1px));
	background-color: #ffffff;
	filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.3));
	position: relative;
	z-index: auto;
}
.contentsArea::before {
	content: "";
	width: 100%;
	height: 30px;
	margin-inline: auto;
	background: top center / 100% 30px no-repeat url(../img/contents_area_deco.svg);
	position: absolute;
	z-index: 1;
	top: -6px;
	right: 0;
	left: 0;
}
@media screen and (max-width: 767px) {
	.contentsArea {
		padding-block: 30px 15px;
		padding-inline: 10px;
		border: 1.5px solid #000000;
	}
	.contentsArea::before {
		width: calc(100% - 30px);
		background: top center / 600px 30px no-repeat url(../img/contents_area_deco.svg);
		top: -6px;
	}
}
/* Group */
/* ======================================= */
.contentsGroupTitle {
	width: min(100%, 100px);
	height: 20px;
	padding-inline: 1.5em;
	margin-inline: auto;
	margin-bottom: 15px;
	font: 500 13px / 20px var(--font-family_main);
	letter-spacing: 0.1em;
	color: #ffffff;
	border-radius: 9999px;
	background-color: #727171;
	display: flex;
	align-items: center;
	justify-content: center;
}
.contentsGroupTitle > span {
	display: block;
}
.contentsGroup {
	margin-bottom: 15px;
}
.contentsGroup:last-of-type {
	margin-bottom: 0;
}
.contentsCaution {
	padding-left: 1em;
	text-indent: -1em;
	font: 400 10px / 1.5 var(--font-family_main);
}
/* 応募期間 */
/* ======================================= */
/* #contentsBoxPeriod {} */
#contentsBoxPeriod .contentsTitle {
	position: relative;
	z-index: auto;
}
#contentsBoxPeriod .contentsTitle:after {
	--contents_preiod-titile_deco_size_wh: 46px;
	content: "";
	width: var(--contents_preiod-titile_deco_size_wh);
	aspect-ratio: 1 / 1;
	background: url(../img/contents_period_title_deco.svg);
	position: absolute;
	z-index: auto;
	right: -55px;
	bottom: -15px;
}
@media screen and (max-width: 767px) {
	#contentsBoxPeriod .contentsTitle:after {
		right: -50px;
		bottom: -35px;
	}
}
/* 対象商品＆賞品 */
/* ======================================= */
#contentsBoxPrize .contentsEmph {
	width: fit-content;
	margin-inline: auto;
	margin-bottom: 15px;
	display: block;
}
.productListContainer {
	margin-bottom: 15px;
	display: grid;
	align-items: flex-start;
	justify-content: space-between;
	grid-template-columns: repeat(5, auto);
}
.productListContainer:last-of-type {
	margin-bottom: 0;
	grid-template-columns: repeat(2, auto);
	justify-content: center;
	column-gap: 15px;
}
@media screen and (max-width: 767px) {
	.productListContainer {
		width: min(100%, 280px);
		margin-inline: auto;
		margin-bottom: 15px;
		justify-content: space-between;
		grid-template-columns: repeat(6, 1fr);
		grid-template-rows: auto auto;
		justify-content: center;
		gap: 10px;
	}
}
.productList {
	/* width: 80px; */
}
.productPkg {
	margin-inline: auto;
}
.productSizeNomal .productPkg {
	width: 66px;
}
.productSizeLarge .productPkg {
	width: 85px;
}
.productName {
	margin-top: 0.5em;
	text-align: center;
	font: 400 12px / 1.25 var(--font-family_main);
}
.productCaution {
	padding-left: 1em;
	margin-top: 1.5em;
	text-indent: -1em;
	font: 400 10px / 1.25 var(--font-family_main);
	
}
.prizeItemBox {
	/* background: 270px 43px / 120px auto no-repeat url(../img/contents_prize_item_bg.png); */
	display: grid;
	grid-template-columns: 230px auto;
	gap: 15px;
}
@media screen and (max-width: 767px) {
	.prizeItemBox {
		width: min(100%, 280px);
		grid-template-columns: auto auto;
		margin-inline: auto;
	}
}
.prizeImgCcontainer {
	width: min(100%, 120px);
}
.prizeImg {
	width: auto;
	aspect-ratio: 120 / 175;
	background: top left / 145px auto no-repeat url(../img/contents_prize_item_bg.png);
	display: flex;
	align-items: flex-end;
}
@media screen and (max-width: 767px) {
	.prizeImg {
		background: top left / min(100%, 120px) auto no-repeat url(../img/contents_prize_item_bg.png);
		display: flex;
		align-items: flex-end;
	}
}
/* .prizeItemContainer {} */
.prizeItem {
	width: fit-content;
	margin-left: auto;
	display: block;
}
@media screen and (max-width: 767px) {
	.prizeItem {
		width: min(100%, 186px);
		margin-left: -25px;
	}
}
.prizeSpec {
	text-align: right;
	font: 400 10px / 1.5 var(--font-family_main);
}
.prizeSpecCaution {
	width: auto;
	margin-top: 0.25em;
	text-align: right;
	font: 400 10px / 1.5 var(--font-family_main);
}
@media screen and (max-width: 767px) {
	.prizeSpecCaution {
		width: auto;
	}
}
@media screen and (max-width: 767px) {
	#productList03 {
		grid-column: 1 / 3;
		grid-row: 2 / 3;
	}
	#productList04 {
		grid-column: 3 / 5;
		grid-row: 2 / 3;
	}
	#productList05 {
		grid-column: 5 / 7;
		grid-row: 2 / 3;
	}
	#productList01 {
		grid-column: 2 / 4;
		grid-row: 1 / 2;
	}
	#productList02 {
		grid-column: 4 / 6;
		grid-row: 1 / 2;
	}
}
/* 応募規約 */
/* ======================================= */
.contentsTerms {
	width: min(100%, 600px);
	height: 215px;
	padding: 15px 30px;
	margin-inline: auto;
	border: 2px solid #000000;
	background-color: #ffffff;
	overflow-y: scroll;
	display: grid;
	gap: 1em;
}
.termsTitle {
	width: fit-content;
	margin-inline: auto;
	margin-bottom: 0.5em;
	text-align: center;
	font: 500 14px / 1.5 var(--font-family_main);
	display: block;
}
.termsText {
	font: 400 10px / 1.5 var(--font-family_main);
}
.termsListTitle {
	font: 400 10px / 1.5 var(--font-family_main);
}
.termsList {
	font: 400 10px / 1.5 var(--font-family_main);
}
.termsListCaution {
	font: 400 10px / 1.5 var(--font-family_main);
}
/* Process */
/* ======================================= */
/* ≈.contentsProcessInner {
	width: 507px;
	height: 333px;
	padding: 25px;
	margin-inline: auto;
	background: center / 507px 333px no-repeat url(../img/contents_process_list_container-bg.svg);
} */
.contentsProcessInner {
	width: 100%;
	padding: 25px;
	margin-inline: auto;
	border: 2px solid #000000;
	background-color: #ffffff;
}
@media screen and (max-width: 767px) {
	.contentsProcessInner {
		padding-inline: 15px;
	}
}
.processDwonLaod {
	margin-bottom: 20px;
	display: grid;
	grid-template-columns: 254px auto;
	align-items: center;
}
@media screen and (max-width: 767px) {
	.processDwonLaod {
		grid-template-columns: auto;
		grid-template-rows: auto auto;
		align-items: center;
		gap: 20px;
	}
}
.processBtn {
	width: fit-content;
	margin-inline: auto;
	display: block;
}
.processListContainer {
	display: grid;
	gap: 20px;
}
.processListText {
	font: 600 14px / 1.25 var(--font-family_main);
	display: grid;
	grid-template-columns: 22px auto;
	align-items: center;
	gap: 0.5em;
}
.processListNumber {
	width: 22px;
	aspect-ratio: 1 / 1;
	display: block;
}
.processListBtn {
	width: fit-content;
	padding-left: calc(22px + 0.5em);
	margin-top: 1em;
	display: block;
}
#contentsBoxProcess .contentsArea {
	padding-top: 45px;
	padding-inline: 45px;
}
@media screen and (max-width: 767px) {
	#contentsBoxProcess .contentsArea {
		padding-top: 45px;
		padding-inline: 15px;
	}
}
.contentsCautionContainerd {
	margin-top: 1em;
}

/* Question */
/* ======================================= */
.contentsQuestion {
	width: min(100%, 400px);
	padding: 40px 40px 20px 40px;
	margin-inline: auto;
	border-radius: 10px;
	background-color: #fffcdb;
	display: grid;
	gap: 15px;
}
@media screen and (max-width: 767px) {
	.contentsQuestion {
		padding: 40px 15px 30px 15px;
	}
}
.questionListTitle {
	font: 600 15px / 1.5 var(--font-family_main);
}
.questionListText {
	font: 300 14px / 26.5px var(--font-family_main);
	background: center 3px / auto 26.5px repeat-y url(../img/contents_question_list_text-line_nomal.svg);
}
.questionListText::before,
.questionListText::after {
	content: "";
	width: 100%;
	height: 3px;
	background: 0 100% / auto 3px repeat-x url(../img/contents_question_list_text-line_bold.svg);
}
.questionListText::after {
	margin-top: -3px;
}
.questionListTextLine {
	
	display: inline;
}
#contentsQuestion .contentsTitle {
	margin-bottom: -21px;
}

/* ===========================================
 * RECIPE
 * ======================================== */
.recipeWrap {
	padding-block: 30px 60px;
	padding-inline: 30px;
	background-color: #eb6100;
}
/* .recipeInner {} */
.recipeTitle {
	margin-bottom: 15px;
}
.recipeLeadtext {
	margin-bottom: 15px;
	text-align: center;
	font: 400 15px / 1.5 var(--font-family_main);
	color: #ffffff;
}
@media screen and (max-width: 767px) {
	.recipeWrap {
		padding-block: 15px 40px;
	}
}
/* Box */
/* ======================================= */
.recipeBox {
	width: min(100%, 600px);
	padding-block: 30px 60px;
	margin-inline: auto;
	background-color: #fcf3e3;
	position: relative;
	z-index: auto;
}
.recipeBoxDecoTop, .recipeBoxDecoBottom {
	width: 100%;
	padding: 15px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: absolute;
	z-index: 1;
}
.recipeBoxDecoTop {	
	top: 0;
}
.recipeBoxDecoBottom { 
	bottom: 0;
}
.recipeBoxDecoTop::before,
.recipeBoxDecoTop::after,
.recipeBoxDecoBottom::before,
.recipeBoxDecoBottom::after {
	--recipe_howto_deco_size_wh: 16px;
	content: "";
	width: var(--recipe_howto_deco_size_wh);
	height: var(--recipe_howto_deco_size_wh);
	border-radius: 9999px;
	background-color: #fed200;
	display: block;
}
.recipeBoxInner {
	width: min(100%, 450px);
	margin-inline: auto;
	display: grid;
	row-gap: 40px;
}
@media screen and (max-width: 767px) {
	.recipeBox {
		padding-block: 15px 30px;
	}
	.recipeBoxDecoTop, .recipeBoxDecoBottom {
		padding: 7px 9px;
	}
	.recipeBoxDecoTop::before,
	.recipeBoxDecoTop::after,
	.recipeBoxDecoBottom::before,
	.recipeBoxDecoBottom::after {
		--recipe_howto_deco_size_wh: 9px;
	}
	.recipeBoxInner {
		width: calc(100% - 60px);
		row-gap: 25px;
	}
}
/* Howto */
/* ======================================= */
.recipeHowtoEmph {
	margin-bottom: 30px;
	text-align: center;
	font: 600 27px / 1.5 var(--font-family_main);
	color: #eb6100;
}
@media screen and (max-width: 767px) {
	.recipeHowtoEmph {
		margin-bottom: 15px;
		font: 600 25px / 1.5 var(--font-family_main);
	}
}
.howtoListContainer {
	display: grid;
	gap: 25px;
}
.howtoList {
	display: grid;
	grid-template-columns: 150px auto;
	gap: 12px;
	position: relative;
	z-index: auto;
}
.howtoList:after {
	content: "";
	width: 34px;
	height: 15px;
	margin-inline: auto;
	background-color: #eb6100;
	clip-path: polygon(50% 100%, 0 0, 100% 0);
	display: block;
	position: absolute;
	z-index: auto;
	right: 0;
	left: 0;
	bottom: -25px;
}
.howtoList:last-of-type {
	align-items: center;
}
.howtoList:last-of-type:after {
	display: none;
}
.howtoListInner {
	padding-top: 15px;
}
.howtoImg {
	width: 150px;
	margin-inline: auto;
}
.howtoTitle {
	width: fit-content;
	margin-bottom: 0.5em;
	font: 600 18px / 1.25 var(--font-family_main);
	color: #eb6100;
}
.howtoText {
	font: 400 14px / 1.25 var(--font-family_main);
	color: #595757;
}
.howtoCaution {
	margin-top: 0.5em;
	padding-left: 1em;
	text-indent: -1em;
	font: 400 11px / 1.25 var(--font-family_main);
	color: #595757;
}
.howtoComplete {
	width: fit-content;
	margin-inline: auto;
	font: 600 21px / 1.5 var(--font-family_main);
	color: #eb6100;
	display: flex;
	align-items: center;
	justify-content: center;
}
.howtoComplete::before, .howtoComplete::after {
	content: "";
	width: 4px;
	height: 1.5em;
	margin: 0.5em;
	border-radius: 9999px;
	background-color: #eb6100;
}
.howtoComplete::before {
	transform: rotate(-30deg);
}
.howtoComplete::after {
	transform: rotate(30deg);
}
@media screen and (max-width: 767px) {
	.howtoListContainer {
		gap: 45px;
	}
	.howtoList {
		grid-template-columns: 100%;
		justify-content: center;
		gap: 12px;
	}
	.howtoListInner {
		padding-top: 0;
	}
	.howtoTitle {
		text-align: center;
		margin-inline: auto;
	}
	.howtoCaution {
		margin-top: 0;
		padding-left: 0;
		text-indent: 0;
		font: 400 14px / 1.25 var(--font-family_main);
	}
	.howtoComplete {
		font: 600 18px / 1.5 var(--font-family_main);
	}
	.howtoComplete::before, .howtoComplete::after {
		width: 3px;
	}
}
/* Explain */
/* ======================================= */
.recipeExplain {
	padding: 20px 30px;
	border: 4px dotted #eb6100;
}
.explainImgContainer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 30px;
}
.explainCaution {
	margin-top: 1em;
	font: 400 13px / 1.25 var(--font-family_main);
	color: #595757;
}
.recipYoutubeContainer {
	--recipe_yt_ctn_size_w: 318px;
	--recipe_yt_ctn_size_y: 219px;
	width: min(100%, 318px);
	aspect-ratio: 318 / 219;
	margin-inline: auto;
	margin-bottom: 20px;
	background: center /  min(100%, 318px) auto no-repeat url(../img/recipe_movie_bg.svg);
	display: flex;
	align-items: center;
	justify-content: center;
}
.recipYoutube {
	--recipe_yt_size_w: 255px;
	--recipe_yt_size_h: 158px;
	width: 80.188%;
	aspect-ratio: 255 / 158;
}
@media screen and (max-width: 767px) {
	.recipeExplain {
		padding: 10px;
	}
	.explainImgContainer {
		gap: 10px;
	}
	.explainCaution {
		font: 400 11px / 1.25 var(--font-family_main);
	}
	.recipYoutubeContainer {
		margin-bottom: 15px;
	}
}

/* ===========================================
 * PRINT
 * ======================================== */
@media print {
	.no-print {
		background: none;
	}
	.no-print::before {
		background: none;
	}
}