@charset "utf-8";

/* ====================================
エリアページの電動工具買取
====================================== */
.areaCampaign {
	padding-bottom: 40px;
}

.areaCamTtl {
	text-align: center;
	letter-spacing: -0.4em;
	padding-bottom: 20px;
}

.areaTtlSub {
	display: inline-block;
	color: #fff;
	font-size: 1.4rem;
	display: inline-block;
	background: #000;
	border-radius: 30px;
	padding: 10px 10%;
	letter-spacing: 0.15em;
	line-height: 1.2;
}

.areaTtlmain {
	display: inline-block;
	letter-spacing: 0.2em;
	font-size: 2rem;
	font-weight: bold;
	padding: 10px 0;
	border-bottom: 4px #000 dotted;
	line-height: 1.4;
}

.areaComPhoto {
	padding-bottom: 30px;
}

.areaComTxt {
	text-align: left;
	font-size: 1.6rem;
	line-height: 1.6;
	letter-spacing: 0.15em;
}

.howArea {
	text-align: center;
	position: relative;
	padding-bottom: 40px;
}

.howAreaTtl {
	display: inline-block;
	font-size: 1.8rem;
	font-weight: bold;
	padding: 10px 5%;
	border: 3px #000 solid;
	border-radius: 54px;
	letter-spacing: 0.05em;
	position: relative;
	top: 0;
	background: #fff;
}

.howAreaTxt {
	font-size: 1.4rem;
	padding: 40px 5% 30px;
	border: 3px #000 solid;
	text-align: left;
	line-height: 1.6;
	margin-top: -25px;
	letter-spacing: 0.15em;
}

.areaIntroduction {
	padding-bottom: 60px;
}

.areaIntroTxt {
	font-size: 1.8rem;
	line-height: 1.4;
	text-align: center;
	font-weight: bold;
	letter-spacing: 0.3em;
}

.areaIntroTtl {
	font-size: 1.8rem;
	line-height: 1;
	text-align: center;
	padding-top: 90px;
	font-weight: bold;
	letter-spacing: 0.3em;
	position: relative;
}

.areaIntroTtl::before {
	width: 100%;
	height: 140px;
	content: '';
	background: url(../img/area_intro_bg_sp.png) no-repeat center;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

.areaIntroList {
	background: #f5f2ea;
	letter-spacing: -0.4em;
	padding: 20px 5% 47px;
}

.areaIntroItem {
	display: inline-block;
	letter-spacing: normal;
	padding: 0 5% 30px 0;
}

.areaIntroItem a {
	display: block;
	font-size: 1.6rem;
	line-height: 1;
	font-weight: bold;
	padding-left: 20px;
	position: relative;
	transition: all 0.3s ease-in-out 0s;
}

.areaIntroItem a::before {
	content: '';
	display: inline-block;
	width: 13px;
	height: 13px;
	background: url(../img/area_intro_igon_sp.png);
	background-size: contain;
	vertical-align: middle;
	position: absolute;
	top: 2px;
	left: 0;
}

.areaIntroItem a:hover {
	color: #ffc815;
}


.campaignGm {}

.campaignGmTtl {
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	line-height: 1.2;
	padding-bottom: 20px;
	letter-spacing: 0.2em;
}

.campaignGmCon {}

.campaignGmBox {
	width: 100%;
	padding: 0 20px 20px 20px;
	background-color: #ffc815;
	text-align: center;
}

.campaignGmBox:last-child {
	float: right;
}

.gmBoxTtl {
	display: inline-block;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1;
	padding: 25px 0 25px 47px;
	letter-spacing: 0.1em;
	position: relative;
}

.campaignGmBox:nth-child(1) {
	margin-bottom: 20px;
}

.campaignGmBox:nth-child(1) .gmBoxTtl::before {
	content: '';
	display: inline-block;
	width: 37px;
	height: 34px;
	background: url(../img/cam_genre_icon_sp.png);
	background-size: contain;
	vertical-align: middle;
	position: absolute;
	top: 17px;
	left: -1px;
}

.campaignGmBox:nth-child(2) .gmBoxTtl::before {
	content: '';
	display: inline-block;
	width: 37px;
	height: 37px;
	background: url(../img/cam_manufacturer_icon_sp.png);
	background-size: contain;
	vertical-align: middle;
	position: absolute;
	top: 16px;
	left: 1px;
}

.gmBoxList {
	text-align: left;
	background: #fff;
	padding: 20px 10px;
}

.gmBoxitem {
	padding: 0 0 25px 25px;
}

.gmBoxitem:last-child {
	padding-bottom: 0;
}

.gmBoxitem a {
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.1;
	position: relative;
}

.gmBoxitem a::before {
	content: '';
	display: inline-block;
	width: 11px;
	height: 16px;
	background: url(../img/gmboxitem_arrow_sp.png) center no-repeat;
	background-size: contain;
	transition: all 0.3s ease-in-out 0s;
	position: absolute;
	top: 4px;
	left: -20px;
}

.gmBoxitem a:hover {
	color: #ffc815;
}

#areaTit:before {
	content: 'Purchase reinforcement according to the area';
}