@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;900&display=swap');

* {
    min-height: 0vw;
}

body,
header,
nav,
h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dt,
dd,
ol,
ul,
li,
blockquote,
form,
table,
input,
div,
figure,
figcaption,
a,
span,
img,
th,
td,
section {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6,
th,
td {
	font-size: 100%;
}
ol, ul {
	list-style: none;
}

.display-none {
	display: none !important;
}

@media screen and (max-width: 640px) {
	#cacaoice .pc_only {
		display: none !important;
	}
}
@media screen and (min-width:641px) {
	#cacaoice .sp_only {
		display: none !important;
	}
}

.l-main {
	margin: 0;
}

#cacaoice {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", sans-serif;
	font-size: 16px;
	color: #000;
	text-align: center;
	position: relative;
}

#cacaoice .flex {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	position: relative;
	align-items: center;
}

.bc-player-SyoFMThw_default {
	background-color: #145849 !important;
}
img {
	max-width: 100%;
	height: auto;
}

.recipe_wrap a img {
    transition: all 0.4s;
}
.recipe_wrap a:hover img {
    opacity: 0.8;
}


@media screen and (min-width: 1024px) {
	.sub_wrap .wrapper h3 img {
		pointer-events: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		user-select: none;
	}

	#cacaoice .mv {
		width: 100vw;
		height: 650px;
		background-color: #145849;
	}

	#cacaoice .mv > .wrapper {
		position: relative;
		background-image: url(../img/bg_mv.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		max-width: 2500px;
		width: 100%;
		height: 100%;
		margin: 0 auto;
	}

	#cacaoice .mv > .wrapper h1 {
		position: absolute;
		top: calc(50% - 215px);
		right: calc(26% - 381.5px);
	}
	#cacaoice .mv > .wrapper .copy {
		position: absolute;
		top: 58px;
		left: 25px;
	}
	#cacaoice .mv > .wrapper .item {
		position: absolute;
		top: calc(50% - 236.5px);
		left: calc(22% - 234.5px);
	}
	#cacaoice .mv > .wrapper .spoon {
		position: absolute;
		top: 194px;
		right: 66px;
	}
	
	.bnr_area a {
		display: block;
		text-decoration: none;
	}
	.bnr_area p {
		position: relative;
		text-align: center;
		color: #fff;
		font-size: 18px;
		background: #000;
		padding: 6px 0;
	}
	.bnr_area p:after {
		content: "";
		position: absolute;
		top: 50%;
		width: 10px;
		height: 10px;
		right: calc(50% - 8em);
		border-top: 2px solid #ffffff;
		border-right: 2px solid #ffffff;
		transform: translateY(-50%) rotate(45deg);
	}
	.bnr_area img {
		max-width: 100%;
		height: auto;
		vertical-align: bottom;
	}

	#cacaoice .main_wrap {
		background-image: url(../img/bg_main.png);
		background-repeat: no-repeat;
		width: 100vw;
		background-position: center;
		background-size: cover;
	}

	#cacaoice .main_wrap > .wrapper {
		position: relative;
		max-width: 1024px;
		margin: 0 auto;
		padding: 70px 0 50px;
	}
	#cacaoice .main_wrap > .wrapper .main {
		width: 1020px;
		margin: 0 auto;
	}
	#cacaoice .main_wrap > .wrapper .main img.chara01 {
		position: absolute;
		top: 530px;
		left: 64px;
	}
	#cacaoice .main_wrap > .wrapper .main div.text-left {
		text-align: left;
	}
	#cacaoice .main_wrap > .wrapper .main .copy {
		margin: 35px auto 0 65px;
		text-align: left;
	}
	#cacaoice .main_wrap > .wrapper .main .copy p {
		font-family: 'Noto Serif JP',"ヒラギノ明朝 ProN W8", "HiraMinProN-W8", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
		color: #491B02;
		font-weight: 800;
		font-size: 32px;
		line-height: 42px;
		margin-bottom: 74px;
	}
	#cacaoice .main_wrap > .wrapper .main .copy p:last-of-type {
		margin-bottom: 34px;
	}
	#cacaoice .main_wrap > .wrapper .main .copy > div:first-of-type,
	#cacaoice .main_wrap > .wrapper .main .copy > div:nth-of-type(2) {
		margin-bottom: 67px;
	}
	#cacaoice .main_wrap > .wrapper .main img.ice {
		position: absolute;
		top: 76px;
		right: -20px;
	}

	#cacaoice .main_wrap > .wrapper .main02 {
		position: relative;
		width: 1020px;
		margin: 0 auto;
		padding-top: 190px;
	}
	#cacaoice .main_wrap > .wrapper .main02 div.ttl {
		position: absolute;
		top: 0;
		left: 0;
	}
	#cacaoice .main_wrap > .wrapper .main02 div.text_detail {
		position: relative;
	}
	#cacaoice .main_wrap > .wrapper .main02 div.text_detail div {
		font-family: 'Noto Serif JP',"ヒラギノ明朝 ProN W8", "HiraMinProN-W8", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
		color: #491B02;
		font-weight: 800;
		font-size: 30px;
		line-height: 37px;
		border-bottom: 1px #491B02 solid;
		width: 298px;
		padding-bottom: 5px;
	}
	#cacaoice .main_wrap > .wrapper .main02 div.text_detail .text_detail01 {
		position: absolute;
		top: 0;
		left: calc(25% - 150px);
	}
	#cacaoice .main_wrap > .wrapper .main02 div.text_detail .text_detail02 {
		position: absolute;
		top: 0;
		right: calc(25% - 90px);
	}
	#cacaoice .main_wrap > .wrapper .main02 div.text_detail img {
		margin-top: 100px;
	}

	#cacaoice .sub_wrap > .wrapper {
		position: relative;
		max-width: 1024px;
		margin: 0 auto;
		padding: 72px 0 20px;
	}
	#cacaoice .sub_wrap > .wrapper h2.cacao {
		position: relative;
		font-family: 'Noto Serif JP',"ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
		color: #491B02;
		font-weight: 800;
		font-size: 64px;
		line-height: 70px;
		letter-spacing: 6px;
		margin-bottom: 50px;
		border-bottom: 2px #491B02 solid;
		padding-bottom: 15px;
	}
	#cacaoice .sub_wrap > .wrapper h2.cacao span {
		font-size: 34px;
	}
	#cacaoice .sub_wrap > .wrapper h2.cacao::before {
		position: absolute;
		content: url(/sweets/chocolate/chocokoka/cacaoice/assets/img/main_ttl02_before.png);
		top: 45%;
		left: 110px;
	}
	#cacaoice .sub_wrap > .wrapper h2.cacao::after {
		position: absolute;
		content: url(/sweets/chocolate/chocokoka/cacaoice/assets/img/main_ttl02_after.png);
		top: 45%;
		right: 140px;
	}
	#cacaoice .sub_wrap .flex {
		justify-content: space-around;
	}
	#cacaoice .sub_wrap > .wrapper .flex div {
		flex: 1 1 1;
	}
	#cacaoice .sub_wrap > .wrapper .flex div:nth-of-type(2) img {
		margin-top: -10pxpx;
	}
	#cacaoice .sub_wrap > .wrapper p {
		text-align: right;
		margin-top: 40px;
	}

	#cacaoice .recipe_wrap {
		background-image: url(../img/bg_recipe.png);
		background-repeat: no-repeat;
		width: 100vw;
		background-position: bottom center;
		margin: 70px 0 80px;
		padding: 55px 90px;
	}
	#cacaoice .recipe_wrap .recipe_main_wrap {
		position: relative;
		width: fit-content;
		margin: 0 auto;
	}
	#cacaoice .recipe_wrap .recipe_main {
		position: relative;
		z-index: 10;
		background-color: #fff;
		padding: 35px 100px 35px 100px;
		max-width: 1237px;
		width: 80vw;
		margin: 0 auto;
	}
	#cacaoice .recipe_wrap .shadow {
		position: absolute;
		z-index: 5;
		max-width: 1237px;
		width: 80vw;
		height: 100%;
		bottom: -6px;
		left: 6px;
		background-color: rgba(130, 130, 130, 0.75);
		mix-blend-mode: multiply;
		filter: blur(4px);
	}
	#cacaoice .recipe_wrap .recipe_main h2 {
		position: relative;
		display: block;
		height: 100px;
		line-height: 40px;
		padding: 10px 1rem;
		background-color: #00573e;
		color: #fff;
		font-size: 36px;
		font-weight: bold;
		text-align: center;
		font-family: 'Noto Serif JP',"ヒラギノ明朝 ProN W8", "HiraMinProN-W8", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
		font-weight: 800;
		margin-bottom: 40px;
	}
	#cacaoice .recipe_wrap .recipe_main h2::before,
	#cacaoice .recipe_wrap .recipe_main h2::after {
		position: absolute;
		top: 0;
		width: 0px;
		height: 0px;
		border-color: #00573e transparent;
		border-style: solid;
		content: '';
	}
	#cacaoice .recipe_wrap .recipe_main h2::before {
		left: -24px;
		border-width: 50px 0px 50px 25px;
	}
	#cacaoice .recipe_wrap .recipe_main h2::after {
		right: -24px;
		border-width: 50px 25px 50px 0px;
	}
	#cacaoice .recipe_wrap .recipe_main .flex {
		justify-content: space-around;
	}
	#cacaoice .recipe_wrap .recipe_main .flex:first-of-type {
		margin-bottom: 34px;
	}
	#cacaoice .recipe_wrap .recipe_main .flex h3 {
		font-family: 'Noto Serif JP',"ヒラギノ明朝 ProN W8", "HiraMinProN-W8", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
		font-weight: 800;
		color: #491b02;
		text-align: center;
		font-size: clamp(10px, 1.3vw, 22px);
		font-size:max(10px, min(1.3vw,22px) );
		line-height: 27px;
		margin-left: 15px;
		margin-top: -10px;
		position: relative;
		display: inline-block;
	}
	#cacaoice .recipe_wrap .recipe_main .flex h3::after {
		content: "";
		position: absolute;
		top: 35%;
		left: -25px;
		background-image: url(../img/recipe_arrow.png);
		background-repeat: no-repeat;
		display: inline-block;
		width: 25px;
		height: 25px;
		background-size: contain;
	}

	#cacaoice .movie_wrap {
		background-image: url(../img/bg_movie.png);
		background-repeat: no-repeat;
		background-size: auto 100%;
		width: 100vw;
		min-height: 1212px;
		background-position: center;
		background-size: cover;
	}

	#cacaoice .movie_wrap > .wrapper {
		position: relative;
		max-width: 1024px;
		margin: 0 auto;
		padding: 73px 0 36px;
	}
	#cacaoice .movie_wrap > .wrapper .main .movie_area {
		position: relative;
		margin: 45px auto 0;
		width: 672px;
	}
	#cacaoice .movie_wrap > .wrapper .main .movie_area img.chara {
		position: absolute;
		top: -138px;
		left: 62px;
	}

	#cacaoice .movie_wrap > .wrapper .main .flex {
		margin: 80px auto 30px;
	}
	#cacaoice .movie_wrap > .wrapper .main .flex div {
		flex: 1;
	}
	
	#cacaoice .movie_wrap > .wrapper .movie_area {
		position: relative;
	}
	#cacaoice .movie_wrap > .wrapper .movie_area figure {
		cursor: pointer;
		outline: none;
		transition: all 0.3s ease;
	}
	#cacaoice .movie_wrap > .wrapper .movie_area figure:hover {
		opacity: 0.7;
	}
	#cacaoice .movie_wrap > .wrapper .movie_area figure img {
		max-width: 100%;
	}
	#cacaoice .movie_wrap > .wrapper .movie_area #movieArea1.onmovie {
		z-index: 999;
	}
	#cacaoice .movie_wrap > .wrapper .movie_area #movieArea1 {
		width: 672px;
		max-width: 100%;
		height: 378px;
		margin: 0 auto;
		background-size: cover;
		position: absolute;
		top: 0;
		left: calc(50% - 336px);
		z-index: -999;
	}
	#cacaoice .movie_wrap > .wrapper .main .area.pc_only {
		margin-bottom: 80px;
	}
}
@media screen and (max-width:1500px) and (min-width:1200px) {
	#cacaoice .mv > .wrapper h1 {
		top: calc(60% - 215px);
		right: calc(32% - 381.5px);
	}
	#cacaoice .mv > .wrapper .item {
		top: calc(60% - 236.5px);
		left: calc(25% - 234.5px);
	}
	#cacaoice .mv > .wrapper img {
		zoom: 0.8;
	}
	@-moz-document url-prefix(){
		#cacaoice .mv > .wrapper h1 {
			top: calc(60% - 215px);
			right: calc(19% - 381.5px);
		}
		#cacaoice .mv > .wrapper .item {
			top: calc(60% - 236.5px);
			left: calc(25% - 234.5px);
		}
		#cacaoice .mv > .wrapper img{
			transform-origin: 0 0;
			transform: scale(0.7);
		}
	}
}
@media screen and (max-width:1200px) and (min-width:1024px) {
	#cacaoice .mv > .wrapper h1 {
		top: calc(70% - 250px);
		right: calc(15% - 100px);
	}
	#cacaoice .mv > .wrapper .item {
		top: calc(70% - 236.5px);
		left: calc(28% - 234.5px);
	}
	#cacaoice .mv > .wrapper img {
		zoom: 0.6;
	}
	@-moz-document url-prefix(){
		#cacaoice .mv > .wrapper h1 {
			top: calc(70% - 215px);
			right: calc(15% - 381.5px);
		}
		#cacaoice .mv > .wrapper .item {
			top: calc(70% - 236.5px);
			left: calc(28% - 234.5px);
		}
		#cacaoice .mv > .wrapper img{
			transform-origin: 0 0;
			transform: scale(0.65);
		}
	}
}

