@charset "UTF-8";
body{
    font-family: source-han-sans-japanese,sans-serif;
    font-weight: 300;
    font-style: normal;
}

p{
    
    font-size: 14pt;
    
    
}

a{
    color: #000;
    text-decoration: none;
}

a.linear{
    color: #000;
    text-decoration: none;
}

a.linear:hover p{
/*    background: linear-gradient(transparent 50%, yellow 50%);*/
}

p.bk-yellow a:hover {
    background: linear-gradient(transparent 50%, yellow 50%);
}

li{
    font-size: 14pt;

}

.center{
    text-align: center;
}

.clearfix:before,
.clearfix:after{
    content: "";
    display: block;
    overflow: hidden;
}
.clearfix:after{
    clear: both;
}

iframe.form{
    background-color: #f8f8f8;
}

img.mini_logo{
    height: 1.5em;
    display: none;
    animation: fadeIn 0.2s ease 0.3s 1 normal;

}

img.mini_logo2{
    height: 1.5em;
    display: block;
    vertical-align: middle;
    float: right;

}

div.mini_logo{
    vertical-align: middle;
    float: right;
    margin-left: auto;
    display: block;
}
/*---------------------------------------------------------------------*/

hr{
    width: 75%;
    clear: both;
    border: solid 1px #3e3e3e;

}

hr.dash{
    border:none;
    border-top:dashed 1px #b1b1b1;
    height:1px;
    color:#FFFFFF;
    width:75%;
    margin: 1em 0 1em 12.5% ;
}

hr.dash2{
    border:none;
    border-top:dashed 1px #b1b1b1;
    height:1px;
    color:#FFFFFF;
    width:100%;
}


hr.white{
    width: 100%;
    clear:both;
    border: solid 1px #FFF;
}

hr.rule{
    margin: 3em 0 4em 12.5%;
}

hr.footer-line{
    width: 75%;
    clear: both;
    border: solid 1px #3e3e3e;

}

hr.footer{
    width: 80%;
    border: solid 1px #606060;
    clear: both;
}

/*---------------------------------------------------------------------*/

img.title{
    width:55%;
    height: auto;
    padding: 0.5em 0em 0.5em 0.5em;
    clear: both;
}

img.title2{
    width: 90%;
}

img.header{
    width:100%;
    display: block;
}

img.header600px{
    display: none;
}

img.point3{
    width:5em;
    height: auto;
    margin: 0 0 1em 0;
    text-align: center;
    
    
}

img.jump-icon{
    width:1.5em;
    margin: 0 0.5em 1em 0 ;
    clear: both;
    float: left;
}

img.toindex{
    width:1.5em;
    margin: 0 0 0 0.5em;
    float: right;
}

img.point{
    width:5em;
    float:left;
    height: auto;
    margin: 0.5em 0.5em 4em 0;
}

img.solution123{
    width:5em;
    height: auto;
    float:left;
    margin: 0 0 0 0;
	padding: 0em 2em 1em 0em;
}

img.solution123b{
    width:5em;
    height: auto;
    float:left;
    margin: 0 0 0 0;
    padding: 0em 2em 1em 0em;
}

img.solution123-arrow{
    width:auto;
    height: 5em;

    margin: 0 0 0 0;
	padding: 0em 2em 1em 0.7em;
}

img.client-provide{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    padding: 0.5em 5% 5% 5%;
    
}

img.client-provide2{
    width: 45%;
    margin-left: 0;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    padding: 0.5em 5% 5% 5%;

}

img.presentation_seet{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    padding: 5% 5% 5% 5%;

}

img.presentation_seet_left{
    width: 42.5%;
    margin-top: auto;
    margin-bottom: auto;
    padding: 0% 2.5% 5% 5%;

}

img.presentation_seet_right{
    width: 42.5%;
    margin-top: auto;
    margin-bottom: auto;
    float: right;
    padding: 0% 5% 5% 2.5%;

}

img.presentation_seet2{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    padding: 1% 5% 5% 5%;

}

