@charset "UTF-8";

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

.main-text {
	font-weight: 400;
}

.main-text em {
	font-size: 1.2em;
	font-weight: 700;
	color: #942d3a;
}

.column-container .ttl em {
	font-weight: 700;
	color: #942d3a;
}

/* メインビジュアル */
#mainVisual .no {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	text-align: center;
}

#mainVisual .lead {
	color: #808080;
}

/* 動画でチェック */
.line-check {
	position: relative;
	padding: 60px 0;
}

.line-check::after {
	content: '';
	width: 120px;
	padding-top: 120px;
	background: url(../images/icon-movie.png) no-repeat left top;
	background-size: contain;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
}

.line-red {
	border-top: solid 3px #942d3a;
}

/* サブセクション */
.sub-section {
	border-bottom: solid 3px #942d3a;
}

.sub-title {
	padding: .5em;
	background: #D9D9D9;
	border-radius: 1rem;
	text-align: center;
}

/* 活躍するのはこの機能 */
.column-container {
	border: solid 1px #942d3a;
	border-radius: 3rem;
	position: relative;
}

.column-title {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #942d3a;
	border-radius: 3rem;
	color: #fff;
}

.ttl-gray {
	margin-bottom: 1em;
	padding: .2em;
	background: #A0A0A0;
	color: #fff;
	border-radius: 1rem;
	text-align: center;
}

/* 他の料理をチェック */
#others {
	background: #F5F5F5;
}

.others-title {
	text-align: center;
}

.other-links-outer {
	position: relative;
}

.other-links-container {
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	list-style: none;
	padding: 0;
	z-index: 1
}

.other-links-container a {
	text-decoration: none;
}

.other-links-button-next,
.other-links-button-prev {
	position: absolute;
	top: 50%;
	width: 8%;
	height: 120px;
	margin-top: -60px;
	z-index: 2;
	cursor: pointer;
	background-size: 80% auto;
	background-position: center;
	background-repeat: no-repeat;
}

.other-links-button-prev {
	background-image: url(/products/common/images/chevron-left-solid.svg);
	left: 0;
	right: auto
}

.other-links-button-next {
	background-image: url(/products/common/images/chevron-right-solid.svg);
	right: 0;
	left: auto
}

/* カルーセル破棄時スタイル */
.other-links-outer.destroy {
	display: flex;
}

.other-links-outer.destroy .other-links-button-next,
.other-links-outer.destroy .other-links-button-prev {
	display: none;
}

.other-links-container .swiper-slide {
	padding: 6px;
}

.other-links-container .swiper-slide a {
	display: block;
	box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .3);
}

.other-links-container .inner {
	display: flex;
	align-items: center;
	padding: 0 5%;
	background: #fff;
	position: relative;
}

.other-links-container .no {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	text-align: center;
}

/* ====================================
	1023px以下専用スタイル
===================================== */
@media only screen and (max-width: 1023px) {

	/* TOPリンク */
	#naviTop {
		padding: 0 0 2rem;
	}

	#naviTop a {
		display: block;
		width: 180px;
		margin: 0 auto;
	}

	/* メインビジュアル */
	#mainVisual {
		padding: 2rem 0 2rem;
	}

	#mainVisual .no {
		width: 100px;
		height: 24px;
		font-size: 1.4rem;
	}

	.mv-img {
		margin-top: 2rem;
	}

	#mainVisual .lead {
		margin-top: 2rem;
		font-size: 1.6rem;
	}

	#mainVisual .ttl {
		margin-top: .5em;
		font-size: 2.2rem;
	}

	/* メインセクション */
	.main-section {
		padding: 3rem 0;
	}

	.main-text {
		font-size: 1.6rem;
		line-height: 1.6;
	}

	/* 動画でチェック */
	.line-check {
		margin: 0 0 3rem;
	}

	/* サブセクション */
	.sub-section {
		padding: 0 0 6rem;
	}

	.sub-title {
		margin: 0 0 3rem;
		font-size: 1.6rem;
	}

	/* 活躍するのはこの機能 */
	.column-container {
		margin: 8rem 0 0;
		padding: 3rem 5% 5%;
		font-size: 1.4rem;
		line-height: 1.8;
	}

	.column-title {
		width: 180px;
		height: 30px;
		font-size: 1.4rem;
		position: absolute;
		top: -15px;
		left: 5%;
	}

	.column-container .flex-item:last-child {
		margin-top: 2rem;
		padding: 0 5%;
	}

	.flex-container.anime2 .flex-item {
		padding: 0 5%;
	}

	.flex-container.anime2 .ttl {
		margin-top: .5em;
		font-size: 1.4rem;
		line-height: 1.4;
	}

	.column-container .ttl {
		margin: 0 0 .5em;
		font-size: 1.5em;
		line-height: 1.4;
	}

	.column-container .img.gamen {
		padding: 0 10% 2rem;
	}

	/* 他の料理をチェック */
	#others {
		padding: 3rem 0;
	}

	#others .base-width {
		padding: 0 0;
	}

	#others .btn-arrow {
		width: 200px;
		font-size: 1.4rem;
	}

	#others .btn-arrow a {
		padding: .5em 1em;
	}

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

	#otherLinks {
		margin-top: 3rem;
	}

	#otherLinks .other-links-outer {
		padding: 0 8%;
	}

	.other-links-outer.destroy .swiper-slide {
		width: 46%;
	}
	.other-links-container .img {
		padding: 2rem 0;
	}

	.other-links-container .inner {
		height: 110px;
	}

	.other-links-container .ttl {
		font-size: 1.6rem;
	}

	.other-links-container .no {
		width: 9em;
		height: 1.8em;
		font-size: 1.5rem;
		position: absolute;
		top: -1em;
		left: 5%;
	}
}


