@charset "Shift_JIS";
/* CSS Document */


a:hover img {
	opacity: 0.8;
	filter: progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=80);
}

h1 {
	margin-top: 3px;
	font-size: 12px;
	font-weight: normal;
}

h2 {
	width: 950px;
}

strong {
	font-weight: bold;
}

.innerBlock {
	width: 910px;
	padding: 20px 20px 0 20px;
}

.red {
	color: #F00;
}

.line {
	text-decoration: underline;
}



/* =========================================================
◆ナビゲーション
========================================================= */
.navi ul {
	width: 950px;
	height: 85px;
}
.navi ul li {
	float: left;
}
.navi ul li a {
	display: block;
	text-indent: -9999px;
}
.navi ul li.guide {
	width: 238px;
}
.navi ul li.guide a {
	width: 238px;
	background: url(../images/nav_guide.gif) no-repeat 0 0;
}
.navi ul li.lineup {
	width: 238px;
}
.navi ul li.lineup a {
	width: 238px;
	background: url(../images/nav_lineup.gif) no-repeat 0 0;
}
.navi ul li.step {
	width: 238px;
}
.navi ul li.step a {
	width: 238px;
	background: url(../images/nav_step.gif) no-repeat 0 0;
}
.navi ul li.application {
	width: 236px;
}
.navi ul li.application a {
	width: 236px;
	background: url(../images/nav_application.gif) no-repeat 0 0;
}
.navi ul li.guide, .navi ul li.lineup, .navi ul li.step, .navi ul li.application {
	height: 85px;
}
.navi ul li.guide a, .navi ul li.lineup a, .navi ul li.step a, .navi ul li.application a {
	height: 85px;
}
.navi ul li.guide a:hover, .navi ul li.lineup a:hover, .navi ul li.step a:hover, .navi ul li.application a:hover {
	background-position: 0 -85px;
}



/* =========================================================
◆お知らせ
========================================================= */
.infoBlock {
	width: 710px;
	margin: 0 100px;
	padding: 17px;
	border: #F00 3px solid;
	background: #FFE6E6;
	font-size: 108%;
}
.infoBlock p {
	font-size: 123.1%;
	font-weight: bold;
	text-align: center;
	color: #F00;
	margin-bottom: 5px;
}



/* =========================================================
◆商品のご案内
========================================================= */
h3.ti_guide {
	width: 950px;
	height: 58px;
	background: url(../images/ti_guide.gif) no-repeat 0 0;
	text-indent: -9999px;
}
.summary {
	border-left: 5px #000 solid;
	padding-left: 10px;
	font-size: 138.5%;
	font-weight: bold;
}
.summaryText {
	padding-left: 15px;
	line-height: 1.6;
	margin-top: 6px;
}



/* =========================================================
◆商品ラインナップ
========================================================= */
h3.ti_lineup {
	width: 950px;
	height: 58px;
	background: url(../images/ti_lineup.gif) no-repeat 0 0;
	text-indent: -9999px;
}
.planBlock {
	width: 870px;
	padding: 20px;
	background: #F5F5F5;
}
.planBlock .ttlDm {
	font-size: 153.9%;
	font-weight: bold;
	color: #F06;
}
.planBlock .ttlAb {
	font-size: 153.9%;
	font-weight: bold;
	color: #06F;
}
.planBlock ul {
}

.planBlock ul li {
	padding: 8px 0;
	border-bottom: 1px #E0E0E0 solid;
}
.planBlock ul li:last-child {
	border: 0;
}



/* =========================================================
◆ポイント加算申請方法
========================================================= */
h3.ti_step {
	width: 950px;
	height: 58px;
	background: url(../images/ti_step.gif) no-repeat 0 0;
	text-indent: -9999px;
}
.stepguideBlock {
	width: 870px;
	padding: 18px;
	background: #FFC;
	border: 2px #FC9 solid;
}
ol li {
	list-style: outside decimal;
	margin-left: 16px;
	font-size: 123.1%;
}
.bar {
	width: 820px;
	text-align: center;
	padding: 5px;
	margin: 5px 20px 0 20px;
	background: #F00;
	color: #FFF;
	font-size: 123.1%;
}



/* =========================================================
◆ポイント申請へ
========================================================= */
h3.ti_application {
	width: 950px;
	height: 58px;
	background: url(../images/ti_application.gif) no-repeat 0 0;
	text-indent: -9999px;
}
.text {
	line-height: 1.6;
}



/* =========================================================
◆ボタン共通
========================================================= */
.btn {
	overflow: hidden;
	width: 650px;
	height: 60px;
	border-radius: 4px;        /* CSS3草案 */  
    -webkit-border-radius: 4px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 4px;   /* Firefox用 */
	margin: 10px auto;
	font-size: 197%;
	font-weight: bold;
}

.btn a {
	display: block;
	position: relative;
	z-index: 100;
	text-align: center;
	background: #02A2EF;
	color: #fff;
	line-height: 60px;
	text-decoration :none;
}

.btn a:hover {
	background: #06F;        /* マウスオーバーカラー */  
}

.btn a:before {        /*白いひし型 */  
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	left: 10px;
	width: 10px;
	height: 10px;
	margin-top: -4px;
	background: #fff;
}

.btn a:after {        /*バックグラウンドと同じ色のひし型をずらして「before要素」を隠す */  
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	left: 6px;
	width: 10px;
	height: 10px;
	margin-top: -4px;
	background: #02A2EF;
}

.btn a:hover:after {        /*「after要素」のマウスオーバー（カラーを合わせる） */  
	background: #06F;
}



.btnRed {
	overflow: hidden;
	width: 650px;
	height: 60px;
	border-radius: 4px;        /* CSS3草案 */  
    -webkit-border-radius: 4px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 4px;   /* Firefox用 */
	margin: 10px auto;
	font-size: 197%;
	font-weight: bold;
}

.btnRed a {
	display: block;
	position: relative;
	z-index: 100;
	text-align: center;
	background: #F30;
	color: #fff;
	line-height: 60px;
	text-decoration :none;
}

.btnRed a:hover {
	background: #F00;        /* マウスオーバーカラー */  
}

.btnRed a:before {        /*白いひし型 */  
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	left: 10px;
	width: 10px;
	height: 10px;
	margin-top: -4px;
	background: #fff;
}

.btnRed a:after {        /*バックグラウンドと同じ色のひし型をずらして「before要素」を隠す */  
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	left: 6px;
	width: 10px;
	height: 10px;
	margin-top: -4px;
	background: #F30;
}

.btnRed a:hover:after {        /*「after要素」のマウスオーバー（カラーを合わせる） */  
	background: #F00;
}