img.arrow1{
    width:5em;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

img.check{
    float: left;
    width:2em;
    height: auto;
    margin: 0 1em 3em 0;
    clear: both;
    
    
}

img.merit-img{
    width: 100%;
}

img.datatype{
    width: 100%;
}

img.mail-icon{
    height: 2em;
    float: left;
    margin: 0.3em 1em 1em 1em;
}

img.form-icon{
    height: 2.2em;
    float: left;
    margin: 0.3em 1em 1em 1em;

}

img.arrow3{
    width: 4em;
    margin: 2em 0 2em 0;
}

img.sample{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    padding: 5% 5% 5% 5%;

}

img.gallery{
    width: 98%;
    padding: 0% 1% 0% 1%;
}

img.footer-mail-icon{
    width: 3em;
    float: left;
    margin: 1.5em 1em 1em 1em;
}

img.footer-logo{
    width: 5em;
    float: right;
    font-size: 14pt;
}

/*---------------------------------------------------------------------*/

p.subcatch{
    margin-block-start: 0em;
    margin-block-end: 0em;
    font-size: 14pt;
}

p.main{
    padding: 2em 0em 2em 0em;
}

p.h_menu{
    float: right;
    margin-block-start: 0em;
    margin-block-end: 0em;
    padding:  0.5em 0em 0em 0.5em;
}

p.case-txit{
    margin-block-start: 0em;
    margin-block-end: 0em;
}

p.point3{
    margin-block-start: 0em;
    margin-block-end: 0em;
    padding: 0em 0em 0em 0em;
}

p.point{
    margin-block-start: 0em;
    margin-block-end: 0em;
    padding: 0em 0em 0em 0em;
}

p.case-menu{
    margin-block-start: 0em;
    margin-block-end: 0em;
    padding: 0em 0em 0.5em 0em;
    font-size: 16pt;
}

p.toindex{
    margin-block-start: 0em;
    margin-block-end: 0em;
}

p.solution123-title{
    font-size: 18pt;
    margin-block-start: 0em;
    margin-block-end: 0em;
    padding: 0em 0em 0em 0em;
}

p.solution123{
	margin-block-start: 0em;
    margin-block-end: 0em;
    padding: 0em 0em 0em 0em;
}

p.solution123-arrow {
	margin-block-start: 0em;
    margin-block-end: 0em;
    padding: 0em 0em 0em 0em;
    clear: both;
}

p.client-provide{
	margin-block-start: 0em;
    margin-block-end: 0em;
    padding: 0.5em 0em 0em 0.5em;
}

p.assisst-create{
    font-size: 16pt;
	margin-block-start: 0em;
    margin-block-end: 0em;
    padding: 0.5em 0em 0em 0.5em;
}

p.client-provide-caption{
    margin-block-start:0.0em;
    margin-block-end:0em;
    font-family: source-han-sans-japanese,sans-serif;
    font-weight: 500;
    font-style: normal;

    font-size: 16pt;

}

p.client-provide_text{
    margin-block-start: 0em;
    margin-block-end: 0em;
    
    font-size: 12pt;

}

p.merit{
    clear: both;
    margin-block-start: 0em;
    margin-block-end: 0em;
    float:left;
    height: auto;
    margin: 0.5em 0.5em 5.5em 0;
    font-size: 18pt;
    font-family: source-han-sans-japanese,sans-serif;
    font-weight: 600;
    color: #9e71af;

}

p.merit-text{
    margin-block-start: 0em;
	margin-block-end: 0em;
    padding: 0.5em 0em 0em 0em;
    text-align: left;

}

p.merit2{
    clear: both;
    margin-block-start: 0em;
    margin-block-end: 0em;
    float:left;
    height: auto;
    margin: 0.5em 0.5em 5.5em 0;
    font-size: 18pt;
    font-family: source-han-sans-japanese,sans-serif;
    font-weight: 600;
    color: #9e71af;

}

p.merit3{
    clear: both;
    margin-block-start: 0em;
    margin-block-end: 0em;
    float:left;
    height: auto;
    margin: 0.5em 0.5em 5.5em 0;
    font-size: 18pt;
    font-family: source-han-sans-japanese,sans-serif;
    font-weight: 600;
    color: #9e71af;

}

p.merit4{
    clear: both;
    margin-block-start: 0em;
    margin-block-end: 0em;
    float:left;
    height: auto;
    margin: 0.5em 0.5em 1.5em 0;
    font-size: 18pt;
    font-family: source-han-sans-japanese,sans-serif;
    font-weight: 600;
    color: #9e71af;

}

p.merit-text2{
    margin-block-start: 0em;
    margin-block-end: 0em;
    padding: 0.5em 0em 0em 0em;
    text-align: left;

}

p.check{
    font-size: 16pt;
    margin-block-start: 0em;
    margin-block-end: 0em;
    padding: 0em 0em 1.5em 0em;
}

p.datatype{
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin: 0.5em 1em 1em 1em;
}

p.caption{
    margin-block-start: 0em;
    margin-block-end: 0em;
    font-size: 12pt;
}

p.caption2{
    margin-block-start: 0em;
    margin-block-end: 0em;
    padding: 5% 0 0 5%;
    font-size: 12pt;
}

p.caption3{
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin: 0% 0 0 5%;
    font-size: 12pt;
}

p.brushup{
    margin: 0 3% 0 3%;
}

p.mail{
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin: 1em 0 1em 0;
     font-size: 18pt;
    font-family: source-han-sans-japanese,sans-serif;
    font-weight: 600;
}

p.form{
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin: 1em 0 1em 0;
    font-size: 18pt;
    font-family: source-han-sans-japanese,sans-serif;
    font-weight: 600;

}

p.flow{
    margin-block-start: 0em;
    margin-block-end: 0em;
    padding: 0 1em 1em 1em;

}

br.clear{
    clear: both;
}

p.sample{
    margin-block-start: 0em;
    margin-block-end: 0em;
    padding: 0 1em 0em 1em;

}

p.about{
    margin-block-start: 0em;
    margin-block-end: 0em;
    padding: 0 0em 0.5em 0;

}

p.rule{
    margin-block-start: 0em;
    margin-block-end: 0em;
    padding: 0.5em 1em 0em 1em;

}
p.rule-ex{
    width: 80%;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin: 0 0 0 10%;
    padding: 0em 0em 0em 0em;
    background-color: #d3d3d3;
    font-size: 12pt;

}

p.gallery-text{
    margin-block-start: 0em;
    margin-block-end: 0em;
    padding: 0.5em 0.5em 3em 0.5em;
}

p.gallery-caption{
    margin-block-start: 0em;
    margin-block-end: 0em;
    font-size: 10pt;
    padding: 0% 3% 0% 3%;
}

p.price-txet{
    margin-block-start: 0em;
    margin-block-end: 0em;
    padding: 0 0 2em 0 ;
}

p.price_case{
    margin-block-start: 0em;
    margin-block-end: 0em;
    font-family: source-han-sans-japanese,sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 12pt;
    padding: 0 0 0 0 ;

}

p.time_payment{
    margin-block-start: 0em;
    margin-block-end: 0em;

    padding: 0 0 2em 0 ;
    font-size: 10pt;

}

p.gallery-explanatory{
    margin-block-end: 0em;

    text-align: left;
    font-size: 10pt;
}

p.footer-mail-text{
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin: 0 0 0 0;
    padding: 0.5em 0 0 0;
    font-size: 14pt;
    font-family: source-han-sans-japanese,sans-serif;
    font-weight: 500;
    line-height: 1.5em;
}

p.footer-mail{
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin: 0em 0 0em 0;
    padding: 0 0 0.5em 0;
    font-size: 18pt;
    font-family: source-han-sans-japanese,sans-serif;
    font-weight: 600;
    line-height: 1.5em;
}

ul.footer-menu{
    list-style-type: none;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

ul.footer-menu li{
    float: left;
    font-size: 10pt;
    padding: 0 0.5em 0 0.5em;
}

footer{
    max-width: 50%;
    padding: 2em 0em 2em 25%;
    font-family: source-han-sans-japanese,sans-serif;
    font-weight: 500;
    font-style: normal;
    text-align: left;

/*    font-size: 0; */

}

p.footer-holder{
    font-family: source-han-sans-japanese,sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 10pt;
    text-align: left;
    float: left;
}

/*メニュー---------------------------------------------------------------------*/
header.menu{
    display: flex;
    position:fixed;
    top: 0px;
    left: 0px;
    width: 100%;

    background: #fff;
    padding: 0.5em 0em 0.5em 0em;
    margin: 0em 0em 0.5em 0em;
    z-index: 99;
    
    border: solid 1px #000;
    border-top: none;
    border-left: none;
    border-right: none;
    box-sizing: content-box;
}

div.menu{
    display: block;
}

div.menu-block{
    width: 100%;    
}

div.menu ul{
    font-size: 0;
    box-sizing: border-box;
    width: auto;
    padding: 4px;
    list-style: none;
    text-align: left;
    float: left;
}

div.menu li{
    font-size: 12pt;
    margin: 0 8px;
    display: inline-block;    
}

div.menu li a{
    text-decoration: none;
    padding-bottom: 3px;
    color: #000;
    display: block;
    position: relative;    
}

div.menu li a:before{
    content: '';
    width: 0;
    left: 50%;
    bottom: 0;
    transition: all 0.3s ease;
    border-bottom: 3px solid #000;
    position: absolute;
    display: block;    
}

div.menu li a:hover:before {
    width: 50%;
    border-bottom: 3px solid #000;
}

div.menu li a:after {
    content: '';
    width: 0;
    right: 50%;
    bottom: 0;
    transition: all 0.3s ease;
    border-bottom: 3px solid #000;
    position: absolute;
    display: block;    
}

div.menu li a:hover:after{
    width: 50%;
    border-bottom: 3px solid #000;
}

/*---------------------------------------------------------------------*/

div.block{
    
}


div.general-block{
    max-width: 50%;
    padding: 2em 0em 2em 25%;
    font-family: source-han-sans-japanese,sans-serif;
    font-weight: 500;
    font-style: normal;
    text-align: left;

}

div.header-blank{
    padding: 4em 0 0 0;
}

div.title-block{
    width: 100%;
}

div.catch{
    float: right;
    width: 40%;
}

div.catch-block{
    
}

div.center{
    text-align: center;
}

div.twitter{
    padding: 2em 0 2em 30%;
}

div.point3_block{
    
}

div.point3_block1{
    display: block;
    text-align: center;
    max-width: 50%;
    padding: 2em 0em 2em 25%;
    
}

div.point3_block2{
    display: block;
    text-align: center;
    max-width: 50%;
    padding: 2em 0em 2em 25%;

}

div.point3_block3{
    display: block;
    text-align: center;
    max-width: 50%;
    padding: 2em 0em 2em 25%;

}

div.case-menu-block{
    max-width: 50%;
    padding: 2em 0em 2em 25%;
    font-family: source-han-sans-japanese,sans-serif;
    font-weight: 500;
    font-style: normal;

}

div.toindex{
    text-align: right;
    margin: 0 12.5% 0 0;
}

div.case{
    max-width: 50%;
    padding: 2em 0em 2em 25%;
    clear: both;

}

div.point{
    text-align:left;
    max-width: 50%;
    padding: 0em 0em 2em 25%;

}

div.solution123-block{
    max-width: 50%;
    padding: 2em 0em 2em 25%;
    font-family: source-han-sans-japanese,sans-serif;
    font-weight: 500;
    font-style: normal;

}

div.client-provide_block{
    max-width: 50%;
    padding: 2em 0em 0em 25%;
    font-family: source-han-sans-japanese,sans-serif;
    font-weight: 500;
    font-style: normal;

}

div.presentation_block{
    max-width: 50%;
    padding: 2em 0em 2em 25%;
    font-family: source-han-sans-japanese,sans-serif;
    font-weight: 500;
    font-style: normal;

}

div.client-provide{
    background-color: #dbdbdb;
}

div.client-provide_text{
    width: 90%;
    text-align: left;
    padding: 0 0 1em 0.5em;
}


div.assisst_create{
    border: solid 4px #dbdbdb;
}

div.arrow1{
    text-align: center;
}

div.presentation-seet{
    background-color: #dbdbdb;
    margin:  0 0 3em 0;
}

div.presentation-seet2{
    margin:  0 0 3em 0;
    border: solid 4px #dbdbdb;
}

div.presentation-seet3{
    width: 40%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
    margin-bottom: 0;
    background-color: #dbdbdb;
}

div.check-block{
    padding: 0 0 0em 0 ;
    display: block;
}

div.merit-block{
    display: block;
    text-align: center;
    max-width: 49.3%;
    margin: 2em 0em 0 25%;
    border: solid 4px #dbdbdb;
    height: auto;

}

div.merit-block:after{
    content: "";
    display: block;
    clear: both;
    height: 1px;
    overflow: hidden;
}

div.merit-block2{
    max-width: 50%;
    padding: 0em 0em 2em 25%;
}

div.merit2line-left{
    width: 45.5%;
    padding: 1.5% 1.5% 1.5% 3%;
    float: left;
    clear: both;
}

div.merit2line-left2{
    width: 45.5%;
    padding: 5% 1.5% 1.5% 3%;
    float: left;
    clear: both;
    margin-top: auto;
    margin-bottom: auto;
}

div.merit2line-wide{
    width: 94%;
    padding: 1.5% 3% 1.5% 3%;
    clear: both;
    margin-top: auto;
    margin-bottom: auto;
}

div.merit2line-left3{
    display: none;
}

div.merit2line-left4{
    width: 45.5%;
    padding: 1.5% 1.5% 1.5% 3%;
    float: left;
    clear: both;
    text-align: left;
}

div.merit2line-left5{
    width: 45.5%;
    padding: 5% 1.5% 1.5% 3%;
    float: left;
    clear: both;
    margin-top: auto;
    margin-bottom: auto;
}

div.merit2line-right{
    width: 45.5%;
    float: right;
    padding: 1.5% 3% 1.5% 1.5%;

}

div.merit2line-right4{
    width: 45.5%;
    float: right;
    padding: 1.5% 3% 1.5% 1.5%;
    text-align: left;

}

div.merit2line-text-block{
    width: 100%
}

div.delivery-block{
    max-width: 50%;
    padding: 2em 0em 2em 25%;
    font-family: source-han-sans-japanese,sans-serif;
    font-weight: 500;
    font-style: normal;

}

div.datatype_block{
    max-width: 49.3%;
    margin: 2em 0em 2em 25%;
    font-family: source-han-sans-japanese,sans-serif;
    font-weight: 500;
    font-style: normal;
    background-color: #dbdbdb;
    border: solid 4px #dbdbdb;

}

div.datatype_block:after{
    content: "";
    display: block;
    clear: both;
    height: 1px;
    overflow: hidden;
}

div.flow-block{
    max-width: 50%;
    padding: 2em 0em 2em 25%;
    font-family: source-han-sans-japanese,sans-serif;
    font-weight: 500;
    font-style: normal;
    border-radius: 10px;
}

div.flow{
    background-color: #d3edfb;
    border-radius: 10px;

}

div.mail{
    width: 100%;
    line-height: 3em;
    background-color: #d3edfb;
    border-radius: 10px;
    margin: 0 0 3em 0;
}

div.arrow3{
    text-align: center;
}

div.sample-block{
    max-width: 50%;
    padding: 2em 0em 2em 25%;
    font-family: source-han-sans-japanese,sans-serif;
    font-weight: 500;
    font-style: normal;
}

div.sample{
    width: 90%;
    text-align: left;
    padding: 0 0 1em 0.5em;
    margin: 0 0 2em 0;
    background-color: #dbdbdb;
}

div.footer-mail{
    width: 100%;
    line-height: 3em;
    background-color: #dbdbdb;
    border-radius: 10px;
    margin: 0 0 3em 0;
    font-size: 14pt;
}

div.footer-menu{
    width: 100%;
    border-style: solid none;
    border-color: #606060;
    text-align: center;
}

div.footer-holder{
    max-width: 100%;
    padding: 3em 0 0 0;
    text-align: left;
}

div.rule-block{
    max-width: 50%;
    margin: 2em 0em 2em 25%;
    font-family: source-han-sans-japanese,sans-serif;
    font-weight: 500;
    font-style: normal;
    background-color: #f7f7f7;

}

div.imgbox{
    max-width: 50%;
    padding: 2em 0em 2em 25%;
}
div.imgbox:hover{
    max-width: 100%;
    padding: 2em 0em 2em 0;
    transition: all 0.2s; /* ズームアニメ */
}

div.gallery2line-left{
    width: 47%;
    padding: 1.5% 1% 1.5% 2%;
    float: left;
    clear: both;
    margin-top: auto;
    margin-bottom: auto;
}

div.gallery2line-right{
    width: 47%;
    float: right;
    padding: 1.5% 2% 1.5% 1%;
}

div.gallery-block{
    max-width: 60%;
    padding: 2em 0em 2em 20%;
    font-family: source-han-sans-japanese,sans-serif;
    font-weight: 500;
    font-style: normal;

}


/*表---------------------------------------------------------------------*/

table{
    border-spacing: 0;
    padding: 0 0 1em 0;
    font-size: 10pt;
}

th,td{
    padding: 2px 8px 2px 8px;

}

tr.title{
    background-color: #cccbcb;
}


tr.value:nth-child(odd){
    background-color: #dbdbdb;
}

.align-right{
    text-align: right;
}

.align-center{
    text-align: center;
}


/*---------------------------------------------------------------------*/


/*サイト名*/
H1{
    margin-block-start:0em;
    margin-block-end:0em;
    font-family: source-han-sans-japanese,sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 20pt;
}

H1.left{
    clear: both;

}

H1.third{
    display: none;
}

H1.flow{
    margin: 0 0 2em 0;
}

H1.sample{
    margin: 0 0 2em 0;
}

H1.about{
    padding: 0 0 2em 0;
}

H1.gallery{
    padding: 0 0 0em 0;
}

H1.rule{
    padding: 0.5em 0.5em 1em 0.5em;
}

H1.price{
    padding: 0 0 2em 0;
}

/*ケース*/
H2{
    margin-block-start:0.0em;
    margin-block-end:0em;
    font-family: source-han-sans-japanese,sans-serif;
    font-weight: 700;
    font-style: normal;
    
    font-size: 20pt;
}

H2.left{
    clear: both;
}
/*サンプル・見出し*/
H2.sample{
    margin-block-start:0.0em;
    margin-block-end:0em;
    font-family: source-han-sans-japanese,sans-serif;
    font-weight: 600;
    font-style: normal;
    
    padding: 0.5em 0 0 0.5em;

    font-size: 14pt;

}

H2.about{
    margin-block-start:0.0em;
    margin-block-end:0em;
    font-family: source-han-sans-japanese,sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 14pt;
    padding: 0 0 0.5em 0;

}

H2.rule{
    margin-block-start:0.0em;
    margin-block-end:0em;
    font-family: source-han-sans-japanese,sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 14pt;
    padding: 1em 0.5em 0em 0.5em;

}

H2.price{
    margin-block-start:0.0em;
    margin-block-end:0em;
    font-family: source-han-sans-japanese,sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 14pt;
    padding: 3em 0em 0.2em 0em;

}

/*3ポイント*/
H3{
    margin-block-start:0.0em;
    margin-block-end:0em;
    font-size: 18pt;
    font-family: source-han-sans-japanese,sans-serif;
    font-weight: 600;
    font-style: normal;
}


/*サブタイトル*/
H4{
    margin-block-start:0.0em;
    margin-block-end:0em;
    font-family: source-han-sans-japanese,sans-serif;
    font-weight: 500;
    font-style: normal;

    font-size: 18pt;
}

H4.datatype{
    margin-block-start:0.0em;
    margin-block-end:0em;
    font-family: source-han-sans-japanese,sans-serif;
    font-weight: 500;
    font-style: normal;

    font-size: 18pt;
    margin: 0.5em 0.5em 0 0.5em;
}

H4.brushup{
    margin-block-start:0.0em;
    margin-block-end:0em;
    font-family: source-han-sans-japanese,sans-serif;
    font-weight: 500;
    font-style: normal;

    font-size: 18pt;
    
    margin: 3% 0 0 3%;

}

/*小見出し*/
H5.flow{
    margin-block-start:0.0em;
    margin-block-end:0em;
    font-family: source-han-sans-japanese,sans-serif;
    font-weight: 600;
    font-style: normal;
    padding: 1em 0em 0.5em 1em;

    font-size: 16pt;

}

/*ハンバーガーメニュー-------------------------------------------------------------------------*/

div.hamburger-menu {
    width: 100%;
    padding:10px;
    background: #ededed;
    display: none;
}

ul.hamburger-menu{
    list-style-type: none;
    line-height: 250%;
}

#nav-drawer {
    position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
    display:none;
}

/*アイコンのスペース*/
#nav-open {
    display: inline-block;
    width: 30px;
    height: 22px;
    vertical-align: middle;
}

