@charset "UTF-8";

body {
	xfont-size: 14px;
	-webkit-text-size-adjust:none;
	color: #333;
	background-color: #9DF2E1;
	background-image: url(../images/common/bg.png);
	background-repeat: repeat-x;
	background-position: top;
	font-family: 'Helvetica Neue', Helvetica, Arial, Roboto, 'Droid Sans', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic ProN', sans-serif;
}

img {
	margin: 0;
	padding: 0;
	border: none;
	vertical-align: top;
}

p{
	margin: 0;
	padding: 0;
}

.clear {
	margin: 0;
	padding: 0;
	clear: both;
}

/* 追加20120713 */
.w100p {
	width:100%;
}

.alignC {
	text-align:center;
}
.alignR {
	text-align:right;
}
.alignL {
	text-align:left;
}
.floatL {
	float:left;
	margin:0 10px 0 0;
}
.floatR {
	float:right;
	margin:0 0 0 10px;
}
.lh {
	line-height:1.6;
}
.bold {
	font-weight:bold;
}
.small {
	xfont-size:12px;
}
.inblock {
	letter-spacing:-0.4em;
	text-align:center;
}
.inblock li {
	letter-spacing:normal;
	display:inline-block;
}

/* =========
xfont-size
========= */
/*
10px = 77%     11px = 85%     12px = 93%     13px = 100%
14px = 108%    15px = 116%    16px = 123.1%  17px = 131%
18px = 138.5%  19px = 146.5%  20px = 153.9%  21px = 161.6%
22px = 167%    23px = 174%    24px = 182%    25px = 189%
26px = 197%
*/
.f8 {font-size:8px !important !important;}
.f9 {font-size:9px !important;}
.f10 {font-size:10px !important;}
.f11 {font-size:11px !important;}
.f12 {font-size:12px !important;}
.f13 {font-size:13px !important;}
.f14 {font-size:14px !important;}
.f15 {font-size:15px !important;}
.f16 {font-size:16px !important;}
.f17 {font-size:17px !important;}
.f18 {font-size:18px !important;}
.f19 {font-size:19px !important;}
.f20 {font-size:20px !important;}
.f25 {font-size:25px !important;}

/* =========
padding
========= */
.pt1 {padding:1px 0 0 0 !important;}
.pt2 {padding:2px 0 0 0 !important;}
.pt3 {padding:3px 0 0 0 !important;}
.pt4 {padding:4px 0 0 0 !important;}
.pt5 {padding:5px 0 0 0 !important;}
.pt6 {padding:6px 0 0 0 !important;}
.pt7 {padding:7px 0 0 0 !important;}
.pt8 {padding:8px 0 0 0 !important;}
.pt9 {padding:9px 0 0 0 !important;}
.pt10 {padding:10px 0 0 0 !important;}
.pt11 {padding:11px 0 0 0 !important;}
.pt12 {padding:12px 0 0 0 !important;}
.pt13 {padding:13px 0 0 0 !important;}
.pt14 {padding:14px 0 0 0 !important;}
.pt15 {padding:15px 0 0 0 !important;}
.pt16 {padding:16px 0 0 0 !important;}
.pt17 {padding:17px 0 0 0 !important;}
.pt18 {padding:18px 0 0 0 !important;}
.pt19 {padding:19px 0 0 0 !important;}
.pt20 {padding:20px 0 0 0 !important;}
.pt25 {padding:25px 0 0 0 !important;}

.pr1 {padding:0 1px 0 0 !important;}
.pr2 {padding:0 2px 0 0 !important;}
.pr3 {padding:0 3px 0 0 !important;}
.pr4 {padding:0 4px 0 0 !important;}
.pr5 {padding:0 5px 0 0 !important;}
.pr6 {padding:0 6px 0 0 !important;}
.pr7 {padding:0 7px 0 0 !important;}
.pr8 {padding:0 8px 0 0 !important;}
.pr9 {padding:0 9px 0 0 !important;}
.pr10 {padding:0 10px 0 0 !important;}
.pr11 {padding:0 11px 0 0 !important;}
.pr12 {padding:0 12px 0 0 !important;}
.pr13 {padding:0 13px 0 0 !important;}
.pr14 {padding:0 14px 0 0 !important;}
.pr15 {padding:0 15px 0 0 !important;}
.pr16 {padding:0 16px 0 0 !important;}
.pr17 {padding:0 17px 0 0 !important;}
.pr18 {padding:0 18px 0 0 !important;}
.pr19 {padding:0 19px 0 0 !important;}
.pr20 {padding:0 20px 0 0 !important;}
.pr25 {padding:0 25px 0 0 !important;}

