@charset "UTF-8";

#container {
	color: #333;
	margin: 0 auto;
	max-width: 1000px;
	padding-bottom: 55px;
}
#container > section { line-height: 24px; }
#container > section + section { margin-top: 40px; }
#container h2 {
	font-size: 116%;
	font-weight: bold;
	line-height: 28px;
	padding: 3px 9px 0;
	position: relative;
	border-bottom: 2px solid #e6e6e6;
}
#container h2:after {
	content: "";
	width: 6px;
	display: block;
	position: absolute;
	top: 1px;
	bottom: -1px;
	left: -8px;
	background: #b50081;
}

#container ol { margin-top: 20px; }
#container ol li {
	text-indent: -1.5em;
	padding-left: 1.5em;
}
#container ol li:before {
	width: 1.5em;
	text-indent: 0;
	font-weight: bold;
	display: inline-block;
	counter-increment: count;
	content:counter(count) ".";
}
#container section { counter-reset: count; }

#container h3 {
	font-size: 124%;
	font-weight: bold;
	line-height: 60px;
	padding-top: 32px;
	padding-left: 71px;
	margin-bottom: 17px;
	position: relative;
	border-bottom: 3px solid #e6e6e6;
}
#container h3:before {
	content: "";
	width: 56px;
	height: 50px;
	display: block;
	background: no-repeat center;
	position: absolute;
	top: 12px;
	left: 0;
	bottom: 0;
	margin: auto 0;
}
#container  #shop h3:before {
	background-size: auto 42px;
	-moz-background-size: auto 42px;
	-webkit-background-size: auto 42px;
	background-image: url(../images/icon_shop.gif);
}
#container  #topvalue h3:before {
	background-size: 55px auto;
	-moz-background-size: 55px auto;
	-webkit-background-size: 55px auto;
	background-image: url(../images/icon_topvalue.gif);
}
#container  #card h3:before {
	background-size: 43px auto;
	-moz-background-size: 43px auto;
	-webkit-background-size: 43px auto;
	background-image: url(../images/icon_card.gif);
}
#container  #waon h3:before {
	background-size: 40px auto;
	-moz-background-size: 40px auto;
	-webkit-background-size: 40px auto;
	background-image: url(../images/icon_waon_p.gif);
}
#container  #waon_p h3:before {
	background-size: 36px auto;
	-moz-background-size: 36px auto;
	-webkit-background-size: 36px auto;
	background-image: url(../images/icon_waon.gif);
}
#container  #recruit h3:before {
	background-size: 33px auto;
	-moz-background-size: 33px auto;
	-webkit-background-size: 33px auto;
	background-image: url(../images/icon_recruit.gif);
}
#container  #company h3:before {
	background-size: 42px auto;
	-moz-background-size: 42px auto;
	-webkit-background-size: 42px auto;
	background-image: url(../images/icon_company.gif);
}
#container  #stock h3:before {
	background-size: 42px auto;
	-moz-background-size: 42px auto;
	-webkit-background-size: 42px auto;
	background-image: url(../images/icon_stock.gif);
}
#container h3 span {
	line-height: 22px;
	display: inline-block;
	vertical-align: middle;
}
#container h3 ~ * { margin-top: 5px; }

.tel a { color: #b80082; }
p.tel, span.tel {
	color: #b50081;
	font-weight: bold;
}
p.tel { font-size: 154%; }
span.tel {
	display: block;
	letter-spacing: -0.05em;
}
p.tel:before, span.tel:before {
	content: "";
	margin-top: -2px;
	display: inline-block;
	vertical-align: middle;
	background: url(../images/icon_tel.gif) no-repeat center;
	background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
}
p.tel:before {
	width: 12px;
	height: 18px;
	margin-right: 3px;
}
span.tel:before {
	width: 8px;
	height: 12px;
	margin-top: -4px;
	margin-right: 5px;
}

ul.tel { overflow: hidden; }
ul.tel li {
	float: left;
	width: 216px;
	font-size: 124%;
	font-weight: bold;
}
ul.tel li span {
	width: 65px;
	color: #b80082;
	display: inline-block;
}

.uline a { text-decoration: underline; }
.uline a:hover { text-decoration: none; }

.button {
	overflow: hidden;
	padding-top: 5px;
}
.button a {
	color: #333;
	float: left;
	width: 230px;
	height: 38px;
	display: block;
	line-height: 38px;
	text-align: center;
	position: relative;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border: 1px solid #d7d7d7;
}
.button a:hover {
	color: #fff;
	background: #333;
}
.button a:before,
.button a:after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto 0;
}
.button a:after {
	width: 4px;
	height: 4px;
	right: 18px;
	border-top: 2px solid #d7d7d7;
	border-right: 2px solid #d7d7d7;
	transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}
