@charset "utf-8";

html {
	color:#000;
	background:#FFF;
	overflow-y: scroll;
}

html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed,
figure,figcaption,footer,header,hgroup,
menu,nav,output,ruby,section,summary,
time,mark,audio,video {
	margin: 0;
	padding: 0;
	border: 0;
	font-style:normal;
	font-weight: normal;
	font-size: 100%;
	vertical-align: baseline;
	word-wrap:break-word;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
	display: block;
}

blockquote,q {
	quotes: none;
}

blockquote:before,blockquote:after,
q:before,q:after {
	content: '';
	content: none;
}

input,textarea {
	margin: 0;
	padding: 0;
}

ol,ul{
	list-style:none;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}

ol,ul {
	list-style:none;
}

caption,th {
	text-align:left;
}

abbr,acronym {
	border:0;
	font-variant:normal;
}

input,textarea,select {
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;
	*font-size:100%;
}

legend {
	color:#000;
}

a:focus {
	outline:none;
}
a:hover {
	opacity:0.7;
}

/**
 *
 * 
 *
 */


#pageTop {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	overflow: hidden;
}
body{
font-family: "sans-serif","メイリオ", "Meiryo","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",  "verdana", sans-serif;
}

img{
	width: 100%;
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }

@media screen and (max-width: 599px) {
.pc { display: none !important; }
.sp { display: block !important; }
}

.content{
	max-width:950px;
	margin:auto;
}
/* TOP */
.top_campaign{
	background: #004da5;
}
.logoarea {
    padding: 20px;
}
.campaign_top {
    background: url(../img/top_back.png);
    background-size: cover;
    padding: 30px 0;
    background-position: top center;
}

