@charset "Shift_JIS";

/* *****************************************************************

	フードロス削減商品 用CSS
	/shop/e/efoodloss/

	01.初期化
	02.汎用クラス
	03.ページ内リンク
	04.カテゴリ
	05.ランキング
	06.注意事項

	PC基本font-size16px
	SP基本font-size14px

***************************************************************** */

/* *****************************************************************

	01.初期化

***************************************************************** */
#efoodloss-cont {
	/*font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;*/
}
#efoodloss-cont *,*:before,*:after {box-sizing:border-box; -webkit-box-sizing: inherit;}

/* メインビジュアル */
.event_name_img_ > img {width:100%; max-width:100%;}
#efoodloss-cont h2{
	text-align: center;
	/*margin-bottom: 30px;*/
}
#efoodloss-cont img{
	max-width: 100%;
}

/* ----------for SP ---------- */
@media screen and (max-width:640px) {
	/*#efoodloss-cont h2{
		margin-bottom: 20px;
	}*/
}



/* *****************************************************************

	02.汎用クラス

***************************************************************** */
/* PC・SP画像切替 */
.sp_on {display:none;}
/* ----------for SP ---------- */
@media screen and (max-width:640px) {
	.pc_on {display:none;}
	.sp_on {display:block;}
}

/* 横幅 */
.wid100 {width:100%;}

/* フォント */
.bold {font-weight:bold !important;}

/* マーカー */
.marker {
	background:linear-gradient(transparent 60%, #fff584 60%);
}

/* 余白 */
.mt10 {margin-top:10px;}
.mt15 {margin-top:15px;}
.mt20 {margin-top:20px;}
.mt25 {margin-top:25px;}
.mt30 {margin-top:30px;}
.mb0 {margin-bottom:0;}
.mb20 {margin-bottom:20px;}
.mb50 {margin-bottom:50px !important;}

.inb {display:inline-block !important;}

@media screen and (max-width:640px) {
	h1.event_name_img_ {margin-bottom: 20px;}
	.mb50 {margin-bottom:0 !important;}
	.mb0{margin-bottom: 0 !important;}
}




/* *****************************************************************

	03.リード

***************************************************************** */
#lead.leadOuter {
	background: #ffee60 url("/feature/efoodloss/img/bg_lead.jpg") repeat border-box center top;
	padding: 25px;
}
@media screen and (max-width:640px) {
	#lead.leadOuter {
		background-size: contain;
	}
}
#lead > .leadInner {
	background: #fff;
	border-radius: 20px;
	padding: 35px 30px;
	line-height: 1.6em;
}
#lead h2 {
	text-align: center;
	margin-bottom: 20px;
	font-weight: bold;
	font-size: 150%;
}




/* *****************************************************************

	04.カテゴリ

***************************************************************** */
#category_box.categoryOuter {
	background: #ffee60 url("/feature/efoodloss/img/bg_category.jpg") repeat border-box center -60px;
	padding: 60px 0 0;
	margin-bottom: 40px;
}
@media screen and (max-width:640px) {
	#category_box.categoryOuter {
		background-size: cover;
		padding: 60px 0 20px;
	}
}
#category_box h2 {
	width: 257px;
	margin-left: auto;
	margin-right: auto;
}

#category_box h2 span {
	display: block;
	margin-top: 10px;
	color: #fff;
	font-weight: bold;
	font-size: 130%;
	letter-spacing: 2px;
}

#category_box .categoryInner ul {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	padding: 5% 8% 3%;
}

#category_box .categoryInner li{
	width: 44%;
	margin: 0 3% 5%;
}
@media screen and (max-width:640px) {
	#category_box .categoryInner ul {
		padding: 5%;
	}

	#category_box .categoryInner li{
		width: 46%;
		margin: 0 2% 5%;
	}
}
/*#category_box .categoryInner li div{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 4.1em;
}*/
#category_box .categoryInner li a{
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	/*background: #fff;*/
	text-decoration: none;
}
#category_box .categoryInner li a figure{
	overflow: hidden;
	width: auto;
	height: auto;
	margin: 0;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
}
#category_box .categoryInner li img{
	border-radius: 20px 20px 0 0;
}
#category_box li a img {
	width: 100%;
	/*background: #fff;*/
	transform: scale(1);
	transition: .5s ease-in-out;
}
#category_box li a:hover{
	text-decoration: none;
	color: #222;
}
#category_box li a:hover img{
	transform: scale(1.05);
}
#category_box li .mainBtn_list_title{
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 4.1em;
	width: 100%;
	background: #fff;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
}
#category_box li .mainBtn_list_title::after{
	content: '';
	width: 6px;
	height: 6px;
	border-top: 2px solid #21a6ad;
	border-right: 2px solid #21a6ad;
	transform: rotate(45deg);
	margin-left: 10px;
}





/* *****************************************************************

	05.ランキング

***************************************************************** */
#ranking_box {
	margin-top:50px;
}
#ranking-ttl {
	margin-bottom:45px;
	text-align:center;
}

.event_banner_ {
	display: none;
}
h2.event_title_:nth-of-type(1) {display:none !important;}
/* ----------for SP ---------- */
@media screen and (max-width:640px) {
	#ranking_box {
		margin-top: 0;
		padding-top:50px;
	}
	#ranking-ttl {margin-bottom:20px; padding: 0 20px;}
}




/* *****************************************************************

	06.注意事項

***************************************************************** */
.notes_box {
	margin-bottom:50px;
	padding:40px;
	background:#f3f3f3;
}
.notes_box .notes_h {
	margin-bottom:30px;
	text-align:center;
	font-size:1.38rem;/* 22px */
}
.notes_box .notes_ttl {
	margin-bottom: 0.8em;
	font-size:1rem;/* 16px */
}
.notes_box .notes_ttl::before {
	content:"●";
	display: inline-block;
	color:#999;
}
.notes_box .notes_list li {
	margin-bottom:0.6em;
	padding-left:1em;
	text-indent:-1em;
	font-size:0.82rem;/* 13px */
}
.notes_box .notes_list li a {
	text-decoration: underline;
}
/* ----------for SP ---------- */
@media screen and (max-width:640px) {
	.notes_box {padding:5%;}
	.notes_h {margin-bottom:5% !important;}
	.notes_list li {font-size:0.93rem !important;/* 13px */}
}