@charset "utf-8";

/****** common ******/

body{
width              : 100%;
background         : url(/sp/img/body-bg.jpg);
color              : #333333;
font-family: "Meiryo","メイリオ","ＭＳ Ｐゴシック", "Hiragino kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, sans-serif;
margin             : 0px 0px 0px 0px;
padding            : 0px 0px 0px 0px;
overflow           : auto;
}
div#contents{
width              : 100%;
margin             : 0px auto;
}
ul,li{
display            : inline;
list-style         : none;
padding            : 0px;
}

p{
font               : normal 16px /170% "meiryo";
margin             : 0px;
padding            : 0px;
}

ul.close{
display            : none;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
section.com_midashi h2{
width              : 96%;
margin             : 0px auto;
padding            : 0px;
}
section h3.midashi{
width              : 100%;
margin             : 10px auto;
background         : url(/sp/img/sp-midashi-bg.png) no-repeat;
background-size    : 100% 100%;
text-align         : center;
padding            : 0px;
}
section h3.midashi img{
width              : 300px;
height             : auto;
margin             : 0px auto;
padding            : 0px;
}
img.arrow{
width              : 300px;
display            : block;
margin             : -65px auto 0px auto;
}


section.contents_midashi{
width              : 100%;
margin             : 30px auto 20px auto;
}
section.contents_midashi h2 img{
display            : block;
margin             : 0px auto 15px auto;
}
div#breadcrumb{
width              : 96%;
padding            : 0px 0% 25px 0px;
margin             : 0px auto -17px auto;
text-align         : right;
font               : normal 12px /170% "meiryo";
border-bottom      : dotted 1px #d8d8d8;
}
section.com_midashi{
width              : 100%;
margin             : 0px auto 0px auto;
}
/****** common ******/



/****** header ******/


header{
width              : 100%;
margin             : 10px auto 0px auto;
}
section.head_logo{
width              : 227px;
margin             : 0px 0px 0px 2%;
float              : left;
}
section.head_logo h1{
font               : normal 10px "meiryo";
margin             : 3px 0px 0px 5px;
float              : left;
}
section.head_logo a:nth-of-type(1) img{
width              : 41.5px;
margin             : 0px 0px 0px 0px;
float              : left;
}
section.head_logo a:nth-of-type(2) img{
width              : 145px;
margin             : 0px 0px 0px 5px;
float              : left;
}
div.globalnav{
margin             : -15px 2% 0px 0px;
padding            : 0px 0px 15px 0px;
overflow           : hidden;
}
section.head_logo:after {
content            : "";
display            : block;
clear              : both;
height             : 1px;
overflow           : hidden;
}

/* pulldown menu -----------------------------sat */


.menu_icon{
margin             : 0px 0% 0px 0%;
cursor             : pointer;
width              : 78.5px;
float              : right;
}

.menu_icon.current {
opacity            : 0.3;
}

.pull_down_list li a {
display            : block;
width              : 100%;
position           : relative;
padding            : 15px;
box-sizing         : border-box;
text-decoration    : none;
color              : #212121;
}

.pull_down_list li a:after {
font-family        : 'FontAwesome';
content            : "\f054";
color              : #212121;
position           : absolute;
top                : 50%;
right              : 4%;
text-align         : right;
width              : 100%;
margin-top         : -0.5em;
}

.pull_down_list li:nth-child(odd) {
display            : block;
background         : #FFFFFF;
}
.pull_down_list li:nth-child(even) {
display            : block;
background-color   : rgba(221, 239, 207, 0.23);
}


/* pulldown menu -----------------------------end */

/****** header *******/





/****** top ******/

div.top_greeting img{
width              : 100%;
margin             : 0px auto;
}
div.top_greeting p{
width              : 96%;
margin             : 0px auto;
}

