@charset "utf-8";

/*------------------------------------------------------------------------------
  Title: 忍者ツールズ 基幹共通
  ------------------------------------------------------------------------------*/

/*============================================================================

Common - Contents(NT)

=============================================================================*/
input[type="text"],
select,
label img {
    vertical-align: middle;
}
label img {
    margin:0 5px;
}
textarea {
    width:100%;
    border:1px solid #abadb3;
    padding:3px;
}

.listOrdered li {
    list-style:decimal inside;
    line-height: 1.4;
    padding-bottom:0.5em;
}

/* textElement */
.size90 {
    font-size:90%;
}
.size115 {
    font-size:115%;
}
.size150 {
    font-size:150%;
}

.txtGrey {
    color:#b1b1b1;
}

.btn-h51 {
    display:block;
    width:140px;
    height:51px;
    overflow:hidden;
}
.btn-h51:hover img,
.btn-h51:hover input[type="image"] {
    margin-top:-51px;
}

.btn-h32 {
    display:block;
    width:140px;
    height:32px;
    overflow:hidden;
}
.btn-h32:hover img,
.btn-h32:hover input[type="image"] {
    margin-top:-32px;
}

/*------------------------------------------------------------
  #container_block
  -------------------------------------------------------------*/
#container_block {}
#container_block .ninja {
    background:#ffffff;
}

#container_block .ninja input.text,
#container_block .ninja input.text4,
#container_block .ninja input.text10 {
    padding:5px;
    border:3px solid #bebebe;
    border-radius:3px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
}
#container_block .ninja input.text {
    width:260px;
}
/* 短めのは文字数で */
#container_block .ninja input.text4 {
    width:4em;
}
#container_block .ninja input.text10 {
    width:10em;
    /* for IE7 */
    /width:125px;
}

/*  .popupwindow
    -------------------------------------------------------------*/
#container_block.popupwindow {
    padding:20px 0;
    width:670px;
    margin: 0 auto;
    background:#ffffff;
}



/*------------------------------------------------------------
  div#header_block
  -------------------------------------------------------------*/
div#header_block {
    margin: 0 auto;
    width: 950px;
    background:#e9e9e9;
}

.ninja #header_block h1 {
    padding:15px 20px;
    height:45px;
    background:#ffffff;
}



/*------------------------------------------------------------
  #contents_block
  -------------------------------------------------------------*/
.ninja #contents_block {
    background:#ffffff;
    padding-bottom:40px;
}
.ninja #contents_block a:link,
.ninja #contents_block a:visited {
    color:#0091db;
    text-decoration:none;
}
.ninja #contents_block a:hover {
    text-decoration:underline;
}



/*  #main_block
    -------------------------------------------------------------*/
.ninja #main_block {
    padding:0 20px 20px;
    width:590px;/*630px*/
    display:block;
    float:left;
    background:#eeeeee;
}
.ninja #main_block.column1 {
    width:630px;
    margin: 0 auto;
}

/*  .contents
    -------------------------------------------------------------*/
.ninja #main_block .contents {
    margin:20px 0 0;
    padding:20px 30px 0;
    border:1px solid #d9d9d9;
}

/*
    大タイトル（h2）
    ->h2に対応するコンテンツは.contents_innerでラップ
    ->通常、次のh2までの間のコンテンツは全て.contents_inner内に入る
*/
.ninja .contents h2 {
    line-height:1;
    font-weight:bold;
    font-size:15px;
}

.ninja .contents .contents_inner {
    padding:15px 10px 20px;
}

/* サブタイトル(h3)
    ->h3に対応するコンテンツは.contents_inner_subでラップ
    ->通常、次のh3までの間のコンテンツは全て.contents_inner_sub内に入る
*/
.ninja .contents .contents_inner h3 {
    margin-top:20px;
    font-size:115%;
    font-weight:bold;
    border-left:10px solid #616161;
    padding:3px 0 3px 10px;
    line-height:1;
}
.ninja .contents .contents_inner .contents_inner_sub {
    margin:15px 0 20px;
    padding-left:35px;
}

/* h4
  ->文脈上どーーーしても必要な場合のみ使う。
  ->このレベルに込み入ったコンテンツはないと思うので、コンテンツにdivラッパーなし
  ->このレベルにコンテンツが多い場合は、文書構造を見直す必要があると思われ。
*/
.ninja .contents .contents_inner h4 {
    margin:20px 0 10px;
    font-weight:bold;
    line-height:1;
}


