@charset "utf-8";
/*----------------------------------
　アレンジレシピ＜PC用＞ index.css
------------------------------------*/
/* ------ ▽ FFでアニメーション時に画像が1pxずれるバグに対応 ▽ ------ */
img{
box-shadow: #000 0 0 0;
}
img{
margin: 0;
padding: 0;
}
/*reset.cssの影響を調整*/
div:after, dl:after, ul:after{
content: none;
}
img{
-webkit-backface-visibility: hidden;
}
*:focus{
outline: none;
}
figure {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

/* ------ ▽ 画像長押し保存不可 ▽ ------ */
[data-copy-protected]{
-webkit-touch-callout: none;
-webkit-user-select: none;
}
.imageBlock{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.img_protect:before{
position: absolute;
display: block;
width: 100%;
height: 100%;
content: '';
z-index: 1000;
}

/* ------ ▽ 共通 ▽ ------ */
#all_wrap{
min-width: 950px;
position: relative;
}
#contents_wrap{
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
text-align: center;
}
section .inner{
width: 1058px;
margin: 0 auto;
position: relative;
}

/* ------ ▽ 固定要素 ▽ ------ */
.sns_area{
position: absolute;
top: 0;
right: 0;
z-index: 900;
}
.sns_area li img{
width: 66px;
}
.btn_pagetop{
width: 66px;
height: 66px;
position: absolute;
bottom: 140px;
right: 0;
z-index: 900;
}

/* ------ ▽ タイトル ▽ ------ */
#mv_wrap{
width:100%;	
background-image:url(/sweets/candy_gum/fruits_gummi/recipe/images/mv.png);
background-position: center top;
background-repeat: no-repeat;
overflow:hidden;
}
#mv_wrap .recipe_inner{
width:950px;
height:768px;
position:relative;
margin:0 auto;
padding:0;
}

/* ------ ▽ レシピ ▽ ------ */
#recipe_wrap{
background: url(/sweets/candy_gum/fruits_gummi/recipe/images/bg.jpg);
background-position: center top;
background-repeat: no-repeat;
position: relative;
padding: 60px 0 30px;
}
#recipe_wrap .inner{
	background-color: rgba(255,254,235,0.8);
	padding: 30px 0 45px;
}
.recipe_box {
	width: 928px;
	margin: 40px auto 0;
	padding: 30px 0 42px;
}
#recipe_1 {
	background: url(/sweets/candy_gum/fruits_gummi/recipe/common/images/recipe_1_bg.png) no-repeat center top;
	background-size: 100% 100%;
}
#recipe_2 {
	background: url(/sweets/candy_gum/fruits_gummi/recipe/common/images/recipe_2_bg.png) no-repeat center top;
	background-size: 100% 100%;
}
#recipe_3 {
	background: url(/sweets/candy_gum/fruits_gummi/recipe/common/images/recipe_3_bg.png) no-repeat center top;
	background-size: 100% 100%;
}
.recipe_box_list {
	margin: 18px auto 0;
	width: 780px;
	position: relative;
}
.recipe_box_list li {
	padding: 0 8px;
	width: 211px;
}
.recipe_box_list li img {
	width: 100%;
	height: auto;
}
.recipe_box_list .slick-prev {
	position: absolute;
	top: 0;
	left: 0;
	margin: 60px 0 0 -48px;
}
.recipe_box_list .slick-next {
	position: absolute;
	top: 0;
	right: 0;
	margin: 60px -48px 0 0;
}
#recipe_notes {
	width: 1060px;
	margin: 16px auto 0;
	text-align: right;
}














/*====================
modal
====================*/
.recipe_modal{
position: relative;
color: #613e34;
font-size: 14px;
letter-spacing: 0.1em;
width: 822px;
margin: 0 auto;
background: url(/sweets/candy_gum/fruits_gummi/recipe/images/deco.png), #f7f8f7;
background-position: center 6px;
background-repeat: no-repeat;
}
.recipe_modal p{
font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif!important;
}
.line_pink{
border-width: 0 8px;
border-color: #d686b1;
border-style: solid;
}
.recipe_modal.line_pink{
background: #f7f8f7 url(/sweets/candy_gum/fruits_gummi/recipe/images/deco_pink.png) no-repeat center 6px;
}
.line_red{
border-width: 0 8px;
border-color: #ce626e;
border-style: solid;
}
.line_purple{
border-width: 0 8px;
border-color: #a978ad;
border-style: solid;
}
.recipe_modal.line_purple{
background: #f7f8f7 url(/sweets/candy_gum/fruits_gummi/recipe/images/deco_purple.png) no-repeat center 6px;
}
.line_yellow{
border-width: 0 8px;
border-color: #e3ab31;
border-style: solid;
}
.recipe_modal.line_yellow{
background: #f7f8f7 url(/sweets/candy_gum/fruits_gummi/recipe/images/deco_yellow.png) no-repeat center 6px;
}
.recipe_detail{
display: -webkit-flex;
display: -moz-flex;
display: flex;
padding: 80px 62px 30px 72px;
}
.recipe_pic img{
width: 320px;
margin: 0 21px 0 0;
}
.material{
font-size: 13px;
}
.material h3 img{
width: 346px;
margin-bottom: 20px;
}
.material_mds{
background: #613e34;
border-radius: 6px 6px 0 0;
text-align: center;
color: #ffffff;
padding: 4px 0 2px;
font-size: 14px;
}
.material_box{
border: solid 1px #613e34;
border-radius: 0 0 5px 5px;
padding: 12px 10px 10px 16px;
}
.material_txt{
height: 156px;
overflow-y: auto;
}
.material_txt dt{
border-bottom: 1px solid #613e34;
padding: 0 0 3px 4px;
margin: 0 6px 10px 0;
}
.material_txt dd{
padding: 0 4px;
}
.howto_box{
padding: 10px 61px 50px 72px;
}
.howto_txt{
height: 162px;
overflow-y: auto;
}
.howto_txt dt{
border-bottom: 1px solid #613e34;
padding: 0 0 3px 4px;
margin: 0 10px 10px 0;
}
.howto_txt dd{
padding: 0 4px;
margin-bottom: 22px;
}
.material_txt a,
.howto_txt a{
color: #f74c3a;
}
.material_txt a:hover,
.howto_txt a:hover{
text-decoration: underline;
}
/*.howto_txt li{
text-indent: -1.1em;
padding-left: 1.1em;
}*/

/*スクロールバー*/
.material_box dl::-webkit-scrollbar,
.howto_box dl::-webkit-scrollbar{
width: 12px;
}
.material_box dl::-webkit-scrollbar-track,
.howto_box dl::-webkit-scrollbar-track{
background-color: #e1e1e1;
border-radius: 12px;
}
.material_box dl::-webkit-scrollbar-thumb,
.howto_box dl::-webkit-scrollbar-thumb{
background-color: #999999;
border-radius: 12px;
}
.mfp-close{
top: -74px !important;
right: -8px !important;
width: 74px !important;
height: 74px !important;
font-size: 0 !important;
background: url(/sweets/candy_gum/fruits_gummi/recipe/common/images/btn_close.png) no-repeat 100% 0 !important;
}
button.mfp-arrow{
display: none;
}