@charset "Shift_JIS";
* html {filter:expression(document.execCommand("BackgroundImageCache",false,true));}
/*
 * JAL CARD
 * キャンペーンページ
 */

/*-----------------------------------------------------
初期クリア
-------------------------------------------------------*/
body{
  margin: 0;
  padding: 0;
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック";   /* フォントファミリーを優先順に指定  */
  line-height: 133%;
  font-size: 12px;
  color: #333333;
  text-align: left;
  background: #ffffff url(../img/bg.gif) left top repeat;
}

img {
   border: 0;
}

/*-----------------------------------------------------
ブロックわけ
-------------------------------------------------------*/
#wrapper {
	width: 767px;
	text-align: center;
}

#header {
	height: 63px;
	text-align: left;
	background: url("http://www.jalcard.co.jp/img/head.gif") left bottom no-repeat;
}

#main-ttl {
	width: 767px;
	margin-top: 20px;
}
#content {
    margin-top: 5px;
	border-bottom: 2px solid #333;
}

#footer {
	border-top: 1px solid #C00;
    text-align: left;
}


.block {
}
.block-tb {
  width: 685px; 
}
.block-data {
  width: 685px;
  background: url(../img/line_mdl.gif) repeat-y;
}
.block-data-txt {
  width: 655px;
  text-align: left;
}
.block-data-txt685 {
  width: 685px;
  text-align: left;
  padding-top: 10px;
}
.block-data-right {
  width: 655px;
  text-align: right;
}
.mds {
  width: 685px;
  text-align: left;
  padding: 30px 0 10px 0;
}
/*-----------------------------------------------------
タブエリア全体
-------------------------------------------------------*/
.tab-area {
  width: 684px;
  margin: 0;
  padding: 0;
}
/*-----------------------------------------------------
タブごとのページ設定
-------------------------------------------------------*/
#page01 {
}
#page02 {
  display:none;
}
#page03 {
  display:none;
}
#page04 {
  display:none;
}
#page05 {
  display:none;
}
/*-----------------------------------------------------
横タブの右側の情報エリア
-------------------------------------------------------*/
.otoku {
  width: 684px;
  margin: 0;
  padding: 0;
}
.otoku-info {
  width: 659px;
  height: 500px;
  float: right;
  text-align: center;
  margin: 0;
  padding: 0;
  background: url(../img/tab_mdl.gif) repeat-y;
}
.otoku-info-mds {
  width: 600px;
  margin: 10px 0;
  padding: 5px 5px 5px 10px;
  color: #ffffff;
  text-align: left;
  font-size: 12px;
  font-weight: bold;
  background: #333399;
}
.otoku-info-data {
   width: 610px;
   text-align: left;
   margin: 10px 0;
   color: #333399;
}
.otoku-info-data-bk {
   width: 610px;
   text-align: left;
   margin: 5px 0;
}
.otoku-info-data-f10 {
   width: 610px;
   text-align: left;
   margin: 10px 0;
   font-size: 10px;
   line-height: 120%;
}
.otoku-mile {
   width: 610px;
   padding: 10px;
   border: 1px solid #333399;
}
.otoku-mile-bl {
   width: 590px;
   text-align: left;
   margin:0;
   color: #333399;
}
.otoku-mile-bk {
   width: 590px;
   text-align: left;
   margin: 10px 0 0 0;
}


/*-----タブ２（旅行保険） の左右レイアウト-----------------*/
.otoku-info-hoken {
  clear: both;
  width: 610px;
  height: 155px;
}
.otoku-info-hoken-txt {
  float: left;
  width: 256px;
  padding: 0 7px 7px 7px;
  text-align: left;
}
.otoku-info-hoken-txt p {
   color: #333399;
   font-weight: bold;
   margin: 0;
   padding: 0;
}
.otoku-info-hoken-img {
  float: right;
  width: 335px;
  height: 142px;
}
/*-----タブ３（空港での割引） のレイアウト-----------------*/
.otoku-info-wari {
  clear: both;
  width: 590px;
  margin: 10px 0 0 0;
  padding: 10px;
  text-align: left;
  background: #ffffff;
}
.otoku-info-wari:after {
  content: '.';
  visibility: hidden;
  clear: both;
  display: block;
  height: 0;
}
.otoku-info-wari-img {
  width: 100px;
  float: left;
}
.otoku-info-wari-txt {
  width: 480px;
  float: right;
  text-align: left;
}
.otoku-info-wari p,
.otoku-info-wari-txt p {
   color: #333399;
   margin: 0 0 7px 0;
   padding: 0;
   font-weight: bold;
}
.otoku-info-wari-txt-f10 {
   padding-top: 7px;
   font-size: 10px;
   line-height: 120%;
}
/*-----タブ５（JALカードだけのサービス） のレイアウト-----------------*/
.otoku-info-only-green {
  width: 590px;
  margin: 0;
  padding: 10px;
  text-align: left;
  color: #333399;
  font-weight: bold;
  background: #ccff66;
}
.otoku-info-only-white {
  clear: both;
  width: 590px;
  margin: 0;
  padding: 10px;
  text-align: left;
  color: #333399;
  background: #ffffff;
}
#ill-area {
  position: absolute;
  left: 320px;
  top: 630px;
  width: 305px;
}
/*-----------------------------------------------------
上のタブエリア
-------------------------------------------------------*/
.tab-nav-top {
  width: 660px;
  padding-left: 24px;  /*-----marginにしたいけどmacがmarginきかないのでpadding対応-----------*/
}
.tab-nav-top ul {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 26px;
  width: 660px;
}

