@charset "utf-8";
/*----------------------------------
　アレンジレシピ＜SP用＞ index.css
------------------------------------*/
/* ------ ▽ reset ▽ ------ */
figure, ol{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
li {
list-style: none;
}
img {
width: 100%;
height: auto;
}
*:focus {
outline: none;
}
/*reset.cssの影響を調整*/
div:after, dl:after, ul:after {
content: none;
}

/* ------ ▽ ローディング ▽ ------ */
#loading img{
position: absolute;
width: calc(100%*220/750);
top: 40%;
left: calc(100%*270/750);
}

/* ------ ▽ 共通 ▽ ------ */
#all_wrap {
color: #3f3532;
position: relative;
}
#all_wrap * {
box-sizing: border-box;
}
#cont_wrap{
width: 100%;
background-color: #ffffff;
text-align: center;
position: relative;
overflow: hidden;
}

/* ------ ▽ メイン画像 ▽ ------ */
#mv_wrap{
padding-top: 82.6% !important;
position: relative;
background: url(/smartphone/sweets/candy_gum/fruits_gummi/recipe/images/mv.png);
background-position: center top;
background-repeat: no-repeat;
background-size: contain;
/*border-bottom: solid #ffffff 1.4vw;*/
}

/* ------ ▽ レシピ ▽ ------ */
#recipe_wrap{
background: url(/smartphone/sweets/candy_gum/fruits_gummi/recipe/images/bg.jpg);
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
position: relative;
text-align: center;
overflow: hidden;
padding: 6.4vw 7.066vw 4vw;
}
.recipe_inner {
	background-color: rgba(255,254,235,0.8);
	padding: 6.4% 0 4%;
}
.recipe_box {
	width: 84.161%;/*542*/
	margin: 3.105% auto 0;
	padding: 3.1% 0 4.347%;
}
#recipe_1.recipe_box {
	margin-top: 4.8%;
}
#recipe_1 {
	background: url(/smartphone/sweets/candy_gum/fruits_gummi/recipe/images/recipe_1_bg.png) no-repeat center top;
	background-size: 100% 100%;
}
#recipe_2 {
	background: url(/smartphone/sweets/candy_gum/fruits_gummi/recipe/images/recipe_2_bg.png) no-repeat center top;
	background-size: 100% 100%;
}
#recipe_3 {
	background: url(/smartphone/sweets/candy_gum/fruits_gummi/recipe/images/recipe_3_bg.png) no-repeat center top;
	background-size: 100% 100%;
}
.recipe_box_list {
	margin: 3.105% auto 0;
	width: 84.87%;/*460*/
	position: relative;
}
.recipe_box_list li {
	padding: 0 0.666vw;
}
.recipe_box_list li img {
	width: 100%;
	height: auto;
}
.recipe_box_list .slick-prev {
	width: 2.133vw;
	position: absolute;
	top: 0;
	left: 0;
	margin: 6.8vw 0 0 -4vw;
}
.recipe_box_list .slick-next {
	width: 2.133vw;
	position: absolute;
	top: 0;
	right: 0;
	margin: 6.8vw -4vw 0 0;
}
#recipe_notes {
	width: 92.391%;
	margin: 2.133% auto 0;
	line-height: 0;
}

/* ------ ▽ フッター ▽ ------ */
.sns_area{
text-align: center;
padding:4.2% 0;
}
.sns_area li{
width: 16%;
margin-right:3.4%;
display: inline-block;
}
.sns_area li:last-child{
margin-right:0;
}

/*====================
modal
====================*/
.recipe_modal{
position: relative;
color: #613e34;
font-size: 2.6vw;
letter-spacing: 0.1em;
width: calc(100%*574/750);
margin: 0 auto;
background: url(/smartphone/sweets/candy_gum/fruits_gummi/recipe/images/deco.png), #f7f8f7;
background-position: center 0.2vw;
background-repeat: no-repeat;
background-size: contain;
text-align: center;
}
.recipe_modal p{
font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif!important;
}
.line_pink{
border-width: 0 2vw;
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 0.2vw;
}
.line_red{
border-width: 0 2vw;
border-color: #ce626e;
border-style: solid;
}
.line_purple{
border-width: 0 2vw;
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 0.2vw;
}
.line_yellow{
border-width: 0 2vw;
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 0.2vw;
}
.recipe_detail{
padding: 9vw 2vw 2vw;
}
.recipe_pic img{
width: 52.2vw;
}
/*.material{
font-size: 2.6vw;
}*/
.material h3 img{
width: 57vw;
margin: 1.2vw auto 1.9vw;
}
.material_mds{
background: #613e34;
border-radius: 1vw 1vw 0 0;
text-align: center;
color: #ffffff;
width: 51.6vw;
padding: 1.2vw 0 0.4vw;
/*font-size: 3.2vw;*/
margin: 0 auto;
}
.material_box{
border: solid 1px #613e34;
border-radius: 0 0 1vw 1vw;
width: 51.6vw;
padding: 1vw 1vw 0.8vw 1.6vw;
margin: 0 auto;
text-align: left;
}
.material_txt{
height: 21.8vw;
overflow-y: auto;
}
.material_txt dt{
border-bottom: 1px solid #613e34;
padding: 0 0 0.8vw 0.6vw;
margin: 0 1vw 1.5vw 0;
}
.material_txt dd{
padding: 0 0.6vw;
}
.howto_box{
padding: 0.6vw 6vw 6vw 9.6vw;
text-align: left;
}
.howto_txt{
height: 20vw;
overflow-y: auto;
}
.howto_txt dt{
border-bottom: 1px solid #613e34;
padding: 0 0 0.8vw 0.6vw;
margin: 0 1vw 1.5vw 0;
}
.howto_txt dd{
padding: 0 0.6vw;
margin-bottom: 22px;
}
.material_txt a,
.howto_txt a{
color: #f74c3a;
}
/*スクロールバー*/
.material_box dl::-webkit-scrollbar,
.howto_box dl::-webkit-scrollbar{
width: 1.6vw;
}
.material_box dl::-webkit-scrollbar-track,
.howto_box dl::-webkit-scrollbar-track{
background-color: #e1e1e1;
border-radius: 2vw;
}
.material_box dl::-webkit-scrollbar-thumb,
.howto_box dl::-webkit-scrollbar-thumb{
background-color: #999999;
border-radius: 2vw;
}
.mfp-close{
top: -10vw !important;
right: -2vw !important;
width: 10vw !important;
height: 10vw !important;
font-size: 0 !important;
background: url(/sweets/candy_gum/fruits_gummi/recipe/common/images/btn_close.png) !important;
background-position: center top !important;
background-repeat: no-repeat !important;
background-size: contain !important;
}
button.mfp-arrow{
display: none;
}