div.midashi{
width              : 96%;
margin             : 15px auto 0px  auto;
}
div.midashi li a img{
width              : 49%;
border-right       : solid 1px rgba(0,0,0,0.4);
border-bottom      : solid 2px rgba(0,0,0,0.5);
}
div.midashi li:nth-of-type(1) a img{
margin             : 0px 0px 0px 0px;
float              : left;
}
div.midashi li:nth-of-type(2) a img{
margin             : 0px 0px 0px 0px;
float              : right;
}
div.midashi li:nth-of-type(3) a img{
margin             : 8px 0px 0px 0px;
float              : left;
}
div.midashi li:nth-of-type(4) a img{
margin             : 8px 0px 0px 0px;
float              : right;
}
div.midashi:after {
content            : "";
display            : block;
clear              : both;
height             : 1px;
overflow           : hidden;
}

section.top_qaa{
width              : 96%;
margin             : 30px auto 30px auto;
}
div.top_border{
width              : 100%;
border-bottom      : solid 1px #d8d8d8;
}
section.top_qaa h2{
width              : 38%;
font               : normal 16px "meiryo";
margin             : 0px 0px;
padding            : 0px 0px 0px 20px;
border-bottom      : solid 1px #d8d8d8;
border-right       : solid 1px #d8d8d8;
}
section.top_qaa a{
width              : 100%;
font               : normal 14px "meiryo";
margin             : 0px 0px;
text-align         : right;
display            : block;
padding            : 10px 5px 0px 0px;
}


section.top_qaa dt{
width              : 100%;
font               : bold 16px "meiryo";
margin             : 0px 0px;
padding            : 12px 0px 5px 20px;
}
section.top_qaa dd{
width              : 100%;
font               : normal 14px /170% "meiryo";
margin             : 0px 0px;
padding            : 0px 20px 10px 42px;
border-bottom      : dotted 1px #d8d8d8;
}

section.top_info{
width              : 96%;
margin             : 30px auto 30px auto;
}
section.top_info h2{
width              : 38%;
font               : normal 16px "meiryo";
margin             : 0px 0px;
padding            : 0px 0px 0px 20px;
border-bottom      : solid 1px #d8d8d8;
border-right       : solid 1px #d8d8d8;
}

section.top_info li{
display            : block;
width              : 100%;
font               : normal 14px /170% "meiryo";
margin             : 0px 0px;
padding            : 5px 20px 5px 20px;
border-bottom      : dotted 1px #d8d8d8;
}

/****** top ******/



/****** intro ******/

div.intro_greeting figure{
margin             : 0px 0px 10px 0px;
text-align         : center;
}
div.intro_greeting figcaption{
font               : normal 13px /200% "meiryo";
}
table.intro_table{
width              : 96%;
margin             : 0px auto;
border-collapse    : separate;
table-layout       : fixed;
border-spacing     : 0px 15px;
}
table.intro_table tr th{
width              : 30%;
margin             : 0px 0px 0px 0px;
padding            : 0px 0px 10px 21px;
background         : url(/img/intro-icon.png) no-repeat 5px 0px;
text-align         : left;
font               : bold 14px "meiryo";
border-bottom      : solid 1px #d8d8d8;
vertical-align     : top;
}
table.intro_table tr td{
width              : 70%;
margin             : 0px 0px 0px 0px;
padding            : 0px 0px 0px 0px;
border-bottom      : solid 1px #d8d8d8;
font               : normal 14px "meiryo";
}
table.intro_table tr td a img{
margin             : 0px 0px 0px 18px;
padding            : 0px 0px 0px 0px;
}
div.intro_pics{
width              : 96%;
padding            : 0px 0px 0px 0px;
margin             : 0px auto 5px auto;
}
div.intro_pics ul li img{
width              : 48%;
margin             : 0px 0px 8px 0px;
float              : left;
}
div.intro_pics ul li:nth-of-type(even) img{
width              : 48%;
margin             : 0px 0px 8px 0px;
float              : right;
}
div.intro_pics ul:after {
content            : "";
display            : block;
clear              : both;
height             : 1px;
overflow           : hidden;
}
div.intro_pics p{
width              : 96%;
padding            : 0px 0px 0px 0px;
font               : normal 14px /170% "meiryo";
}
div.intro_pics p:first-of-type{
margin             : 0px auto 5px auto;
}
div.intro_pics p:last-of-type{
margin             : 0px auto 40px auto;
}