.pb1 {padding:0 0 1px 0 !important;}
.pb2 {padding:0 0 2px 0 !important;}
.pb3 {padding:0 0 3px 0 !important;}
.pb4 {padding:0 0 4px 0 !important;}
.pb5 {padding:0 0 5px 0 !important;}
.pb6 {padding:0 0 6px 0 !important;}
.pb7 {padding:0 0 7px 0 !important;}
.pb8 {padding:0 0 8px 0 !important;}
.pb9 {padding:0 0 9px 0 !important;}
.pb10 {padding:0 0 10px 0 !important;}
.pb11 {padding:0 0 11px 0 !important;}
.pb12 {padding:0 0 12px 0 !important;}
.pb13 {padding:0 0 13px 0 !important;}
.pb14 {padding:0 0 14px 0 !important;}
.pb15 {padding:0 0 15px 0 !important;}
.pb16 {padding:0 0 16px 0 !important;}
.pb17 {padding:0 0 17px 0 !important;}
.pb18 {padding:0 0 18px 0 !important;}
.pb19 {padding:0 0 19px 0 !important;}
.pb20 {padding:0 0 20px 0 !important;}
.pb25 {padding:0 0 25px 0 !important;}

.pl1 {padding:0 0 0 1px !important;}
.pl2 {padding:0 0 0 2px !important;}
.pl3 {padding:0 0 0 3px !important;}
.pl4 {padding:0 0 0 4px !important;}
.pl5 {padding:0 0 0 5px !important;}
.pl6 {padding:0 0 0 6px !important;}
.pl7 {padding:0 0 0 7px !important;}
.pl8 {padding:0 0 0 8px !important;}
.pl9 {padding:0 0 0 9px !important;}
.pl10 {padding:0 0 0 10px !important;}
.pl11 {padding:0 0 0 11px !important;}
.pl12 {padding:0 0 0 12px !important;}
.pl13 {padding:0 0 0 13px !important;}
.pl14 {padding:0 0 0 14px !important;}
.pl15 {padding:0 0 0 15px !important;}
.pl16 {padding:0 0 0 16px !important;}
.pl17 {padding:0 0 0 17px !important;}
.pl18 {padding:0 0 0 18px !important;}
.pl19 {padding:0 0 0 19px !important;}
.pl20 {padding:0 0 0 20px !important;}
.pl25 {padding:0 0 0 25px !important;}

/*
------------------------------------------------------ */

h1 {
	margin: 0;
	padding: 3px 0;
	width: 100%;
	text-align: center;
	xfont-size: 12px;
	color: #FFF;
	background-color: #000;
	font-weight: normal;
	overflow:hidden;
	width:320px;
	height:18px;
	line-height:18px;
	margin:0 auto;
}

header {
	margin: 0;
	padding: 0;
	clear: both;
}

header#toppage {
	margin: 0;
	padding: 75px 0 0 0;
	width: 320px;
}


header#toppage ul {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align:center;
	letter-spacing:-0.4em;
}

header#toppage li {
	margin: 8px 0 0 0;
	display:inline-block;
	letter-spacing:normal;
	xfont-size:12px;
}

header#toppage li:nth-child(4) {
	xfont-size:12px;
}

header#toppage li:nth-child(6) {
	margin:0 7px;
}

header#toppage li:nth-child(4) img,
header#toppage li:nth-child(5) img,
header#toppage li:nth-child(6) img,
header#toppage li:nth-child(7) img {
	padding:0 0 4px 0;
}

/*
header#toppage li:nth-child(1) {
	xmargin:0 0 0 3px;
}

header#toppage li:nth-child(2) {
	margin:4px 1px 6px 0;
}

header#toppage li:nth-child(3) {
	margin:4px 0 6px 0;
}

header#toppage li:nth-child(4) {
	margin:0 0 0 -8px;
}

header#toppage li:nth-child(5) {
	margin:0 6px;
}

*/
#addBtn ul {
	text-align:center;
	letter-spacing:-0.4em;
}

#addBtn li {
	display:inline-block;
	letter-spacing:normal;
	margin:8px 2px 0 2px;
}