/*ハンバーガーの形をCSSで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
    position: absolute;
    height: 3px;/*線の太さ*/
    width: 25px;/*長さ*/
    border-radius: 3px;
    background: #555;
    display: block;
    content: '';
    cursor: pointer;
}
#nav-open span:before {
    bottom: -8px;
}
#nav-open span:after {
    bottom: -16px;
}

/*閉じる用の薄黒箇所*/
#nav-close {
    display: none;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .3s ease-in-out;
}

/*メニューの中身*/
#nav-content {
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 90%;
    max-width: 330px;/*最大幅（お好みで調整を）*/
    height: 100%;
    background: #fff;
    transition: .3s ease-in-out;
    -webkit-transform: translateX(-105%);
    transform: translateX(-105%);
}

/*チェックがついたら表示させる*/
#nav-input:checked ~ #nav-close {
    display: block;
    opacity: .5;
}

#nav-input:checked ~ #nav-content {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

.header-logo-menu{
    display: flex;
    display: -moz-flex;
    display: -o-flex;
    display: -webkit-flex;
    display: -ms-flex;
    flex-direction: row;
    -moz-flex-direction: row;
    -o-flex-direction: row;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
}

/*ロゴやサイトタイトルをセンタリング*/
.logo-area{text-align:center;margin:auto;}



