@charset "UTF-8";

/* マンガで分かるDMMFX > 共通
-------------------------------------------------------------*/
#ComicFx {
    margin: 0 auto;
    text-align: center;
}
#ComicFx li {
	list-style: none;
	text-align: left;
}
#ComicFx h4,
#ComicFx h5,
#ComicFx p {
	text-align: left;
}
#ComicFx h3.HeadingMiddle {
	margin: 16px auto;
    text-align: left;
    width: 900px;
}
#ComicFx .ComicTtl,
#ComicFx .ComicImg,
#ComicFx .Article {
    margin: 0 auto 10px;
    text-align: center;
    width: 800px;
}
#ComicFx p.PageTop {
    margin: 15px 10px 10px;
    text-align: right;
}
#ComicFx .Article .ArticleBox {
	background: #FFF0D7;
	border-radius: 10px;
	float: left;	
    min-height: 130px;
    margin: 0 0 10px 10px;
	padding: 10px;
	width: 200px;
}
#ComicFx .Article .ArticleBox:first-child {
	margin-left: 60px;
}
#ComicFx .Article .ArticleBox h4 {
	font-size: 20px;
	font-weight: bold;
	margin: 5px 0;
	text-align: center;
}
#ComicFx .Article .ArticleBox p {
	font-size: 14px;
}
#ComicFx a:hover img {
	opacity: 0.8;
    text-decoration: none;
}

/* マンガで分かるDMMFX > トップ
-------------------------------------------------------------*/
.TopImg {
	margin: 0 auto;
	width: 900px;
}
.TopImg p {
	line-height: 1.6;
	margin: 25px 0;
}
.TopImg .TopImgBnr {
	margin-bottom: 0;
}
.TopImg .TopImgBnr {
	margin-bottom: 10px;
}
.TopMenu {
	margin: 0 auto 20px;
	width: 900px;
}
.TopMenu .MenuList li {
	float: left;
	padding-left: 5px;
}

/* マンガで分かるDMMFX > #Login
-------------------------------------------------------------*/
.LoginImg {
	margin: 10px 0;
}
.LoginImg li {
	float: left;
    padding-right: 20px;
}
.AppArticle {
	position: relative;
}
.AppArticle .AppDownload li {
	position: absolute;
}
.AppArticle .AppDownload li.AppStore {
	bottom: 55px;
	left: 180px;
}
.AppArticle .AppDownload li.Googleplay {
	bottom: 55px;
	right: 180px;
}

/* マンガで分かるDMMFX > #Payment
-------------------------------------------------------------*/
#Payment .Article img {
	margin-bottom: 20px;
}
#Payment .Article .Attention {
	margin: 0 10px;
}
#Payment .Article .Attention li {
	text-indent: -12px;
}
#Payment .Article .Attention li:before {
	content: "※";
}

/* マンガで分かるDMMFX > #Order
-------------------------------------------------------------*/
#Order .Article img {
	margin-bottom: 10px;
}
#Order .Btn {
	margin: 20px 0;
}

/* マンガで分かるDMMFX > LINE
-------------------------------------------------------------*/
.LineDetail {
	margin-bottom: 50px;
}
.LineDetail img.MainImg {
    margin-right: 10px;
}
.LineDetail div.MainTxt {
    display: inline-block;
    height: 460px;
    width: 540px;
}
.LineDetail div.MainTxt p {
    margin: 10px;
}
.LineDetail .LineBox {
    border: 1px solid #aaa;
    border-radius: 4px;
    margin: 20px auto;
    padding: 10px;
    vertical-align: middle;
    width: 380px;
}
.LineDetail .LineBox img {
    float: left;
}
.LineDetail .LineBox div {
    display: inline-block;
}
.LineDetail .LineBox div .LineID {
    color: #38c321;
    font-size: 18px;
    font-weight: bold;
}
.LineDetail .LineBox div p.LineInquiry-Btn {
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 2px;
    font-size: 14px;
    margin-bottom: 0;
    margin-top: 0;
    padding: 6px 10px;
    text-align: center;
    width: 215px;
}
.LineDetail div.MainTxt div.ReceptionTime {
    margin-left: 70px;
    width: 470px;
}
.LineDetail div.MainTxt div.ReceptionTime h3 {
    color: #005421;
    font-size: 15px;
    font-weight: bold;
	text-align: left;
}
#ComicFx .LineDetail div.MainTxt div.ReceptionTime p.AcceptableUsePolicy {
    text-align: right;
}

/* マンガで分かるDMMFX > #Trend
-------------------------------------------------------------*/
#ComicFx ul.TrendList {
	margin-left: 60px;
}
#ComicFx ul.TrendList li {
	position: relative;
}
#ComicFx ul.TrendList li a.Link {
    bottom: 30px;
    right: 70px;
	position: absolute;
}

/* マンガで分かるDMMFX > #Tab
-------------------------------------------------------------*/
div#TabChange {
	width: 900px;
	margin: 0 auto;
}
ul.Menu {
    height: 60px;
    margin: 0 auto;
	/*width: 900px;*/
}
ul.Menu li {
    float: left;
    list-style: none;
    margin: 0 5px 0 0;
    width: 175px;
}
 ul.Menu li a {
	background: linear-gradient(top center, #eee 0%, #ccc 100%);
	background: -webkit-gradient(linear, center top, center bottom, from(#eee), to(#ccc));
	background: -moz-linear-gradient(top center, #eee 0%, #ccc 100%);
	background-clip: padding-box;
	border-radius: 5px;
	box-shadow: rgba(140, 140, 140, 0.8) 2px 2px 1px 0px;
	color: #333;
    display: block;
	font-size: 16px;
	font-weight: bold;
    padding: 15px 5px;
	text-align: center;
	text-decoration: none;
}
ul.Menu li a:hover {
	background: linear-gradient(top center, #B6D74B 0%, #97CA16 100%);
	background: -webkit-gradient(linear, center top, center bottom, from(#B6D74B), to(#97CA16));
	background: -moz-linear-gradient(top center, #B6D74B 0%, #97CA16 100%);
	border-radius: 5px;
}
ul.Menu li a.current {
	background: #84BB21;
	color: #FFF;
	text-align: center;
}
div#TabChange div#TabWrapp div#Payment,
div#TabChange div#TabWrapp div#Trend,
div#TabChange div#TabWrapp div#Order,
div#TabChange div#TabWrapp div#Settlement {
    display: none;
}