@charset "utf-8";


@font-face {
font-family: 'LogoTypeGothic';
	src: url('/css/fonts/LogoTypeGothic_subset/LogoTypeGothic_subset.eot');
	src: url('/css/fonts/LogoTypeGothic_subset/LogoTypeGothic_subset.eot?iefix') format('eot'),
		url('/css/fonts/LogoTypeGothic_subset/LogoTypeGothic_subset.woff') format('woff'),
		url('/css/fonts/LogoTypeGothic_subset/LogoTypeGothic_subset.otf') format('opentype')
		/*, url('フォント名.svg#webfontjSpbZQRv') format('svg'); */
}

/* --------- pc --------- */
@media screen and (min-width: 960px){
	.wgg-borbox p.title {
		margin-bottom: 20px !important;
		padding-top: 0;
		text-align: center;
		font-size: 14px;
		font-weight: 600;
		color: #77582e;
	}
	.font2 p.title {
		padding-top: 20px;
		text-align: center;
		font-size: 14px;
		font-weight: 600;
		color: #77582e;
	}
	.preview_box2 {
		margin: 20px auto;
		width: 546px;
		/* height: auto; */
		height: 236px;
		box-sizing: border-box;
		background-image: url(/img/item/choco.gif);
		background-repeat: no-repeat;
		/* background-position: 36% 50%; */
		background-position: center top;
		background-size: 100%;
	}
	.preview_box2 div {
		display: inline;
		width: 78px;
		height: 78px;
		padding-top: 18px;
		float: left;
		font-family: 'LogoTypeGothic',sans-serif;
		font-size: 38px;
		color: #430202;
		text-align: center;
		box-sizing: border-box;
	}
	.cnfsec01RftIn .preview_box2 {
		margin: 10px auto 0 !important;
		width: 294px !important;
	}
	.cnfsec01RftIn .preview_box2 div {
		padding-top: 8px;
		width: 42px !important;
		height: 42px !important;
		font-size: 24px;
	}



	.preview_box {
		margin: 20px auto;
		width: 546px;
		height: auto;
		box-sizing: border-box;
		background-image: url(/img/item/choco.gif);
		background-repeat: no-repeat;
		/* background-position: 36% 50%; */
		background-position: center center;
		background-size: 100%;
	}
	.preview_box div {
		display: inline;
		width: 78px;
		height: 78px;
		/* padding: 1px; */
		float: left;
	}
}


/* --------- tablet --------- */
@media screen and (min-width: 600px) and (max-width: 959px) {
	.wgg-borbox .btn-sec .wgg-btn a {
		padding: 4% !important;
	}
	.wgg-borbox p.title {
		margin-bottom: 4% !important;
		padding-top: 0;
		text-align: center;
		font-size: 1rem;
		font-weight: 600;
		color: #77582e;
	}
	.font2 p.title {
		padding-top: 4%;
		text-align: center;
		font-size: 1rem;
		font-weight: 600;
		color: #77582e;
	}
	
	.preview_box2 {
		margin: 3% auto;
		width: 94%;
		height: 29rem;
		/* height: 67%; */
		/* height: auto; */
		padding: 0;
		box-sizing: border-box;
		background-image: url(/img/item/choco.gif);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100%;
	}
	.preview_box2 div {
		display: inline;
		width: 14.24%;
		height: 20%;
		padding-top: 1.5rem;
		float: left;
		font-family: 'LogoTypeGothic',sans-serif;
		font-size: 2.7rem;
		color: #430202;
		text-align: center;
		box-sizing: border-box;
	}
	
	.preview_box {
		margin: 3% auto;
		width: 94%;
		height: auto;
		padding: 0;
		box-sizing: border-box;
		background-image: url(/img/item/choco.gif);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100%;
	}
	.preview_box div {
		display: inline;
		width: 14.14%;
		height: 20%;
		float: left;
		/*  border: 1px solid #000; */
		box-sizing: border-box;
		background-repeat: no-repeat;
		background-size: 4300%;
	}
}


/* --------- smartphone --------- */
@media screen and (max-width: 599px){
	.wgg-borbox p.title {
		margin-bottom: 4% !important;
		padding-top: 0;
		text-align: center;
		font-size: 0.8rem;
		font-weight: 600;
		color: #77582e;
	}
	.font2 p.title {
		padding-top: 4%;
		text-align: center;
		font-size: 0.8rem;
		font-weight: 600;
		color: #77582e;
	}
	
	.preview_box2 {
		/* margin: 1.4vh auto; */
		margin: 6% auto;
		width: 98%;
		/* height: 37vh; */
		/* width: 84vw; */
		/* height: 35vh; */
		/* width: 86vw; */
		/* height: 37vh; */
		/* width: 94%; */
		/* height: 12em; */
		/* height: 67%; */
		/* height: auto; */
		padding: 0 !important;
		box-sizing: border-box;
		background-image: url(/img/item/choco.gif);
		background-repeat: no-repeat;
		background-position: center top;
		background-size: 100%;
		/* border: 1px solid #000; */
	}
	.preview_box2 div {
		display: inline;
		width: 14.28%;
		height: 20%;
		/* width: 14.24%; */
		/* height: 20%; */
		/* width: 12vw; */
		/* height: 7vh; */
		/* height: 7.4vh; */
		padding-top: 8%;
		float: left;
		font-family: 'LogoTypeGothic',sans-serif;
		font-size: 1.38rem;
		line-height: 0;
		color: #430202;
		text-align: center;
		box-sizing: border-box;
		/* border: 1px solid #000; */
	}
	.cnfsec01RftIn {
		width: 86%;
		/* height: 200pt; */
		/* border: 1px solid #000 !important; */
	}
	.cnfsec01RftIn > .font2 > .preview_box2 {
		margin-bottom: 0 !important;
		width: 100%;
		/* height: 166pt; */
		height: 61.25vw;
		/* height: 200pt; */
		/* height: 37vh; */
	}
	.cnfsec01RftIn > .font2 > .preview_box2 div {
		/* height: 7.4vh; */
		/* height: 33pt; */
		height: 12.25vw;
		/* padding-top: 4pt; */
		padding-top: 4vw;
		line-height: 1;
		box-sizing: border-box;
	}
	
	.preview_box {
		margin: 3% auto;
		width: 94%;
		height: auto;
		padding: 0;
		box-sizing: border-box;
		background-image: url(/img/item/choco.gif);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100%;
	}
	.preview_box div {
		display: inline;
		width: 14.14%;
		height: 20%;
		float: left;
		/* border: 1px solid #000; */
		box-sizing: border-box;
		background-repeat: no-repeat;
		background-size: 4000%;
	}
}