@charset "UTF-8";

/* ===============================
	変数定義
=============================== */
:root {
	--color-red: #C7000B;
	--gb-pink: #FBF4F4;
	--color-light-gray: #d9d9d9;
	--color-gray: #959595;
	--margin-large: 6rem;
	--margin-medium: 4rem;
	--margin-small: 2rem;
}

/* ===============================
	共通スタイル
=============================== */

#breadcrumb {
	position: relative;
	z-index: 5;
}

.red-text {
	color: #C7000B;
	font-weight: bold;
}

.sp-mv-top-link-box {
	display: none;
}

/* マージン */
.mts {
	margin-top: var(--margin-small);
}

.mtm {
	margin-top: var(--margin-medium)
}

.mtl {
	margin-top: var(--margin-large);
}

.mt1em {
	margin-top: 1em;
}

/* フレックスコンテナ */
.flex-container {
	display: flex;
	flex-wrap: wrap;
}

.flex-item {
	inline-size: 100%;
}

/* MV */


.mv-width {
	max-width: 1400px;
}

.sp-mv-container {
	display: none;
}

.mv-container {
	display: block;
	position: relative;
	background-image: url(images/mainvisual.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	inline-size: 100%;
	block-size: 53rem;
}

.mv-title {
	padding-top: 3rem;
	font-size: 2rem;
	text-align: center;
}

.mv-text-img {
	max-inline-size: 73rem;
	margin-inline: auto;
	margin-top: 2rem;
}

.mv-top-link-box {
	position: absolute;
	inline-size: 190px;
	block-size: 190px;
	top: 2rem;
	left: 7%;
}

.logo,
.maru {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.logo {
	inline-size: 130px;
	z-index: 2;
}

.application-period-box {
	inline-size: 630px;
	text-align: center;
	margin-inline: auto;
	margin-top: 2rem;
}

.application-period {
	padding-block: .5rem;
	font-size: 2rem;
	color: #fff;
	font-weight: bold;
	background-color: #E6000D;
	border-radius: 10px 10px 0 0;
}

.application-period-date {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-block: 1rem;
	font-size: 2.4rem;
	font-weight: bold;
	background-color: #fff;
	border-radius: 0 0 10px 10px;
}

/* キャンペーン */
.campaign {
	padding-block: 6rem 8rem;
}

.campaign-text {
	font-size: 2.2rem;
	text-align: center;
	font-weight: 500;
	line-height: 2;
}

.campaign-text em,
.campaign-subtext em {
	color: var(--color-red);
}

.campaign-subtext {
	margin-top: 4rem;
	font-size: 2.2rem;
	text-align: center;
	font-weight: 500;
	line-height: 1.6;
}

.campaign-subtext em>span {
	font-size: 3.2rem;
}

.hotcook-list-container {
	margin-top: 2rem;
}

.hotcook-list-text {
	text-align: center;
	font-weight: 500;
}

.hotcook-product-list {
	margin-top: 2rem;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 4rem;
}

.hotcook-product-list li {
	inline-size: calc((100% - 400px) /4);
	text-align: center;
	font-weight: bold;
}

.hotcook-product-list-text {
	margin-top: .5em;
	text-align: center;
	font-weight: bold;
}

.line {
	margin-inline: auto;
	max-inline-size: 83rem;
}


/* 投稿 */
.post {
	padding-block: 12rem 15rem;
	background-color: var(--gb-pink);
}

.post-relay-img {
	inline-size: 70%;
	margin: 6rem auto 0;
}



/* 投稿(サンプル) */
.sample {
	margin-top: 10rem;
}

.sample-title,
.sns-title,
.post-title {
	inline-size: 49%;
	margin-inline: auto;
}


.guideline-title {
	text-align: center;
	font-weight: bold;
	font-size: 2.4rem;
	color: var(--color-red);
}

.post-sample-container {
	margin-top: 10rem;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 4rem 9rem;
}


.post-sample-list {
	inline-size: 42%;
}

.post-sample-list li:nth-of-type(n+2) {
	margin-top: 4rem;
}


.post-sample-list-title {
	display: flex;
	align-items: center;
	column-gap: .5em;
	font-size: 2.4rem;
	font-weight: bold;
	color: var(--color-red);
}

.post-sample-list-title img {
	inline-size: 3rem;
}

.post-sample-list-text {
	margin-top: 1rem;
	font-size: 1.8rem;
	font-weight: 400;
	line-height: 1.8;
}



.post-img {
	max-inline-size: 47rem;
}

/* 投稿（SNS） */

.sns {
	margin-top: 14rem;
}

.sns-container {
	margin-top: 10rem;
}

.sns-box:nth-of-type(n+2) {
	margin-top: 4rem;
}

.sns-subtitle {
	display: flex;
	justify-content: center;
	align-items: center;
	column-gap: 2rem;
}

.sns-subtitle span {
	inline-size: 30rem;
	font-size: 1.8rem;
	color: var(--color-red);
	font-weight: bold;
	line-height: 1.8;
	border-bottom: 3px solid #C7000B;
	text-align: center;
}

.sns-subtitle img {
	inline-size: 5rem;
}

.sns-text {
	margin-top: 1.8rem;
	text-align: center;
	font-weight: 400;
}

.sns-rule-list {
	margin-top: 7rem;
	inline-size: fit-content;
	margin-inline: auto;
}

.sns-rule-text {
	font-weight: 400;
	line-height: 1.8;
}


/* 募集規約 */

.guideline {
	position: relative;
	padding-block: 9rem 15rem;
}

.baton-icon {
	position: absolute;
	top: 0;
	left: 50%;
	inline-size: 15rem;
	transform: translate(-50%, -50%);
}

.guideline-title {
	position: relative;
	padding-bottom: 1.5rem;
}

.guideline-title::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	display: block;
	inline-size: 50px;
	block-size: 5px;
	background-color: #C7000B;
}

.guideline-container {
	padding: 2rem 5rem;
	margin-top: 5rem;
	margin-inline: auto;
	max-inline-size: 1100px;
	block-size: 50vh;
	overflow-y: scroll;
	border: 1px solid #D9D9D9;
	border-radius: 10px;
}

.guideline-container-title {
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.4;
}

.guideline-box-title {
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.4;
}

.guideline-box {
	margin-top: 1.5em;
}

.guideline-list {
	margin-top: 1em;
}

.guideline-text {
	line-height: 1.4;
	font-weight: 400;
}

.guideline-caption-text {
	margin-top: 1em;
	font-weight: 400;
}


/* ====================================
	スマートフォン専用スタイル（～768px）
===================================== */
@media screen and (width <768px) {

	.sample-title,
	.sns-title,
	.post-title {
		inline-size: 90%;
	}

	/* MV */
	.mv {
		padding-block: 5rem 3rem;
		background-color: var(--gb-pink);
	}

	.mv-width {
		padding-inline: 0;
	}

	.mv-container {
		display: none;
	}

	.mv-top-link-box,
	.mv-title {
		display: none;
	}

	.mv-title {
		padding-top: 1rem;
		font-size: 1.6rem;
	}

	.logo {
		inline-size: 6rem;
	}

	.mv-text-img {
		inline-size: 33rem;

	}

	.application-period-box {
		inline-size: 90%;
		margin-top: 1rem;
	}

	.application-period-date {
		padding-block: 1rem;
		font-size: 1.6rem;
		font-weight: bold;
	}

	.application-period {
		padding-block: .5rem;
		font-size: 1.6rem;
		color: #fff;
		font-weight: bold;
	}

	.application-period-date {
		display: flex;
		flex-wrap: wrap;
		padding-inline: 1rem;
	}

	/* MV(SP時) */

	.sp-mv-container {
		display: block;
	}

	.sp-mv-top-link-box {
		display: flex;
		justify-content: center;
		align-items: center;
		column-gap: 1rem;
		margin-bottom: 3rem;
	}

	.sp-logo {
		display: block;
	}

	.sp-logo-link {
		position: relative;
		inline-size: 10rem;
	}

	.sp-logo {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		inline-size: 6rem;
		z-index: 2;
	}

	.sp-maru {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		inline-size: 10rem;
	}

	.sp-mv-text-img {
		position: relative;
		z-index: 2;
		display: block;
		inline-size: 90%;
		margin-inline: auto;
		margin-bottom: -6rem;
	}

	.sp-mv-title {
		font-size: 1.4rem;
		font-weight: bold;
	}

	/* キャンペーン */

	.campaign {
		padding-block: 4rem 6rem;
	}

	.campaign-text {
		text-align: left;
		font-size: 1.6rem;
	}

	.campaign-subtext {
		margin-top: 4rem;
		font-size: 1.6rem;
	}

	.campaign-subtext em,
	.campaign-subtext em>span {
		font-size: 1.8rem;
	}

	.hotcook-list-text {
		font-size: 1.4rem;
	}

	.hotcook-product-list li {
		inline-size: 40%;
		text-align: center;
		font-weight: bold;
	}


	/* 投稿(サンプル) */

	.sample {
		margin-top: 5rem;
	}

	.post-sample-container {
		margin-top: 5rem;
		flex-direction: column;
		align-items: center;
	}

	.post-sample-list-title {
		font-size: 1.6rem;
	}

	.post-sample-list-text {
		font-size: 1.4rem;
	}

	.post-img {
		max-inline-size: 100%;
	}

	.post-sample-list {
		inline-size: 100%;
	}

	.post-sample-list li:nth-of-type(n+2) {
		margin-top: 2rem;
	}

	/* 投稿 */

	.post-relay-img {
		inline-size: 100%;
	}

	/* 投稿 */
	.post {
		padding-block: 7rem;
	}

	/* 投稿（SNS） */
	.sns {
		margin-top: 5rem;
	}

	.sns-container {
		margin-top: 5rem;
	}

	.sns-subtitle span {
		inline-size: 30rem;
		font-size: 1.6rem;
	}

	.sns-text {
		font-size: 1.4rem;
	}

	.sns-rule-list {
		margin-top: 4rem;
	}

	.sns-rule-text {
		font-size: 1.4rem;
	}

	/* 募集規定 */

	.guideline {
		padding-block: 6rem;
	}

	.guideline-container {
		padding: 2rem;
	}

	.guideline-text {
		font-size: 1.4rem;
	}
}

/* ====================================
	TAB、PC、印刷専用スタイル（768px～）
===================================== */
@media print,
screen and (width >=768px) {
	:root {
		--margin-large: 8rem;
		--margin-medium: 6rem;
		--margin-small: 4rem;
	}
}

/* ====================================
	タブレット専用スタイル（768px～1079px）
===================================== */
@media screen and (768px <=width < 1080px) {

	/* MV */

	.mv-container {
		block-size: 43rem;
	}

	.mv-top-link-box {
		inline-size: 130px;
		block-size: 130px;
		left: 4%;
	}



	.mv-title {
		font-size: 1.8rem;
	}

	.logo {
		inline-size: 80px;
	}

	.mv-text-img {
		inline-size: 50rem;

	}

	/* 投稿(サンプル) */

	.post-sample-container {
		flex-direction: column;
		align-items: center;
	}

	.post-img {
		max-inline-size: 53rem;
	}

	.post-sample-list {
		inline-size: 70%;
	}


}

/* ====================================
	PC専用スタイル（1080px～）
===================================== */
@media print,
screen and (1080px <=width) {}