﻿/*----------------------------------------------------------
   SOMEIYOSHINO
-----------------------------------------------------------*/

/* setting
------------------------------------*/
@charset "utf-8";

#h1 img{
margin-top: -8px;
}
#h1 img,#h2 img,#h3 img{
margin-left: -30px;
position: relative;
}
div#h1,div#h2,div#h3{
zoom:1;
}

body{
font-size: 12px;
line-height: 150%;
height:100%;
color: #444444;
font-family: Verdana,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',osaka,'メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
}
* + html body {
font-family: "メイリオ","Meiryo";
}


#top_body{
}

html{
height:100%;
padding: 0;
margin: 0;
overflow-y: scroll;
}

* html div#outline{
height:100%;
}

a:hover img{
opacity:0.7;
filter: alpha(opacity=70);
}


* html .iepngfix,
* html #menu img,
* html img#blog,
* html #header_banner img,{
behavior: expression(IEPNGFIX.fix(this));
}
* html img{
zoom:1;
}
p.clear{
clear: both;
}
div.right{
text-align: right;
}


/* form
------------------------------------*/
input, textarea, select{
background: #faeeef;
}

/* table
------------------------------------*/
table th {
border: solid 1px #aaaaaa;
background: #dddddd;
color: #aa4699;
font-weight: bold;
}
table td {
border: solid 1px #aaaaaa;
background: #fdfdfa;
}

/* h1,h2,h3
------------------------------------*/
h1{
margin: 0;
font-size: 10px;
}
h2, h3{
font-size: 14px;
color: #111111;
margin: 0;
/*position: relative;*/
}

h2 img#top{
position:relative; top:-10px;
}

#h1,#h2,#h3{
margin: 0;
}
/*
img.h_img{
position:relative; left:-20px;
}*/
/* Link Color
--------------------------------*/
a:link {
color:#BE2969;
text-decoration: none;
}

a:visited {
color:#BE2969;
text-decoration: none;
}

a:hover {
color:#EE5599;
text-decoration: underline;
}

a:active {
color:#BE2969;
text-decoration: none;
}

/* span
--------------------------------*/
span.red{
color: red;
}

/* p
--------------------------------*/
p.opening{
margin: 20px 30px 0 30px;
}

/* outline
------------------------------------*/
#outline{
background: #F5F6F7 url('../images/bg_header.jpg') top center no-repeat;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -116px; /* the bottom margin is the negative value of the footer's height */
}

body > #ouline{
height: auto;
}


/* header
------------------------------------*/

#header{
height: 290px;
}

#header_inner{
margin-left: auto;
margin-right: auto;
width: 800px;
height: 290px;
padding: 0px 0 0px 0;
height: auto;
}

#header_inner h1{
margin: 0;
padding: 0;
color: #ffffff;
font-size: 11px;
font-weight: normal;
margin: 0px 0 0 0 ;
width: 800px;
float: left;
}

#header_banner{
width: 654px;
height: 145px;
padding-top: 20px;
}
#header_banner img{
width: 654px;
height: 145px;
}
#header img#blog{
float: right;
}


/* blog
------------------------------------*/
#blog img{
float: right;
}

/* menu
------------------------------------*/
#menu{
margin-top: 20px;
margin-left: auto;
margin-right: auto;
width: 800px;
height: 62px;
margin-bottom: 0px;
vertical-align: bottom;
}

#menu ul{
margin: 0;
padding: 0;
}

#menu ul li{
margin: 0px;
padding: 0;
float: left;
list-style-type: none;
line-height: 0;
}
#menu img#works{
width: 132px;
height: 62px;
}

#menu img#contact{
width: 136px;
height: 62px;
}
#menu img#estimate{
width: 127px;
height: 62px;
}
#menu img#flow{
width: 140px;
height: 62px;
}
#menu img#qanda{
width: 144px;
height: 62px;
}
#menu img#seo{
width: 121px;
height: 62px;
}

