@charset "UTF-8";

@media only screen and (max-width: 767px) {

html {
  background-color: #c5ccd3;
}

body {
  -webkit-text-size-adjust: none;
  font-family: HiraKakuProN-W3;
  line-height: 1.25;
}

/**
 * iPhoneらしいグレーの背景を利用するには、このクラスを使います。
 */
.iPhoneBody {
  background-color: #c5ccd3;
}

.iPhoneBody_HTL {
  background-color: #E4D8AF;
}

/**
 * iPhoneアプリのタイトルなどで使われています
 * h1要素などに使うとよいでしょう。挿入バーからも利用できます。
 */
.iPhoneHead {
  height: 36px;
  padding: 8px 3px 0;
  border-top: 1px solid #cdd5df;
  border-bottom: 1px solid #2d3642;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#b0bccd), to(#6d84a2));
  background-color: #b0bccd;
}
.iPhoneHead h1 {
  font-family: HiraKakuProN-W6;
  font-size: 16px;
  color: #fff;
  text-align: center;
  text-shadow: rgba(0, 0, 0, 0.6) 0 -1px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/**
 * アドレス帳などで「A」「B」などのインデックスに使われる見出しです。
 * h2要素などに使うとよいでしょう。挿入バーからも利用できます
 */
.iPhoneListTitle {
  height: 20px;
  line-height: 20px;
  padding: 0px 10px;
  font-family: HiraKakuProN-W6;
  font-size: 12px;
  color: #fff;
  text-shadow: rgba(0, 0, 0, 0.6) 0 -1px 0;
  border-top: 1px solid #a5b1ba;
  border-bottom: 1px solid #989ea4;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#909faa), to(#b8c1c8));
  background-color: #909faa;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.iPhoneListTitle2 {
  height: 40px;
  line-height: 40px;
  padding: 4px 4px;
  font-family: HiraKakuProN-W6;
  font-size: 12px;
  color: #fff;
  text-shadow: rgba(0, 0, 0, 0.6) 0 -1px 0;
  border-top: 1px solid #a5b1ba;
  border-bottom: 1px solid #989ea4;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#909faa), to(#b8c1c8));
  background-color: #909faa;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.iPhoneListTitle3 {
  height: 32px;
  line-height: 32px;
  padding: 0px 0px;
  border-top: 1px solid #a5b1ba;
  border-bottom: 1px solid #989ea4;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#909faa), to(#b8c1c8));
  background-color: #909faa;
}

/**
 * アドレス帳のようなリストや、設定画面などの定義リストを構築できます
 * 文字数に制限があるので気をつけましょう
 */
.iPhoneUL,
.iPhoneDL {
  margin: 9px 9px 16px;
  border: solid 1px #a9abae;
  -webkit-border-radius: 8px;
  background-color: #fff;
}

.iPhoneUL li,
.iPhoneDL dd {
  list-style-type: none;
  height: 43px;
  border-bottom: solid 1px #a9abae;
  line-height: 43px;
}


.iPhoneUL li:last-child,
.iPhoneDL dd:last-child {
  border-bottom: none;
}

.iPhoneUL li {
  padding: 0 10px;
}

.iPhoneULIndex li {
  border-top: solid 1px #d9d9d9;
  border-bottom: solid 1px #d9d9d9;
  overflow: hidden;
  background-color: #fff;
  font-size: 12px;
  width : 100%;
  float : left;
}

.iPhoneULIndex_GLF li {
  border-top: solid 1px #d9d9d9;
  border-bottom: solid 1px #d9d9d9;
  overflow: hidden;
  background-color: #fff;
  font-size: 12px;
  width : 100%;
  float : left;
}

.iPhoneULIndex_HTL li {
  border-top: solid 1px #d9d9d9;
  border-bottom: solid 1px #d9d9d9;
  overflow: hidden;
  background-color: #E4D8AF;
  font-size: 12px;
  width : 100%;
  float : left;
}

.iPhoneULIndex2 li {
  border-top: solid 1px #d9d9d9;
  border-bottom: solid 1px #d9d9d9;
  overflow: hidden;
/*  background-color: #fff;*/
  font-size: 12px;
  width : 50%;
  float : left;
}

.iPhoneULIndex3 li {
  border-top: solid 1px #d9d9d9;
  border-bottom: solid 1px #d9d9d9;
  overflow: hidden;
  background-color: #fff;
  font-size: 12px;
  width : 95%;
  float : right;
}

.iPhoneDL dt {
  font-family: HiraKakuProN-W6;
  width: 70px;
  padding: 12px 5px 0 10px;
  font-size: 12px;
  clear: both;
  width: 6em;
}

.iPhoneDL dd {
  padding: 0 10px 0 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  white-space: nowrap;
  margin-top: -30px;
  text-align: right;
  color: #385387;
}


.iPhoneUL a,
.iPhoneULIndex a,
.iPhoneULIndex_GLF a,
.iPhoneULIndex_HTL a,
.iPhoneDL a {
  text-decoration: none;
  color: black;
  -webkit-tap-highlight-color: rgba(2, 109, 236, 0.9);
  display: block;
  padding: 5px 5px;
}

a {
  -webkit-tap-highlight-color: rgba(2, 109, 236, 0.9);  // タップ時の反転色
}

/* ボタンスタイル */
.iPhoneButton,
.iPhoneButtonBlack {
  margin: 0 auto;
  width: 300px;

  border: solid 3px #2d3137;
  -webkit-border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  padding: 2px;
  text-align: center;
}
.iPhoneButton {
  background: -webkit-gradient(linear, left top, left bottom, from(#eeefef), to(#bdbfc2));
  background-color: #bdbfc2;
}
.iPhoneButtonBlack {
  background: -webkit-gradient(linear, left top, left bottom, from(#6b6e74), to(#282e37));
  background: #282e37;
}
.iPhoneButton a,
.iPhoneButtonBlack a {
  -webkit-border-radius: 5px;
  display: inline-block;
  text-align: center;
  padding: .5em 0;
  text-decoration: none;
  font-weight: bold;
  width: 300px;
}
.iPhoneButton a {
  color: #000;
}
.iPhoneButtonBlack a {
  color: #fff;
}
/* ボタンスタイル */
.iPhoneButton2,
.iPhoneButton2Black {
  margin: 0 auto;
  width: 147px;

  border: solid 3px #2d3137;
  -webkit-border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  padding: 2px;
  text-align: center;
}
.iPhoneButton2 {
  background: -webkit-gradient(linear, left top, left bottom, from(#eeefef), to(#bdbfc2));
  background-color: #bdbfc2;
}
.iPhoneButton2Black {
  background: -webkit-gradient(linear, left top, left bottom, from(#6b6e74), to(#282e37));
  background: #282e37;
}
.iPhoneButton2 a,
.iPhoneButton2Black a {
  -webkit-border-radius: 5px;
  display: inline-block;
  text-align: center;
  padding: .5em 0;
  text-decoration: none;
  font-weight: bold;
  width: 147px;
}
.iPhoneButton2 a {
  color: #000;
}
.iPhoneButton2Black a {
  color: #fff;
}

/*
戻るボタン
*/
.btnBack {
  background: url(../images/bg_button_back_a1.png) right center no-repeat;
  width: 50px;
  height: 31px;
  line-height: 31px;
  display:table-cell;
  text-align: center;
  padding-right: 0px;
  float: left;
  margin-right: 0px;
}
.btnBack:hover {
  background: url(../images/bg_button_back_a2.png) right center no-repeat;
}
.btnBack a {
  color: #fff;
  font-size: 80%;
  text-decoration: none;
  text-shadow: rgba(0, 0, 0, 0.6) 0 -1px 0;
}

.panel {
  display: none;
  width: 100%;
/*  position: absolute;*/
}

.active {
  display: block;
}

.content {
  margin: 10px;
  background-color: #f4f4f4;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  padding: 10px;
}

.header {
  margin: 0px 0px 0px;
  border: solid 0px #a9abae;
  -webkit-border-radius: 0px;
  background-color: #fff;
}

/* --- ナビゲーションバー --- */
div.nav {
width: 100%; /* ナビゲーションの幅 */
margin: 0 auto; /* センターに配置 */
background-color: #f9f9f9; /* ナビゲーションの背景色 */
border-top: 1px #cccccc solid; /* 上境界線 */
border-bottom: 1px #cccccc solid; /* 下境界線 */
font-size: 80%;
}

/* --- メニューエリア --- */
div.nav ul.nl {
width: 100%; /* メニューの幅 */
margin: 0 auto; /* センターに配置 */
padding: 0;
background-color: #ffffff; /* メニューの背景色 */
border-right: 1px #cccccc solid; /* メニューの右境界線 */
list-style-type: none;
text-align: center;
}

/* --- メニュー項目 --- */
div.nav ul.nl li {
width: 32%; /* 項目の幅 */
padding: 2px 1px 2px 2px;
float: left;
}

/* --- clearfix --- */
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearFix {
min-height: 1px;
}

#tb_header {
	background-color: #ffffff;
	width: 100%;
/*	height: 100%;*/
	border-spacing: 0px;
	margin-left: auto;
	margin-right: auto;
	line-height: 0;
}

#kakumaru_a {	/* 角丸IEはダメ */
	/*background-color: #eaebff;*/
	background: -moz-linear-gradient(#eaebff, #c3c4fd);
 	background: -webkit-gradient(linear, left top, left bottom, from(#eaebff), to(#c3c4fd));
	filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#eaebff, EndColorStr=#c3c4fd);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding: 5px;
	text-align: center;
	font-size: 100%;
	font-weight: bold;
	/* 文字エンボス効果 */
	text-shadow: -1px -1px 0 rgba(150, 150, 150, 0.3);
}
#kakumaru_a:hover {
	background: -moz-linear-gradient(#cfd0fe, #a1a0fe);
 	background: -webkit-gradient(linear, left top, left bottom, from(#cfd0fe), to(#a1a0fe));
}

/* 半透明 */
div.alphabox_sp{
	position:absolute;
	width:100%;
/*	height:100%;*/
	background:#000000;
	display:block;
	filter:alpha(opacity=30);
	-moz-opacity:0.3;
	opacity:0.3;
	z-index : 2;
}
div.alphabox_sp2{
	position:absolute;
	margin: 0 auto;
	width:100%;
	height:65px;
	background:#000000;
	display:block;
	filter:alpha(opacity=30);
	-moz-opacity:0.3;
	opacity:0.3;
	z-index : 2;
}

}