@media screen and (max-width: 1024px) and (min-width: 641px) {
	.sub_wrap .wrapper h3 img {
		pointer-events: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		user-select: none;
	}
	.bnr_area a {
		display: block;
		text-decoration: none;
	}
	.bnr_area p {
		position: relative;
		text-align: center;
		color: #fff;
		font-size: 18px;
		background: #000;
		padding: 6px 0;
	}
	.bnr_area p:after {
		content: "";
		position: absolute;
		top: 50%;
		width: 10px;
		height: 10px;
		right: calc(50% - 8em);
		border-top: 2px solid #ffffff;
		border-right: 2px solid #ffffff;
		transform: translateY(-50%) rotate(45deg);
	}
	.bnr_area img {
		max-width: 100%;
		height: auto;
		vertical-align: bottom;
	}
	#cacaoice .mv {
		background-image: url(../img/bg_mv.png);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		width: 100vw;
		height: 540px;
	}
	#cacaoice .mv > .wrapper {
		position: relative;
		max-width: 100%;
		margin: 0 auto;
		height: 100%;
	}
	#cacaoice .mv > .wrapper img {
		zoom: 0.6;
	}

	#cacaoice .mv > .wrapper h1 {
		position: absolute;
		top: 50%;
		right: 2%;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		z-index: 5;
	}
	#cacaoice .mv > .wrapper .item {
		position: absolute;
		top: 50%;
		left: 10px;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		z-index: 5;
	}

	.bnr_area a {
		display: block;
		text-decoration: none;
	}
	.bnr_area p {
		position: relative;
		text-align: center;
		color: #fff;
		font-size: 18px;
		background: #000;
		padding: 6px 0;
	}
	.bnr_area p:after {
		content: "";
		position: absolute;
		top: 50%;
		width: 10px;
		height: 10px;
		right: calc(50% - 8em);
		border-top: 2px solid #ffffff;
		border-right: 2px solid #ffffff;
		transform: translateY(-50%) rotate(45deg);
	}
	.bnr_area img {
		max-width: 100%;
		height: auto;
		vertical-align: bottom;
	}
	
	#cacaoice .main_wrap {
		background-image: url(../img/bg_main.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}

	#cacaoice .main_wrap > .wrapper {
		position: relative;
		max-width: 100%;
		margin: 0 auto;
		padding: 50px 0;
	}
	#cacaoice .main_wrap > .wrapper .main {
		position: relative;
		width: 95%;
		margin: 0 auto;
	}
	#cacaoice .main_wrap > .wrapper .main img.chara01 {
		position: absolute;
		top: 440px;
		left: 35px;
	}
	#cacaoice .main_wrap > .wrapper .main div.text-left {
		text-align: center;
	}
	#cacaoice .main_wrap > .wrapper .main .copy {
		margin: 35px auto -70px 20px;
		text-align: left;
	}
	#cacaoice .main_wrap > .wrapper .main .copy p {
		font-family: 'Noto Serif JP',"ヒラギノ明朝 ProN W8", "HiraMinProN-W8", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
		font-weight: 800;
		color: #491B02;
		font-weight: 800;
		font-size: 32px;
		line-height: 42px;
		margin-bottom: 41px;
	}
	#cacaoice .main_wrap > .wrapper .main .copy p:nth-child(n+2) {
		line-height: 1;
	}
	#cacaoice .main_wrap > .wrapper .main .copy > div:first-of-type,
	#cacaoice .main_wrap > .wrapper .main .copy > div:nth-of-type(2) {
		margin-bottom: 67px;
	}
	#cacaoice .main_wrap > .wrapper .main img.spoon.pc_only,
	#cacaoice .main_wrap > .wrapper .main img.ice.pc_only,
	#cacaoice .main_wrap > .wrapper .main img.chara01.pc_only {
		display: none !important;
	}
	#cacaoice .main_wrap > .wrapper .main img.ice.sp_only {
		display: inline !important;
	}
	
	#cacaoice .main_wrap > .wrapper .main02 {
		position: relative;
		width: 95%;
		margin: 0 auto;
		padding-top: 300px;
	}
	#cacaoice .main_wrap > .wrapper .main02 div.ttl {
		position: absolute;
		top: 130px;
		right: 0;
	}
	#cacaoice .main_wrap > .wrapper .main02 div.text_detail {
		position: relative;
	}
	#cacaoice .main_wrap > .wrapper .main02 div.text_detail div {
		font-family: 'Noto Serif JP',"ヒラギノ明朝 ProN W8", "HiraMinProN-W8", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
		color: #491B02;
		font-weight: 800;
		font-size: 30px;
		line-height: 37px;
		border-bottom: 1px #491B02 solid;
		width: 298px;
		padding-bottom: 5px;
	}
	#cacaoice .main_wrap > .wrapper .main02 div.text_detail .text_detail01 {
		position: absolute;
		top: 0;
		left: 43px;
	}
	#cacaoice .main_wrap > .wrapper .main02 div.text_detail .text_detail02 {
		position: absolute;
		top: 0;
		right: 31px;
	}
	#cacaoice .main_wrap > .wrapper .main02 div.text_detail img {
		margin-top: 110px;
		zoom: 0.9;
		max-width: 100%;
		margin-left: 60px;
	}

	#cacaoice .sub_wrap > .wrapper {
		position: relative;
		max-width: 100%;
		margin: 0 auto;
		padding: 72px 0 20px;
	}
	#cacaoice .sub_wrap > .wrapper {
		position: relative;
		max-width: 1024px;
		margin: 0 auto;
		padding: 72px 0 20px;
	}
	#cacaoice .sub_wrap > .wrapper h2.cacao {
		position: relative;
		font-family: 'Noto Serif JP',"ヒラギノ明朝 ProN W8", "HiraMinProN-W8", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
		color: #491B02;
		font-weight: 800;
		font-size: 64px;
		line-height: 70px;
		letter-spacing: 6px;
		margin: 0 auto 36px;
		border-bottom: 2px #491B02 solid;
		padding-bottom: 15px;
		width: 95%;
	}
	#cacaoice .sub_wrap > .wrapper h2.cacao span {
		font-size: 34px;
	}
	#cacaoice .sub_wrap > .wrapper h2.cacao::before {
		position: absolute;
		content: url(/sweets/chocolate/chocokoka/cacaoice/assets/img/main_ttl02_before.png);
		top: 43%;
		left: 60px;
	}
	#cacaoice .sub_wrap > .wrapper h2.cacao::after {
		position: absolute;
		content: url(/sweets/chocolate/chocokoka/cacaoice/assets/img/main_ttl02_after.png);
		top: 43%;
		right: 80px;
	}

	#cacaoice .sub_wrap > .wrapper .flex {
		align-items: baseline;
	}
	#cacaoice .sub_wrap > .wrapper .flex div {
		flex: 1;
	}
	#cacaoice .sub_wrap > .wrapper .flex div img {
		zoom: 0.85;
	}
	#cacaoice .sub_wrap > .wrapper p {
		text-align: right;
		margin-top: 30px;
		margin-right: 30px;
	}


	#cacaoice .main_wrap > .wrapper {
		position: relative;
		max-width: 100%;
		margin: 0 auto;
		padding: 50px 0;
	}
	#cacaoice .main_wrap > .wrapper .main {
		position: relative;
		width: 95%;
		margin: 0 auto;
	}
	#cacaoice .main_wrap > .wrapper .main img.chara01 {
		position: absolute;
		top: -40px;
		right: 111px;
	}
	#cacaoice .main_wrap > .wrapper .main div.text-left {
		text-align: center;
	}
	#cacaoice .main_wrap > .wrapper .main .copy {
		width: 652px;
		margin: 15px auto 295px;
		text-align: left;
	}
	#cacaoice .main_wrap > .wrapper .main .copy > div:first-of-type,
	#cacaoice .main_wrap > .wrapper .main .copy > div:nth-of-type(2) {
		margin-bottom: 67px;
	}
	#cacaoice .main_wrap > .wrapper .main img.ice {
		position: absolute;
		top: 410px;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
	}

	#cacaoice .sub_wrap > .wrapper {
		position: relative;
		max-width: 100%;
		margin: 0 auto;
		padding: 72px 0 20px;
	}
	#cacaoice .sub_wrap > .wrapper h2 {
		margin-bottom: 34px;
	}
	#cacaoice .sub_wrap > .wrapper .flex {
		margin-left: 20px;
		margin-right: 20px;
	}
	#cacaoice .sub_wrap > .wrapper .flex div {
		flex: 1;
	}
	#cacaoice .sub_wrap > .wrapper p {
		text-align: right;
		margin-top: 30px;
		margin-right: 30px;
	}

	#cacaoice .recipe_wrap {
		background-image: url(../img/bg_recipe_sp.png);
		background-repeat: no-repeat;
		width: 100vw;
		background-position: center;
		background-size: cover;
		margin: 22px 0 0;
		padding: 22px 11px;
	}
	#cacaoice .recipe_wrap .recipe_main_wrap {
		position: relative;
		width: fit-content;
		margin: 0 auto;
	}
	#cacaoice .recipe_wrap .recipe_main {
		position: relative;
		z-index: 10;
		background-color: #fff;
		padding: 8px 5px 8px 5px;
		margin: 0 auto;
	}
	#cacaoice .recipe_wrap .shadow {
		position: absolute;
		z-index: 5;
		width: 100%;
		height: 100%;
		bottom: -6px;
		left: 6px;
		background-color: rgba(130, 130, 130, 0.75);
		mix-blend-mode: multiply;
		filter: blur(4px);
	}
	#cacaoice .recipe_wrap .recipe_main h2 {
		position: relative;
		display: inline-block;
		height: 50px;
		line-height: 20px;
		padding: 5px 1rem;
		background-color: #00573e;
		color: #fff;
		font-size: 2.5vw;
		font-weight: bold;
		text-align: center;
		font-family: 'Noto Serif JP',"ヒラギノ明朝 ProN W8", "HiraMinProN-W8", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
		font-weight: 800;
		margin-bottom: 8px;
	}
	#cacaoice .recipe_wrap .recipe_main h2::before,
	#cacaoice .recipe_wrap .recipe_main h2::after {
		position: absolute;
		top: 0;
		width: 0px;
		height: 0px;
		border-color: #00573e transparent;
		border-style: solid;
		content: '';
	}
	#cacaoice .recipe_wrap .recipe_main h2::before {
		left: -15px;
		border-width: 25px 0px 25px 15px;
	}
	#cacaoice .recipe_wrap .recipe_main h2::after {
		right: -15px;
		border-width: 25px 15px 25px 0px;
	}
	#cacaoice .recipe_wrap .recipe_main .flex {
		justify-content: space-around;
	}
	#cacaoice .recipe_wrap .recipe_main .flex:first-of-type {
		margin-bottom: 34px;
	}
	#cacaoice .recipe_wrap .recipe_main .flex h3 {
		font-family: 'Noto Serif JP',"ヒラギノ明朝 ProN W8", "HiraMinProN-W8", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
		font-weight: 800;
		color: #491b02;
		text-align: center;
		font-size: clamp(10px, 2vw, 30px);
		font-size:max(10px, min(2vw,30px) );
		margin-left: 15px;
		margin-top: -10px;
		position: relative;
		display: inline-block;
	}
	#cacaoice .recipe_wrap .recipe_main .flex h3::after {
		content: ".";
		position: absolute;
		top: 35%;
		left: -25px;
		background-image: url(../img/recipe_arrow.png);
		background-repeat: no-repeat;
		display: inline-block;
		width: 20px;
		height: 20px;
		background-size: contain;
	}

	#cacaoice .movie_wrap {
		background-image: url(../img/bg_movie_sp.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: auto;
		min-height: 1159px;
	}

	#cacaoice .movie_wrap > .wrapper {
		position: relative;
		max-width: 100%;
		margin: 0 auto;
		padding: 73px 0 36px;
	}
	#cacaoice .movie_wrap > .wrapper .main .movie_area {
		position: relative;
		margin: 45px auto 0;
		width: 672px;
	}
	#cacaoice .movie_wrap > .wrapper .main .movie_area img.chara {
		position: absolute;
		top: -138px;
		left: 62px;
	}

	#cacaoice .movie_wrap > .wrapper .movie_area {
		position: relative;
	}
	#cacaoice .movie_wrap > .wrapper .movie_area .pc_only img {
		width: 672px;
	}
	#cacaoice .movie_wrap > .wrapper .movie_area figure img {
		max-width: 100%;
	}
	#cacaoice .movie_wrap > .wrapper .movie_area #movieArea1.onmovie {
		z-index: 999;
	}
	#cacaoice .movie_wrap > .wrapper .movie_area #movieArea1 {
		width: 672px;
		max-width: 100%;
		height: 378px;
		margin: 0 auto;
		background-size: cover;
		position: absolute;
		top: 0;
		left: calc(50% - 336px);
		z-index: -999;
	}

	#cacaoice .movie_wrap > .wrapper .main div.pc_only {
		width: 100%;
		margin: 80px auto 15px;
	}
	#cacaoice .movie_wrap > .wrapper .main div.area.pc_only {
		margin: 0 auto 75px;
	}

	#cacaoice .movie_wrap > .wrapper .movie_area + .flex {
		margin-top: 30px;
	}
	#cacaoice .movie_wrap > .wrapper .movie_area + .flex img {
		zoom: 0.9;
	}
}

