@charset "UTF-8";
/* Home */


/* smartphone
------------------------------------------------------------ */
@media screen and (max-width: 599px) {
    /* Container
    ------------------------------------------------------------ */
    .container { width: 92vw; margin: 120px auto 20px auto;}
    .container h2 { font-size: 160%; font-weight: bold; color: #666; margin-bottom: 10px; line-height: 160%; }
    .container h3 { font-size: 160%; font-weight: bold; color: #666; border-bottom: 1px solid #ccc; padding: 8px; margin-bottom: 40px; line-height: 160%;}
    .container h4 { font-size: 120%; font-weight: bold; color: #000; background: #f0f0f0; padding:8px 10px; margin: 10px 0 20px 0;}
    .container h4.wht { font-size: 120%; font-weight: bold; color: #000; background: #fff; padding: 10px; margin: 10px 0 20px 0;}
    .container h5 { font-size: 120%; font-weight: bold; background: url(../images/icon_link.svg) no-repeat; background-position: left center; background-size: 20px 20px; padding:12px 28px; margin-bottom: 10px;} 
    .container h5.noicon{ font-size: 120%; font-weight: bold; background-image: none; padding: 20px 0;} 
    .container h5.under_line{ font-size: 120%; font-weight: bold; background-image: none; padding:10px 0; margin-bottom: 20px; border-bottom: 1px solid #ccc;} 
    .container h6 { font-size: 110%; font-weight: bold; margin-bottom: 10px;}
    .container .contents_box { margin-left: 20px; margin-right: 20px;}
    .container .contents_box2 { padding: 10px 20px 60px 20px;}
    .container .contents_box3 { padding: 10px;}
    .container p iframe { max-width: 100% !important; }
    .container center embed { width: 92vw; height: calc(92vw * (579 / 634)); }


    /*	Color Box
    ------------------------------------------------------------ */
    .red_box { width:70vw;  margin: 20px auto; background: #faefef; border: double 3px #cc0000; border-radius: 8px; padding: 20px;}
    .blue_box { width:70vw;  margin: 20px auto; background: #effbff; border-radius: 8px; padding: 20px;}
    .blue_box900 { width:90vw;  margin: 20px auto; background: #effbff; border-radius: 8px; padding: 20px;}
    .gray_box { width:70vw;  margin: 20px auto; background: #f5f5f5; border-radius: 8px; padding: 20px;}
    pre { width: 80vw; padding: 10px; margin: 40px auto; border: 1px solid #ccc; background: #fff; overflow: auto;}



    .breadclumb { margin-bottom: 40px; margin-left: 10px;}
    .breadclumb ul li { display: inline;}
    .breadclumb ul li:before { content:" > ";}
    .breadclumb ul li:first-child:before { content: none;}



    ul.localnav{ margin: 20px 0 40px 0; font-size: 0; text-align: center;}
    ul.localnav li { border-left: 1px solid #ccc; border-right: 1px solid #ccc; font-size: 14px;}
    ul.localnav li+ li { border-left: 1px solid #ccc; border-right: 1px solid #ccc;}

    ul.localnav li{
        position: relative;
        line-height: 200%;
        margin: 0 0 10px -1px;
        padding: 0;
        text-align: center;
    }

    ul.localnav li a{
        display: block;
        margin: 0;
        padding: 0 10px;
        color: #000;
        text-decoration: none;
    }
    ul.localnav li a.selected { background:rgba(0,0,0,0.8); color: #fff;}

    ul.localnav li:hover > a{
        background:rgba(0,0,0,0.8);
        color: #fff;
    }


    ul.localnav li ul{
        position: absolute;
        top: 100%;
        left: 0;
        margin: 0;
        padding: 0;
        z-index: 100;
    }


    ul.localnav li ul li{
        line-height: 100%;
        overflow: hidden;
        width: 150%;
        height: 0;
        color: #fff;
        border-left: none;
        border-right: none;
        margin: 0;
    }
    ul.localnav li ul li a{
        padding: 10px;
        background:rgba(255,255,255,0.9);
        text-align: left;
    }
    ul.localnav li:hover > a{
        background:rgba(0,0,0,0.8);
        color: #fff;
    }
    ul.localnav li:hover ul li{
        overflow: visible;
        height: 100%;
    }



    /*	Table
    ------------------------------------------------------------ */
    .table_default { border-top: 1px solid #ccc; border-right:1px solid #ccc; border-collapse: collapse; font-size: 100%;}
    .table_default th{ padding: 8px; border-left: 1px solid #ccc; border-bottom:1px solid #ccc; vertical-align: top; text-align: left; background: #e4eef8; white-space: break-spaces;}
    .table_default th.center { text-align: center;}
    .table_default th.middle { vertical-align: middle;}
    .table_default td{ padding: 8px; border-left: 1px solid #ccc; border-bottom:1px solid #ccc; vertical-align: top; white-space: break-spaces;}
    .table_default td.middle { vertical-align: middle;}
    .table_default td.v_center{ vertical-align: center;}
    .table_default td.right { text-align: right;}
    .table_default td label:nth-of-type(2), .table_default td input:nth-of-type(2) {
        margin-top: 10px;
    }
    .table_default td label:nth-of-type(2)::before {
        content: "\A" ;
        white-space: pre ;
    }

    .table_no_decoration th,td {padding: 10px;}


    .flowchart th, td {
        padding: 4px 8px;
    }
    .flowchart th {
        border: thin solid gray;
        border-radius: 0.5em;
        width: 12em;
        text-align: left;
    }
    .flowchart th dl {
        margin: 0;
    }
    .flowchart th dt {
        font-weight: bold;
    }
    .flowchart th dd {
        margin: 0;
    }
    .flowchart td {
        padding: 0 0.5em;
        text-align: center;
    }
    .flowchart td .large {
        font-size: xx-large;
        vertical-align: middle;
    }
    .flowchart td.yes {
        color: rgb(51,102,153);
    }
    .flowchart td.no {
        color: gray;
    }

    table.rough_estimate {background: #e4eef8; font-size: 100%;}
    table.rough_estimate th { padding: 8px 16px; text-align: left; font-weight: bold;}
    table.rough_estimate td { padding: 4px 16px;}
    table.rough_estimate td.padd4 { padding: 8px 32px;}

    table.program th, table.program td {
        padding: 10px;
        vertical-align: top;
    }

    td.left-lined {
        border-left: 1px solid #aaaaaa;
    }


    /*	Table Company
    ------------------------------------------------------------ */
    .table_company { border-top: 1px solid #ccc; border-collapse: collapse; font-size: 100%;}
    .table_company th{ padding: 8px; border-left: 1px solid #ccc; border-bottom:1px solid #ccc; vertical-align: top; background: #e4eef8; text-align: left;}
    .table_company td{ padding: 8px; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom:1px solid #ccc; vertical-align: top;}
    .table_company td.noboder { border-left: none; border-right: none;}

    /*	Graph
    ------------------------------------------------------------ */
    .graph276 { width: calc(100vw * 0.09); height: 10px; background: #eeb7ed; float: left; margin-right: 10px;}
    .graph92 { width: calc(100vw * 0.03); height: 10px; background: #eeb7ed; float: left; margin-right: 10px;}
    .graph306 { width: calc(100vw * 0.1); height: 10px; background: #eeb7ed; float: left; margin-right: 10px;}
    .graph824 { width: calc(100vw * 0.27); height: 10px; background: #fff600; float: left; margin-right: 10px;}
    .graph691 { width: calc(100vw * 0.23); height: 10px; background: #fff600; float: left; margin-right: 10px;}
    .graph140 { width: calc(100vw * 0.046); height: 10px; background: #fff600; float: left; margin-right: 10px;}
    .graph1267 { width: calc(100vw * 0.42); height: 10px; background: #82e56e; float: left; margin-right: 10px;}



    /*	Q and A
    ------------------------------------------------------------ */
    dl.question dt { clear:left; float: left; font-weight: bold; color: #0671b0; margin-bottom: 10px;}
    dl.question dd { margin-left: 30px; font-weight: bold; color: #0671b0; margin-bottom: 10px;}
    dl.answer dt { clear:left; float: left; font-weight: bold; margin-bottom: 20px;}
    dl.answer dd { margin-left: 30px; margin-bottom: 20px;}
    dl.question2 dt { clear:left; float: left; font-weight: bold; color: #0671b0; margin-bottom: 10px;}
    dl.question2 dd { margin-left: 50px; font-weight: bold; color: #0671b0; margin-bottom: 10px;}
    dl.answer2 dt { clear:left; float: left; font-weight: bold; margin-bottom: 20px;}
    dl.answer2 dd { margin-left: 50px; margin-bottom: 20px;}



    /*	News
    ------------------------------------------------------------ */
    .news_event { width: calc(92vw - 10px); margin: 0 auto; padding: 10px;}
    .news_event dl dt { margin-bottom: 20px;}
    .news_event dl dd { }

    .news_event dl.event dt { clear:left; float: left; padding: 4px;}
    .news_event dl.event dd { margin-left: 50px;  padding: 4px;}

    .news_event .newsline { border-bottom: 1px solid #ccc; margin-top: 40px; margin-bottom: 40px;}
    .news_event .eventline { border-bottom: 1px solid #ccc; margin-top: 60px; margin-bottom: 60px;}

    .news_event ul.past { text-align: center;}
    .news_event ul.past li {
        display: inline-block;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        margin-bottom: 10px;
    }
    .news_event ul.past li+ li {
        border-left: 0;
        border-right: 1px solid #ccc;}
    .news_event ul.past li a { padding: 0 10px;}
    .news_event ul.past li a.selected{ display: block; background: #000; color: #fff;}



    /*	技術情報
    ------------------------------------------------------------ */
    .tech_info_box { width: calc(92vw - 40px); padding: 20px; border: 1px solid #ccc; border-radius: 8px;}




    /*	プレスリリース
    ------------------------------------------------------------ */
    dl.press_release dt { clear:left; float: left; margin-bottom: 10px;}
    dl.press_release dd { margin-left: 100px; margin-bottom: 10px;}




    /*	著書
    ------------------------------------------------------------ */
    .books_left { width: 92vw; text-align: center; margin-bottom: 20px;}
    .books_right { width: 92vw; }



    /* faq
    ------------------------------------------------------------ */
    ul.faq {}
    ul.faq li.q { background:url("../images/icon_q.svg")no-repeat left top; background-size:28px 28px; padding:6px 0 16px 40px;}
    ul.faq li.a { background:url("../images/icon_a.svg")no-repeat left top; background-size:28px 28px; padding:6px 0 40px 40px; margin-bottom:40px; border-bottom:1px solid #ccc;}


    /* 申し込みボタン
    ------------------------------------------------------------ */

    a.btn {
        color: #fff;
        background-color: #1079be;
        border-radius: 6px;
        padding: 4px 12px;
        font-size: 90%;
        white-space: nowrap;
    }

    a.btn:hover {
        color: #fff;
        background: #6a89e4;
        text-decoration: none;
    }

    a.btn:link{ text-decoration: none; color:#fff;}
    a.btn:visited{ text-decoration: none; color:#fff;}
    a.btn:active { text-decoration: none; color:#fff;}


    /* 囲い（特殊）
    ------------------------------------------------------------ */
    .box_border_blue { border: 1px solid #1079be; padding: 20px; margin-bottom: 40px; width: 90%;}
    .box_border_red { border: 1px solid #c80000; padding: 10px; margin-bottom: 40px; width: 90%;}


    span.blue_button {
        background-color: #F4F7F9;
        border-top:    1px solid #A9BBD2;
        border-left:   1px solid #A9BBD2;
        border-right:  1px solid #5C86AA;
        border-bottom: 1px solid #5C86AA;
        border-radius: 2px;
        padding: 3px 7px;
        color: #5480A9;
        font-weight: bold;
        white-space: nowrap;
    }
    span.blue_cell {
        font-weight: bold;
        background-color: #769BBE;
        background: -moz-linear-gradient(top, #A1BAD2, #769BBE);
        background: -webkit-gradient(linear, center top, center bottom, from(#A1BAD2), to(#769BBE));
        border: 1px solid #527DA5;
        border-radius: 2px;
        padding: 2px 3px;
        color: white;
    }
    span.gray_cell {
        background-color: #F1F6F9;
        border: 1px solid #C9D8E0;
        border-radius: 2px;
        padding: 3px 3px;
    }
    span.gray_button {
        background-color: #F5F8FA;
        background: -moz-linear-gradient(top, #D4D4D4, #E9E9E9);
        background: -webkit-gradient(linear, center top, center bottom, from(#D4D4D4), to(#E9E9E9));
        border-top:    1px solid #aaaaaa;
        border-left:   1px solid #aaaaaa;
        border-right:  1px solid #666666;
        border-bottom: 1px solid #666666;
        border-radius: 2px;
        padding: 3px 3px;
        white-space: nowrap;
    }
    code {
        background-color: #eeeeee;
        padding: 3px;
    }
    .src_php {
        color: purple;
    }
    .src_comment {
        color: blue;
    }
    p.high_line{ line-height: 200%;}



    /*      フォーム関連
    ------------------------------------------------------------ */
    .table_form { font-size: 100%; margin-bottom: 20px; width: 100%;}
    .table_form th{ padding: 8px; border-left: 1px solid #ccc; border-bottom:1px solid #ccc; vertical-align: center; background: #e4eef8; text-align: left;}
    .table_form th.noborder { border-left: none; background: #fff; padding-top: 40px; font-weight: bold;}
    .table_form td{ padding: 8px; border-left: 1px solid #ccc; border-bottom:1px solid #ccc;  border-right: 1px solid #ccc; vertical-align: top; background: #fff;}
    .table_form td.v_center{ vertical-align: center;}
    .table_form td.right { text-align: right;}
    .table_form .border_top { border-top: 1px solid #ccc; }
}



/* tablet
------------------------------------------------------------ */
@media screen and (min-width: 600px) {
    /* Container
    ------------------------------------------------------------ */
    .container { width: 92vw; margin: 20px auto;}
    .container h2 { font-size: 160%; font-weight: bold; color: #666; margin-bottom: 10px; line-height: 160%; }
    .container h3 { font-size: 160%; font-weight: bold; color: #666; border-bottom: 1px solid #ccc; padding: 8px; margin-bottom: 40px; line-height: 160%;}
    .container h4 { font-size: 120%; font-weight: bold; color: #000; background: #f0f0f0; padding:8px 10px; margin: 10px 0 20px 0;}
    .container h4.wht { font-size: 120%; font-weight: bold; color: #000; background: #fff; padding: 10px; margin: 10px 0 20px 0;}
    .container h5 { font-size: 120%; font-weight: bold; background: url(../images/icon_link.svg) no-repeat; background-position: left center; background-size: 20px 20px; padding:12px 28px; margin-bottom: 10px;} 
    .container h5.noicon{ font-size: 120%; font-weight: bold; background-image: none; padding: 20px 0;} 
    .container h5.under_line{ font-size: 120%; font-weight: bold; background-image: none; padding:10px 0; margin-bottom: 20px; border-bottom: 1px solid #ccc;} 
    .container h6 { font-size: 110%; font-weight: bold; margin-bottom: 10px;}
    .container .contents_box { margin-left: 20px; margin-right: 20px;}
    .container .contents_box2 { padding: 10px 20px 60px 20px;}
    .container .contents_box3 { padding: 10px;}



    /*	Color Box
    ------------------------------------------------------------ */
    .red_box { width:calc(80vw - 40px);  margin: 20px auto; background: #faefef; border: double 3px #cc0000; border-radius: 8px; padding: 20px;}
    .blue_box { width:calc(80vw - 40px); margin: 20px auto; background: #effbff; border-radius: 8px; padding: 20px;}
    .blue_box900 { width:calc(92vw - 40px);  margin: 20px auto; background: #effbff; border-radius: 8px; padding: 20px;}
    .gray_box { width:calc(80vw - 40px);  margin: 20px auto; background: #f5f5f5; border-radius: 8px; padding: 20px;}
    pre { width: calc(80vw - 20px); padding: 10px; margin: 40px auto; border: 1px solid #ccc; background: #fff; overflow: auto;}


    .breadclumb { margin-bottom: 40px; margin-left: 10px;}
    .breadclumb ul li { display: inline;}
    .breadclumb ul li:before { content:" > ";}
    .breadclumb ul li:first-child:before { content: none;}


    ul.localnav{ margin: 20px 0 40px 0; font-size: 0; text-align: center;}
    ul.localnav li { border-left: 1px solid #ccc; border-right: 1px solid #ccc; font-size: 14px; }
    ul.localnav li+ li { border-left: 1px solid #ccc; border-right: 1px solid #ccc;}

    ul.localnav li{
        position: relative;
        line-height: 200%;
        margin: 0 0 10px -1px;
        padding: 0;
        text-align: center;
    }

    ul.localnav li a{
        display: block;
        margin: 0;
        padding: 0 10px;
        color: #000;
        text-decoration: none;
    }
    ul.localnav li a.selected { background:rgba(0,0,0,0.8); color: #fff;}

    ul.localnav li:hover > a{
        background:rgba(0,0,0,0.8);
        color: #fff;
    }


    ul.localnav li ul{
        position: absolute;
        top: 100%;
        left: 0;
        margin: 0;
        padding: 0;
        z-index: 100;
    }


    ul.localnav li ul li{
        line-height: 100%;
        overflow: hidden;
        width: 150%;
        height: 0;
        color: #fff;
        border-left: none;
        border-right: none;
        margin: 0;
    }
    ul.localnav li ul li a{
        padding: 10px;
        background:rgba(255,255,255,0.9);
        text-align: left;
    }
    ul.localnav li:hover > a{
        background:rgba(0,0,0,0.8);
        color: #fff;
    }
    ul.localnav li:hover ul li{
        overflow: visible;
        height: 100%;
    }



    /*	Table
    ------------------------------------------------------------ */
    .table_default { border-top: 1px solid #ccc; border-right:1px solid #ccc; border-collapse: collapse; font-size: 100%; width: 100%; }
    .table_default th{ padding: 8px; border-left: 1px solid #ccc; border-bottom:1px solid #ccc; vertical-align: top; text-align: left; background: #e4eef8;}
    .table_default th.center { text-align: center;}
    .table_default th.middle { vertical-align: middle;}
    .table_default td{ padding: 8px; border-left: 1px solid #ccc; border-bottom:1px solid #ccc; vertical-align: top;}
    .table_default td.middle { vertical-align: middle;}
    .table_default td.v_center{ vertical-align: center;}
    .table_default td.right { text-align: right;}
    .table_default td label:nth-of-type(2), .table_default td input:nth-of-type(2) {
        margin-top: 10px;
    }
    .table_default td label:nth-of-type(2)::before {
        content: "\A" ;
        white-space: pre ;
    }

    .table_no_decoration th,td {padding: 10px;}


    .flowchart th, td {
        padding: 4px 8px;
    }
    .flowchart th {
        border: thin solid gray;
        border-radius: 0.5em;
        width: 12em;
        text-align: left;
    }
    .flowchart th dl {
        margin: 0;
    }
    .flowchart th dt {
        font-weight: bold;
    }
    .flowchart th dd {
        margin: 0;
    }
    .flowchart td {
        padding: 0 0.5em;
        text-align: center;
    }
    .flowchart td .large {
        font-size: xx-large;
        vertical-align: middle;
    }
    .flowchart td.yes {
        color: rgb(51,102,153);
    }
    .flowchart td.no {
        color: gray;
    }

    table.rough_estimate {background: #e4eef8; font-size: 100%;}
    table.rough_estimate th { padding: 8px 16px; text-align: left; font-weight: bold;}
    table.rough_estimate td { padding: 4px 16px;}
    table.rough_estimate td.padd4 { padding: 8px 32px;}

    table.program th, table.program td {
        padding: 10px;
        vertical-align: top;
    }

    td.left-lined {
        border-left: 1px solid #aaaaaa;
    }


    /*	Table Company
    ------------------------------------------------------------ */
    .table_company { border-top: 1px solid #ccc; border-collapse: collapse; font-size: 100%;}
    .table_company th{ padding: 8px; border-left: 1px solid #ccc; border-bottom:1px solid #ccc; vertical-align: top; background: #e4eef8; text-align: left;}
    .table_company td{ padding: 8px; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom:1px solid #ccc; vertical-align: top;}
    .table_company td.noboder { border-left: none; border-right: none;}

    /*	Graph
    ------------------------------------------------------------ */
    .graph276 { width: calc(100vw * 0.09); height: 10px; background: #eeb7ed; float: left; margin-right: 10px;}
    .graph92 { width: calc(100vw * 0.03); height: 10px; background: #eeb7ed; float: left; margin-right: 10px;}
    .graph306 { width: calc(100vw * 0.1); height: 10px; background: #eeb7ed; float: left; margin-right: 10px;}
    .graph824 { width: calc(100vw * 0.27); height: 10px; background: #fff600; float: left; margin-right: 10px;}
    .graph691 { width: calc(100vw * 0.23); height: 10px; background: #fff600; float: left; margin-right: 10px;}
    .graph140 { width: calc(100vw * 0.046); height: 10px; background: #fff600; float: left; margin-right: 10px;}
    .graph1267 { width: calc(100vw * 0.42); height: 10px; background: #82e56e; float: left; margin-right: 10px;}



    /*	Q and A
    ------------------------------------------------------------ */
    dl.question dt { clear:left; float: left; font-weight: bold; color: #0671b0; margin-bottom: 10px;}
    dl.question dd { margin-left: 30px; font-weight: bold; color: #0671b0; margin-bottom: 10px;}
    dl.answer dt { clear:left; float: left; font-weight: bold; margin-bottom: 20px;}
    dl.answer dd { margin-left: 30px; margin-bottom: 20px;}
    dl.question2 dt { clear:left; float: left; font-weight: bold; color: #0671b0; margin-bottom: 10px;}
    dl.question2 dd { margin-left: 50px; font-weight: bold; color: #0671b0; margin-bottom: 10px;}
    dl.answer2 dt { clear:left; float: left; font-weight: bold; margin-bottom: 20px;}
    dl.answer2 dd { margin-left: 50px; margin-bottom: 20px;}



    /*	News
    ------------------------------------------------------------ */
    .news_event { width: 88vw; margin: 0 auto; padding: 10px 2vw;}
    .news_event dl dt { clear:left; float: left;}
    .news_event dl dd { margin-left: 120px;}

    .news_event dl.event dt { clear:left; float: left; padding: 4px;}
    .news_event dl.event dd { margin-left: 50px;  padding: 4px;}

    .news_event .newsline { border-bottom: 1px solid #ccc; margin-top: 40px; margin-bottom: 40px;}
    .news_event .eventline { border-bottom: 1px solid #ccc; margin-top: 60px; margin-bottom: 60px;}

    .news_event ul.past { text-align: center;}
    .news_event ul.past li {
        display: inline-block;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        margin-bottom: 3px;
    }
    .news_event ul.past li+ li {
        border-left: 0;
        border-right: 1px solid #ccc;}
        .news_event ul.past li a { padding: 0 10px;}
        .news_event ul.past li a.selected{ display: block; background: #000; color: #fff;
    }



    /*	技術情報
    ------------------------------------------------------------ */
    .tech_info_box { width: calc(90vw - 40px); padding: 20px; border: 1px solid #ccc; border-radius: 8px;}



    /*	プレスリリース
    ------------------------------------------------------------ */
    dl.press_release dt { clear:left; float: left; margin-bottom: 10px;}
    dl.press_release dd { margin-left: 100px; margin-bottom: 10px;}



    /*	著書
    ------------------------------------------------------------ */
    .books_left { width: 17%; float: left;}
    .books_right { width: 76%; float: right;}



    /* faq
    ------------------------------------------------------------ */
    ul.faq {}
    ul.faq li.q { background:url("../images/icon_q.svg")no-repeat left top; background-size:28px 28px; padding:6px 0 16px 40px;}
    ul.faq li.a { background:url("../images/icon_a.svg")no-repeat left top; background-size:28px 28px; padding:6px 0 40px 40px; margin-bottom:40px; border-bottom:1px solid #ccc;}



    /* 申し込みボタン
    ------------------------------------------------------------ */

    a.btn {
        color: #fff;
        background-color: #1079be;
        border-radius: 6px;
        padding: 4px 12px;
        font-size: 90%;
        white-space: nowrap;
    }

    a.btn:hover {
        color: #fff;
        background: #6a89e4;
        text-decoration: none;
    }

    a.btn:link{ text-decoration: none; color:#fff;}
    a.btn:visited{ text-decoration: none; color:#fff;}
    a.btn:active { text-decoration: none; color:#fff;}



    /* 囲い（特殊）
    ------------------------------------------------------------ */
    .box_border_blue { border: 1px solid #1079be; padding: 20px; margin-bottom: 40px; width: 90%;}
    .box_border_red { border: 1px solid #c80000; padding: 10px; margin-bottom: 40px; width: 90%;}


    span.blue_button {
        background-color: #F4F7F9;
        border-top:    1px solid #A9BBD2;
        border-left:   1px solid #A9BBD2;
        border-right:  1px solid #5C86AA;
        border-bottom: 1px solid #5C86AA;
        border-radius: 2px;
        padding: 3px 7px;
        color: #5480A9;
        font-weight: bold;
        white-space: nowrap;
    }
    span.blue_cell {
        font-weight: bold;
        background-color: #769BBE;
        background: -moz-linear-gradient(top, #A1BAD2, #769BBE);
        background: -webkit-gradient(linear, center top, center bottom, from(#A1BAD2), to(#769BBE));
        border: 1px solid #527DA5;
        border-radius: 2px;
        padding: 2px 3px;
        color: white;
    }
    span.gray_cell {
        background-color: #F1F6F9;
        border: 1px solid #C9D8E0;
        border-radius: 2px;
        padding: 3px 3px;
    }
    span.gray_button {
        background-color: #F5F8FA;
        background: -moz-linear-gradient(top, #D4D4D4, #E9E9E9);
        background: -webkit-gradient(linear, center top, center bottom, from(#D4D4D4), to(#E9E9E9));
        border-top:    1px solid #aaaaaa;
        border-left:   1px solid #aaaaaa;
        border-right:  1px solid #666666;
        border-bottom: 1px solid #666666;
        border-radius: 2px;
        padding: 3px 3px;
        white-space: nowrap;
    }
    code {
        background-color: #eeeeee;
        padding: 3px;
    }
    .src_php {
        color: purple;
    }
    .src_comment {
        color: blue;
    }
    p.high_line{ line-height: 200%;}



    /*      フォーム関連
    ------------------------------------------------------------ */
    .table_form { font-size: 100%; margin-bottom: 20px; width: 100%;}
    .table_form th{ padding: 8px; border-left: 1px solid #ccc; border-bottom:1px solid #ccc; vertical-align: center; background: #e4eef8; text-align: left;}
    .table_form th.noborder { border-left: none; background: #fff; padding-top: 40px; font-weight: bold;}
    .table_form td{ padding: 8px; border-left: 1px solid #ccc; border-bottom:1px solid #ccc;  border-right: 1px solid #ccc; vertical-align: top; background: #fff;}
    .table_form td.v_center{ vertical-align: center;}
    .table_form td.right { text-align: right;}
    .table_form .border_top { border-top: 1px solid #ccc; }
}

@media screen and (max-width: 1024px) {
    img { max-width: 100% !important; height: auto !important;}
    .container p iframe { max-width: 100% !important; }
    .container center embed { width: 92vw; height: calc(92vw * (579 / 634)); }
}



/* PC
------------------------------------------------------------ */
@media screen and (min-width: 1025px) {
    /* Container
    ------------------------------------------------------------ */
    .container { width: 960px; margin: 20px auto;}
    .container h2 { font-size: 160%; font-weight: bold; color: #666; margin-bottom: 10px; line-height: 160%; }
    .container h3 { font-size: 160%; font-weight: bold; color: #666; border-bottom: 1px solid #ccc; padding: 8px; margin-bottom: 40px; line-height: 160%;}
    .container h4 { font-size: 120%; font-weight: bold; color: #000; background: #f0f0f0; padding:8px 10px; margin: 10px 0 20px 0;}
    .container h4.wht { font-size: 120%; font-weight: bold; color: #000; background: #fff; padding: 10px; margin: 10px 0 20px 0;}
    .container h5 { font-size: 120%; font-weight: bold; background: url(../images/icon_link.svg) no-repeat; background-position: left center; background-size: 20px 20px; padding:12px 28px; margin-bottom: 10px;} 
    .container h5.noicon{ font-size: 120%; font-weight: bold; background-image: none; padding: 20px 0;} 
    .container h5.under_line{ font-size: 120%; font-weight: bold; background-image: none; padding:10px 0; margin-bottom: 20px; border-bottom: 1px solid #ccc;} 
    .container h6 { font-size: 110%; font-weight: bold; margin-bottom: 10px;}
    .container .contents_box { margin-left: 20px; margin-right: 20px;}
    .container .contents_box2 { padding: 10px 20px 60px 20px;}
    .container .contents_box3 { padding: 10px;}
    img { max-width:  height: }



    /*	Color Box
    ------------------------------------------------------------ */
    .red_box { width:700px;  margin: 20px auto; background: #faefef; border: double 3px #cc0000; border-radius: 8px; padding: 20px;}
    .blue_box { width:700px;  margin: 20px auto; background: #effbff; border-radius: 8px; padding: 20px;}
    .blue_box900 { width:900px;  margin: 20px auto; background: #effbff; border-radius: 8px; padding: 20px;}
    .gray_box { width:700px;  margin: 20px auto; background: #f5f5f5; border-radius: 8px; padding: 20px;}
    pre { width: 800px; padding: 10px; margin: 40px auto; border: 1px solid #ccc; background: #fff; overflow: auto;}


    .breadclumb { margin-bottom: 40px; margin-left: 0;}
    .breadclumb ul li { display: inline;}
    .breadclumb ul li:before { content:" > ";}
    .breadclumb ul li:first-child:before { content: none;}


    ul.localnav{ margin: 20px 0 40px 0; font-size: 0; text-align: center;}
    ul.localnav li { border-left: 1px solid #ccc; border-right: 1px solid #ccc; font-size: 14px;}
    ul.localnav li+ li { border-left: 0; border-right: 1px solid #ccc;}

    ul.localnav li{
        position: relative;
        display: inline-block;
        line-height: 200%;
        margin: 0;
        padding: 0;
        text-align: center;
    }

    ul.localnav li a{
        display: block;
        margin: 0;
        padding: 0 10px;
        color: #000;
        text-decoration: none;
    }
    ul.localnav li a.selected { background:rgba(0,0,0,0.8); color: #fff;}

    ul.localnav li:hover > a{
        background:rgba(0,0,0,0.8);
        color: #fff;
    }


    ul.localnav li ul{
        position: absolute;
        top: 100%;
        left: 0;
        margin: 0;
        padding: 0;
    }


    ul.localnav li ul li{
        line-height: 100%;
        overflow: hidden;
        width: 150%;
        height: 0;
        color: #fff;
        border-left: none;
        border-right: none;
    }
    ul.localnav li ul li a{
        padding: 10px;
        background:rgba(255,255,255,0.9);
        text-align: left;
    }
    ul.localnav li:hover > a{
        background:rgba(0,0,0,0.8);
        color: #fff;
    }
    ul.localnav li:hover ul li{
        overflow: visible;
        height: 100%;
    }



    /*	Table
    ------------------------------------------------------------ */
    .table_default { border-top: 1px solid #ccc; border-right:1px solid #ccc; border-collapse: collapse; font-size: 100%;}
    .table_default th{ padding: 8px; border-left: 1px solid #ccc; border-bottom:1px solid #ccc; vertical-align: top; text-align: left; background: #e4eef8;}
    .table_default th.center { text-align: center;}
    .table_default th.middle { vertical-align: middle;}
    .table_default td{ padding: 8px; border-left: 1px solid #ccc; border-bottom:1px solid #ccc; vertical-align: top;}
    .table_default td.middle { vertical-align: middle;}
    .table_default td.v_center{ vertical-align: center;}
    .table_default td.right { text-align: right;}
    .table_no_decoration th,td {padding: 10px;}


    .flowchart th, td {
        padding: 4px 8px;
    }
    .flowchart th {
        border: thin solid gray;
        border-radius: 0.5em;
        width: 12em;
        text-align: left;
    }
    .flowchart th dl {
        margin: 0;
    }
    .flowchart th dt {
        font-weight: bold;
    }
    .flowchart th dd {
        margin: 0;
    }
    .flowchart td {
        padding: 0 0.5em;
        text-align: center;
    }
    .flowchart td .large {
        font-size: xx-large;
        vertical-align: middle;
    }
    .flowchart td.yes {
        color: rgb(51,102,153);
    }
    .flowchart td.no {
        color: gray;
    }

    table.rough_estimate {background: #e4eef8; font-size: 100%;}
    table.rough_estimate th { padding: 8px 16px; text-align: left; font-weight: bold;}
    table.rough_estimate td { padding: 4px 16px;}
    table.rough_estimate td.padd4 { padding: 8px 32px;}

    table.program th, table.program td {
        padding: 10px;
        vertical-align: top;
    }

    td.left-lined {
        border-left: 1px solid #aaaaaa;
    }


    /*	Table Company
    ------------------------------------------------------------ */
    .table_company { border-top: 1px solid #ccc; border-collapse: collapse; font-size: 100%;}
    .table_company th{ padding: 8px; border-left: 1px solid #ccc; border-bottom:1px solid #ccc; vertical-align: top; background: #e4eef8; text-align: left;}
    .table_company td{ padding: 8px; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom:1px solid #ccc; vertical-align: top;}
    .table_company td.noboder { border-left: none; border-right: none;}

    /*	Graph
    ------------------------------------------------------------ */
    .graph276 { width: 90px; height: 10px; background: #eeb7ed; float: left; margin-right: 10px;}
    .graph92 { width: 30px; height: 10px; background: #eeb7ed; float: left; margin-right: 10px;}
    .graph306 { width: 100px; height: 10px; background: #eeb7ed; float: left; margin-right: 10px;}
    .graph824 { width: 270px; height: 10px; background: #fff600; float: left; margin-right: 10px;}
    .graph691 { width: 230px; height: 10px; background: #fff600; float: left; margin-right: 10px;}
    .graph140 { width: 46px; height: 10px; background: #fff600; float: left; margin-right: 10px;}
    .graph1267 { width: 420px; height: 10px; background: #82e56e; float: left; margin-right: 10px;}



    /*	Q and A
    ------------------------------------------------------------ */
    dl.question dt { clear:left; float: left; font-weight: bold; color: #0671b0; margin-bottom: 10px;}
    dl.question dd { margin-left: 30px; font-weight: bold; color: #0671b0; margin-bottom: 10px;}
    dl.answer dt { clear:left; float: left; font-weight: bold; margin-bottom: 20px;}
    dl.answer dd { margin-left: 30px; margin-bottom: 20px;}
    dl.question2 dt { clear:left; float: left; font-weight: bold; color: #0671b0; margin-bottom: 10px;}
    dl.question2 dd { margin-left: 50px; font-weight: bold; color: #0671b0; margin-bottom: 10px;}
    dl.answer2 dt { clear:left; float: left; font-weight: bold; margin-bottom: 20px;}
    dl.answer2 dd { margin-left: 50px; margin-bottom: 20px;}



    /*	News
    ------------------------------------------------------------ */
    .news_event { width: 940px; margin: 0 auto; padding: 10px;}
    .news_event dl dt { clear:left; float: left;}
    .news_event dl dd { margin-left: 120px;}

    .news_event dl.event dt { clear:left; float: left; padding: 4px;}
    .news_event dl.event dd { margin-left: 50px;  padding: 4px;}

    .news_event .newsline { border-bottom: 1px solid #ccc; margin-top: 40px; margin-bottom: 40px;}
    .news_event .eventline { border-bottom: 1px solid #ccc; margin-top: 60px; margin-bottom: 60px;}

    .news_event ul.past { text-align: center;}
    .news_event ul.past li {
        display: inline-block;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
    }
    .news_event ul.past li+ li {
        border-left: 0;
        border-right: 1px solid #ccc;}
        .news_event ul.past li a { padding: 0 10px;}
        .news_event ul.past li a.selected{ display: block; background: #000; color: #fff;
    }



    /*	技術情報
    ------------------------------------------------------------ */
    .tech_info_box { width: 900px; padding: 20px; border: 1px solid #ccc; border-radius: 8px;}



    /*	プレスリリース
    ------------------------------------------------------------ */
    dl.press_release dt { clear:left; float: left; margin-bottom: 10px;}
    dl.press_release dd { margin-left: 100px; margin-bottom: 10px;}



    /*	著書
    ------------------------------------------------------------ */
    .books_left { width: 120px; float: left;}
    .books_right { width: 760px; float: right;}



    /* faq
    ------------------------------------------------------------ */
    ul.faq {}
    ul.faq li.q { background:url("../images/icon_q.svg")no-repeat left top; background-size:28px 28px; padding:6px 0 16px 40px;}
    ul.faq li.a { background:url("../images/icon_a.svg")no-repeat left top; background-size:28px 28px; padding:6px 0 40px 40px; margin-bottom:40px; border-bottom:1px solid #ccc;}



    /* 申し込みボタン
    ------------------------------------------------------------ */

    a.btn {
        color: #fff;
        background-color: #1079be;
        border-radius: 6px;
        padding: 4px 12px;
        font-size: 90%;
    }

    a.btn:hover {
        color: #fff;
        background: #6a89e4;
        text-decoration: none;
    }

    a.btn:link{ text-decoration: none; color:#fff;}
    a.btn:visited{ text-decoration: none; color:#fff;}
    a.btn:active { text-decoration: none; color:#fff;}



    /* 囲い（特殊）
    ------------------------------------------------------------ */
    .box_border_blue { border: 1px solid #1079be; padding: 20px; margin-bottom: 40px; width: 90%;}
    .box_border_red { border: 1px solid #c80000; padding: 10px; margin-bottom: 40px; width: 90%;}


    span.blue_button {
        background-color: #F4F7F9;
        border-top:    1px solid #A9BBD2;
        border-left:   1px solid #A9BBD2;
        border-right:  1px solid #5C86AA;
        border-bottom: 1px solid #5C86AA;
        border-radius: 2px;
        padding: 3px 7px;
        color: #5480A9;
        font-weight: bold;
    }
    span.blue_cell {
        font-weight: bold;
        background-color: #769BBE;
        background: -moz-linear-gradient(top, #A1BAD2, #769BBE);
        background: -webkit-gradient(linear, center top, center bottom, from(#A1BAD2), to(#769BBE));
        border: 1px solid #527DA5;
        border-radius: 2px;
        padding: 2px 3px;
        color: white;
    }
    span.gray_cell {
        background-color: #F1F6F9;
        border: 1px solid #C9D8E0;
        border-radius: 2px;
        padding: 3px 3px;
    }
    span.gray_button {
        background-color: #F5F8FA;
        background: -moz-linear-gradient(top, #D4D4D4, #E9E9E9);
        background: -webkit-gradient(linear, center top, center bottom, from(#D4D4D4), to(#E9E9E9));
        border-top:    1px solid #aaaaaa;
        border-left:   1px solid #aaaaaa;
        border-right:  1px solid #666666;
        border-bottom: 1px solid #666666;
        border-radius: 2px;
        padding: 3px 3px;
    }
    code {
        background-color: #eeeeee;
        padding: 3px;
    }
    .src_php {
        color: purple;
    }
    .src_comment {
        color: blue;
    }
    p.high_line{ line-height: 200%;}



    /*      フォーム関連
    ------------------------------------------------------------ */
    .table_form { font-size: 100%; margin-bottom: 20px; width: 100%;}
    .table_form th{ padding: 8px; border-left: 1px solid #ccc; border-bottom:1px solid #ccc; vertical-align: center; background: #e4eef8; text-align: left;}
    .table_form th.noborder { border-left: none; background: #fff; padding-top: 40px; font-weight: bold;}
    .table_form td{ padding: 8px; border-left: 1px solid #ccc; border-bottom:1px solid #ccc;  border-right: 1px solid #ccc; vertical-align: top; background: #fff;}
    .table_form td.v_center{ vertical-align: center;}
    .table_form td.right { text-align: right;}
    .table_form .border_top { border-top: 1px solid #ccc; }


}