@charset "utf-8";

/*------------------------------------------------------------------------------
  Title: 忍者ホームページ
  ------------------------------------------------------------------------------*/

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

Service - homepage

=============================================================================*/
/*------------------------------------------------------------
  div.contents_inner
  -------------------------------------------------------------*/
div.contents_inner div.main_button_set_bordertop {
    margin: 15px 0 0 0;
    border-top: 1px dotted #CCCCCC;
}

div.contents_inner .rollover_main_large {
display: block;
width: 210px;
height: 41px;
overflow: hidden;
margin: 15px 0 5px;
}

div.contents_inner .rollover_main_large:hover img {
margin-top: -41px;
}

/*  トップページ index.html
    -------------------------------------------------------------*/
.top_img {
    background:#ffffff;
    padding:10px 0 0;
}
.top_img .right {
    padding-right:10px;
}

/* ポイント */
div.contents_inner div.point ul li {
    padding:70px 10px 20px;
    width:170px;
    float:left;
}
div.point ul li.point_domain340 {
    background:url(/hp/images/bg_point_domain340.jpg) no-repeat;
}
div.point ul li.point_domainOriginal {
    background:url(/hp/images/bg_point_domainOriginal.jpg) no-repeat;
}
div.point ul li.point_ad {
    background:url(/hp/images/bg_point_ad.jpg) no-repeat;
}
div.point ul li.point_10site {
    clear:both;
    background:url(/hp/images/bg_point_10site.jpg) no-repeat;
}
div.point ul li.point_safety {
    background:url(/hp/images/bg_point_safety.jpg) no-repeat;
}
div.point ul li dt {
    text-align:center;
    min-height:40px;
    color:#312b73;
    line-height:1.4;
    font-size:120%;
    font-weight:bold;
}
div.point ul li dd {
    padding:10px 10px 0;
    line-height:1.4;
    color:#666666;
}
div.point ul li dd.more {
    padding:10px 0 0 !important;
    text-align:center;
}

/* ブログ機能比較表 */
div.contents_inner table.compare {
    margin:0 auto;
    width:572px;
}
table.compare tr{
    position:relative;
    float:left;
    clear:both;
    min-height:14px;
    width:572px;
}
table.compare th {
    padding:5px;
}
table.compare td {
    padding:7px 5px;
    vertical-align:middle;
    font-weight:bold;
    font-size:15px;
    line-height:1.4;
    text-align:center;
}
table.compare caption {
    margin:0 5px 5px;
    font-weight:bold;
    font-size:14px;
}
table.compare tr.head {
    background:url(/hp/images/top/bg_compare_top.jpg) no-repeat center top;
}
table.compare .nt {
    padding:25px 0 12px !important;
    color: rgba(52, 46, 106, 0) !important;
}
table.compare .item {
    display:block;
    float:left;
    width:208px;/* 214px */
}
table.compare .other {
    display:block;
    float:left;
    width:76px;/* 89px */
}
table.compare .free {
    display:block;
    float:left;
    width:75px;/* 89px */
}
table.compare .charge {
    display:block;
    float:left;
    width:77px;/* 89px */
}
table.compare tr.head th {
    padding:12px 0;
    width:170px;
    text-align:center;
    font-size:14px;
    font-weight:bold;
    color:#ffffff;
}
table.compare tr.bg_w {
    background:url(/hp/images/top/bg_compare_w.jpg) repeat-y center;
}
table.compare tr.bg_g {
    background:url(/hp/images/top/bg_compare_g.jpg) repeat-y center;
}

table.compare tr.col-title th {
    font-weight:bold;
    color:#868686;
    line-height:1.4;
    text-align:center;
    vertical-align:middle;
}
table.compare th.row-title {
    padding:10px 0 10px 20px;
    font-weight:bold;
    vertical-align:middle;
    line-height:1.4;
    display:block;
    float:left;
    width:198px;/* 214px */
}
table.compare td span.attention {
    font-size:11px;
    font-weight:normal;
}

div.contents_inner div.table_compare_bottom {
    margin:0 auto;
    height:11px;
    width:572px;
    background:url(/hp/images/top/bg_compare_btm.jpg) no-repeat center;
}

/* カテゴリー */
div.contents_inner table.category {
    width:100%;
}
table.category caption {
    margin:0 5px 5px;
    font-weight:bold;
    font-size:14px;
}
table.category td {
    padding:5px;
    width:20%;
    height:40px;
    border:1px solid #e4e4e4;
    vertical-align:middle;
    text-align:center;
    line-height:1.4;
    white-space:nowrap;
}
table.category td.bg_g {
    background:#f8f8f8;
}