/* section */
.section01 {
    background: #e0effc;
    padding: 40px 0;
    position: relative;
    z-index: 20;
}
.yajirusi {
    width: 35%;
    margin: -5px auto;
    position: relative;
    z-index: 20;
}
.webcam_midasi{
	padding: 25px 0 5px;
}
.cp_txt01{
	text-align: center;
    font-size: 1.4em;
    font-weight: bold;
}
.section03,.section04{
	margin: 40px 0;
}
.sec_ttl{
	background: #004da5;
    color: #fff;
    text-align: center;
    font-weight: bold;
    font-size: 2em;
    padding: 10px 20px;
    margin-bottom: 40px;
}
.cp_txt02{
	font-size: 2em;
    text-align: center;
    font-weight: bold;
    line-height: 1.4;
}
.simg01{
	padding: 50px 0;
}
.cp_txt03{
	font-size: 1.6em;
    text-align: center;
    line-height: 1.4;
}
.cp_kinds{
	border: solid;
    border-radius: 20px;
    padding: 30px;
    margin-top: 40px;
}
.flow_txt{
	background: #e0effc;
    display: inline-block;
    text-align: center;
    font-weight: bold;
    font-size: 1.4em;
    padding: 5px 10px;
}
.flow_ttl{
	text-align: center;
    margin: 20px auto 10px;
}
.cp_txt04{
	text-align: center;
    font-size: 1.4em;
    line-height: 1.4;
}
.demo_link{
	width: 60%;
	margin:30px auto 10px;
	background: #f20606;
	padding: 10px 20px;
    border-radius: 20px;
	text-align: center;
}
.demo_link a{
    font-size: 1.8em;
    font-weight: bold;
    color:#fff;
    text-decoration: none;
}
.cp_txt05{
	text-align: center;
    font-size: 1.6em;
    font-weight: bold;
    padding: 20px 0;
}
.f02{
	margin-top: 50px;
}
.yajirusi02 {
    width: 20%;
    margin: -20px auto 0;
    position: relative;
    z-index: 20;
}
.cp_price{
	width: 90%;
    margin: -20px auto 0;
}
.cp_price_txt{
	font-weight: bold;
    font-size: 1.6em;
    padding: 10px 0;
}
.refer_price{
	background: #eee;
    padding: 30px;
	margin-bottom: 25px;
}
.refer_price_txt{
	text-align: center;
    font-weight: bold;
    font-size: 1.6em;
    border-bottom: solid;
    padding-bottom: 20px;
}
.refer_price01,.refer_price02{
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 20px;
}
.price01{
	font-size: 3em;
    font-weight: bold;
	 margin-right: 25px;
}
.price02{
	font-size: 4em;
    font-weight: bold;
	 margin-left: 25px;
	 color:#f00;
}
.lite_area{
	border: solid;
    border-radius: 20px;
    padding: 30px;
}
.lite_price_area{
	display: flex;
	justify-content: center;
}
.lite_price_txtarea{
	margin-right: 20px;
}
.lite_price_txt01{
	font-size: 1.6em;
    font-weight: bold;
}
.lite_price_txt02{
	background: #004da5;
    color: #ff0;
    font-weight: bold;
    font-size: 1.6em;
    padding: 5px 20px;
}
.price_precautions{
	text-align: center;
    font-size: 1.4em;
    font-weight: bold;
    color: #f00;
    padding-top: 10px;
}
.section05{
	background: #004da5;
    color: #fff;
    padding: 50px 0;
}
.other_ttl{
	text-align: center;
    font-weight: bold;
    font-size: 1.6em;
    border-bottom: solid 6px #ff0;
    padding-bottom: 10px;
}
.other_area{
	display: flex;
    padding: 30px 0;
	justify-content: space-between;
}
.other_item{
	width: 24%;
}
.webcam_lite{
	border: solid 2px;
    border-radius: 20px;
    padding: 30px;
}
.lite_txt{
	font-size: 1.6em;
    font-weight: bold;
    text-align: center;
}
.lite_price_area02 {
    display: flex;
    justify-content: center;
	padding: 25px 0;
	align-items: flex-end;
}
.lite_logo{
	width: 50%;
    margin-right: 25px;
}
.lite_price{
	font-size: 2.4em;
    font-weight: bold;
    color: #ff0;
}
.lite_txt02{
	text-align: center;
    font-size: 1.2em;
}
.faq{
	padding: 70px 0;
}
.faq_ttlarea{
	text-align: center;
}
.faq_ttl{
	display: inline-block;
    color: #004da5;
    font-weight: bold;
    font-size: 2.6em;
    border-bottom: solid 5px;
}
.qaContainer {
    padding-top: 50px;
}
.qarea {
    border-bottom: solid 2px #0078d1;
    display: flex;
    align-items: baseline;
}
.qt {
    font-size: 40px;
    font-weight: bold;
    color: #0078d1;
    margin-right: 20px;
}
.qtxt {
    font-size: 1.4em;
    letter-spacing: 1px;
    font-weight: bold;
}
.aarea {
    display: flex;
    align-items: baseline;
    padding-top: 10px;
}
.at {
    font-size: 40px;
    font-weight: bold;
    color: #ff0000;
    margin-right: 20px;
}
.atxt {
    font-size: 1.4em;
    letter-spacing: 1px;
    font-weight: bold;
}
.safety{
	background: #004da5;
    padding: 50px 0;
}
.safety_ttl{
	text-align: center;
    font-weight: bold;
    font-size: 1.6em;
    border-bottom: solid 6px #ff0;
    padding-bottom: 10px;
    color:#fff;
}
.safety_area{
	background: #fff;
    margin: 30px 0;
	padding: 20px 30px 5px;
}
.safety01,.safety02,.safety03{
	display: flex;
	align-items: center;
}
.safe_icon{
    margin-right: 30px;
}
.safe_midasi{
	font-weight: bold;
    font-size: 1.4em;
    padding-bottom: 10px;
}
.safe_txt{
	font-size: 1.2em;
}
.safety01,.safety02{
	border-bottom: solid #004da5;
    padding-bottom: 20px;
}
.safety02,.safety03{
	padding-top: 20px;
}
.safe_txtarea{
	width: 100%;
}
.demo_txt{
	text-align: center;
    font-size: 1.8em;
    font-weight: bold;
    margin-top: -15px;
}
.txt_red{
	text-align: right;
    padding-top: 15px;
}
.webcam_jisseki{
	width: 80%;
    margin: 30px auto 0;
}