/* contents
------------------------------------*/
#contents{
/*position:relative; top:-10px;*/
width: 800px;
padding: 0 0 0 0;
margin: 0 auto;
background: #ffffff;
border-left: #DFDFDF 1px solid;
border-right: #DFDFDF 1px solid;
}
/* pankuzu
------------------------------------*/
#pankuzu {
position:relative; top:-10px;
margin: 0;
padding: 0 12px 0 0;
clear: both;
text-align: right;
}
#pankuzu ul {
margin: 0;
padding: 0;
}
#pankuzu li {
display: inline;
}

/* right
------------------------------------*/
#right{
height: 100%;
width: 233px;
float: right;
}
#right h2{
margin-left: 5px;
}
#right #works{
text-align: center;
}
#right #works img{
border: solid 1px #CCAAAA;
margin-bottom: 9px;
}

/* topics
------------------------------------*/
#topics{
margin-top: 5px;
margin-left: 3px;
height: 260px;
width: 229px;
font-size: 11px;
}
/*
#topics a:link {
color: #086DA6;
text-decoration: none;
}
#topics a:visited {
color:#086DA6;
text-decoration: none;
}
#topics a:hover {
color:#0B99ED;
text-decoration: underline;
} */
/* left
------------------------------------*/
#left{
height: 100%;
width: 566px;
float: left;
}


/* footer
------------------------------------*/
.push {
height: 116px; /* .push must be the same height as .footer */
width: 800px;
padding: 0;
margin: 0 auto;
background: #ffffff;
border-left: #DFDFDF 1px solid;
border-right: #DFDFDF 1px solid;
}

#footer{
clear: both;
background: #f6f7f8;
height: 116px;
width: 100%;
font-size: 14px;
}

#footer_inner{
margin-left: auto;
margin-right: auto;
height: 116px;
width: 770px;
color: #ffffff;
padding-right: 30px;
text-align: right;
vertical-align: bottom;
border-left: #DFDFDF 1px solid;
border-right: #DFDFDF 1px solid;
background: #ffffff url('../images/bg_footer.jpg') center bottom no-repeat;
}


#footer_inner ul{
margin: 0;
padding: 0;
}

#footer_inner ul li{
float: right;
list-style-type: none;
margin: 0;
padding: 0;
margin-top: 10px;
font-weight: bold;
}


#footer_inner div.copyright{
clear: both;
color: #ffffff;
font-weight: bold;
}
#footer_inner div#footer_pr{
margin-top: 0px;
clear: both;
color: #aaaaaa;
font-size: 10px;
line-height: 10px;
}
/* footer Link Color
--------------------------------*/
#footer a:link{
color:#ffffff;
text-decoration: underline;
}

#footer a:visited{
color:#ffffff;
text-decoration: underline;
}

#footer a:hover{
color:#FFCC66;
text-decoration: underline;
}

#footer a:active{
color:#FFCC66;
}
#footer_inner div#footer_pr a, #footer_inner div#footer_pr a:hover{
color: #aaaaaa;
text-decoration: none;
}

/* border_left
------------------------------------*/
div.border_left{
float: left;
width: 7px;
height: 100%;
background: #cccccc;
}
div.border_left div.gray{
background: #bf63ce;
float: left;
width: 2px;
height: 100%;
}

/* bg_1-1
------------------------------------*/
#bg_1-1{
height: 300px;
width: 566px
}
#bg_1-1 h3{
margin-left:10px;
}
#bg_1-1 p{
margin-left: 10px;
height: auto;
width: 340px;
}
#bg_1-1 div.left{
float: left;
}
#bg_1-1 img{
float: right;
}

/*bg_2-1
------------------------------------*/
#bg_2-1{
height: 180px;
width: 566px
}
#bg_2-1 h3{
margin-left: 10px;
}
#bg_2-1 p{
margin-left: 10px;
width: 360px;
}

#bg_2-1 div.left{
float: left;
}
#bg_2-1 img{
float: right;
}

/* bg_2-2
------------------------------------*/
#bg_2-2{
clear: both;
height: 200px;
width: 566px
}

#bg_2-2 img{
float: right;
margin-right:12px;
}

#bg_2-2 h3{
margin-left: 10px;
}

