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

body { font-size: 13px; }

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

h1{
	font-size: 0.7em;
	font-weight: normal;
}

h2 {
	max-width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
	vertical-align: bottom;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
	padding: 0;
	margin: 0;
}

.contents {
	margin: 0 auto;
	padding: 0 2%;
	width: 96%;
}

h3 {
	font-size: 15px;
	font-weight: bold;
	border-bottom: 3px solid #018FD3;
	margin-bottom: 8px;
}

.innerBlock {
	margin: 0 auto;
	padding: 0 2%;
	width: 96%;
}

.red {
	color: #F00;
}

.line {
	text-decoration: underline;
}



/* =========================================================
◆ナビゲーション
========================================================= */
.topnav {
	overflow: hidden;
}

* html .topnav { height: 1%; }


.topnav ul {
	padding: 0;
	margin: 0;
}

.topnav li {
	float: left;
	text-align: center;
}

.topnav a {
	font-size: 0.70rem;
	font-weight: bold;
	display: block;
	padding: 10px 4px;
	color: #fff;
	background: #02A2EF;
}

.topnav li.active a,.topnav a:hover{
	color: #FF0;
}

.topnav li {
	width: 50%;
	border-bottom: 1px solid #FFF;
}

.topnav li:nth-child(2n) {
	border-left: 1px solid #FFF;
	width: 49.5%;
}



/* =========================================================
◆お知らせ
========================================================= */
.infoBlock {
	width: 90%;
	padding: 12px;
	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;
}



/* =========================================================
◆商品のご案内
========================================================= */
.summary {
	border-left: 5px #000 solid;
	padding-left: 5px;
	font-weight: bold;
}
.summaryText {
	padding-left: 10px;
	line-height: 1.4;
}



/* =========================================================
◆商品ラインナップ
========================================================= */
.planBlock {
	padding: 15px;
	background: #F5F5F5;
}
.planBlock .ttlDm {
	font-size: 0.9rem;
	font-weight: bold;
	color: #F06;
}
.planBlock .ttlAb {
	font-size: 0.9rem;
	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;
}



/* =========================================================
◆ポイント加算申請方法
========================================================= */
.stepguideBlock {
	padding: 12px;
	background: #FFC;
	border: 2px #FC9 solid;
}
ol li {
	list-style: outside decimal;
	margin-left: 16px;
}
.bar {
	text-align: center;
	padding: 5px;
	margin-top: 5px;
	background: #F00;
	color: #FFF;
}



/* =========================================================
◆ポイント申請へ
========================================================= */
.text {
	line-height: 1.4;
}



/* =========================================================
◆ボタン共通
========================================================= */
.btn {
	overflow: hidden;
	width: 90%;
	height: 40px;
	margin: 5px auto;
	font-size: 0.9rem;
	font-weight: bold;
}

.btn a {
	display: block;
	border-radius: 4px;        /* CSS3草案 */  
    -webkit-border-radius: 4px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 4px;   /* Firefox用 */
	position: relative;
	z-index: auto;
	text-align: center;
	background: #02A2EF;
	color: #fff;
	line-height: 40px;
	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;
}

.btnOther {
	overflow: hidden;
	width: 90%;
	height: 40px;
	margin: 5px auto;
	font-size: 0.9rem;
	font-weight: bold;
}

.btnOther a {
	display: block;
	border-radius: 4px;        /* CSS3草案 */  
    -webkit-border-radius: 4px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 4px;   /* Firefox用 */
	position: relative;
	z-index: auto;
	text-align: center;
	background: #F30;
	color: #fff;
	line-height: 40px;
	text-decoration :none;
}

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

.btnOther 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;
}

.btnOther 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;
}

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