/*#cont h1 {
width:100%;
}*/

#cont { line-height:normal; }

#cont h1{
color: #666;
margin-top: 3px;
margin-bottom: 10px;
font-size: 10px;
font-weight: normal;
}

#nav_box {
padding-top: 10px;
padding-bottom: 20px;
}
#nav_box ul {
width: 100%;
}
#nav_box ul li {
display: inline;
}
#cont h2 {
margin-bottom: 5px;
}
.main_box {
font-size: 14px;
line-height: 1.4em;
width: 100%;
}
.main_box h3 {
margin-bottom: 10px;
margin-top: 30px;
}

.main_box p  {
font-size: 14px;
line-height: 1.4em;
color: #333333;
margin-bottom: 15px;
}
.main_box  p.arrow {
margin-left: auto;
width: 24px;
margin-right: auto;
margin-top: -10px;
margin-bottom: 5px;
}
.main_box p.table_center {
width: 478px;
margin-right: auto;
margin-left: auto;
}

#cont .colum_box {
margin-bottom: 30px;
}

#main_contents_box {
width: 498px;
border: 1px solid #FF9933;
background-color: #F3F3F1;
font-size: 14px;
margin-top:30px;
}
#main_contents_box #figure {
float: right;
margin-top: 20px;
margin-right: 10px;
padding-left: 10px;
}
#main_contents_box h3#h3_1 {
background-image: url(../img/call/line_dod.gif);
background-repeat: repeat-x;
padding-bottom: 15px;
margin-top: 35px;
margin-left: 35px;
background-position: bottom;
width: 265px;
}
#main_contents_box h3#h3_2 {
background-image: url(../img/call/line_dod.gif);
background-repeat: repeat-x;
padding-bottom: 15px;
margin-left: 35px;
background-position: bottom;
width: 430px;
margin-top: 30px;
}
#main_contents_box h3#h3_3 {
background-image: url(../img/call/line_dod.gif);
background-repeat: repeat-x;
padding-bottom: 15px;
margin-top: 35px;
margin-left: 35px;
background-position: bottom;
width: 430px;
}
#main_contents_box p {
line-height: 1.5em;
margin-left: 35px;
margin-top: 20px;
margin-right: 35px;
}
#main_contents_box #step_box {
margin-top: 25px;
width: 460px;
margin-left: 40px;
}
#main_contents_box #step_box .flort_l_img {
float: left;
width: 120px;
margin: 0px;
}
#main_contents_box #step_box .flort_r_box {
width: 320px;
float: left;
margin-left: 20px;
}

#main_contents_box  #step_box  .flort_r_box h4 {
margin-top: 0px;
margin-bottom: 15px;
padding-top: 15px;
}
#main_contents_box #step_box ul {
font-size: 12px;
line-height: 1.5em;
margin-left: 20px;
margin-bottom: 10px;
list-style-type: disc;
}
#main_contents_box  p.arrow  {
margin-left: 90px;
}
#main_contents_box #combi {
width: 430px;
margin-left: 40px;
margin-bottom: 30px;
}
#main_contents_box #combi .example_bottom {
background-image: url(../img/call/image_example_bottom.jpg);
background-repeat: no-repeat;
background-position: bottom;
width: 430px;
padding-bottom: 11px;
}
#main_contents_box #combi .example_bottom .example_top {
background-image: url(../img/call/image_example_top.jpg);
background-repeat: no-repeat;
width: 430px;
padding-top: 11px;
}
#main_contents_box #combi .example_bottom .example_top .example_cont {
background-image: url(../img/call/image_example_back.jpg);
background-repeat: repeat-y;
background-position: top;
margin: 0px;
width: 430px;
padding: 0px;
}
#main_contents_box  #combi  .example_bottom  .example_top  .example_cont  p  {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 15px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}

#main_contents_box  #combi  .example_bottom  .example_top  h5 {
padding-top: 10px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 15px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 1px;
width: 430px;
vertical-align: middle;
font-size: 14px;
font-weight: normal;
}
#main_contents_box #combi .example_bottom .example_top h5 img {
padding-right: 10px;
vertical-align:-10px;
}

#main_contents_box #combi .example_bottom .example_top h5 span {
vertical-align: middle;
}
.main_box .staff {
width: 498px;
margin-bottom: 15px;
border: 1px solid #CCCCCC;
background-color: #F1F1F5;
}
.main_box .staff h4 {
font-size: 14px;
font-weight: bold;
color: #AE447B;
margin-top: 15px;
margin-bottom: 5px;
margin-left: 20px;
}
.main_box .staff ul {
margin-left: 30px;
list-style-position: outside;
list-style-type: disc;
margin-bottom: 15px;
margin-right: 15px;
}
.main_box dl {
margin-bottom: 15px;
}