#bg_2-2 p{
margin-left: 10px;
float: left;
width: 380px;
}
#bg_2-2 div.left{
float: left;
}
/*bg_2-3
------------------------------------*/
#bg_2-3{
/*background: #ffffff url('../images/bg_2-3.jpg') no-repeat;*/
clear: both;
height: 160px;
width: 566px;
}
#bg_2-3 h3{
margin-left: 10px;
}
#bg_2-3 p{
margin-left: 10px;
width: 340px;
}
#bg_2-3 img{
float: right;
}
#bg_2-3 div.left{
float: left;
}
/*bg_3-1
------------------------------------*/
#bg_3-1{
height: 140px;
width: 566px
}
#bg_3-1 h3{
margin-left: 15px;
}
#bg_3-1 p{
margin-left: 15px;
}

#bg_3-1 img{
margin: 2px 20px 0 12px;
float: right;
}

/* character
--------------------------------*/
div#fusens{
width: 800px;
height: 852px;
background: #ffffff url('../character/images/fusen.jpg') center top no-repeat;
}

div#fusens div{
float: left;
text-align: center;
color: white;
font-weight: bold;
font-size: 16px;
}

div#fusens div.h{
width: 266px;
height: 180px;
padding: 110px 0 0 0;
}
div#fusens div.m{
width: 261px;
height: 200px;
padding: 100px 5px 0 0;
}
div#fusens div.l{
width: 266px;
height: 225px;
padding: 65px 0 0 0;
}

/* character - contract
--------------------------------*/
body#contract_body div#w700{
width: 700px;
margin-left: auto;
margin-right: auto
}
#exit{
margin: 10px 0 0 130px;
}
body#contract_body h3{
margin-top: 40px;
}

body#contract_body dd a:link {
color:#333333;
text-decoration: none;
}

body#contract_body dd a:visited {
color:#333333;
text-decoration: none;
}

body#contract_body dd a:hover {
color:#333333;
text-decoration: none;
cursor: default;
}

body#contract_body dd a:active {
color:#333333;
}

/* estimate/index.html
--------------------------------*/
#price_body div.package{
clear: both;
margin-top: 20px;
padding-right: 20px;
}
div.package div.package_right{
padding-top: 20px;
}
#price_body div.package img{
float: left;
}
div.package h3.package_name{
display:inline;
font-size: 20px;
color: #555555;
}
#price_body div.package span{
margin-left: 20px;
}
#price_body div.package table{
border: 0px;
margin-top: 10px;
width: 530px;
}
#price_body div.package th{
color: #666666;
font-size: 14px;
border: 0px;
border-top: 1px solid #999999;
border-bottom: 1px solid #999999;
background: #dddddd;
width: 120px;
}
#price_body div.package table.option th{
color: #666666;
font-size: 14px;
border: 0px;
border-top: 1px solid #999999;
border-bottom: 1px solid #999999;
background: #dddddd;
width: 300px;
}
#price_body div.package td{
border: 0px;
font-size: 11px;
border-top: 1px solid #999999;
border-bottom: 1px solid #999999;
}
#price_body  td span.red{
font-weight: bold;
font-size: 140%;
color: #EE5599;
margin-left: 0px;
}
#price_body div.package table.price th{
width: 180px;
}
#price_body div.package table.option th.l{
width: 180px;
}
#price_body div.package table.option th.m{
width: 250px;
}
#price_body div.package table.option th.r{
width: 100px;
}

/* info
--------------------------------*/
body#information_body div#contents{
padding-bottom: 30px;
text-align: center;
}

table#information {
width: 700px;
margin: 10px auto;
}

table#information th {
padding: 5px;
font-weight: bold;
line-height: 120%;
text-align: center;
white-space: nowrap; 
}
table#information td {
padding: 5px 0 5px 15px;
text-align: left;
white-space: nowrap;
}
body#policy_body div.center{
text-align: center;
padding-top: 20px;
}
body#policy_body dl{
padding: 10px 20px; 
}
body#policy_body dt{
margin-top: 5px;
font-weight: bold;
font-size: 16px;
}
body#policy_body dd{
font-size: 11px;
}

/* seo
--------------------------------*/
#seo_body .w_700{
width: 700px;
margin: 10px auto;
}