/*
    グレー枠ボックス
    ->.contents_innerもしくは.contents_inner_subが枠付きの時に併用
*/
.ninja .contents .line {
    margin:10px 10px 20px;
    padding:15px;
    border:1px solid #d9d9d9;
}

/* float */
.ninja .contents .contents_inner .floatLeft {
    float:left;
}
.ninja .contents .contents_inner .floatRight {
    float:right;
}

/*** parts ***/
.ninja .contents .contents_inner p {
    margin:10px 0;
    padding:0;
}
/* 幅狭ブロック */
.middle {
    width:60%;
    margin-left:auto;
    margin-right:auto;
    display:block;
}
/* inline-block化(/account/point/getHistoryの獲得内容セルのような場合) */
.inline-block {
    display:inline-block;
}
/* pとかブロック要素をラインブロック化 */
.box-solidLine {
    margin:0 0 20px;
    padding:0 15px;
    border:1px solid #d9d9d9;
}

/* チェックボックス・ラジオボタンのlabel用 */
.ninja .contents .contents_inner label {
    padding-right:1em;
}

/* placeholder用（ex./account/point/pex） */
.ninja .txtPlaceholder {
    color:#c6c6c6;
}

/* ガイドリンク */
.ninja .contents .contents_inner .guideLink a {
    display:inline-block;
    padding-left:1.5em;
    background:url(/images/NS/ninja/ico-guideList.gif) left center no-repeat;
    line-height:1.4;
}
.ninja .contents .contents_inner .guideLinkDark a {
    display:inline-block;
    padding-left:1.5em;
    background:url(/images/NS/ninja/ico-guideListDark.gif) left center no-repeat;
    line-height:1.4;
}

/* エラーなどメッセージ用 */
.ninja .contents .txtAttention,
.ninja .contents .txtAttention .err {
    color:#e60057;
    font-weight:normal;
}
.ninja .contents .txtAttention.bold,
.ninja .contents .txtAttention.bold .err {
    font-weight:bold;
}

/* 重要メッセージ（背景薄赤バージョン）
   ->.attentionAreaと.attention分けてるのは見出しつくことがあるため
*/
.ninja .contents .attentionArea {
    margin-top:20px;
    margin-bottom:20px;
}
/* .contentsの最初に出る時だけ上マージンなし */
.ninja .contents .attentionArea:first-child {
    margin-top:0;
}
.ninja .attentionArea h3,
.ninja .attentionArea h4,
.ninja .attentionArea h5,
.ninja .attentionArea h6 {
    font-size:12px;
    font-weight: bold;
    margin-bottom: 10px;
}
.ninja .contents .attention {
    background:#fff0f0;
    padding:10px 15px;
    display:block;
    margin-bottom:10px;
}
.ninja .contents .attention.blue {
    background:#ebfffd;
}
.ninja .contents .attention.gray {
    background:#f3f3f3;
}

/* 必須アイコン用 */
.ninja .contents .contents_inner .img-hissu {
    vertical-align:middle;
    margin-right:0.2em;
}

/* リスト */
.ninja .contents ul {
    margin:10px 0;
}
.ninja .contents .list-disc li {
    margin-left:1em;
    text-indent:-1em;
    line-height:1.4;
    list-style:disc inside;
}
.ninja .contents .list-kome li {
    margin-left:1em;
    text-indent:-1em;
    line-height:1.4;
    /list-style:disc inside;
}
.ninja .contents .list-kome li:before {
    content:"※";
}

/* ２カラムのリストブロック用（ex. /account/） */
.ninja .contents .contents_inner .list-2column li.floatLeft {
    width:49%;
    float:left;
}
.ninja .contents .contents_inner .list-2column li.floatRight {
    width:49%;
    float:right;
}
.ninja .contents .contents_inner .list-2column dl {
    padding-bottom:30px;
}
.ninja .contents .contents_inner .list-2column dt {
    margin-bottom:1em;
    padding-left:10px;
    border-left:10px solid #555555;
    font-size:140%;
    font-weight:bold;
}
.ninja .contents .contents_inner .list-2column dd {
    margin-left:1em;
    text-indent:-1em;
    padding:0 20px;
    display:list-item;
    list-style: disc inside;
    line-height:1.4;
}

