@charset "utf-8";

/*------------------------------------------------------------------------------
  Title: 忍者ツールズ 基幹共通
  Copyright: (C) Samurai Factory Inc.
  ------------------------------------------------------------------------------*/

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

Common - Contents(NT)

=============================================================================*/
input[type="text"],select {
    vertical-align: middle;
}
input[type="checkbox"],
input[type="radio"] {
    margin-right:0.75em;
}
textarea {
    width:100%;
    border:1px solid #abadb3;
    padding:3px;
}
a.blank {
    padding-right:1.1em;
    min-height:1em;
    background:url(/images/common/ninja/ico-blank.gif) no-repeat right center;
}

/* 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.push { /* footer下固定用 */
/*    min-height:100%;
    height:auto !important;
    height:100%;
    margin:0 0 -80px;*/
    background:#fff;
}
#container_block .ninja {
    background:#ffffff;
}

#container_block .ninja input.text,
#container_block .ninja input.text-large,
#container_block .ninja input.text4,
#container_block .ninja input.text7,
#container_block .ninja input.text10,
#container_block .ninja input.text11 {
    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.text-large {
    width:98%;
}
/* 短めのは文字数で */
#container_block .ninja input.text4 {
    width:4em;
}
#container_block .ninja input.text7 {
    width:7em;
}
#container_block .ninja input.text10 {
    width:10em;
}
#container_block .ninja input.text11 {
    width:11em;
}

/*  .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;
}

.ninja #header_block .nav {
    display:inline-block;
    margin-top: -28px;
    margin-bottom:10px;
    margin-right:20px;
    float:right;
}
.ninja #header_block .nav li {
    display:inline-block;
    float:left;
}
.ninja #header_block .nav li:before {
    content:"｜";
    padding-right:0.5em;
    padding-left:0.5em;
    color:#cfcfcf;
}
.ninja #header_block .nav li:first-child:before {
    content:"";
}

.ninja #header_block .nav a,
.ninja #header_block .nav a:link,
.ninja #header_block .nav a:visited {
    color:#0091db;
    text-decoration:none;
    white-space:nowrap;
}
.ninja #header_block .nav a:hover {
    text-decoration:underline;
}



/*------------------------------------------------------------
  #contents_block
  -------------------------------------------------------------*/
.ninja #contents_block {
    background:#ffffff;
    padding-bottom:40px;
}
.push .ninja #contents_block { /* footer固定用 */
/*    padding-bottom:120px;*/
}

.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.wide {
  width: 910px;
}

/*  .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:18px;
}

.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_block h3 {
    margin-top:10px;
}
.ninja .contents .contents_inner .contents_inner_sub {
    margin:15px 0 20px;
    padding-left:35px;
}

/*
    グレー枠ボックス
    -> コンテンツを枠付きの場合：
    -->.contents_innerもしくは.contents_inner_subが枠付きの時に併用
    ->補足情報の場合
    -->.lineの中に<h3><div.contents_inner_sub>
*/
.ninja .contents .line {
    margin:10px 10px 20px;
    padding:15px;
    border:1px solid #d9d9d9;
}
.ninja .contents .line h3 {
    border:none;
    margin-top:0;
    padding-left:0;
}


/* 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;
}
/* inline化(/home/xxx/removeのアンケートのような場合) */
.inline {
    display:inline;
}
/* 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 table + .guideLink {
    margin-top:30px;
}
.ninja .guideLink a,
.ninja .guideLinkDark a {
    display:inline-block;
    padding-left:1.5em;
    background-position:left center;
    background-repeat: no-repeat;
    line-height:1.4;
}
.ninja .guideLink a {
    background-image:url(/images/common/ninja/ico-guideList.gif);
}
.ninja .guideLinkDark a {
    background-image:url(/images/common/ninja/ico-guideListDark.gif);
}

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

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

/* 必須アイコン用 */
.ninja .contents .contents_inner .img-hissu {
    vertical-align:middle;
    margin-right:0.2em;
}
/* テキスト2行の時のインデント用 */
.ninja .contents .contents_inner .img-hissu.indent {
    float:left;
}
.ninja .contents .contents_inner .txt-hissuIndent {
    margin-left:30px;
    font-weight:bold;
}

/* リスト */
.ninja .contents .contents_inner ul {
    margin:10px 0;
}
.ninja .contents .contents_inner ol.orderd > li {
    list-style:decimal inside;
}
.ninja .contents .contents_inner .list-disc > li {
    margin-left:1em;
    text-indent:-1em;
    line-height:1.4;
    list-style:disc inside;
}

/* ２カラムのリストブロック用（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 caption {
    font-weight: bold;
    padding-top:15px;
    padding-bottom:10px;
}
.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 th.tight {
    padding:10px;
    width:100px;
    word-break: nowrap;
}
.ninja .contents .contents_inner .cell.tight {
    margin:10px;
}
/* 縦だけ余白狭い用 */
.ninja .contents .contents_inner th.vTight {
    padding:10px 20px;
    width:100px;
    word-break: nowrap;
}
.ninja .contents .contents_inner td .cell.vTight {
    margin:10px 20px;
}
/* 幅140px固定だと困ることもある */
.ninja .contents .contents_inner table th.flex {
    width:auto;
}
.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;
}
/* 幅が必要なとき用 tdにつけるクラス */
.cell-large {
    min-width:60%;
}
.cell-short {
    min-width:20%;
}
/* セルのはみ出し対策 */
.ninja .contents .contents_inner .cell {
    margin:20px;
    line-height:1.4;
    word-break:break-all;
}

/* 折り返し禁止用 */
.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;
}

/*
  フォームエラー項目強調（テーブル）
  エラーリスト形式：
      <ul.list-kome>
          <li.txtAttention form_alert>
*/
.form_alert {}
.ninja .contents .contents_inner .th_alert,
.contents .contents_inner .th_alert {
    background:#f6cdcd;
}
.ninja .td_alert,
.td_alert {
    background:#fff4f4;
}
.ninja .errorArea p {
  margin-left: 1em !important;
}

/* ページング（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;
}
.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/common/ninja/bg-pager.gif) repeat-x center bottom;
}

/* footer_s使用時のフッター固定用 */
#push {
/*    height:107px;*/
}


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

.ninja #sub_block h3 {
    font-weight:bold;
    font-size:16px;
}
.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/common/ninja/ico-subFaqList.gif) 13px 50% no-repeat #efefef;
}
.ninja #sub_block .faq li.btn-subHelp {
    padding:0;
    float:left;
    background:none;
    line-height:1.6;
}
.ninja #sub_block .faq li.btn-subHelp a {
    display:block;
    width:300px;
    height:39px;
    overflow:hidden;
}
.ninja #sub_block .faq li.btn-subHelp a:hover img {
    margin-top:-39px;
}

/* ヘルプ&目安箱バナー（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;
}



/*------------------------------------------------------------
  #footer_block
  -------------------------------------------------------------*/
#footer_block.push { /* footer_s下固定用 */
    height:80px;
    padding:0;
    clear:both;
}
#footer_block.push .copyright {
    margin-top:34px;
}