/*  FTPS /point/safety.html
    -------------------------------------------------------------*/
div.contents_inner div.list-ftps {
    padding-bottom:10px;
}
div.list-ftps p.list-ftps-title {
    font-weight:bold;
    line-height:1.4;
}
div.list-ftps li {
    list-style:disc inside;
    line-height:1.4;
}

div.contents_inner dl.compare-ftps {
    padding:10px 0;
}
dl.compare-ftps dt {
    font-weight:bold;
    line-height:1.4;
}
dl.compare-ftps dd {
    padding-bottom:10px;
    line-height:1.4;
}



/*  プラン plan.html
    -------------------------------------------------------------*/
div.contents_inner .txt_plan_sizeup {
    vertical-align:middle;
}

div.contents_inner table.plan {
    width:100%;
    border-collapse: separate;
    border-spacing: 10px;
}
table.plan caption {
    background:#efefef;
    border-top: 1px solid #b8b8b8;
    border-left: 1px solid #b8b8b8;
    border-right: 1px solid #b8b8b8;
    font-weight: bold;
    padding: 5px 15px;
    font-size:14px;
}
table.plan th,
table.plan td {
    padding:3px;
    height:40px;
    border:0;
    text-align:center;
    vertical-align:middle;
    line-height:1.4;
    white-space:nowrap;
}
table.plan th.bg_b {
    background:#e7f7ff;
}
table.plan td.bg_b_pale {
    background:#F2FAFF;
}
table.plan td.bg_b_vivid {
    background:#2c98fd;
}
table.plan td.bg_g_pale {
    background:#f8f8f8;
}
table.plan td.bg_g {
    background:#5a5a5a;
}
table.plan td.td_plan_monthly {
    width: 344px;
}
table.plan td.td_gp_width {
    width: 390px;
}
table div.plan_title {
    position: absolute;
    margin: -25px 0 0 -30px;
}
dl.contents_inner_attention div.list_disc ul li {
	margin-left: 30px;
	list-style-type: disc;
	line-height: 18px;
}



/*  もっと楽しむ（アクセス解析） enjoy_analyze.html
    -------------------------------------------------------------*/
div.contents_inner div.guide_link_list {
    padding:10px;
}
div.contents_inner div.contents_inner_example {
    border: 1px dotted #CCCCCC;
    padding: 10px 15px;
    overflow:auto;
    font-weight:bold;
    line-height:1.4;
    text-align:center;
}
div.contents_inner div.contents_inner_example div.float_left {
    display: block;
    width: 48%;
    float: left;
    font-weight:bold;
    text-align:center;
}
div.contents_inner div.contents_inner_example div.float_right {
    display: block;
    width: 48%;
    float: right;
    text-align:center;
    font-weight:bold;
    line-height:1.4;
}

/* 新規作成ボタン */
.hp_make{
    background: #F9F7F3;
    display: block;
    margin: 10px 0;
    padding: 15px 0 23px;
    text-align: center;
}
.hp_make a{
    background: url(/hp/images/btn_bg.jpg) 0 0 repeat;
    width: 380px;
    height: 20px;
    padding: 20px 0;
    margin: 10px auto;
    display: block;
    font-size: 22px;
    line-height:1;
    text-decoration: none;
    text-shadow:
        0 2px 0 #fff,
        2px 0 0 #fff,
        0 -2px 0 #fff,
        -2px 0 0 #fff,
        -2px -2px 0 #fff,
        2px -2px 0 #fff,
        -2px 2px 0 #fff,
        2px 2px 0 #fff;
    letter-spacing: 0.3em;
    border: 1px solid #FFD000;
}
.hp_make a:hover{
    opacity: .7;
    -ms-filter: "alpha(opacity=70)";
}


/* レスポンシブ ナビ */
.responsive_nav a {
	    display: none;
}