#container {
	margin: 0px auto;
	padding: 0;
	width: 320px;
	xbackground:url(../images/common/main.png) center top no-repeat;
	x-webkit-background-size: 100% 307px;

}

.content {
	margin: 15px 0 0 0;
	padding: 0;
	width: 320px;
	clear: both;
}

h2 {
	margin: 0;
	padding: 0;
	text-align: center;
	clear: both;
}

section {
	margin: 5px auto 0 auto;
	padding: 0;
	width: 300px;
	clear: both;
}

nav {
	xfont-size: 14px;
	width: 300px;
	margin: 5px 0 0 0;
	padding: 0;
}

nav li {
	clear: both;
	background-image: url(../images/common/arrow.png);
	background-repeat: no-repeat;
    background-position: 98% center;
    background-size: 18px;
}

nav li.top {
	background-color: #FFF;
	border-radius: 6px 6px 0 0;
	-webkit-border-radius: 6px 6px 0 0;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-top-color: #4BBFA8;
	border-right-color: #4BBFA8;
	border-bottom-color: #4BBFA8;
	border-left-color: #4BBFA8;
	border-left-style: solid;
}

nav li.top_color {
	background-color: #DFFFF9;
	border-radius: 6px 6px 0 0;
	-webkit-border-radius: 6px 6px 0 0;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-top-color: #4BBFA8;
	border-right-color: #4BBFA8;
	border-bottom-color: #4BBFA8;
	border-left-color: #4BBFA8;
	border-left-style: solid;
}

nav li.middle {
	background-color: #FFF;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-top-color: #4BBFA8;
	border-right-color: #4BBFA8;
	border-bottom-color: #4BBFA8;
	border-left-color: #4BBFA8;
	border-right-style: solid;
	border-left-style: solid;
}

nav li.middle_color {
	background-color: #DFFFF9;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-top-color: #4BBFA8;
	border-right-color: #4BBFA8;
	border-bottom-color: #4BBFA8;
	border-left-color: #4BBFA8;
	border-right-style: solid;
	border-left-style: solid;
}

nav li.under {
	background-color: #FFF;
	border-radius: 0 0 6px 6px;
	-webkit-border-radius: 0 0 6px 6px;
	border: 1px solid #4BBFA8;
}

nav li.under_color {
	background-color: #DFFFF9;
	border-radius: 0 0 6px 6px;
	-webkit-border-radius: 0 0 6px 6px;
	border: 1px solid #4BBFA8;
}

nav li a {
	display: block;
	width: 284px;
	padding: 8px;
	color: #333;
}

nav a {
	text-decoration: none;
}

/* important_list */
.important_list {
	padding:0 0 10px 0;
}
.important_list li {
	background: url(../images/common/arrow_important.png) 98% center no-repeat;
	background-color:#FFC2C2;
	border:1px solid #F50000;
	border-bottom:none;
}
.important_list li:first-child {
	border-top-left-radius:6px;
	border-top-right-radius:6px;
}
.important_list li:last-child {
	border-bottom-left-radius:6px;
	border-bottom-right-radius:6px;
	border-bottom:1px solid #F50000;
}
.important_list a {
	color:#F50000;
}

.list_link {
	border-radius: 5px;
	-webkit-border-radius: 5px;
	background-color: #38A9A0;
	background: -webkit-gradient(linear, left top, left bottom, from(#38A9A0), to(#2B7D77));
	xfont-size: 12px;
	text-align: center;
	float: right;
	margin: 8px 0 0 0;
}

.list_link a {
	display: block;
	padding: 5px;
	color: #FFF;
	text-decoration: none;
}

#point {
	xfont-size: 16px;
	font-weight: bold;
	width: 294px;
	margin: 0;
	padding: 10px 0;
	border-radius: 6px;
	-webkit-border-radius: 6p;
	background-color: #FFFFCC;
	border: 2px solid #4BBFA8;
	text-align: center;
}

.item_area {
	margin: 0;
	padding: 0 0 0 0;
	width: 300px;
	height: auto;
	clear: both;
}

.item_area .item {
	margin: 8px 7px 0 3px;
	padding: 0;
	width: 90px;
	float: left;
	text-align: center;
	xfont-size: 12px;
	position:relative; /* ←saleアイコン追加の為 */
	z-index:0; /* ←saleアイコン追加の為 */
}

.saleMark_normal { /* 通常のアイコンにsaleアイコンをつける場合 */
	position:absolute;
	z-index:1;
	top:0;
	right:0;
}
.saleMark_ranking { /* ランキングのついたアイコンにsaleアイコンをつける場合 */
	position:absolute;
	z-index:1;
	top:38px;
	right:0;
}
.saleMark_item_detail { /* アイテム詳細のアイコンにsaleアイコンをつける場合 */
	position:absolute;
	z-index:1;
	top:0;
	left:40px;
}
.saleMark_item_list,
.saleMark_item_ninki { /* アイテム一覧のアイコンにsaleアイコンをつける場合 */
	position:absolute;
	z-index:1;
	top:5px;
	left:55px;
}
.sale_icon { /* セールアイコン用にクラスを付与する場合 */
	position:relative;
	z-index:0;
}

#footer_menu_wrap {
	margin: 15px 0 0 0;
	padding: 0;
	width: 100%;
	clear: both;
	background-color: #57C8BF;
}

