@charset "UTF-8";

/*------------------------
　お買い物ガイド
------------------------*/
ul.guideList *{
	box-sizing: border-box;	
}
ul.guideList,
ol.guideListNum{
	padding: 0;
}
ul.guideList li,
ol.guideListNum li{
	list-style-type: none;
}
ul.guideList > li + li{
	margin-top: 80px;
}
ul.guideList p{
	margin: 20px 0 0 0;
}
ol.guideListNum p{
	margin: 10px 0 0 0;
}
ul.guideList h3{
	font-size: 28px;
    margin: 40px 0 0 0;
    line-height: 1;
    border-bottom: solid 1px #333;
    padding-bottom: 5px;
}
ul.guideList h3 .step{
    color: #FFF;
    margin-right: 20px;
    background: #333;
    padding: 10px 10px;
    font-size: 14px;
    display: inline-block;
    vertical-align: text-top;
}
ul.guideList h4{
    text-align: center;
    border: solid 1px;
    padding: 10px;
    border-radius: 5px;
    margin: 40px 0 0;
}
ul.guideList h5{
	text-align: center;
	font-size: 18px;
	margin-top: 50px;
	border-top: solid 3px #333;
	padding: 5px 10px;
	background: #EEE;
}
ul.guideList h6{
	
}
ol.guideListNum{
	margin-top: 40px;
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
}
ol.guideListNum li{
	width: calc((100% - 40px)/2);
}
.guideImg{
	background: #EEE;
	width: 100%;
	height: auto;
	aspect-ratio: 1000 / 800;
	padding: 10px;
}
.guideImg img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}
/*-- 数字 --*/
ol.guideListNum{
	padding: 0;
	counter-reset: guide;
}
ol.guideListNum li {
	counter-increment: guide;
}
ol.guideListNum li > p:first-of-type {
	display: flex;
	align-items: flex-start;
}
ol.guideListNum li > p:first-of-type::before {
	content: counter(guide, decimal-leading-zero);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 2.2em; /* 幅を固定 */
	width: 2.2em;
	height: 2.2em;
	margin-right: 0.8em;
	border-radius: 50%;
	background: #333;
	color: #fff;
	font-weight: bold;
}
/*-- まとめ買い --*/
ol.guideListNum li.matome{
    padding: 10px;
    border: dashed 1px #333;
    width: 100%;
	text-align: center;
}
ol.guideListNum li.matome .guideImg{
	padding: 0;
	aspect-ratio: unset;
	border: solid 1px #eee;
	background: none;
	width: 100%;
}
ol.guideListNum li.matome > p:first-of-type::before{
	content: none;
}
ol.guideListNum li.matome h5{
	background: #eee;
	padding: 5px 10px;
	text-align: center;
	font-size: 18px;
	margin: 10px auto 0;
}
ol.guideListNum li.matome p{
	display: block;
}