@media screen and (max-width: 812px) and (min-width: 641px) {
	#cacaoice .mv > .wrapper img {
		zoom: 0.45;
	}
	#cacaoice .main_wrap > .wrapper .main img.ice {
		top: 395px;
	}
	#cacaoice .main_wrap > .wrapper .main02 div.text_detail .text_detail01 {
		left: 20px;
	}
	#cacaoice .main_wrap > .wrapper .main02 div.text_detail .text_detail02 {
		right: 21px;
	}
	
	#cacaoice .main_wrap > .wrapper .main02 {
		padding-top: 270px;
	}
	#cacaoice .main_wrap > .wrapper .main02 div.ttl {
		position: absolute;
		top: 100px;
		right: 30px;
	}

	#cacaoice .main_wrap > .wrapper .main02 div.text_detail img {
		margin-top: 100px;
		margin-left: 20px;
		zoom: unset;
		max-width: 90%;
	}
	#cacaoice .sub_wrap > .wrapper .flex div img {
		zoom: 0.75;
	}
	#cacaoice .movie_wrap > .wrapper .movie_area figure img {
		max-width: 95%;
	}
	#cacaoice .movie_wrap > .wrapper .movie_area + .flex img {
		zoom: 0.7;
	}
	#cacaoice .movie_wrap {
		min-height: 1150px;
	}
	#cacaoice .movie_wrap > .wrapper .main div.pc_only {
		margin: 120px auto 15px;
	}
	#cacaoice .movie_wrap > .wrapper .main div.area.pc_only {
		margin: 0 auto 115px;
	}
}