.tab-nav-top li a,
.tab-nav-top li {
  float: left;
  margin: 0;
  padding: 0;
  height: 26px;
  background-image: url(../img/tab_02.gif);
}
.tab-nav-top li a {
  text-decoration: none; 
  display: block;
  overflow: hidden;
  text-indent: -9999px;
}

/*-----上のタブ ロールアウト時設定-----------------*/
.tab01 a { 
  background-position: 0 0;
  width: 170px;
}
.tab02 a { 
  background-position: -170px 0; 
  width: 180px;
}
/*-----上のタブ ロールオーバー時設定-----------------*/
.tab01o a { 
  background-position: 0 -26px;
  width: 170px;
}
.tab02o a { 
  background-position: -170px -26px; 
  width: 180px;
}
.tab01 a:hover { background-position: 0 -26px; }
.tab02 a:hover { background-position: -170px -26px; }

/*-----端っこのライン（ロールオーバーなし）-----------------*/
.tab10 { 
  background-position: -350px 0; 
  width: 310px;
  text-indent: -9999px;
}
/*-----------------------------------------------------
上のタブの下の余白
-------------------------------------------------------*/
.tab-nav-yohaku {
  width: 684px;
}
/*-----------------------------------------------------
横のタブエリア
-------------------------------------------------------*/
.tab-nav-side {
  width: 25px;
  float: left;
  margin: 0;
  padding: 0;
}
.tab-nav-side ul {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 447px;
  width: 25px;
}

.tab-nav-side li a,
.tab-nav-side li {
	margin: 0;
	padding: 0;
	/*height: 149px;*/
	background-image: url(../img/tab_03.gif?2403);
	background-repeat: no-repeat;
}
.tab-nav-side li a {
  text-decoration: none; 
  display: block;
  overflow: hidden;
  text-indent: -9999px;
}
/*-----横のタブ ロールアウト時設定-----------------*/
.tab03 a { 
  background-position: 0 0;
  height: 149px;
}
.tab04 a { 
  background-position: 0 -149px; 
  height: 149px;
}
.tab05 a { 
  background-position: 0 -298px; 
  height: 210px;
}
/*-----横のタブ ロールオーバー時設定-----------------*/
.tab03o a { 
  background-position: -25px 0;
  height: 149px;
}
.tab04o a { 
  background-position: -25px -149px; 
  height: 149px;
}
.tab05o a { 
  background-position: -25px -298px; 
  height: 210px;
}

.tab03 a:hover { background-position: -25px 0; }
.tab04 a:hover { background-position: -25px -149px; }
.tab05 a:hover { background-position: -25px -298px; }
/*-----------------------------------------------------
申込みボタン
-------------------------------------------------------*/
.btn-area {
  width: 685px;
  height: 90px;
  margin: 20px 0 0 0;
  padding: 0;
  text-align: center;
}

/*-----------------------------------------------------
お問い合わせ
-------------------------------------------------------*/
#info06 {
  clear: both;
  margin: 15px 0 20px 0;
}
#info06 table {
	border-top: 1px solid #333333;
	border-bottom: 1px solid  #333333;
}
#info06 table td{
    padding: 3px 0 3px 10px;
}
#info06 table td.yokoline {
	border-left: 1px solid #333333;
}
/*-----------------------------------------------------
テーブル設定
-------------------------------------------------------*/
.hyo-tbl {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #333399;
	font-size: 12px;
	text-align: center;
	margin: 0px 0px 5px;
	padding: 0px;
}
.hyo-tbl th {
	font-weight: lighter;
	background-color: #ddf4fc;
	font-size: 12px;
	text-align: center;
	border: 1px solid #333399;
	border-collapse: collapse;
	margin: 0;
	padding: 5px;
	color: #333399;
}
.hyo-tbl td {
	line-height: 133%;
	font-weight: normal;
	background-color: #FFFFFF;
	font-size: 12px;
	padding: 5px;
	margin: 0;
	border: 1px solid #333399;
	border-collapse: collapse;
}
/*-----------------------------------------------------
フォント
-------------------------------------------------------*/
.f10 {
  font-size: 10px;
  line-height: 120%;
  font-weight: normal;
}
.fc-330099 {
  color: #330099;
}
.f14b {
  font-size: 14px;
  line-height: 133%;
  font-weight: bold;
}
.f16b {
  font-size: 16px;
  line-height: 133%;
  font-weight: bold;
}
.fwb{
  font-weight: bold;
}
/*-----------------------------------------------------
フォント
-------------------------------------------------------*/
a:link,
a:visited {
	color: #333;
	text-decoration: underline;
}

a:hover,
a:active {
	color: #333399;
	text-decoration: none;
}
/*-----------------------------------------------------
余白
-------------------------------------------------------*/
.mt10 {
  margin-top: 10px;
}
.mt20 {
  margin-top: 20px;
}
.mt30 {
  margin-top: 30px;
}
.pt05 {
  padding-top: 5px;
}
.pt10 {
  padding-top: 10px;
}
.pt80 {
  padding-top: 80px;
}
.pb05 {
  padding-bottom: 5px;
}