/* 問い合わせボタン */
.cp_contact{
	background: #e0effc;
	padding: 50px 0;
}
.cp_contacttxt{
	width: 70%;
    margin: auto;
}
.btn_area{
	width: 60%;
    margin: 20px auto 0;
}

/* footer */
.logo {
    text-align: center;
    width: 30%;
    margin: 70px auto 0px;
}
.url, .link {
    text-align: center;
	font-size: 1.4em;
}
.url a {
    font-size: 1.4em;
    font-weight: bold;
    text-decoration: none;
    color: #004b9b;
}
.link {
    margin-top: 10px;
}
#footer {
    background: #004b9b;
}
.copy {
    color: #fff;
    text-align: center;
    padding: 15px;
	font-size: 1.2em;
}

@media screen and (max-width: 950px) {
.content{
	padding: 0 20px;
}
}

@media screen and (max-width: 800px) {
.logoarea {
    padding: 15px 30px 10px;
}
.cp_txt01{
	font-size: 1.2em;
}
.sec_ttl{
	font-size: 1.6em;
	padding: 5px 20px;
	margin-bottom: 30px;
}
.cp_txt02 {
	font-size: 1.6em;
}
.simg01 {
    padding: 30px 0;
}
.cp_txt03{
	font-size: 1.4em;
}
.cp_txt04{
	font-size: 1.2em;
}
.demo_link{
	width: 65%;
}
.demo_link a{
	font-size: 1.6em;
}
.cp_txt05{
	font-size: 1.2em;
}
.flow_txt{
	font-size: 1.2em;
}
.yajirusi02{
	width: 30%;
    margin: -35px auto 0;
}
.cp_price {
    width: 85%;
    margin: -30px auto 0;
}
.cp_price_txt{
	font-size: 1.2em;
}
.refer_price {
	padding: 20px;
	margin-bottom: 20px;
}
.refer_price_txt{
	font-size: 1.4em;
}
.price01 {
    font-size: 2.5em;
}
.yajirusi03{
	width: 8%;
}
.price02 {
    font-size: 3.6em;
}
.lite_price_area {
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.lite_price_txt02 {
	margin-bottom: 15px;
}
.btn_area {
    margin: 5px auto 0;
}
.cp_contact{
	padding: 30px 0;
}
.other_ttl{
	font-size: 1.2em;
}
.lite_txt {
	font-size: 1.4em;
}
.lite_price_area02{
	align-items: center;
	padding: 15px 0;
}
.lite_txt02 {
	font-size: 1em;
}
.faq_ttl {
	font-size: 1.8em;
}
.qaContainer {
    padding-top: 30px;
}
.qtxt,.atxt{
	font-size: 1.2em;
}
.aarea {
	padding-top: 5px;
}
.demo_txt{
	font-size: 1.4em;
	margin-bottom: -5px;
    margin-top: -5px;
}
.txt_red{
	font-size: 1.2em;
}
}

@media screen and (max-width: 599px) {
    .logoarea {
        padding: 10px 10px 5px;
    }
    .campaign_top {
    	padding: 10px 0;
    }
    .section01{
    	padding: 15px 0;
    }
    .yajirusi {
    	width: 50%;
   	}
   	.webcam_midasi {
    	padding: 15px 0 5px;
}
    .cp_txt01 {
        font-size: 1em;
    }
    .sec_ttl {
        font-size: 1.2em;
        padding: 5px;
        margin-bottom: 20px;
    }
    .section03, .section04 {
    margin: 30px 0;
}
    .cp_txt02 {
        font-size: 1em;
    }
    .cp_txt03 {
        font-size: 1em;
    }
        .cp_contact {
        padding: 20px 0;
    }
    .cp_contacttxt {
   		width: 90%;
    }
    .btn_area {
    	width: 80%;
    }
    .cp_kinds {
    	border: solid 1px;
    	padding: 15px;
    	margin-top: 25px;
}
.flow_ttl{
	margin: 10px auto 10px;
}
    .cp_txt04 {
        font-size: 1em;
    }
    .flow_txt {
        font-size: .9em;
    }
        .demo_link {
        width: 75%;
        border-radius: 10px;
		margin: 15px auto 10px;
    }
        .demo_link a {
        font-size: 1em;
    }
        .cp_txt05 {
        font-size: .9em;
    }
    .cp_txt05{
    	font-size: .9em;
		padding: 5px 0 10px;
}
.f02{
	    margin-top: 30px;
	    }
	        .yajirusi02 {
        width: 35%;
        margin: -20px auto 0;
    }
        .cp_price {
        width: 95%;
}
    .cp_price_txt {
        font-size: 1em;
    }
        .refer_price {
        padding: 15px;
        }
        .refer_price_txt {
        font-size: .8em;
            border-bottom: solid 1px;
    padding-bottom: 10px;
        }
        .price01{
        	margin-right: 15px;
        	        font-size: 1.6em;
       }
       .price02 {
			font-size: 2.4em;
			    margin-left: 10px;
		}
		.lite_price_txt01 {
   		 font-size: 1.2em;
    }
    .lite_area{
    	    border-radius: 10px;
    	padding: 20px;
    }
    .lite_price_txtarea {
    margin-right: 0;
}
    .lite_price_txt02{
    	font-size: 1.2em;
    	padding: 5px 10px;
    }
    .price_precautions {
    	font-size: 1em;
		padding-top: 0px;
	}
	.other_area{
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.other_item {
    width: 48%;
}
.webcam_lite{
	    padding: 20px;
}
.lite_txt {
        font-size: 1.2em;
    }
    .lite_price_area02{
    	    flex-direction: column;
}
.lite_logo {
    width: 80%;
    margin-right: 0;
}
.lite_price {
    font-size: 2em;
    }
        .lite_txt02 {
        font-size: .9em;
    }
    .faq {
    padding: 50px 0;
}
    .faq_ttl {
        font-size: 1.4em;
		border-bottom: solid 3px;
    }
    .qt,.at {
    font-size: 30px;
    margin-right: 15px;
    }
        .qtxt, .atxt {
        font-size: .8em;
    }
    .other_ttl{
    	 border-bottom: solid 3px #ff0;
    }
    .safety{
    	padding: 25px 0;
    }
    .safety_ttl{
    	    font-size: 1.2em;
    	    border-bottom: solid 3px #ff0;
    }
    .safety_area {
    	padding: 20px 20px;
    }
    .safety01, .safety02, .safety03{
    	    flex-direction: column;
    }
    .safe_icon {
    margin-right: 0;
    width: 35%;
}
	.safe_midasi {
		font-size: 1.1em;
	}
	.safe_txt {
    font-size: .9em;
}
.safety01, .safety02 {
    border-bottom: solid 1px #004da5;
    padding-bottom: 15px;
}
.safety02, .safety03 {
    padding-top: 10px;
}
    .logo {
        width: 70%;
    }
    .url a {
    font-size: 20px;
}
.link a{
	font-size: .7em;
}
.copy {
	    font-size: .7em;
}
    .demo_txt {
        font-size: 1em;
     }
         .txt_red {
        font-size: .8em;
    }
    .webcam_jisseki{
	width: 95%;
    margin: 20px auto 0;
}
}
@media screen and (max-width: 360px) {
    .price01 {
    	font-size: 1.4em;
    }
    	.price02 {
        font-size: 2em;
    }
  }