#footer_menu {
	margin: 0 auto;
	padding: 10px 0 15px 0;
	width: 300px;
	clear: both;
}

#footer_button_wrap {
	margin: 0;
	padding: 0;
	width: 100%;
	clear: both;
	text-align: center;
	background-color: #38ABA3;
}

#footer_button {
	margin: 0 auto;
	padding: 10px 0;
	width: 270px;
	clear: both;
	text-align: center;
	xfont-size: 12px;
	color: #FFF;
}

#footer_button a {
	color: #FFF;
	text-decoration: none;
}

#footer_button p {
	margin: 0 3px;
	padding: 0;
	float: left;
}

#copyright {
	margin: 0;
	padding: 5px 0;
	width: 100%;
	clear: both;
	text-align: center;
	xfont-size: 12px;
	color: #FFF;
	background-color: #2E8983;
}


/* ?????????
------------------------------------------------------ */
.margin_5px {
	margin: 5px 0 0 0;
	clear: both;
}
.margin_10px {
	margin: 10px 0 0 0;
	clear: both;
}

.margin_15px {
	margin: 15px 0 0 0;
	clear: both;
}

.margin_20px {
	margin: 20px 0 0 0;
	clear: both;
}

.caption_margin_0px {
	xfont-size: 12px;
	margin: 0;
	clear: both;
	text-align: center;
}

.caption_margin_5px {
	xfont-size: 12px;
	margin: 10px 0 0 0;
	clear: both;
	text-align: center;
}

.caption_margin_10px {
	xfont-size: 12px;
	margin: 10px 0 0 0;
	clear: both;
	text-align: center;
}

.txt_red {
	color: #CC0000;
}


/* ???CSS */
.item_area .item_no1 {
	margin: 5px 7px 0 3px;
	padding: 36px 0 0 0;
	width: 90px;
	float: left;
	text-align: center;
	xfont-size: 12px;
	background-image: url(../images/common/no1.png);
	background-repeat: no-repeat;
	background-position: top;
	position:relative; /* ←saleアイコン追加の為 */
	z-index:0; /* ←saleアイコン追加の為 */
}

.item_area .item_no2 {
	margin: 5px 7px 0 3px;
	padding: 36px 0 0 0;
	width: 90px;
	float: left;
	text-align: center;
	xfont-size: 12px;
	background-image: url(../images/common/no2.png);
	background-repeat: no-repeat;
	background-position: top;
	position:relative; /* ←saleアイコン追加の為 */
	z-index:0; /* ←saleアイコン追加の為 */
}

.item_area .item_no3 {
	margin: 5px 7px 0 3px;
	padding: 36px 0 0 0;
	width: 90px;
	float: left;
	text-align: center;
	xfont-size: 12px;
	background-image: url(../images/common/no3.png);
	background-repeat: no-repeat;
	background-position: top;
	position:relative; /* ←saleアイコン追加の為 */
	z-index:0; /* ←saleアイコン追加の為 */
}

h3 {
	xfont-size: 14px;
	width: 275px;
	margin: 15px auto 0 0;
	padding: 8px 8px 8px 15px;
	background-image: url(../images/common/icatch.png);
	background-repeat: no-repeat;
	background-position: -13px center;
	background-color: #BB661A;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	border: 1px solid #BB661A;
	font-weight: bold;
	color: #FFF;
}

