@charset "Shift_JIS";

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

	お土産特集 用CSS
	/shop/e/eomiyage/

	01.初期化
	02.汎用クラス
	03.カテゴリ
	04.ランキング
	05.エリアから探す
	06.注意事項

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

	https://dixuwgljjuzt3.cloudfront.net

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

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

	01.初期化

***************************************************************** */
#eomiyage-cont {}
#eomiyage-cont *,*:before,*:after {box-sizing:border-box; -webkit-box-sizing: inherit;}

/* メインビジュアル */
.event_name_img_ > img {width:100%; max-width:100%;}

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

	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;}
.mb20 {margin-bottom:20px !important;}
.mb50 {margin-bottom:50px !important;}

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

.event_name_img_ {margin-bottom: 30px;}
#eomiyage-cont h2{text-align: center;}
@media screen and (max-width:640px) {
	h2 > img.sp_on{display: inline-block;}
	h1.event_name_img_ {margin-bottom: 20px;}
	.mb50 {margin-bottom:0 !important;}
}


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

	03.ランキング

***************************************************************** */
h2#ranking-ttl{
	margin-bottom: 45px;
	margin-top:70px;
	text-align: center;
}
.event_banner_ {
	display: none;
}
/* ----------for SP ---------- */
@media screen and (max-width:640px) {
	h2#ranking-ttl {
		margin-bottom:40px;
		margin-top:50px;
	}
}




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

	04.エリアから探す

***************************************************************** */
#area_box h2,
#category_box h2{
	margin-bottom: 35px;
	margin-top: 40px;
}
div#area_box > div{
	display: flex;
	justify-content: flex-end;
	background: url(/feature/eomiyage/img/img_map.png) no-repeat;
	padding: 30px 30px 0 0;
	height: 758px;
}
/*div#area_box{ margin-top: 20px;}*/
div#area_box .btn-area{
	width: 263px;
}
div#area_box .btn-area dl{
	margin-top: 25px;
	box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.15);
}
div#area_box .btn-area dl dt{
	padding: 13px 0 12px 10px;
	font-size: 1.1rem;
	font-weight: bold;
}
div#area_box .btn-area dl.tohoku dt{
	background: #a2d9f1;
	display: flex;
	height: 100%;
	align-items: center;
	padding-left: 27px;
}
div#area_box .btn-area dl.kanto dt{
	background: #eeed90;
	display: flex;
	height: 100%;
	align-items: center;
	padding-left: 27px;
}
div#area_box .btn-area dl.chubu dt{
	background: #f4be92;
}
div#area_box .btn-area dl.kinki dt{
	background: #a8efa2;
}
div#area_box .btn-area dl.sikoku dt{
	background: #c9b3e4;
}
div#area_box .btn-area dl.kyusyu dt{
	background: #f8bccf;
}
div#area_box .btn-area dl.chubu dt a,
div#area_box .btn-area dl.sikoku dt a,
div#area_box .btn-area dl.kinki dt a,
div#area_box .btn-area dl.kyusyu dt a{
	display: flex;
	height: 100%;
	align-items: center;
}
div#area_box .btn-area dl dt a:hover{
	color: #333;
}
div#area_box .btn-area dl.chubu dt a:before,
div#area_box .btn-area dl.sikoku dt a:before,
div#area_box .btn-area dl.kinki dt a:before,
div#area_box .btn-area dl.kyusyu dt a:before{
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	border-top: 2px solid #444;
	border-right: 2px solid #444;
	transform: rotate(45deg);
	margin-right: 10px;
}

div#area_box .btn-area dl.tohoku dt:before,
div#area_box .btn-area dl.kanto dt:before{
}
div#area_box .btn-area dl dd{
	padding: 15px 10px 5px 20px;
}
div#area_box .btn-area dd > ul{
	flex-wrap: wrap;
	display: flex;
	list-style: none;
	justify-content: space-between;
}
div#area_box .btn-area dd li{
	width: 28%;
	margin-bottom: 8px;
}
div#area_box .btn-area dd li:before{
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-top: 2px solid #444;
	border-right: 2px solid #444;
	transform: rotate(45deg);
	margin-right: 8px;
	margin-bottom: 4px;
	position: relative;
	top: 3px;
}
div#area_box .btn-area dd li a:hover{
	color: #333;
}
div#area_box .btn-area dl.tohoku dd,
div#area_box .btn-area dl.kanto dd{
	background: rgba(255,255,255,0.8);
}
/* ----------for SP ---------- */
@media screen and (max-width:640px) {
	div#area_box{ margin-top: 30px;}
	#area_box h2{margin-bottom: 25px;}
	div#area_box > div{
		display: block;
		background: #ebffff;
		padding: 10px 15px 50px;
		height: auto;
	}
	div#area_box .btn-area{
		width: 100%;
	}
	div#area_box .btn-area dl dt{
		font-size: 1.2rem;
	}
	div#area_box .btn-area dl li{
		margin-bottom: 20px;
		font-size: 1.3rem;
	}
	#area_box h2#area-ttl{
		margin-top: 30px;
	}
	#category_box h2{
		margin-top: 50px;
	}
}




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

	05.カテゴリ

***************************************************************** */
div#category_box ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
div#category_box ul li {
	margin-bottom: 20px;
	width: 48.5%;
}
div#category_box ul li:first-child {
	width: 100%;
}
div#category_box ul li a {
	display: block;
	position: relative;
	border-radius: 5px;
	border-width: 1px;
	padding: 20px 15px 20px 10px;
	box-shadow: 0px 2px 1px 0px #da8c54;
	font-size: 18px;
	font-weight: bold;
	text-decoration: none;
	background: #f9ab72;
	text-align: center;
}
div#category_box ul li a:after {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	border-top: 2px solid #444;
	border-right: 2px solid #444;
	transform: rotate(45deg);
	margin-right: 10px;
	position: absolute;
	right: 5px;
	top: 40%
}
div#category_box ul li a:hover {
	margin-top: 1px;
	padding-bottom: 19px;
	box-shadow: none;
	text-decoration: none;
	color: #333;
}
@media screen and (max-width:640px) {
	div#category_box ul {
		padding: 0 15px;
	}
	div#category_box ul li {
		margin-bottom: 20px;
		width: 100%;
	}
	div#category_box ul li a{
		align-items: center;
		font-size: 1.2rem;
		padding: 17px 20px 17px 10px;
	}
	div#category_box ul li a:after {
		right: 2px;
	}
}




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

	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 */}
}