@charset "utf-8";

/*------------------------------------------------------------------------------
  Title: 忍者ホームページ［準備中］
  Copyright: (C) Samurai Factory Inc.
  ------------------------------------------------------------------------------*/

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

Reset

=============================================================================*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
/*    font-size: 100%;*/
    vertical-align: baseline;
    background: transparent;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}

del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}



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

Common

=============================================================================*/
/*------------------------------------------------------------
  Hypertext
  -------------------------------------------------------------*/

/*  1-1. Html, Body
    -------------------------------------------------------------*/

body {
    font-size: 12px;
    line-height:1.8;
    color: #333333;
    border:0;
}

/*  1-2. Text element
    -------------------------------------------------------------*/

div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td {
    font-family: 'arial','Osaka','ＭＳ Ｐゴシック',sans-serif;
    font-weight: normal;
}

p {
    line-height: 160%;
}

br {
    letter-spacing: normal;
}

sup {
    vertical-align: text-top;
}

sub {
    vertical-align: text-bottom;
}

q:before, q:after {
    content: '';
}

abbr, acronym {
    border: 0;
    font-variant: normal;
}

address, strong, em, cite, code, dfn, var {
    font-style: normal;
    font-weight: normal;
}

/* ベースリンク指定 */
a {
    cursor: pointer;
    text-decoration: underline;
}

a:link,
a:visited {
    color: #444444;
}

a:hover,
a:active {
    color: #989898;
    text-decoration: none;
}

/*  1-3. Table element
    -------------------------------------------------------------*/

table {
    border-spacing: 0;
    font-size: 100%;
}

caption, th {
    text-align: left;
    font-style: normal;
    font-weight: normal;
}

/*  1-4. List element
    -------------------------------------------------------------*/

ul, ol, li, dl, dt, dd {
    list-style-type: none;
}

/*  1-5. Form element
    -------------------------------------------------------------*/

legend {
    color: #000000;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}

input[type="checkbox"],
input[type="radio"] {
    position: relative;
    top: 0.1em;
}

/*  1-6. Image element
    -------------------------------------------------------------*/

img {
    border: 0;
}



/*------------------------------------------------------------
  parts
  -------------------------------------------------------------*/
/* clearfix */
.clear {
    clear:both;
}

/* 太字 */
.bold {
    font-weight:bold;
}

/* 下線 */
.underline {
    text-decoration:underline;
}

/* 赤字 */
.red {
    color:#ff0000;
}

/* 中央揃え */
.center {
    text-align:center;
}

/* 右揃え */
.right {
    text-align:right;
}

/* 左揃え */
.left {
    text-align:left;
}

/* エラーメッセージ（入力フォーム） */
span.err {
    display:block;
    padding:0 !important;
    line-height:1.4;
    color:#ea0000;
    font-weight:bold;
}



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

Layout

=============================================================================*/
/*------------------------------------------------------------
  div#container_block
  -------------------------------------------------------------*/

#header {
    height: 28px;
    text-align: center;
    background:#000000;
    position:absolute;
    width:100%;
    text-align:left;
}

#header .shuriken {
    animation:rotate 5s infinite linear;
    -moz-animation:rotate 5s infinite linear; /* Firefox */
    -webkit-animation:rotate 5s infinite linear; /* Safari and Chrome */
    background: url(" ../img/homepage/icn_shuriken.gif") ;
    display: block;
    height: 15px;
    left: 12px;
    position: absolute;
    top: 5px;
    width: 15px;
}

#header .shuriken:hover{
    animation:rotate 1s infinite;
    -moz-animation:rotate 1s infinite; /* Firefox */
    -webkit-animation:rotate 1s infinite; /* Safari and Chrome */
}
@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes rotate {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}



/*------------------------------------------------------------
  div#container_block
  -------------------------------------------------------------*/
#container_block {
    background: #b2b2b2;
}

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

/*  ul.bread_crumb パンくずリスト
    -------------------------------------------------------------*/
#header_block .bread_crumb {
    padding:8px 17px 7px;
    height:11px;
    line-height:13px;
    font-size:11px;
}

/* 忍者ツールズ トップページリンク */
.bread_crumb .top {
    padding:0 5px 0 0;
    display:block;
    float:left;
}

.bread_crumb .plural {
    padding:0 0 0 17px;
    display:inline-block;
    float:left;
    background:url( ../img/homepage/header_bread_crumb_arrow.gif) no-repeat 0 2px;
}