.main_box dl dt {
font-weight: bold;
}
.main_box dl dd {
margin-top: -1.5em;
margin-left: 130px;
}


/*流れ*/
.flow_box {
font-size: 14px;
line-height: 1.4em;
color:#333333;
width: 500px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #999999;
}
.flow_box .side {
width: 90px;
float: left;
background-image: url(../img/call/side_back.jpg);
background-repeat: no-repeat;
background-position: bottom;
}
.flow_box .side img.step1 {
margin-top: 15px;
margin-left: 9px;
width: 76px;
}
.flow_box .side img.step2 {
margin-top: 15px;
margin-left: 29px;
width: 37px;
}
.flow_box .side img.step3 {
margin-top: 15px;
margin-left: 29px;
width: 37px;
}


.flow_box .main_contents {
float: left;
width: 410px;
}
.flow_box .main_contents h3 {
margin-left: 25px;
margin-top: 20px;
margin-bottom: 15px;
}
.flow_box .main_contents p {
margin-left: 25px;
margin-bottom: 5px;
}
.flow_box .main_contents p img {
float: left;
padding-right: 10px;
padding-bottom: 5px;
}

.flow_box .main_contents table {
border-collapse:collapse;
width: 383px;
margin-left: 25px;
font-size: 12px;
border: 1px solid #AE447B;
margin-bottom: 15px;
}
.flow_box  .main_contents  table th {
font-weight: normal;
color: #FFFFFF;
background-color: #AE447B;
font-size: 12px;
text-align: center;
}
.flow_box .main_contents table td #que {
margin: 5px;
list-style-position: outside;
list-style-type: none;
}
.flow_box .main_contents table td #que li {
margin-bottom: 5px;
margin-left: 5px;
background-image: url(../img/call/icon_que.jpg);
background-repeat: no-repeat;
background-position: left 3px;
padding-left: 20px;
margin-right: 5px;
}
.flow_box .main_contents table td .check {
margin: 5px;
list-style-position: outside;
list-style-type: none;
}
.flow_box .main_contents table td .check li {
margin-bottom: 5px;
margin-left: 5px;
background-image: url(../img/call/icon_check.jpg);
background-repeat: no-repeat;
background-position: left 3px;
padding-left: 20px;
margin-right: 5px;
}
.flow_box  .main_contents  table  td p {
text-align: right;
margin-right: 10px;
}
.flow_box .main_contents h4 {
font-size: 13px;
color: #A02364;
margin-bottom: 5px;
margin-left: 25px;
}
.flow_box .main_contents #exam {
width: 378px;
margin-left: 25px;
margin-bottom: 15px;
border: 1px solid #999999;
}
.flow_box .main_contents #exam ol {
list-style-position: outside;
list-style-type: decimal;
margin-left: 35px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
}
.flow_box .main_contents #exam ol li ul {
margin-left: 5px;
list-style-position: outside;
list-style-type: none;
}
.flow_box .main_contents .instance {
border: 1px solid #FF9933;
margin-left: 25px;
margin-bottom: 15px;
padding-bottom: 15px;
}
.flow_box .main_contents .instance h5 {
font-size: 14px;
font-weight: bold;
color: #FF8000;
margin-top: 15px;
}
.flow_box .main_contents .instance p {
margin: 0px;
padding: 0px;
}
.flow_box .main_contents .instance p img {
float: left;
margin-top: 10px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 10px;
padding: 0px;
width: 87px;
}
.flow_box .main_contents .instance .check {
list-style-position: outside;
list-style-type: none;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 15px;
}
.flow_box .main_contents .instance .check li {
margin-bottom: 5px;
margin-left: 5px;
background-image: url(../img/call/icon_check.jpg);
background-repeat: no-repeat;
background-position: left 3px;
padding-left: 20px;
margin-right: 5px;
}
.flow_box  .main_contents .instance p#propose_left {
float: left;
width: 112px;
}
.flow_box .main_contents .instance #propose_box {
float: left;
width: 265px;
margin: 0px;
padding: 0px;
}
.flow_box .main_contents .instance #propose_box ul#propose {
margin-left: 20px;
margin-top: 5px;
}
.flow_box .main_contents p.button_instance {
vertical-align:middle;
}
.flow_box .main_contents p.button_instance img  {
vertical-align:-10px;
padding-right:10px;
margin:0px;
}
.flow_box .main_contents p.button_instance span  {
vertical-align: middle;
}