@media screen and (min-width: 481px) and (max-width: 768px) { 
    div.twitter{
        padding: 2em 0em 2em 0em;
    }


}

/*画面幅が1180pxまでの時*/
@media screen and (max-width:1180px){
    div.merit2line-left5{
        width: 100%;
        padding: 0 2% 2% 0;
        float: none;
        clear: both;
    }
    
    div.merit2line-left4{
        float: right;
        clear: none;
        padding: 1.5% 3% 1.5% 1.5%;

    }
    div.merit2line-right4{
        float: left;
        padding: 1.5% 1.5% 1.5% 3%;
        clear: none;
    }

    p.merit3{
        margin: 0.5em 0.5em 1.5em 3%;
    }
}
/*画面幅が1049pxまでの時*/
@media screen and (max-width:1049px){
    div.merit2line-left2{
        width: 100%;
        padding: 0 2% 2% 0;
        float: none;
        clear: both;
    }

    div.merit2line-left3{
        display: block;
        width: 45.5%;
        padding: 1.5% 1.5% 1.5% 3%;
        float: left;
        clear: both;
    }

    p.merit2{
        margin: 0.5em 0.5em 2em 3%;
    }
    
    p.merit-text2{
        margin: 3% 3% 0 0; 
    }

}
/*画面幅が995pxまでの時*/
@media screen and (max-width:995px){
    p.merit3{
        margin: 0.5em 0.5em 2.8em 3%;
    }

}

