@charset "utf-8";

/* =================================================
 * common
 * ================================================*/

#mile *, #inline_content *, #inline_content2 * {
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
}

#mile, #inline_content, #inline_content2 {
	font-size: 12px;
	line-height: 160%;
	color: #000000;
	background-color: #FFFFFF;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0px;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}

img {
	width: 100%;
	height: auto;
	display: block;
}

.header_sub .header_navi ul li a img,
.footer_sub .footer_navi ul li a img {
	width:14px;
}

a {
	text-decoration: none;
}

.floatL {
	float: left;
}

.floatR {
	float: right;
}

.opover {
	display: block;
}

/* =================================================
 * all display
 * ================================================*/

.inner {
	width: 85.93%;
	max-width: 500px;
	margin: 0px auto;
}

header {
	padding: 11px 0px;
}

#logo-canon {
	width: 22.54%;
	float: left;
	max-width: 124px;
}

#logo-pixus {
	width: 21.45%;
	float: right;
	max-width: 118px;
}

footer {
	padding: 30px 0px;
}

footer .back {
	width: 40%;
	max-width: 220px;
	margin-bottom: 10px;
}

footer small {
	font-size: 10px;
}

h1 {
	width: 100%;
	margin: 0px auto;
	max-width: 860px;
}

#mile {
	margin-bottom:0;
}

#mile .inner {
	width: 100%;
	max-width: none;
	margin: 0px auto;
	background-color: #FFFAD7;
	box-sizing: border-box;
}

.step {
	margin-bottom: 20px;
}

h2 {
	max-width: 608px;
	margin: 0px auto;
}

.detail2 {
	margin-top: 20px;
	text-align: center;
}

/* =================================================
 * smartphone
 * ================================================*/

@media (max-width: 767px) {

.pcOnly {
	display: none;
}

.content {
	width: 85.93%;
	max-width: 500px;
	margin: 0px auto;
	padding: 20px 0px;
}

.service:last-child {
	margin-bottom: 0px;
}

h2 {
	max-width: 82%;
	margin: 0px auto;
}

.detail2 {
	width:56%;
	margin: 20px auto 10px;
}


}

/* =================================================
 * pc
 * ================================================*/

@media (min-width: 768px) {

#mile, #inline_content {
	font-size: 16px;
	line-height: 180%;
}

.spOnly {
	display: none;
}

.inner {
	width: auto;
	max-width: 920px;
	padding: 0px 40px;
	margin: 0px auto;
}

header {
	padding: 22px 0px;
}

footer {
	padding: 80px 0px 60px;
}

footer .back {
	margin-bottom: 18px;
}

footer small {
	font-size: 12px;
}

#mile {
	padding: 0;
}

h1 {
	margin: 0px auto;
}

.content {
	padding: 50px 0px 30px;
}

#mile .inner {
	width: 100%;
	padding: 0px 60px;
}

.step {
	margin-bottom: 45px;
}

.lead {
	margin: 20px 0px 20px;
	font-size: 18px;
	text-align: center; 
}

.leadNote {
	font-size: 11px;
	line-height: 150%;
	width: 61%;
	margin: 0px auto 80px; 
}

.change {
	margin-top: 40px;
}

.coupon {
	width: 58%;
	float: left;
	margin-top: 0px;
}

.and {
	float: left;
	width: 12%;
	font-size: 16px;
	margin-top: 11%;
}

.giftcard {
	width: 30%;
	float: left;
}

.attention {
	font-size: 12px;
	margin-top: 1.5em;
}

.detail {
	max-width: 340px;
	margin: 30px auto 0px;
}

.whiteBox {
	padding: 4.05%;
}

.detail2 {
	max-width: 419px;
	margin: 30px auto 0px;
}

}

a:hover img{
    filter:alpha(opacity=80);
    opacity:.7;
}