/* ====================================
	568px以上1023px以下専用スタイル
===================================== */
@media only screen and (min-width: 568px) and (max-width: 1023px) {

	#otherLinks,
	.line-check,
	.main-text,
	.mv-inner,
	.mv-img {
		max-width: 768px;
		margin-left: auto;
		margin-right: auto;
	}


}

/* ====================================
	567px以下専用スタイル
===================================== */
@media only screen and (max-width: 567px) {

	/* 動画でチェック */
	.line-check {
		padding: 15% 0;
	}

	.line-check::after {
		width: 30%;
		padding-top: 30%;
	}

	.other-links-container .img {
		padding: 2vw 0;
	}

	.other-links-container .inner {
		height: 20vw;
	}

	.other-links-container .ttl {
		font-size: 3.2vw;
	}

	.other-links-container .no {
		width: 20vw;
		height: 3.8vw;
		font-size: 2.6vw;
		position: absolute;
		top: -1.6vw;
		left: 5%;
	}
}

/* ====================================
	1024px以上印刷専用スタイル
===================================== */
@media print,
screen and (min-width: 1024px) {

	/* TOPリンク */
	#naviTop {
		padding: 2.5rem 0 0;
	}

	#naviTop a {
		display: block;
		width: 250px;
		margin: 0 auto;
	}

	/* メインビジュアル */
	#mainVisual .base-width {
		display: flex;
		justify-content: space-between;
	}

	.mv-inner {
		width: 40%;
		padding: 7rem 0 0;
	}

	.mv-img {
		width: 58%;
		padding: 3rem 0;
	}

	#mainVisual .no {
		width: 140px;
		height: 30px;
	}

	#mainVisual .lead {
		margin-top: 5rem;
		font-size: 2rem;
	}

	#mainVisual .ttl {
		margin-top: 2rem;
		font-size: 3.4rem;
	}

	/* メインセクション */
	.main-section {
		padding: 8rem 0;
	}

	.main-text {
		font-size: 1.8rem;
		line-height: 2;
	}

	/* 動画でチェック */
	.line-check {
		margin: 0 0 6rem;
		padding: 75px 0;
	}

	.line-check::after {
		width: 150px;
		padding-top: 150px;
	}

	/* サブセクション */
	.sub-section {
		padding: 0 0 12rem;
	}

	.sub-title {
		margin: 0 0 6rem;
		font-size: 2.2rem;
	}

	/* 活躍するのはこの機能 */
	.column-container {
		margin: 8rem 0 0;
		padding: 6rem 5rem 5rem;
		line-height: 1.8;
	}

	.column-title {
		width: 220px;
		height: 40px;
		position: absolute;
		top: -15px;
		left: 4rem;
	}

	.column-container .flex-container {
		justify-content: space-between;
	}

	.column-container .flex-item {
		width: 60%;
	}

	.column-container .flex-item:last-child {
		width: 32%;
	}

	.flex-container.img-small .flex-item {
		width: 72%;
	}

	.flex-container.img-small .flex-item:last-child {
		width: 22%;
	}

	.flex-container.anime2 {
		width: 640px;
	}

	.flex-container.anime2 .flex-item {
		width: 44%;
	}

	.flex-container.anime2 .flex-item:last-child {
		width: 44%;
	}

	.ttl-gray {
		font-size: 1.8rem;
	}

	.flex-container.anime2 .ttl {
		margin-top: .5em;
		font-size: 1.4rem;
		line-height: 1.4;
	}

	.column-container .sub-ttl {
		font-size: 1.6rem;
	}

	.column-container .ttl {
		margin: 0 0 .5em;
		font-size: 2rem;
	}

	/* 他の料理をチェック */
	#others {
		padding: 6rem 0;
	}

	#others .btn-arrow {
		width: 300px;
	}

	.others-title {
		font-size: 2.8rem;
	}

	#otherLinks {
		margin-top: 6rem;
	}

	.other-links-outer {
		padding: 0 60px;
	}

	.other-links-button-next,
	.other-links-button-prev {
		position: absolute;
		top: 0;
		width: 60px;
		height: 100%;
		margin-top: 0;
		background-size: 40% auto;
	}

	.other-links-container .inner {
		height: 120px;
	}

	.other-links-container .no {
		width: 140px;
		height: 30px;
		position: absolute;
		top: -15px;
		left: 5%;
	}


	/* カルーセル破棄時スタイル */
	.other-links-outer.destroy {
		padding: 0 0;
	}

}

/* ====================================
	1024px以上1199px以下専用スタイル
===================================== */
@media print,
screen and (min-width: 1024px) and (max-width: 1199px) {}

/* ====================================
	1200px以上専用スタイル
===================================== */
@media screen and (min-width: 1200px) {}