/*画面幅が600pxまでの時*/
@media screen and (max-width:600px){
    
    div.hamburger-menu{
        display: block;
    }
    
    div.menu{
        display: none;
    }
    
    img.title{
        display: none;
    }
    
    header.menu{
        padding: 0;
        margin: 0;
        border: none;
    }
    
    div.header-blank{
        padding: 5em 0 0 0;
    }
    
    img.header{
        display: none;
    }
    
    img.header600px{
        display: block;
        width: 100%;
    }
    
    hr{
        width: 90%;
        clear: both;
    }

    div.toindex{
        text-align: right;
        margin: 0 5% 0 0;
    }

    div.catch{
        float: none;
        width: auto;
        margin: 0 auto;
        display: inline;
        text-align: center;
    }
    div.catch-block{
        text-align: center;
    }


    H1{
        margin-block-start:0em;
        margin-block-end:0em;
        font-family: source-han-sans-japanese,sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size: 18pt;
    }

    H1.left{
        display: none;
    }
    
    H1.sec{
        display: none;
    }
    
    H1.third{
        display: block;
        
    }
    
    img.title{
        width:95%;
        height: auto;
        padding: 0.5em 0em 0em 0.5em;
        clear: both;
    }

    div.twitter{
        padding: 2em 0em 2em 0em;
    }

    img.point{
        width:5em;
        float:none;
        height: auto;
        margin: 0.5em 0.5em 0em 0;
    }

    div.point{
        text-align:left;
        max-width: 90%;
        padding: 2em 0em 2em 5%;
    }
    
    div.case-menu-block{
        max-width: 90%;
        padding: 2em 0em 2em 5%;
    }

    div.general-block{
        display: block;
        max-width: 90%;
        padding: 2em 0em 2em 5%;
    }

    div.point3_block1{
        display: block;
        text-align: center;
        max-width: 90%;
        padding: 2em 0em 2em 5%;
    }

    div.point3_block2{
        display: block;
        text-align: center;
        max-width: 90%;
        padding: 2em 0em 2em 5%;

    }

    div.point3_block3{
        display: block;
        text-align: center;
        max-width: 90%;
        padding: 2em 0em 2em 5%;

    }

    div.case{
        max-width: 90%;
        padding: 2em 0em 2em 5%;

    }

    div.solution123-block{
        max-width: 90%;
        padding: 2em 0em 2em 5%;
        font-family: source-han-sans-japanese,sans-serif;
        font-weight: 500;
        font-style: normal;

    }

    img.solution123b{
        width:5em;
        height: auto;
        float:left;
        margin: 0 0 2em 0;
        padding: 1em 2em 1.5em 0em;
	}

    div.client-provide_block{
        max-width: 90%;
        padding: 2em 0em 0em 5%;
        font-family: source-han-sans-japanese,sans-serif;
        font-weight: 500;
        font-style: normal;

    }
    
    div.presentation_block{
        max-width: 90%;
        padding: 2em 0em 2em 5%;
        font-family: source-han-sans-japanese,sans-serif;
        font-weight: 500;
        font-style: normal;

    }

    div.merit-block{
        max-width: 90%;
        margin: 2em 0em 0em 5%;
    }
    
    div.merit-block2{
        max-width: 92%;
        padding: 0em 0em 0em 5%;

    }
    p.merit2{
        float: none;
        text-align: left;
        padding: 0.5em 0em 1em 0;
        margin: 0;
    }

    p.merit3{
        float: none;
        text-align: left;
        padding: 0.5em 0em 1em 5%;
        margin: 0;
    }

    p.merit4{
        float: none;
        text-align: left;
        padding: 0.5em 0em 1em 5%;
        margin: 0;
    }

    p.merit-text2{
        margin-block-start: 0em;
        margin-block-end: 0em;
        padding: 0em 5% 0em 5%;
        margin: 0;
        text-align: left;
    }

    div.merit2line-left{
        width: 80%;
        padding: 1.5% 10% 1.5% 10%;
        float: none;
        clear: both;
    }

    div.merit2line-left2{
        width: 80%;
        padding: 5% 8% 1.5% 8%;
        float: none;
        clear: both;
        margin-top: auto;
        margin-bottom: auto;
    }

    div.merit2line-left3{
        display: none;
    }

    div.merit2line-right{
        width: 80%;
        float: none;
        padding: 1.5% 10% 1.5% 10%;

    }
    
    div.merit2line-wide{
        width: 80%;
        float: none;
        padding: 1.5% 10% 1.5% 10%;
    }

    div.datatype_block{
        max-width: 90%;
        margin: 2em 0em 2em 5%;

    }

    div.merit2line-left4{
        width: 80%;
        padding: 1.5% 10% 1.5% 10%;
        float: none;
        clear: both;
    }

    div.merit2line-right4{
        width: 80%;
        float: none;
        padding: 1.5% 10% 1.5% 10%;

    }
    
    H4.brushup{
        margin: 5% 5% 0% 5%;
    }
    
    p.brushup {
        margin: 2% 5% 0% 5%;
    }
    
    hr.dash {
        margin: 2em 0 0 2em;    
    }
    
    img.presentation_seet_right{
        width: 90%;
        float: none;
        padding: 0% 5% 5% 5%;

    }

    img.presentation_seet_left{
        width: 90%;
        float: none;
        padding: 0% 5% 5% 5%;

    }
    
    div.presentation-seet3{
        width: 80%;
    }
    
    p.mail{
        font-size: 14pt;
    }
    
    footer{
        max-width: 95%;
        padding: 0% 2.5% 5% 2.5%;
    }
    p.footer-mail-text{
        font-size: 10pt;
    }
    p.footer-mail{
        font-size: 14pt;
    }
    img.footer-mail-icon{
        margin: 0.7em 1em 0.5em 0.5em;
    }
    
    p.footer-holder{
        font-size: 9pt;
    }
    
    div.sample-block{
        max-width: 90%;
        padding: 2em 0em 0em 5%;

    }
    
    div.flow-block{
        max-width: 90%;
        padding: 2em 0em 0em 5%;
    }
    
    hr.footer-line{
        width: 100%;    
        margin: 0 0 2em 0;
    }
    
    hr.rule{
        width: 90%;
        margin: 3em 0 4em 5%
    }
    
    div.rule-block{
        max-width: 90%;
        margin: 2em 0em 0em 5%;
    }

    div.gallery-block{
        max-width: 90%;
        padding: 0em 0em 0em 5%;
    }
    
    div.gallery2line-left{
        width: 96%;
        padding: 2% 2% 2% 2%;
        float: none;
        clear: both;
        margin-top: auto;
        margin-bottom: auto;
    }

    div.gallery2line-right{
        width: 96%;
        padding: 2% 2% 2% 2%;
        float: none;
        clear: both;
        margin-top: auto;
        margin-bottom: auto;
    }
    
    div.menu-block{
        display: none;
    }
    
    div.mini_logo{
        display: none;
    }
    
    img.mini_logo2{
        display: none;
    }


}