#seo_body h3{
color: #333333;
font-size: 20px;
border-left: solid 8px #6BB6FF;
padding-left: 12px;
margin-top: 40px;
margin-bottom: 10px;
}
#seo_body h4{
margin: 3px 0;
font-size: 14px;
color: #771155;
}
#seo_body p{
padding: 0 20px;
}
.capture{
text-align: center;
margin-bottom:10px;
color: #992222;
font-size: 10px;
}

ul#seo_menu{
margin: 0px;
padding: 0;

}
ul#seo_menu li{
margin: 0px;
padding: 0;
float: left;
list-style-type: none;
line-height: 0;
}
/*
ul#seo_menu li img{
border-right: #2B47B9 1px solid;
border-left: #8EAEFE 1px solid;
}
ul#seo_menu li img.left{
border-right: #2B47B9 1px solid;
}
ul#seo_menu li img.right{
border-left: #8EAEFE 1px solid;
}*/

body#seo_body div.center{
text-align: center;
}

img#seo_image{
float: left;
margin-right: 20px;
}

div.w_680{
width: 680px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}

#seo_body div.package img{
float: left;
}
#seo_body div.package table{
border: 0px;
margin-top: 10px;
width: 430px;
}
#seo_body div.package table th{
color: #666666;
font-size: 14px;
border: 0px;
border-top: 1px solid #999999;
border-bottom: 1px solid #999999;
background: #dddddd;
}
#seo_body div.package table.price th{
width: 150px;
}
#seo_body div.package table.option th.l{
width: 150px;
}
#seo_body div.package table.option th.m{
width: 180px;
}
#seo_body div.package table.option th.r{
width: 100px;
}
#seo_body div.package td{
border: 0px;
font-size: 11px;
border-top: 1px solid #999999;
border-bottom: 1px solid #999999;
}
#seo_body div.package td.price{
text-align: right;
}

table#seo_results_table{
width: 660px;
margin: 10px auto;
}
table#seo_results_table th{
color: white;
font-size: 22px;
background: #525252 url('/seo/images/bg_header.png') left top repeat-x;
}
table#seo_results_table td{
text-align: center;
}
table#seo_results_table td.keyword{
font-weight: bold;
}
table#seo_results_table tr.odd td{
background: #ffffff;
}
table#seo_results_table tr.even td{
background: #eeeeee;
}
#seo_body  td span.red{
font-weight: bold;
font-size: 140%;
color: #EE5599;
}
img#seoby_image{
float: right;
margin: 0 70px 0 35px;
}
#tool_seo_body h3{
margin: 20px 0 0 30px;
}
ul#function{
margin-left: 45px;
}
ul#mobile_site{
margin-left: 100px;
}
#mobile_seo_image{
float: left;
margin-right: 20px;
}
div#lead_seoby{
margin: 20px auto;
text-align: center;
}
img.border{
padding: 2px;
margin: 0px;
border: 2px #aaaaaa solid;
}
/* estimate.html
--------------------------------*/

#estimate_body table{
width: 780px;
margin: 10px 0 10px 10px;
}

#estimate_body table th {
padding: 5px;
line-height: 120%;
text-align: left;
white-space: nowrap; 
}
#estimate_body table td {
padding: 5px;
text-align: left;
white-space: nowrap;
}
#estimate_body table td.price {
text-align: right;
}
#total{
font-size: 14px;
font-weight: bold;
color: red;
text-align: center;
}


/* contact
--------------------------------*/
fieldset{
margin: 10px 0 10px 0;
padding: 0 24px;
}

fieldset dl{
margin: 0;
}

fieldset dl dt{
width: 200px;
float: left;
padding: 10px 0 10px 0;
clear: both;
color: #aa4699;
font-weight: bold;
}

fieldset dl dd{
padding: 10px 0 10px 0;
margin: 0;
border-bottom: 1px solid #cccccc;
}

fieldset dl dd span{
color: #aa4699;
font-weight: bold;
}

div.submit{
margin: 10px 10px 0px 200px;
}

div.submit input{
padding: 5px;
margin: 5px;
}