/****** intro ******/



/****** cost ******/


table.cost_2cell{
width              : 96%;
margin             : 0px auto;
border-collapse    : separate;
border-spacing     : 0px 15px;
}
table.cost_2cell tr th{
margin             : 0px 0px 0px 0px;
padding            : 0px 0px 5px 0px;
border-bottom      : solid 1px #d8d8d8;
font               : normal 14px "meiryo";
text-align         : left;
vertical-align     : top;
}
table.cost_2cell tr td{
margin             : 0px 0px 0px 0px;
padding            : 0px 0px 5px 0px;
border-bottom      : solid 1px #d8d8d8;
font               : normal 14px "meiryo";
text-align         : right;
vertical-align     : top;
}
table.cost_2cell thead th{
margin             : 0px 0px 0px 0px;
padding            : 4px 0px 4px 0px;
background         : url(/img/cost-web-bg.png) no-repeat;
background-size    : cover;
border-bottom      : 0px;
text-align         : center;
font               : normal 14px "meiryo";
color              : #426609;
}
table.cost_3cell{
width              : 96%;
margin             : 0px auto;
border-collapse    : separate;
border-spacing     : 0px 20px;
}
table.cost_3cell tr th{
margin             : 0px 0px 0px 0px;
padding            : 0px 0px 0px 0px;
font               : bold 14px "meiryo";
text-align         : left;
vertical-align     : top;
}
table.cost_3cell tr:nth-of-type(even) td{
margin             : 0px 0px 0px 0px;
padding            : 0px 0px 20px 5px;
border-bottom      : solid 1px #d8d8d8;
font               : normal 12px "meiryo";
text-align         : left;
vertical-align     : top;
}
table.cost_3cell tr:nth-of-type(odd) td{
margin             : 0px 0px 0px 0px;
padding            : 0px 0px 0px 0px;
font               : normal 12px "meiryo";
text-align         : right;
vertical-align     : top;
}
table.cost_3cell thead tr th{
margin             : 0px auto 0px auto;
padding            : 5px 0px 5px 0px;
background         : url(/img/cost-web-bg.png) no-repeat;
background-size    : cover;
border-bottom      : 0px;
font               : normal 14px "meiryo";
color              : #426609;
text-align         : center;
}
span.cost_table_between{
width              : 96%;
margin             : 15px auto 10px auto;
text-align         : center;
display            : block;
font               : bold 20px "meiryo";
}
table.cost_2cell.wp thead th{
background         : url(/img/cost-wp-bg.png) no-repeat;
background-size    : cover;
color              : #515408;
}
table.cost_2cell.ab thead th{
background         : url(/img/cost-ab-bg.png) no-repeat;
background-size    : cover;
color              : #543808;
}
table.cost_2cell.manage thead th{
background         : url(/img/cost-manage-bg.png) no-repeat;
background-size    : cover;
color              : #543808;
}
section.cost_instance{
width              : 96%;
margin             : 10px auto 35px auto;
padding            : 2% 1% 2% 1%;
background         : #fffff3;
box-shadow         : 2px 2px 3px rgba(0,0,0,0.2);
}
section.cost_instance span{
font-weight        : bold;
}
section.cost_instance span.cost_instance_orange{
color              : #fb7509;
}
section.cost_instance p{ 
margin             : 0px 0px 0px 0px;
font               : normal 12px "meiryo";
}
section.cost_instance h4{
width              : 100%;
margin             : 0px auto 0px auto;
font               : normal 16px "meiryo";
color              : #f39817;
}
section.cost_instance dl{
width              : 100%;
margin             : 20px auto 20px auto;
}
section.cost_instance dt{
width              : 100%;
font               : bold 14px "meiryo";
}
section.cost_instance dd{
width              : 100%;
font               : normal 14px /190% "meiryo";
margin             : 0px auto 20px auto;
padding            : 0px 0px 0px 15px;
}