/*画面幅が601-770pxまでの時*/
@media screen and (min-width: 601px) and (max-width:770px){
    H1{
        margin-block-start:0em;
        margin-block-end:0em;
        font-family: source-han-sans-japanese,sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size: 16pt;
    }

    img.title{
        width:50%;
        height: auto;
    }
    
    p.merit2{
        float: none;
        text-align: left;
        margin: 0.5em 0em 0.5em 3%;
    }

    p.merit3{
        float: none;
        text-align: left;
        margin: 0.5em 0em 0.5em 3%;
    }

    p.merit-text2{
        margin-block-start: 0em;
        margin-block-end: 0em;
        padding: 0em 3% 0em 3%;
        text-align: left;

    }

    div.merit2line-left4{
        width: 80%;
        padding: 1.5% 10% 1.5% 10%;
        float: none;
        clear: both;
    }

    div.merit2line-right4{
        width: 80%;
        float: none;
        padding: 1.5% 10% 1.5% 10%;

    }


}

/*画面幅が600-810pxまでの時*/
@media screen and (min-width: 600px) and (max-width:810px){
    p.mail{
        font-size: 14pt;
    }
    
    div.menu li{
        font-size: 10pt;    
    }
    
    img.mini_logo{
        height: 1em;
    }

    img.mini_logo2{
        height: 1em;
    }

}
/*画面幅が600-810pxまでの時*/
@media screen and (min-width: 600px) and (max-width:670px){
    div.menu li{
        font-size: 9pt;    
    }

    img.mini_logo{
        height: 0.8em;
    }

}
/*画面幅が771-949pxまでの時*/
@media screen and (min-width: 771px) and (max-width:949px){
    div.catch{
        text-align: right;
    }
    
    img.title{
        width:50%;
        height: auto;
        padding: 1em 0em 0.5em 1em;
    }

    p.merit2{
        margin: 1em 0.5em 3em 3%;
    }

    p.merit4{
        float: none;
        text-align: left;
        margin: 0.5em 0em 0.5em 3%;
    }

}
/*画面幅が950px以上の時*/
@media screen and (min-width:950px){
    H1.left{
        clear: none;
        float: left;
    }

    
    img.title{
        width:40%;
        height: auto;
    }

    div.point3_block{
        max-width: 60%;
        padding: 2em 0em 2em 20%;

    }
    
    
    div.point3_block1{
        display: block;
        text-align: left;
        max-width: 30%;
        padding: 2em 5% 2em 0;
        margin: 0 0 0 0 ;
        float: left;

    }

    div.point3_block2{
        display: block;
        text-align: left;
        max-width: 30%;
        padding: 2em 5% 2em 0;
        float: left;

    }

    div.point3_block3{
        display: block;
        text-align: left;
        max-width: 30%;
        padding: 2em 0 0em 0em;
        float: left;

    }
    

}
/*画面幅が1017px以上の時*/
@media screen and (min-width:1017px){
    p.merit4{
        margin: 0.5em 0.5em 4em 3%;
    }

}