@media screen and (max-width:768px) {
.sp_width100{
	width:100% !important;
	height:auto;
}
.sp_width_auto{
	width:auto !important;
	height:auto;
}
.plan img.sp_width100{
	width:100% !important;
	height:auto;
}
	
.bread_crumb{
    display:none;
    width:auto;
    overflow:hidden;
    padding: 7px 20px !important;
    white-space: nowrap;
}
#header_block .title_block{
    height: auto;
    padding: 5px 0;
}
.title_block h1{
    float:  none;
    margin: 0 auto;
}
.title_block p.h1_description, .title_block .top_navi{
    display: none;
}
#header_block, #contents_block {
    width: 100%;
}
#main_block {
    padding-right: 0;
    width: 100%;
    display: block;
    overflow: hidden;
}
#main_block .top_first_block{
    width: 100%;
	margin: 1px 0 -11px;
	padding:0;
	height:230px;
	overflow:hidden;
	text-align:center;
	background-size:cover;
}
#main_block .top_first_block h1{
	width:100%;
	height:200px;
    background:url(../images/img_header_ti.png) no-repeat center center;
}
#main_block .top_first_block img{
	display:none;
}
div#main_block div.top_img {
    text-align:center;
}
div#main_block div.top_img img{
	width:100%;
	max-width:621px;
	height:auto;
}
#main_block .main_navi{
    display: none;
}
.main_navi .main_navi_secondary{
    display: none;
}
.main_navi_secondary ul{
    height: 100%;
}
.main_navi_secondary li{
	padding: 2px;
}


/* 3タブ */
.main_navi_primaly_3 li {
    width: 32%;
}
.main_navi_primaly_3 li:first-child {
    width: 35.5%;
}
div.contents_inner div.point ul li{
    float: none;
    display: inline-block;
    vertical-align: top;
}


.contents .contents_inner img{
	max-width:570px;
	width:95%;
}

.contents_inner_2block .block_in, .contents_inner_2block .block_in_last{
    float: none;
    margin: 0 auto 20px;
}
.sample_bloack, .all_button{
	width:98%;
}
.top_sec_block .btnset_select_text img{
    width: 90%;
	max-width:426px;
	height:auto;
	margin:0 auto;
}
.top_contents_block02{
	text-align:center;
}
.top_contents_block02_left, .top_contents_block02_right{
	float: none;
	display:inline-block;
}
div#main_block ul.feature{
	text-align:center;
}
div#main_block ul.feature li{
    margin: 0 4px 10px;
	display:inline-block;
}
table.compare tr.head{
    background-size: 100%;
    margin: 0 0 -15px;;
    width: 100%;
    text-align: -webkit-right;
}
table.compare tr.head th{
    width: 14em;
}
div.contents_inner table.compare, table.compare tr{
    width: 100%;
}
table.compare .item, table.compare th.row-title{
	padding: 10px 3% 10px;
    width: 29%;
}
table.compare .free, table.compare .charge{
    width: 15%;
}
table.compare .other{
    width: 10%;
}
div.contents_inner div.table_compare_bottom{
    background-size: 100%;
}
table.compare td {
    padding: 7px 1%;
    font-size: 13px;
}
table.compare tr.bg_w, table.compare tr.bg_g {
    background-size: 100%;
}
div.contents_inner div.table_compare_bottom {
    margin: -3px auto 0;
    width: 100%;
    background-size: 100%;
}
table.compare .nt {
    font-size: 12px !important;
    width: 9em;
    padding: 20px 0 30px !important;
}
.contents .contents_inner table.compare img{
    width: 20px;
	height:20px;
}
table.compare th.row-title{
    font-size: 13px;
}

.hp_make a{
    width: 75% !important;
}
.hp_make div{
    width: 75%;
    margin:0 auto;
    text-align: left;
}

#sub_block{
    width: 100%;
    padding:10px 0;
    display: block;
    text-align: center;
}
#sub_block .make_tool{
    display:none !important;
}
#sub_block .login{
    margin: 0 auto;
    width: auto;
    text-align: center;
}
#sub_block .help{
    padding: 0;
    text-align:center;
}
#sub_block .help ul li.help a, #sub_block .help ul li.sukedachi a, #sub_block .help ul li.meyasubako a{
    margin: 0 auto;
}
#sub_block.information{
    width: 92%;
    margin: 0 auto;
}
div.contents_inner div.point ul li {
    padding: 70px 10px 60px;
    width: 245px;
    text-align: left;
}
#sub_block dl.information dl.information_archive{
	font-size:12px;
	text-align:left;
}
.contents_inner img.float_right, .f_right {
    margin: 0 auto 9px;
    float: none;
    width: 199px;
}
dl.information dl.information_archive {
    font-size: 12px;
    text-align: left;
}
div.point ul li.point_domain340 {
    background: url(/hp/images/bg_point_domain340.jpg) no-repeat center 0;
}
div.point ul li.point_domainOriginal {
    background: url(/hp/images/bg_point_domainOriginal.jpg) no-repeat center 0;
}
div.point ul li.point_ad {
    background: url(/hp/images/bg_point_ad.jpg) no-repeat center 0;
}
div.point ul li.point_10site {
    clear: inherit;
    background: url(/hp/images/bg_point_10site.jpg) no-repeat center 0;
}
div.point ul li.point_safety {
    background: url(/hp/images/bg_point_safety.jpg) no-repeat center 0;
}
table.compare caption{
    text-align: center;
}