/*ラインナップ*/
.main_box ul#serve {
margin-left: 10px;
list-style-position: outside;
list-style-type: none;
line-height: 1.6em;
margin-top: 10px;
font-size: 12px;
}
.main_box ul#serve li {
background-image: url(../img/call/arrow_pink_right.gif);
background-repeat: no-repeat;
background-position: left 3px;
padding-left: 15px;
}
.main_box ul#serve li a:hover {
background-color: #F8EBF2;
}
.main_box ul#visor {
margin-left: 10px;
list-style-position: outside;
list-style-type: none;
line-height: 1.6em;
font-size: 12px;
margin-top: 10px;
}
.main_box ul#visor li {
background-image: url(../img/call/arrow_blue_right.gif);
background-repeat: no-repeat;
background-position: left 3px;
padding-left: 15px;
}
.main_box ul#visor li a:hover {
background-color: #E4E6F5;
}


/*実例*/
.main_box .point_left_box {
float: left;
width: 350px;
}
.main_box .ul1  {
margin-left: 20px;
margin-bottom: 15px;
}
.main_box .ul1 li{
list-style: square outside;
color:#A02364;
list-style-image:none;
}
.main_box .ul1 li span{
color:#333333;
}
.main_box .ul2  {
margin-left: 20px;
margin-bottom: 15px;
}
.main_box .ul2 li{
list-style: square outside;
color:#00A6A6;
list-style-image:none;
}
.main_box .ul2 li span{
color:#333333;
}

.main_box .point_right_box {
float: left;
width: 120px;
margin-left: 15px;
}
.main_box .point_right_box h6 {
font-size: 12px;
color: #666666;
margin-bottom: 3px;
}
.main_box .point_right_box img {
margin-bottom: 3px;
margin-left: 8px;
}
.main_box dl.schedule {
width: 500px;
margin-bottom: 10px;
}
.main_box dl.schedule dt {
margin-bottom: 5px;
}
.main_box dl.schedule dd {
padding: 0px;
margin-top: -30px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 100px;
}
.main_box h5 {
color: #A02364;
font-size: 14px;
margin-bottom: 5px;
}

.main_box .effect_box_left {
float: left;
width: 350px;
}
.main_box .effect_box_right {
float: left;
width: 125px;
margin-left: 15px;
}
.main_box .effect_box_right h6 {
font-size: 12px;
color: #666666;
margin-bottom: 3px;
}
.main_box .effect_box_right img {
margin-bottom: 3px;
margin-left: 0px;
}
.main_box ul#skill_up {
list-style-position: outside;
list-style-type: disc;
margin-left: 20px;
margin-bottom: 15px;
}
.main_box ul#skill_up li span {
font-weight: bold;
}
.main_box h6 {
margin-bottom: 5px;
}
.main_box p#upsell {
padding-top: 5px;
padding-right: 20px;
padding-bottom: 5px;
padding-left: 15px;
border: 1px solid #A02364;
color: #A02364;
}

.main_box p.button_instance  {
vertical-align:middle;
}
.main_box p.button_instance img  {
vertical-align:-10px;
padding-right:10px;
margin:0px;
}
.main_box p.button_instance span  {
vertical-align: middle;
}


/* 2012/12/06 新着情報 */
.newsBox{
width:100%;
overflow:auto;
margin-bottom:25px;
border: 3px solid #C85991;
font-size:14px;
padding: 10px;
line-height: 1.2;
}

.newsBox dt {
clear: left;
float: left;
padding: 8px 10px 8px;
}

.newsBox dd{
background: url("../common/images/line_dott_999999.gif") repeat-x scroll 0 100% transparent;
padding: 8px 0 8px 110px;
}

.newsBox dd a:hover{
background-color:#FFE5F2;
}



/*ページトップへ*/
.toTop {
text-align: right;
margin-bottom: 20px;
margin-top: 10px;
}

/* 2013/01/21 ページ下部リンク集 */