/* table */
.ninja .contents .contents_inner table {
    margin-bottom:1em;
    width:100%;
    border-top:1px solid #d9d9d9;
    border-right:1px solid #d9d9d9;
    border-left:1px solid #d9d9d9;
}
.ninja .contents .contents_inner table th {
    background:#efefef;
    font-weight:bold;
    vertical-align:middle;
    padding:20px;
    width:140px;
    border-bottom:1px solid #d9d9d9;
    line-height:1.4;
}
.ninja .contents .contents_inner table .full {
    width:100%;
}
.ninja .contents .contents_inner table th.bg-blue {
    background:#e0efff;
}
.ninja .contents .contents_inner table td {
    vertical-align:middle;
    border-bottom:1px solid #d9d9d9;
}
.ninja .contents .contents_inner .cell {
    margin:20px;
    line-height:1.4;
}
.ninja .contents .contents_inner table .nowrap {
    white-space:nowrap;
}
/* フル罫線テーブルの場合用 */
.ninja .contents .contents_inner .borderTable {
    border-left:none;
}
.ninja .contents .contents_inner .borderTable th,
.ninja .contents .contents_inner .borderTable td {
    border-left:1px solid #d9d9d9;
}

/* 余白狭いテーブルの場合 */
.ninja .contents .contents_inner table.tight {
    margin-bottom:30px;
}
.ninja .contents .contents_inner table.tight th {
    padding:10px;
    width:100px;
    word-break: nowrap;
}
.ninja .contents .contents_inner table.tight td .cell {
    margin:10px;
}
.ninja .contents .contents_inner table.tight {}
.ninja .contents .contents_inner table.tight {}


/* ページング（ex./account/point/getHistory） */
.ninja .contents .contents_inner .pager {
    text-align:center;
}
.ninja .contents .contents_inner .pager li {
    margin-left:5px;
    margin-right:5px;
    display:inline-block;
    font-size:15px;
    text-align:center;
    min-width:19px;
    font-weight:bold;
    /* for IE7 */
    /display:inline;
}
.ninja .contents .contents_inner .pager a {
    font-weight:normal;
}
.ninja .contents .contents_inner .pager li.number a {
    display:inline-block;
    min-width:19px;
    height:15px;
    line-height:1;
    padding:2px 0;
    text-align:center;
    overflow:visible;
    border:1px solid #cacaca;
    border-radius:2px;
    background:url(/images/NS/ninja/bg-pager.gif) repeat-x center bottom;
}


/*  #sub_block
    -------------------------------------------------------------*/
.ninja #sub_block {
    padding:0 0 25px;
    width:300px;
    display:block;
    float:right;
}

.ninja #sub_block .sub_contentsInner {
    padding:5px 0 20px;
}

/* アド */
.ninja #sub_block .ad {
    margin:0 0 20px;
}

/* よくある質問 */
.ninja #sub_block .faq li {
    margin-bottom:10px;
    padding:10px 15px 10px 40px;
    min-height:19px;
    line-height:1.6;
    background:url(/images/NS/ninja/ico-subFaqList.gif) 13px 50% no-repeat #efefef;
}
.ninja #sub_block .faq li.btn-subHelp {
    padding:0;
    width:145px;
    float:left;
    background:none;
    line-height:1.6;
}
.ninja #sub_block .faq li.btn-subUserrequest {
    padding:0;
    width:145px;
    float:right;
    background:none;
}
.ninja #sub_block .faq li.btn-subHelp a,
.ninja #sub_block .faq li.btn-subUserrequest a {
    display:block;
    width:145px;
    height:50px;
    overflow:hidden;
}
.ninja #sub_block .faq li.btn-subHelp a:hover img,
.ninja #sub_block .faq li.btn-subUserrequest a:hover img {
    margin-top:-50px;
}

/* ヘルプ&目安箱バナー（bnr260ver.） */
.ninja #sub_block .list-bnr {
    background:#eeeeee;
    padding:20px;
}
.ninja #sub_block .list-bnr dt,
.ninja #sub_block .list-bnr dd,
.ninja #sub_block .list-bnr li {
    font-weight:bold;
    line-height:2.5;
}
.ninja #sub_block .list-bnr dt {
    line-height:1.4;
}

.ninja #sub_block .list-bnr dd~dd,
.ninja #sub_block .list-bnr li~li {
    padding:15px 0 0;
    font-weight:bold;
    line-height:2;
}
.ninja #sub_block .list-bnr dd a,
.ninja #sub_block .list-bnr li a {
    display:block;
    width:260px;
    height:39px;
    overflow:hidden;
}
.ninja #sub_block .list-bnr dd a:hover img,
.ninja #sub_block .list-bnr li a:hover img {
    margin-top:-39px;
}