/*画面幅が1050px以上の時*/
@media screen and (min-width:1050px){
    H3.left{
        clear: none;
        float: left;
    }
    p.merit4{
        margin: 0.5em 0.5em 2.8em 3%;
    }

}
/*画面幅が1229px以上の時*/
@media screen and (min-width:1229px){
    p.merit4{
        margin: 0.5em 0.5em 1.5em 3%;
    }

}

/*画面幅が1350px以上の時*/
@media screen and (min-width:1350px){
    p.h_menu{
        width: 1200px;    
        margin: 0 auto 0 auto;
    }
    
    
    div.menu{
        width: 1200px;
        margin: 0 auto 0 auto;
    }
    
    div.menu-block{
        width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
    
    div.block{
        width: 1200px;
        margin: 0 auto 0 auto;
    }
    
    
    div.catch{
        text-align: right;
    }
    
    H1.left{
        display: none;
    }

    H1.sec{
        display: none;
    }

    H1.third{
        display: block;

    }
    
    div.title-block{
        width: 100%;
        margin: 0 auto 0 auto;
    }

    
}


/*吹き出し--------------------------------------------------------------------------------*/
div.balloon2-top {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 15px 0 0 0;
    padding: 0.5em;
    min-width: 120px;
    max-width: 100%;
    color: #fff;
    background: #9e71af;
    border: solid 3px #9e71af;
    box-sizing: border-box;
    font-weight: 500;

}

div.balloon2-top:before {
    content: "";
    position: absolute;
    top: -24px;
    left: 25%;
    margin-left: -15px;
    border: 12px solid transparent;
    border-bottom: 12px solid #9e71af;
    z-index: 2;
}

div.balloon2-top:after {
    content: "";
    position: absolute;
    top: -30px;
    left: 25%;
    margin-left: -17px;
    border: 14px solid transparent;
    border-bottom: 14px solid #9e71af;
    z-index: 1;
}

div.balloon2-top p {
    margin: 0;
    padding: 0;
}