/* 現在のページ */
.bread_crumb .page_now {
    padding:0 0 0 17px;
    display:inline-block;
    float:left;
    font-weight:bold;
    background:url( ../img/homepage/header_bread_crumb_arrow.gif) no-repeat 0 2px;
}

/*  div.title_block
    -------------------------------------------------------------*/
#header_block .title_block {
    height:63px;
    border-top:1px solid #cccccc;
    border-bottom:1px solid #cccccc;
    background:#ffffff;
}

.title_block h1 a {
    width:160px;
    height:63px;
    display:block;
    overflow:hidden;
}
.title_block h1 a:hover img {
    margin-top:-63px;
}



/*------------------------------------------------------------
  div#contents_block
  -------------------------------------------------------------*/
#contents_block {
    margin: 0 auto;
    width: 950px;
    background:#ffffff;
    padding-bottom:10px;
}

/*  div#mainTop
    -------------------------------------------------------------*/
#mainTop {
    padding:60px 20px;
    height:100px;
    overflow:hidden;
    background:#eeeeee;
}

#mainTop h2 {
    color:#6287d8;
    font-size:1.5em;
    font-weight:bold;
}

#mainTop p {
    font-size:2.5em;
    font-weight:bold;
    white-space:nowrap;
    overflow:hidden;
    width:100%;
}


/*  div.ad
    -------------------------------------------------------------*/
.ad {
    background:#ffffff;
    border: 1px solid #cccccc;
    -webkit-box-shadow: 0 0 4px #666666;
    -moz-box-shadow: 0 0 4px #666666;
    -o-box-shadow: 0 0 4px #666666;
    -ms-box-shadow: 0 0 4px #666666;
    box-shadow: 0 0 4px #666666;
    color: #5e5e5e;
    float: right;
    padding: 10px;
    position:relative;
    text-align: center;
    top: -250px;
    right:20px;
    z-index: 100;
    margin-bottom:-300px;
}


/*  div.section
    -------------------------------------------------------------*/

.section {
    padding:20px 20px 10px;
}

.section .desc {
    color:#6287d8;
}

.section h3 {
    padding:0.15em 0 0.15em 1.5em;
    font-size:2em;
    border-bottom:1px solid;
    line-height:1.5em;
}

.section .contents {
    padding:10px 0;
}

.section.faq h3 {
    background:url( ../img/homepage/ico-faq.png) no-repeat left center;
}

.section.faq ul {
    margin: 10px 5px 5px;
}

.section.faq li:before {
    content:"?";
    margin-bottom:-110px;
    display:block;
    height:110px;
    text-align:right;
    position:relative;
    right:0;
    bottom:-10px;
    font-size:110px;
    color:transparent;
    text-shadow:0 0 4px rgba(255,255,255,0.4),
        0 0 0 rgba(0,0,0,0.1);
    -webkit-transition:0.1s;
    -moz-transition:0.1s;
    -ms-transition:0.1s;
    transition:0.1s;
}

.section.faq li {
    width:32%;
    overflow:hidden;
    margin-right:2%;
    float:left;
    background:#f7f7f7;
    box-shadow:
        0 0 0 1px #cccccc inset,
        0 0 5px 0 #999999;
    -webkit-transition:0.1s;
    -moz-transition:0.1s;
    -ms-transition:0.1s;
    transition:0.1s;
}

.section.faq li:hover:before {
    text-shadow:0 0 4px rgba(255,255,255,0.4),
        0 0 0 rgba(98,135,228,0.15);
}
.section.faq li:hover {
    background:#ffffff;
    box-shadow:
        0 0 0 1px #dfdfdf,
        0 0 5px 0 #6287d8;
}

.section.faq li.last {
    width:32%;
    margin-right:0;
    float:right;
}

.section.faq li a {
    display:block;
    padding:20px 2em;
    height:70px;
    overflow:visible;
    font-size:1.1em;
    text-decoration:none;
    position:relative;
    line-height:1.8;
}
.section.faq li:hover a {
    color:#6287d8;
}
/* for IE7,8 */
.section.faq li a {
    border/*\**/:1px solid #dfdfdf\9;
}
.section.faq li:hover a {
    border/*\**/:1px solid #b9cbfa\9;
}

.section.otherTools h3 {
    background:url( ../img/homepage/ico-otherTools.png) no-repeat left center;
}

.section.otherTools .toolBox {
    margin:10px auto 15px;
    padding:15px;
    background:#efefef;
}

.section.otherTools .toolBoxInner {
    border:1px solid #cccccc;
    padding:15px;
    background-color:#ffffff;
}