.gacha_link {
	border-radius: 5px;
	-webkit-border-radius: 5px;
	background-color: #FE9601;
	background: -webkit-gradient(linear, left top, left bottom, from(#FE9601), to(#DF5720));
	xfont-size: 12px;
	text-align: center;
	float: right;
	margin: 8px 0 15px 5px;
}

.gacha_link a {
	display: block;
	padding: 5px;
	color: #FFF;
	text-decoration: none;
}

/* =========
連続ガチャ
========= */
.bold2 {
	font-weight:bold;
	xfont-size:14px;
	color:#FF0000;
	text-decoration:underline;
	margin:0 0 5px 0;
}

/* お得な月額コース */
.item_area {
	width:300px;
	margin:0 auto;
}
.item_enclosure ul {
	margin: 5px 0 0 0;
	padding: 0;
	width: 300px;
	float: left;
}

.item_enclosure li {
	margin: 5px 0 0 0;
	padding: 5px 20px 5px 5px;
	width: 273px;
	height: auto;
	float: left;
	border: 1px solid #2E8983;
	background-color: #FFF;
	background-image: url(../images/common/arrow.png);
	background-repeat: no-repeat;
	background-position: 98% center;
	list-style: none;
}

.item_enclosure .img {
	margin: 0 5px 0 0;
	padding: 0;
	float: left;

}

.item_enclosure .read {
	margin: 0;
	padding: 0;
	xfont-size: 12px;
	line-height: 160%;
	overflow: auto;
}

.item_enclosure a {
	text-decoration: none;
	color: #333;
}

/* index ガチャ3つのとこ */
/*
.gacha_list_3 li:nth-child(n) {
	padding:0 5px;
}
*/

/* ↑だとダメな機種があるみたいです */
.gacha_list_3 img {
	padding:5px;
}

/*
 新Web退会デザイン
 */
#payment_list li,
#resignCourse li {
	margin:15px 0 0;
}

#payment_list li:first-child,
#resignCourse li:first-child {
	margin:0 0 0;
}

.btn {
	display:block;
	color:#fff;
	border:1px solid #333;
	padding:10px;
	text-decoration:none;
	text-align:center;
	font-weight:bold;
	text-shadow:1px 1px 1px #333;
	border-radius:5px;
	box-shadow:inset 0 1px 1px #fff, 0 5px 0 #999;
}

.btn-1080 {
	background: #353535; /* Old browsers */
	background: -moz-linear-gradient(top,  #353535 0%, #0c0c0c 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#353535), color-stop(100%,#0c0c0c)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #353535 0%,#0c0c0c 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #353535 0%,#0c0c0c 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #353535 0%,#0c0c0c 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #353535 0%,#0c0c0c 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#0c0c0c',GradientType=0 ); /* IE6-9 */
}

.btn-540 {
	background: #e34443; /* Old browsers */
	background: -moz-linear-gradient(top,  #e34443 0%, #d61736 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e34443), color-stop(100%,#d61736)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #e34443 0%,#d61736 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #e34443 0%,#d61736 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #e34443 0%,#d61736 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #e34443 0%,#d61736 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e34443', endColorstr='#d61736',GradientType=0 ); /* IE6-9 */
}

.btn-432 {
	background: #f88346; /* Old browsers */
	background: -moz-linear-gradient(top,  #f88346 0%, #f65a0b 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f88346), color-stop(100%,#f65a0b)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #f88346 0%,#f65a0b 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #f88346 0%,#f65a0b 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #f88346 0%,#f65a0b 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #f88346 0%,#f65a0b 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f88346', endColorstr='#f65a0b',GradientType=0 ); /* IE6-9 */
}

.btn-324 {
	background: #4285f4; /* Old browsers */
	background: -moz-linear-gradient(top,  #4285f4 0%, #0965ef 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4285f4), color-stop(100%,#0965ef)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #4285f4 0%,#0965ef 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #4285f4 0%,#0965ef 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #4285f4 0%,#0965ef 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #4285f4 0%,#0965ef 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4285f4', endColorstr='#0965ef',GradientType=0 ); /* IE6-9 */
}

/* restore */
.txt_restore_link {
	xpadding:10px;
	text-align:center;
}

.txt_restore_link a {
	display:block;
	xpadding:10px;
	color:#f00;
	font-weight:bold;
}