@charset "UTF-8";



/*--------------------------------------------------------------
TOP
--------------------------------------------------------------*/
#top ul.news-list-sp li.news { text-align: center; padding: 0 0 18px; }
#top ul.news-list-sp li.news img { width: 25%; height: auto; }
#top ul.news-list-sp dl { position: relative; width: 100%; margin:0; }
#top ul.news-list-sp dl dt { position: relative; padding: 0 0.5em; color:#0092d6; z-index: 0; background: url(/common/images/icon_new_sp.png) no-repeat 22% 1px; background-size: 24px 15px; }
#top ul.news-list-sp dl dd { position: relative; line-height:20px; padding: 0.2em 0.5em; margin-bottom: 1.5em; z-index: 1; }
#top ul.news-list-sp dl dd a { text-decoration: none; padding: 10px 0; font-size: 10px !important; }
#top ul.news-list-sp dl dt.recipe { color: #ff4646; }
#top ul.news-list-sp dl dt.product { color: #ff7f20; }
#top ul.news-list-sp dl dt.dictionary { color: #51bff2; }
#top ul.news-list-sp dl dt.factory { color: #3c84c8; }
#top ul.news-list-sp dl dt.history { color: #3ba443; }
#top ul.news-list-sp dl dt.faq { color: #a789dc; }
#top ul.news-list-sp {
list-style: none;
width: 100%;
}
#top ul.news-list-sp a {
padding: 10px 15px;
color:#555;
font-size: 14px;
font-weight: bold;
}
#top ul.news-list-sp li.hover a {
color:#555;
background: #0095fd;
}


#top #wrapper { background: #fff; box-sizing: border-box; }
#top #container { position: relative; display: inline; width: 76%; margin: 0; padding: 0 10px 10px; background: #fff; z-index: 0; box-sizing: border-box; }
#top #container .content {  position: relative; width: auto; margin-left: 0; padding: 0px; background: #fff; border-radius: 6px; box-sizing: border-box; }

@media only screen and (min-width: 1520px) {
	#top #container { width: 86% !important; }
}

@media only screen and (min-width: 1280px) {
	#top #container { width: 83% !important; padding: 0 0 10px 0; }
}

@media only screen and (max-width: 940px) {
	#top #container { width: 64% !important; }
}

@media only screen and (max-width: 738px) {
	#top #container { width: 100% !important; }
	#top #container .content {  margin-left: 0; padding: 0; border-radius: 4px; }
	#top #container .content p.lead { font-size: 120%; font-weight: bold; padding: 0 0 1em 1.2em; }

}


#top .box-wrap { margin: 0.4% 0; width: 100%; overflow: hidden; }
#top .box { width: 334px; float: left; }
#top .box .photo { position: relative; overflow: hidden; z-index: 10; }
#top .box img { position: relative; width: 100%; height: auto; border-top-left-radius: 6px; border-top-right-radius: 6px; display: block; }
#top .box img.recipe-img {width: auto; height: 325px;}

@media only screen and (max-width: 738px) {
#top .box-wrap { margin: 0.4% 0; width: 100%; overflow: hidden; }
#top .box { width: 100%; float: none; }
#top .box img.recipe-img {width: 100%; height: auto;}
}


/* default */
#top .box h4 { font-family:"黎ミン B"; position: relative; font-size: 15px; font-weight: bold; line-height: 1em; margin: 1.3% 3%; padding: 0% 50px 0px 0px; min-height: 50px; height: 45px; background: url(/common/images/icon_note.png) no-repeat 100% #fff; background-size: 40px 40px; z-index: 20; }
#top .box h4 small { color: #ff4646; font-size: 12px; line-height: 2em; }
#top .box { display: table-cell; width: 334px; min-height: 198px; height: 198px; margin: 6px; box-sizing: border-box; }
#top .box.main { min-height: 402px; height: 402px; }
#top .box.main h4 { min-height: 68px; height: 68px; }
#top .box .new01 { position: absolute; top: 0; left: 0; background: url(/common/images/icon_new02.png) no-repeat; width: 52px; height: 30px; text-indent: -9999px; z-index: 20; }
#top .box .new02 { position: absolute; top: 0; left: 0; background: url(/common/images/icon_new01.png) no-repeat; width: 52px; height: 30px; text-indent: -9999px; z-index: 20; }
#top .box .renew { position: absolute; top: 0; left: 0; background: url(/common/images/icon_renewal.png) no-repeat; width: 78px; height: 24px; background-size: 78px 24px; text-indent: -9999px; z-index: 20; }
#top .box .photo { position: relative; z-index: 10; }
#top .box a { display: block; color: #3f2500; padding: 0; text-decoration: none; border-radius: 6px; border: 1px solid #dedede; }
#top .box a:hover { background: #ff4646; z-index: 0; }
#top .box a:hover h4 { background: url(/common/images/icon_note_o.png) no-repeat 100%; background-size: 40px 40px; }
#top .box a:hover h4 small { color: #fff; }

@media only screen and (max-width: 738px) {
#top .box { min-height: auto; height: auto; }
#top .box h4 { position: relative; font-size: 106%; font-weight: bold; line-height: 1.3em; margin: 1.3% 3%; padding: 1% 40px 0 0; min-height: 50px; background-size: 30px 30px; }
#top .box h4 small { color: #ff4646; font-size: 85%; }
#top .box.main { min-height: auto; height: auto; }
#top .box { display: table; width: 99.6%; margin: 4% 0.4%; }
#top .box .new01 { background-size: 36px 21px;  width: 36px; height: 21px; }
#top .box .new02 { background-size: 36px 21px;  width: 36px; height: 21px; }
#top .box a:hover h4 { background-size: 30px 30px; }
}