.button a:before {
	width: 12px;
	height: 12px;
	right: 12px;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border: 2px solid #d7d7d7;
}

#container p small {
	display: block;
	font-size: 85%;
	line-height: 15px;
	margin-top: 3px;
}

#btn_form:before {
	content: "";
	width: 23px;
	height: 16px;
	margin-top: -3px;
	margin-right: 10px;
	display: inline-block;
	vertical-align: middle;
	background: url(../images/icon_mail.gif) no-repeat center;
	background-size: 100%;
	-moz-background-size: 100%;
	-webkit-background-size: 100%;
}
#btn_form a {
	color: #b80082;
	font-size: 124%;
	font-weight: bold;
	text-decoration: underline;
}
#btn_form a:hover {
	text-decoration: none;
}

#company .links {
	overflow: hidden;
	padding-top: 27px;
}
#company .links div {
	line-height: 14px;
	display: inline-block;
	vertical-align: middle;
}
#company .links a {
	display: block;
	font-size: 124%;
	font-weight: bold;
	line-height: 91px;
	position: relative;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	border: 3px solid #e6e6e6;
	padding-left: 65px;
	word-break: break-all;
	background: no-repeat 13px center #fff;
	background-size: auto 42px;
	-moz-background-size: auto 42px;
	-webkit-background-size: auto 42px;
}
#company .links a:hover {
	border-color: #b80082;
}
#company .links a:before,
#company .links a:after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto 0;
}
#company .links #tenant a { background-image: url(../images/icon_tenant.png); }
#company .links #building a { background-image: url(../images/icon_building.png); }
#company .links #group a { background-image: url(../images/icon_group.png); }
#company .links span {
	display: block;
	font-size: 63%;
	font-weight: normal;
	margin-top: 5px;
	padding-right: 50px;
}
#waon .columns ul li {
	text-indent: -1em;
	padding-left: 1em;
	font-weight: bold;
	letter-spacing: -0.05em;
}
#waon .columns ul li:before {
	content: "・";
	width: 1em;
	text-indent: 0;
	text-align: center;
	display: inline-block;
}

@media (min-width: 769px){
	#container h2 {
		margin: 0 -30px 0 -22px;
	}
	#container > section { padding: 0 30px; }
	.button a + a { margin-left: 14px; }
	#topvalue {
		float: left;
		padding-right: 50px;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		width: calc(calc(100% - 24px) / 2);
	}
	#card {
		float: right;
		width: calc(calc(100% - 24px) / 2);
	}
	#waon {
		float: left;
		clear: both;
		width: calc(calc(100% - 20px) / 4 * 3);
	}
	#waon .columns { overflow: hidden; }
	#waon .columns > li {
		float: left;
		width: calc(100% / 3);
	}
	#waon .columns ul { height: 72px; }
	#waon_p {
		float: right;
		width: calc(calc(100% - 20px) / 4);
	}
	#recruit { clear: both; }
	#company .links li {
		float: left;
		width: calc(33% - 14px);
	}
	#company .links li + li { margin-left: 21px; }
}

@media (min-width: 769px) and (max-width: 1200px){
	#company .links span { padding-right: 30px; }
}

@media (max-width: 768px){
	#container {
		padding-left: 13px;
		padding-right: 13px;
	}
	#container h2 { margin-left: 8px; }
	.button a {
		float: none;
		margin: 0 auto;
	}
	.button a + a { margin-top: 10px; }
	#waon .columns > li + li { margin-top: 10px; }
	#company .links li + li { margin-top: 10px; }
}