table.border-b .line_l_b {background-color:#993365;width: 190px;}
table.border-b .line_c {width: 1px;}
table.border-b .line_r_b {background-color:#C85991;width: 309px;}

.arrowA {background-color:#993365;}
.arrowB {background-color:#993365;}

#cont #c3_ll .lc_contents dt img{background-color:#993365;}


/*インソースソリューションの表*/
.p_solution_box{width:500px;margin-top:10px;margin-bottom:11px;}
.p_solution_border{display:inline-block;border:1px solid #d888ad;background-color:#f9e8f0;width:230px;margin-left:11px;padding:10px;height:120px;vertical-align:top;}
.p_solution_box_text{font-size:16px;font-weight:bold;}
.p_solution_text_bd{font-size:20px;font-family:YuGothic , 游ゴシック , 'Hiragino Kaku Gothic ProN' , 'ヒラギノ角ゴ ProN' , Meiryo , メイリオ , sans-serif;}
.p_solution_purple{color:#9b456c;font-family:YuGothic , 游ゴシック , 'Hiragino Kaku Gothic ProN' , 'ヒラギノ角ゴ ProN' , Meiryo , メイリオ , sans-serif;font-size:12px;line-height:140%;font-weight:bold;}




/**/
#main_contents_box {
  wdith: 100%;
  max-width: 500px;
}

#main_contents_box h3#h3_2,
#main_contents_box h3#h3_3,
#main_contents_box #combi {
  width:calc(100% - 70px);
  max-width: 430px;
  margin-left: 35px;
  margin-right: 35px;
}
#main_contents_box #combi { border-radius: 10px;border: 1px solid #f80;background: #fff; }
#main_contents_box #combi .example_bottom,
#main_contents_box #combi .example_bottom .example_top,
#main_contents_box #combi .example_bottom .example_top .example_cont {width:100%;background-image: none;}
@media screen and (max-width: 768px) {
  div#cont {margin: 0;padding: 0 calc(50% - 250px);}
  #main_contents_box {max-width: 498px;width:100%}
}
@media screen and (max-width: 599px) {
  #nav_box {width:100%;max-width:320px;margin: 0 auto;}
  #nav_box ul {display: flex;justify-content: space-around;flex-wrap: wrap}
  #nav_box ul li {display: block; margin-bottom: 6px}
  
  #main_contents_box h3#h3_1,
  #main_contents_box h3#h3_2,
  #main_contents_box h3#h3_3,
  #main_contents_box p,
  #main_contents_box #step_box,
  #main_contents_box #combi {
    margin-left: 2%;
    margin-right: 2%;
    width: calc(100% - 16px);
    max-width: none;
  }
  #main_contents_box #step_box {display: flex;justify-content: center;align-items: center;flex-wrap: wrap}
  #main_contents_box #figure {display: none;}
  #main_contents_box #step_box .flort_r_box {margin-left: 0;text-align: center}
  #main_contents_box p.arrow {margin-left: 2%;text-align: center}
  
  .p_solution_box {width: 100%;display: flex;justify-content: center;flex-wrap: wrap;}
  .p_solution_border {width: 100%;margin-left: 0; height: auto}
  .p_solution_border + .p_solution_border {margin-top: 10px;}
  #main_contents_box #combi {max-width: 430px;margin: 0 auto 30px;padding: 10px}
  #main_contents_box #combi .example_bottom {width: 100%;background: #fff;}
  #main_contents_box #combi .example_bottom .example_top {width:100%;background: #fff;}
  #main_contents_box #combi .example_bottom .example_top .example_cont p {margin: 0 auto; padding: 5px!important;}
  #main_contents_box #combi .example_bottom .example_top h5 {width: 100%;padding: 10px 5px;}
}


/**/

@media screen and (max-width:599px) {
  .main_box .staff {width: 100%;}
  .main_box .staff h4 {margin-right: 20px}
  .flow_box {display: flex;justify-content: center;flex-wrap: wrap;width:100%}
  .flow_box .side img.step1,.flow_box .side img.step2,.flow_box .side img.step3{margin-top:12px;margin-left: 0}
  .flow_box .side {width: 100%;text-align: center}
  .flow_box .main_contents {float: none;width: 100%;}
  .flow_box .main_contents h3 {margin-left: 0;text-align: center}
  .flow_box .main_contents table,.flow_box .main_contents #exam,.flow_box .main_contents .instance {width: 100%;margin-left: 0;}
  .flow_box .main_contents .instance #propose_box {width: calc(100% - 120px)}
  .flow_box .main_contents p.button_instance {margin-left: 0}
}

/**/

@media screen and (max-width:599px) {
  .main_box .point_left_box, .main_box .effect_box_left {width: 100%;}
  .main_box .point_right_box, .main_box .effect_box_right {float: none;margin: 0 auto;margin-bottom: 16px}
  .main_box .ul1 li span br, .main_box ul#skill_up li span br {display: none}
  .main_box p.table_center {width: 100%}
  .main_box p.button_instance {display: flex;justify-content: center}
  .main_box p.button_instance span {margin-top: 4px; font-size: 13px}
  .main_box .ul1 + p {margin-left: 1em!important;width:calc(100% - 2em)!important;max-width: 365px;}
  .main_box p.arrow {text-align: center}
}