.txt_plan_sizeup {
    width: auto !important;
    height: auto;
    margin: -7px 0 0;
}
.plan img{
    width:auto !important;
    height:auto;
	
}


#pageslide-body-wrap {  
  position: relative;
  overflow: hidden;
  background: #555;
}  
#pageslide-slide-wrap {  
  position: fixed;  
  width: 0;  
  top: 0;  
  right: 0;  
  height: 100%;  
  background-color:#31383E; 
  box-sizing: border-box; 
  overflow: scroll;
}
.responsive_nav a{
    background:url(/hp/images/icon_menu.png) no-repeat center 3px rgba(255, 255, 255, 0.6);
    position: fixed;
    top:52px;
    right:10px;
    display:block;
    width:30px;
    height:34px;
    z-index:9999;
    padding: 5px;
}
.responsive_nav_link{
    color: rgba(255,255,255,0.0) !important;
    font-size: 10px;
}

ul.responsive_nav_map .ninja-ui-i-shuriken{
  display: block !important;
  position: absolute !important;
  top: 16px !important;
  left: 15px !important;
  font-size: 18px !important;
  text-decoration: none !important;
  color: #FFFFFF;
}
.responsive_nav_close{
  background:url(/hp/images/arrow_slider.png) no-repeat 208px -30px;
  padding: 16px 18px 16px 30px;
  display: block;
  cursor: pointer;
  text-align: right;
}

#secondary {  
  padding: 0;  
  color: #FFFFFF;
  height:100%;
}  
  
#pageslide-content h2 {  
  color: #C60;  
  font-size: 120%;  
  padding-bottom: 20px;  
}  
  
#pageslide-content p {  
  padding-bottom: 15px;  
}  
.point{
    text-align: center;
}

.responsive_nav_map li {
    display: block;
    margin: 0 10px;
    padding: 3px 0 2px 6px !important;
    line-height: 42px;
    border-top: 1px solid #4d4d4d;
}
.responsive_nav_map li:last-child{
    border-bottom: 1px solid #4d4d4d;
}
.responsive_nav_map li a, .responsive_nav_map li span {
    display: block;
    text-decoration: none;
    color: #fff;
}
.responsive_nav_map li a{
  background:url(/hp/images/icon_responsive_arrow.png) no-repeat 246px center;
}
.responsive_nav_map ul {
    margin: 0;
    border-top: none;
    border-bottom: none;
    background: #21282D;
    box-shadow:rgba(0, 0, 0, 0.4) 1px 0px 6px 1px inset;
    -webkit-box-shadow:rgba(0, 0, 0, 0.4) 1px 0px 6px 1px inset;
    -moz-box-shadow:rgba(0, 0, 0, 0.4) 1px 0px 6px 1px inset;
}
.responsive_nav_map ul li{
    padding: 2px 0 2px 15px !important;
    border-top: 1px dotted #4d4d4d;
}
.responsive_nav_map ul li a{
  background:url(/hp/images/icon_responsive_arrow.png) no-repeat 236px center;
  color: #ddd;
}
.responsive_nav_map ul li:last-child{
    border-bottom: none;
}
.responsive_nav_ti{
    background: #000 !important;
    padding: 0 15px !important;
}

}
@media screen and (max-width:480px) {
	
table.compare tr.head th {
    height: 11px;
    width: 11em;
    font-size: 10px !important;
    line-height: 1;
    padding: 16px 0 !important;
}
ul.main_navi_primaly_3 li:first-child {
    width: 35%;
}
ul.main_navi_primaly_3 li:first-child a{
	padding: 13px 0 20px;
}

div.contents_inner table.category {
    width: 100%;
}
table.category td{
	padding: 10px 0;
    width: 100%;
    height: auto;
    display: block;
}
table.category td.bg_g {
    background: #fff;
}

table.plan th, table.plan td{
    height: auto;
}

}