.section.otherTools .toolBoxInner.sandbox {
    background:url( ../img/homepage/bg-sandbox.png) no-repeat 115% 15px #ffffff;
}

.section.otherTools .toolBoxInner.blog {
    background:url( ../img/homepage/bg-blog.png) no-repeat right top #ffffff;
}

.section.otherTools .toolBoxInner h4 {
    font-weight:bold;
    padding-left:1em;
    padding-right:70px;
    background:url( ../img/homepage/ico-arrow.png) no-repeat left center;
    font-size:1.75em;
}

.section.otherTools .toolBoxInner p {
    padding-right:70px;
    padding:10px 370px 20px 1.875em;
}

.section.otherTools .toolBoxInner dl {
    padding-top:15px;
    padding-left:1.875em;
    float:left;
}
.section.otherTools .toolBoxInner dt {
    font-weight:bold;
    font-size:120%;
}
.section.otherTools .toolBoxInner dd {
    margin-right:50px;
    display:inline-block;
    float:left;
    text-align:center;
}

.section.otherTools .toolBoxInner dd .caption {
    display:block;
    text-align:center;
    font-size:80%;
    line-height:2;
    color:#6f6f6f;
}

.section.otherTools .toolBoxInner dd a:link,
.section.otherTools .toolBoxInner dd a:visited {
    text-decoration:none;
}
.section.otherTools .toolBoxInner dd a:hover .caption {
    text-decoration: none;
    color:#6287d8;
}

.section.otherTools .toolBoxInner dd img {
    border:1px solid #cccccc;
    box-shadow:5px 5px 8px -4px #666666;
    -webkit-transition:0.1s;
    -moz-transition:0.1s;
    -ms-transition:0.1s;
    transition:0.1s;
}

.section.otherTools .toolBoxInner dd a:hover img {
    border:1px solid #cccccc;
    box-shadow:5px 5px 8px -4px #6287d8;
    opacity:0.6;
}


.section.otherTools .arrow {
    display:inline-block;
    background:url( ../img/homepage/ico-guideLink.gif) no-repeat left center;
    line-height:1em;
    padding-left:1.5em;
}
/* for IE7 */
*:first-child+html .toolBoxInner.sandbox .arrow {
    margin-top:134px;
}
*:first-child+html .toolBoxInner.blog .arrow {
    margin-top:154px;
}

.section.otherTools .arrow a:link,
.section.otherTools .arrow a:visited {
    text-decoration: none;
}

.section.otherTools .arrow a:hover {
    text-decoration: underline;
    color:#6287d8;
}

.section.otherTools .moreInfo {
    display:block;
    width:40%;
    float:right;
    margin-top:-1.25em;
}

.section.otherTools .btn-makeTool {
    padding:30px 0 15px;
}

.section.otherTools .btn-makeTool a {
    display:block;
    margin:0 auto;
    width:270px;
    height:45px;
    overflow:hidden;
    text-decoration:none;
}

.section.otherTools .btn-makeTool a:hover img {
    margin-top:-45px;
}



/*  p.link_pagetop
    -------------------------------------------------------------*/
.link_pagetop {
    line-height:1;
    text-align:right;
}



/*------------------------------------------------------------
  div#footer_block
  -------------------------------------------------------------*/
div#footer_block {
    padding:16px 14px 41px 16px;
    border-top:1px solid #cdcdcd;
    background:#404040;
    color:#cacaca;
}

div#footer_block a:link,
div#footer_block a:visited {
    color:#cacaca;
}

div#footer_block a:hover,
div#footer_block a:active {
    color:#ffffff;
}

div#footer_block div.footer_inner {
    margin:0 auto;
    width:950px;
}



/*  div.company 企業情報
    -------------------------------------------------------------*/
div.footer_inner div.company {
    padding-top:16px;
    text-align:center;
}

div.footer_inner div.company ul li {
    display:inline;
    line-height:1;
    font-size:11px;
}

div.footer_inner div.company ul li.plural {
    padding-left:18px;
    background:url( ../img/homepage/footer_plural_bg.gif) no-repeat;
}


/* コピーライト */
div.footer_inner p.copyright {
    padding-top:16px;
    line-height:1;
    color:#8b8b8b;
    text-align:center;
}

div.footer_inner div.company p.copyright a:link,
div.footer_inner div.company p.copyright a:visited {
    color:#8b8b8b;
    text-decoration:none;
}

div.footer_inner div.company p.copyright img {
    margin-right:10px;
    vertical-align:top;
}
div.footer_inner div.company p.copyright span.copy {
    display:inline-block;
    margin-top:16px;
}