/* official */
#top .box.official h4 { background: url(/common/images/icon_external_top.png) no-repeat 100%; /* background-size: 40px 40px;background-size: 14px 14px; font-size: 96%; padding: 4% 30px 4% 0;  min-height: 28px; height: 28px; margin: 0 3% 1.3%; line-height: 135%; */}
#top .box.official h4 small { color: #a00100; }
#top .box.official a:hover { background: #e5e5e5; }
#top .box.official a:hover h4 { background: url(/common/images/icon_external_top.png) no-repeat 100%; }
#top .box.official a:hover h4 small { color: #000; }

/* faq */
#top .box.faq h4 { background: url(/common/images/icon_faq.png) no-repeat 100%; background-size: 40px 40px; }
#top .box.faq h4 small { color: #a789dc; }
#top .box.faq a:hover { background: #a789dc; }
#top .box.faq a:hover h4 { background: url(/common/images/icon_faq_o.png) no-repeat 100%; background-size: 40px 40px; }

/* factory */
#top .box.factory h4 { background: url(/common/images/icon_factory.png) no-repeat 100%; background-size: 40px 40px; }
#top .box.factory h4 small { color: #3c84c8; }
#top .box.factory a:hover { background: #3c84c8; }
#top .box.factory a:hover h4 { background: url(/common/images/icon_factory_o.png) no-repeat 100%; background-size: 40px 40px; }

/* map */
#top .box.map h4 { background: url(/common/images/icon_map.png) no-repeat 100%; background-size: 40px 40px; }
#top .box.map h4 small { color: #5cc58d; }
#top .box.map a:hover { background: #5cc58d; }
#top .box.map a:hover h4 { background: url(/common/images/icon_map_o.png) no-repeat 100%; background-size: 40px 40px; }

/* product */
#top .box.product h4 { background: url(/common/images/icon_product.png) no-repeat 100%; background-size: 40px 40px; }
#top .box.product h4 small { color: #ff7f20; }
#top .box.product a:hover { background: #ff7f20; }
#top .box.product a:hover h4 { background: url(/common/images/icon_product_o.png) no-repeat 100%; background-size: 40px 40px; }

/* insta */
#top .box.insta h4 { background: url(/common/images/icon_insta.png) no-repeat 100%; background-size: 40px 40px; }
#top .box.insta h4 small { color: #fcba2c; }
#top .box.insta a:hover { background: #fcba2c; }
#top .box.insta a:hover h4 { background: url(/common/images/icon_insta_o.png) no-repeat 100%; background-size: 40px 40px; }

/* history */
#top .box.history h4 { background: url(/common/images/icon_history.png) no-repeat 100%; background-size: 40px 40px; }
#top .box.history h4 small { color: #3ba443; }
#top .box.history a:hover { background: #3ba443; }
#top .box.history a:hover h4 { background: url(/common/images/icon_history_o.png) no-repeat 100%; background-size: 40px 40px; }

/* shop */
#top .box.shop h4 { background: url(/common/images/icon_shop.png) no-repeat 100%; background-size: 40px 40px; }
#top .box.shop h4 small { color: #ff868c; }
#top .box.shop a:hover { background: #ff868c; }
#top .box.shop a:hover h4 { background: url(/common/images/icon_shop_o.png) no-repeat 100%; background-size: 40px 40px; }

/* dictionary */
#top .box.dictionary h4 { background: url(/common/images/icon_dictionary.png) no-repeat 100%; background-size: 40px 40px; }
#top .box.dictionary h4 small { color: #51BFF2; }
#top .box.dictionary a:hover { background: #51BFF2; }
#top .box.dictionary a:hover h4 { background: url(/common/images/icon_dictionary_o.png) no-repeat 100%; background-size: 40px 40px; }

/* special */
#top .box.special h4 { background: url(/common/images/icon_special.png) no-repeat 100%; background-size: 40px 40px; }
#top .box.special h4 small { color: #ff868c; }
#top .box.special a:hover { background: #ff868c; }
#top .box.special a:hover h4 { background: url(/common/images/icon_special_o.png) no-repeat 100%; background-size: 40px 40px; }

@media only screen and (max-width: 738px) {
#top .box.faq h4 { background-size: 30px 30px; }
#top .box.faq a:hover h4 { background-size: 30px 30px; }
#top .box.factory h4 { background-size: 30px 30px; }
#top .box.factory a:hover h4 { background-size: 30px 30px; }
#top .box.map h4 { background-size: 30px 30px; }
#top .box.map a:hover h4 { background-size: 30px 30px; }
#top .box.product h4 { background-size: 30px 30px; }
#top .box.product a:hover h4 { background-size: 30px 30px; }
#top .box.insta h4 { background-size: 30px 30px; }
#top .box.insta a:hover h4 { background-size: 30px 30px; }
#top .box.history h4 { background-size: 30px 30px; }
#top .box.history a:hover h4 { background-size: 30px 30px; }
#top .box.shop h4 { background-size: 30px 30px; }
#top .box.shop a:hover h4 { background-size: 30px 30px; }
#top .box.dictionary h4 { background-size: 30px 30px; }
#top .box.dictionary a:hover h4 { background-size: 30px 30px; }
#top .box.special h4 { background-size: 30px 30px; }
#top .box.special a:hover h4 { background-size: 30px 30px; }
}


#top .box .transform01 {
/*z-index: -10;*/
z-index: 0;
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
-ms-transition: all .3s ease-in-out;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}

#top .box figure:hover .transform01 {
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}

#top .box figure { position: relative; overflow: hidden; margin: 0px auto; }