table.cost_2cell.manage{
width              : 96%;
margin             : 0px auto;
border-collapse    : separate;
border-spacing     : 0px 15px;
}

/*
table.cost_2cell.manage tbody tr:nth-child(1) th{
width              : 20%;
margin             : 0px auto;
border-spacing     : 0px 15px;
}
table.cost_2cell.manage tbody tr:nth-child(1) td{
width              : 80%;
margin             : 0px auto;
border-spacing     : 0px 15px;
}
table.cost_2cell.manage tbody tr:nth-child(2) th{
width              : 80%;
margin             : 0px auto;
border-spacing     : 0px 15px;
}
table.cost_2cell.manage tbody tr:nth-child(2) td{
width              : 20%;
margin             : 0px auto;
border-spacing     : 0px 15px;
}
*/
p.cost_manage_notice{
 width             : 96%;
 margin            : 20px auto 0px auto;
 font              : normal 14px "meiryo";
}
/****** cost ******/



/****** works ******/

div.works_example{
width              : 96%;
margin             : 30px auto 0px auto;
text-align         : center;
}

div.works_example figure img{
width              : 200px;
margin             : 0px 0px 0px 0px;
box-shadow         : 2px 2px 3px rgba(0,0,0,0.3)
}
div.works_example figcaption{
margin             : 8px 0px 0px 0px;
}
div.works_example figcaption a{
text-align         : center;
font               : normal 14px "meiryo";
}



/****** works ******/



/****** qaa ******/

section.midashi_qaa{
width              : 96%;
margin             : 0px auto 25px auto;
padding            : 0px 0px 0px 0px;
text-align         : center;
border-bottom      : solid 1px #d8d8d8;
}
section.midashi_qaa h3{
width              : 100%;
margin             : 0px 0px 0px 0px;
font               : bold 14px "meiryo";
padding            : 0px 0px 0px 20px;
background         : url(/img/qaa-icon.png) no-repeat 5px 3px;
background-size    : 14px 16px;
text-align         : center;
}
section.midashi_qaa p{
width              : 100%;
margin             : 0px auto 20px auto;
font               : normal 13px /170% "meiryo";
padding            : 0px 0px 0px 0px;
}
section.midashi_qaa p img{
width              : 100%;
margin             : 0px auto 0px auto;
padding            : 30px 0px 0px 0px;
}
section.midashi_qaa img.arrow{
width              : 300px;
display            : block;
margin             : -40px auto 15px auto;
}


/****** qaa ******/



/****** footer ******/


footer{
width              : 100%;
margin             : 30px auto 0px auto;
padding            : 0% 0px 0px 0px;
border-top         : solid 1px #d8d8d8;
border-bottom      : solid 1px #d8d8d8;
}
section.footer{
width              : 100%;
margin             : 5% auto;
background         : url(/img/footer-bg.png) repeat-x;
}
section.footer h2 img{
display            : block;
width              : 120px;
margin             : 0px auto;
padding            : 3% 0px 3% 0px;
}
section.footer address{
width              : 96%;
display            : block;
text-align         : center;
margin             : 0px auto 4% auto;
font               : normal 14px /170% "meiryo";
}


/****** footer ******/





/* pagetop */

.pagetop {
width                  : 50px;
height                 : 50px;
display                : none;
position               : fixed;
bottom                 : 7%;
right                  : 4%;
opacity                : 0.80;
padding                : 10px 0px 0px 10px;
border-radius          : 25px;
background-color       : #D8D8D8;
}
.pagetop a{ 
display                : block;
color                  : #0F0F0F;
text-decoration        : none;
text-align             : center;
}
.pagetop a:hover{
display                : block;
color                  : #0F0F0F;
text-decoration        : none;
}