@media screen and (max-width: 640px) {
	.sub_wrap .wrapper h3 img {
		pointer-events: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		user-select: none;
	}	
	.bnr_area a {
		display: block;
		text-decoration: none;
	}
	.bnr_area p {
		text-align: center;
		color: #fff;
		font-size: 0.75em;
		background: #231815;
		padding: 3px 0;
		position: relative;
	}
	.bnr_area p:after {
		content: "";
		position: absolute;
		top: 50%;
		width: 6px;
		height: 6px;
		right: calc(50% - 8em);
		border-top: 2px solid #ffffff;
		border-right: 2px solid #ffffff;
		transform: translateY(-50%) rotate(45deg);
	}
	.bnr_area img {
		max-width: 100%;
		height: auto;
		vertical-align: bottom;
	}
	#cacaoice .mv {
		background-image: url(../img/bg_mv_sp.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 562px;
		padding: 25px 0 17px;
	}
	#cacaoice .mv > .wrapper {
		position: relative;
		max-width: 100%;
		margin: 0 auto;
	}
	#cacaoice .mv > .wrapper h1 {
		position: absolute;
		top: -10px;
	}
	#cacaoice .mv > .wrapper .copy {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
	}
	#cacaoice .mv > .wrapper .copy img {
		max-width: 350px;
	}
	#cacaoice .mv > .wrapper .item {
		position: absolute;
		top: 270px;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
	}
	#cacaoice .mv > .wrapper .item img {
		max-width: 248px;
	}

	#cacaoice .main_wrap {
		background-image: url(../img/bg_main_sp.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	#cacaoice .main_wrap > .wrapper {
		position: relative;
		max-width: 100%;
		margin: 0 auto;
		padding: 22px 0;
	}
	#cacaoice .main_wrap > .wrapper .main {
		position: relative;
		width: 95%;
		margin: 0 auto;
		max-width: 400px;
	}
	#cacaoice .main_wrap > .wrapper .main div.text-left h3 img {
		zoom: 0.5;
	}
	#cacaoice .main_wrap > .wrapper .main .copy {
		margin: 8px auto 30px 7px;
		text-align: left;
	}
	#cacaoice .main_wrap > .wrapper .main .copy p {
		font-family: 'Noto Serif JP',"ヒラギノ明朝 ProN W8", "HiraMinProN-W8", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
		color: #491B02;
		font-weight: 800;
		font-size: 17px;
		line-height: 26px;
		margin-bottom: 24px;
	}
	#cacaoice .main_wrap > .wrapper .main .copy p span {
		font-size: 17px;
	}
	#cacaoice .main_wrap > .wrapper .main .copy p:nth-child(n+2) {
		line-height: 1.2;
	}
	#cacaoice .main_wrap > .wrapper .main .copy > div:first-of-type,
	#cacaoice .main_wrap > .wrapper .main .copy > div:nth-of-type(2) {
		margin-bottom: 24px;
	}
	#cacaoice .main_wrap > .wrapper .main .copy > div img {
		max-width: 100%;
		zoom: 0.5;
	}
	#cacaoice .main_wrap > .wrapper .main img.ice {
		zoom: 0.5;
		margin: 0 auto 25px;
	}

	#cacaoice .main_wrap > .wrapper .main02 {
		position: relative;
		width: 100%;
		margin: 0 auto;
		padding-top: 15px;
	}
	#cacaoice .main_wrap > .wrapper .main02 div.ttl img {
		zoom: 0.5;
		max-width: 95%;
		margin-left: 18px;
	}
	#cacaoice .main_wrap > .wrapper .main02 img {
		zoom: 0.5;
		margin-left: 18px;
	}
	
	#cacaoice .main_wrap > .wrapper .main02 div.text_detail div.flex > div {
		flex: 1;
	}
	#cacaoice .main_wrap > .wrapper .main02 div.text_detail div.flex > div > .text_detail01,
	#cacaoice .main_wrap > .wrapper .main02 div.text_detail div.flex > div > .text_detail02 {
		font-family: 'Noto Serif JP',"ヒラギノ明朝 ProN W8", "HiraMinProN-W8", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
		color: #491B02;
		font-weight: 600;
		font-size: 17px;
		line-height: 20px;
		border-bottom: 1px #491B02 solid;
		width: 140px;
		padding-bottom: 6px;
		margin: 0 auto 14px;
	}
	#cacaoice .main_wrap > .wrapper .main02 div.text_detail div.flex > div > img {
		margin-left: 0;
	}
	#cacaoice .main_wrap > .wrapper .main02 div.text_detail div.flex .text_detail02 + img {
		padding: 32px 0;
	}
	#cacaoice .main_wrap > .wrapper .main02 div.text_detail div.flex + div {
		margin-top: 10px;
	}

	#cacaoice .sub_wrap > .wrapper h2.cacao {
		position: relative;
		font-family: 'Noto Serif JP',"ヒラギノ明朝 ProN W8", "HiraMinProN-W8", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
		color: #491B02;
		font-weight: 600;
		font-size: 36px;
		line-height: 35px;
		margin-bottom: 36px;
		border-bottom: 2px #491B02 solid;
		padding-bottom: 15px;
	}
	#cacaoice .sub_wrap > .wrapper h2.cacao span {
		font-size: 17px;
	}
	#cacaoice .sub_wrap > .wrapper h2.cacao::before {
		position: absolute;
		content: '';
		background-image: url(/sweets/chocolate/chocokoka/cacaoice/assets/img/main_ttl02_before_sp.png);
		display: inline-block;
		top: 40%;
		left: 10px;
		width: 42px;
		height: 50px;
		background-size: contain;
		vertical-align: middle;
	}
	#cacaoice .sub_wrap > .wrapper h2.cacao::after {
		position: absolute;
		content: '';
		background-image: url(/sweets/chocolate/chocokoka/cacaoice/assets/img/main_ttl02_after_sp.png);
		display: inline-block;
		top: 40%;
		right: 10px;
		width: 42px;
		height: 50px;
		background-size: contain;
		vertical-align: middle;
	}

	#cacaoice .sub_wrap > .wrapper {
		position: relative;
		max-width: 95%;
		margin: 0 auto;
		padding: 29px 0 20px;
	}
	#cacaoice .sub_wrap > .wrapper h2 img {
		zoom: 0.5;
	}
	#cacaoice .sub_wrap > .wrapper div.sp_only img {
		zoom: 0.5;
	}
	#cacaoice .sub_wrap > .wrapper .flex div {
		flex: 1;
	}
	#cacaoice .sub_wrap > .wrapper .flex div img {
		zoom: 0.5;
	}
	#cacaoice .sub_wrap > .wrapper p {
		text-align: right;
	}
	#cacaoice .sub_wrap > .wrapper p.sp_only img {
		zoom: 0.5;
	}
	#cacaoice .sub_wrap .pickup {
		margin-top: 25px;
	}

	#cacaoice .recipe_wrap {
		background-image: url(../img/bg_recipe_sp.png);
		background-repeat: no-repeat;
		width: 100vw;
		background-position: center;
		background-size: cover;
		margin: 22px 0 0;
		padding: 22px 11px;
	}
	#cacaoice .recipe_wrap .recipe_main_wrap {
		position: relative;
		width: fit-content;
		margin: 0 auto;
	}
	#cacaoice .recipe_wrap .recipe_main {
		position: relative;
		z-index: 10;
		background-color: #fff;
		padding: 8px 5px 8px 5px;
		margin: 0 auto;
	}
	#cacaoice .recipe_wrap .shadow {
		position: absolute;
		z-index: 5;
		width: 100%;
		height: 100%;
		bottom: -6px;
		left: 6px;
		background-color: rgba(130, 130, 130, 0.75);
		mix-blend-mode: multiply;
		filter: blur(4px);
	}
	#cacaoice .recipe_wrap .recipe_main h2 {
		position: relative;
		display: inline-block;
		height: 50px;
		line-height: 20px;
		padding: 5px 1rem;
		background-color: #00573e;
		color: #fff;
		font-size: 18px;
		font-weight: bold;
		text-align: center;
		font-family: 'Noto Serif JP',"ヒラギノ明朝 ProN W8", "HiraMinProN-W8", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
		font-weight: 800;
		margin-bottom: 8px;
	}
	#cacaoice .recipe_wrap .recipe_main h2::before,
	#cacaoice .recipe_wrap .recipe_main h2::after {
		position: absolute;
		top: 0;
		width: 0px;
		height: 0px;
		border-color: #00573e transparent;
		border-style: solid;
		content: '';
	}
	#cacaoice .recipe_wrap .recipe_main h2::before {
		left: -15px;
		border-width: 25px 0px 25px 15px;
	}
	#cacaoice .recipe_wrap .recipe_main h2::after {
		right: -15px;
		border-width: 25px 15px 25px 0px;
	}
	#cacaoice .recipe_wrap .recipe_main .flex {
		justify-content: space-around;
	}
	#cacaoice .recipe_wrap .recipe_main .flex-none {
		margin-bottom: 34px;
	}
	#cacaoice .recipe_wrap .recipe_main .flex h3,
	#cacaoice .recipe_wrap .recipe_main .flex-none h3 {
		font-family: 'Noto Serif JP',"ヒラギノ明朝 ProN W8", "HiraMinProN-W8", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
		font-weight: 800;
		color: #491b02;
		text-align: center;
		font-size: clamp(10px, 2.4vw, 30px);
		font-size:max(10px, min(2.4vw,30px) );
		margin-left: 15px;
		margin-top: -10px;
		position: relative;
		display: inline-block;
	}
	#cacaoice .recipe_wrap .recipe_main .flex h3::after,
	#cacaoice .recipe_wrap .recipe_main .flex-none h3::after {
		content: "";
		position: absolute;
		top: 35%;
		left: -15px;
		background-image: url(../img/recipe_arrow.png);
		background-repeat: no-repeat;
		display: inline-block;
		width: 12px;
		height: 12px;
		background-size: contain;
	}
	#cacaoice .recipe_wrap .recipe_main .flex-none div {
		width: 50%;
		margin: 0 auto;
	}

	#cacaoice .movie_wrap {
		background-image: url(../img/bg_movie_sp.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: auto;
		padding-bottom: 75px;
	}
	#cacaoice .movie_wrap img {
		zoom: 0.5;
		max-width: 95%;
	}
	#cacaoice .movie_wrap > .wrapper {
		position: relative;
		max-width: 95%;
		margin: 0 auto;
		padding: 34px 0 36px;
	}
	#cacaoice .movie_wrap > .wrapper .main .movie_area {
		position: relative;
		margin: 23px auto 0;
		width: 100%;
		max-width: 400px;
	}
	#cacaoice .movie_wrap > .wrapper .main .movie_area img.chara {
		position: absolute;
		top: -135px;
		left: 55px;
	}

	#cacaoice .movie_wrap > .wrapper .movie_area {
		position: relative;
	}
	#cacaoice .movie_wrap > .wrapper .movie_area #movieArea1.onmovie {
		z-index: 999;
	}
	#cacaoice .movie_wrap > .wrapper .movie_area #movieArea1 {
		width: 340px;
		height: auto;
		margin: 0 auto;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		z-index: -999;
	}

	#cacaoice .movie_wrap > .wrapper .main div.sp_only {
		width: 100%;
		margin: 45px auto 0;
	}
	#cacaoice .movie_wrap > .wrapper .main div.sp_only p {
		margin-bottom: 10px;
	}
	#cacaoice .movie_wrap > .wrapper .main a.sp_only {
		position: absolute;
		bottom: -55px;
		left: calc(50% - 148px);
	}
}