fieldset textarea{
width: 62%;
}

#complete_message{
text-align: center;
}

/* flow
--------------------------------*/
div.process_box{
clear: both;
height: 160px;
width: 740px;
margin: 20px auto 20px auto;
}
div.process_box img.scene{
float: left;
margin-right: 20px;
}
div.process_box img.arrow{
margin-left: 200px;
}
div#lead{
text-align: right;
padding: 0 30px;
}
div#lead img{
float: right;
}

/* qanda
--------------------------------*/
body#qanda_body{
}
ul#qanda{
margin: 10px 0 0 40px;
padding: 0;
}

ul#qanda li{
margin: 0 10px;
padding: 0;
list-style-image: url('../qanda/images/arrow.gif');
}
dl#qanda dt{
margin: 16px 0 0 0;
padding-left: 26px;
padding-top: 2px;
height: 22px;
background: #ffffff url('../qanda/images/icon_q.gif') left top no-repeat;
font-weight: bold;
}
dl#qanda dd{
margin: 0;
padding-left: 26px;
padding-top: 2px;
background: #ffffff url('../qanda/images/icon_a.gif') left top no-repeat;
}

dl#qanda dd a:link {
color:#333333;
text-decoration: none;
}

dl#qanda dd a:visited {
color:#333333;
text-decoration: none;
}

dl#qanda dd a:hover {
color:#333333;
text-decoration: none;
cursor: default;
}

dl#qanda dd a:active {
color:#333333;
}

/* analytics
--------------------------------*/
body#analytics_body div#graph_3 div{
width: 240px;
height: 320px;
margin-left: 20px;
float: left;
}
body#analytics_body div#graph_big{
width: 600px;
margin: 0 auto;
}
body#analytics_body ul li{
}
body#analytics_body img#capture{
margin: 0 auto;
}
body#analytics_body div.w_700{
width: 700px;
margin: 28px auto;
}
/* pcsupport
--------------------------------*/
body#pcsupport_body h3 img{
margin-top: 20px;
}
body#pcsupport_body h4{
margin: 20px 0 5px 0;
padding: 2px 10px;
border-left: solid 5px #00ABE3;
border-bottom: dashed 1px #00ABE3;
font-size: 16px;
color: #002360;
}
body#pcsupport_body p{
padding: 10px;
}
body#pcsupport_body div#business ul,body#pcsupport_body div#personal ul{
padding-left: 50px;
}
div#business{
width: 700px;
margin: 0 auto;
}
div#personal{
width: 700px;
margin: 0 auto;
}
body#pcsupport_body div#business li,body#pcsupport_body div#personal li{
list-style-image: url('../pcsupport/images/arrow.gif');
}
img.float_right{
float: right;
margin: 10px 40px;
}

/* works
--------------------------------*/

div#production {
width: 800px;
margin: 0px 0px 80px 0px;
}

div#production a img {
border:4px solid #dddddd; }

div#production a:hover img {
border:4px solid #7c2246; }

div#production h3 {
color:#FFF;
font-size:12px;
font-weight:normal;
margin:0px 0px 0px 0px;
}

div#production p {
margin:1px 0px 5px 0px;
font-size: 11px;
}
div#production h3{
color: #777777;
}
div#production h3 a{
color: #777777;
text-decoration: none;
}
.product_box {
margin-right: auto;
margin-left: auto;
color: #777777;
padding: 0px;
width: 800px;
float: none;
margin-top: 0px;
margin-bottom: 20px;
height: 270px;
clear:both;
}

.box_left{
text-align: left;
height: 191px;
width: 233px;
float: left;
margin-top: 0px;
margin-right: 35px;
margin-bottom: 0px;
margin-left: 20px;
padding: 0px;
}
* html .box_left{
margin-left: 15px;
margin-right: 35px;
}

.box_center {
height: 191px;
width: 233px;
text-align: left;
padding: 0px;
margin: 0px auto;
float: left;
}


.box_right {
text-align: left;
height: 191px;
width: 233px;
float: right;
padding: 0px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 30px;
}
* html .box_right {
margin-right: 10px;
margin-bottom: 0px;
margin-left: 0px;
}