@charset "UTF-8";


html { font-size: 14px;} 

a {
	color: #01b1cd;
	text-decoration: none;
	cursor: pointer;
	webkit-transition: 0.2s ease-in-out;  
    -moz-transition: 0.2s ease-in-out;  
    -o-transition: 0.2s ease-in-out;  
    transition: 0.2s ease-in-out;  
}
a:link, header a:visited, header a:active {
	text-decoration:none;
	}
a:hover{
	opacity: 0.7;
	-moz-opacity:0.7;
    filter: alpha(opacity=70);
}

body {
	color: #666;
	font-family: Verdana,Arial,"メイリオ",Meiryo,"ヒラギノ角ゴPro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
	line-height: 1.9;
	margin: 0;
	overflow: hidden;
	background-color: #efefef;
}
header {
	background-image: url(../img/bg-header.gif);
	background-repeat: repeat;
}
#header-box {
	width: 960px;
	background-image: url(../img/bg-main2021.png);
	background-repeat: no-repeat;
	height: 635px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
#left {
	float: left;
	width: 500px;
}
div.blue {
	line-height: 33px;
	color: #FFFFFF;
	background-color: #00A7EB;
}
h1 {
	width: 960px;
	margin: 0 auto;
	font-size: 13px;
}
.subtitle {
	padding-top: 50px;
	margin-bottom: 15px;
}
.maintitle {
	margin-bottom: 35px;
}
.maincopy {
	margin-bottom: 85px;
}
.subcopy {
	padding-left: 240px;
}
#right {
	float: right;
	width: 450px;
	text-align: right;
}
.mark {
	padding-top: 15px;
	margin-bottom: 120px;
}
.cp {
	padding-right: 125px;
}
.purchase {
	display: none;
	background-color: #00A7EB;
	padding-top: 30px;
	padding-bottom: 30px;
	position: absolute;
    text-align: center;
    width: 100%;
}
.purchase.fixed {
	position: fixed;
	top: 0;
	padding:20px 0;
}
.purchase-btm {
	background-color: #00A7EB;
	padding-top: 30px;
	padding-bottom: 30px;
    text-align: center;
    width: 100%;
}
.purchase h2, .purchase-btm h2 {
	margin-bottom: 25px;
}
.p-box {
	margin: 0 auto;
	width: 960px;
	overflow: hidden;
}
.p-box2 {
	margin: 0 auto;
	overflow: hidden;
}
.buy-padlocker {
	background-color: #FFFFFF;
	float: left;
	width: 460px;
	overflow: hidden;
}
.p-box h3 {
	padding-top:20px;
	margin-bottom: 25px;
}
.p-box2 h3 {
	padding-top:20px;
	margin-bottom: 25px;
}
.buy-cartridge {
	background-color: #FFFFFF;
	float: right;
	width: 460px;
	overflow: hidden;
}
.wrapper {
	margin: 0 auto;
	width: 1000px;
	background-color: #FFF;
	overflow: hidden;
}
.contents {
	margin: 0 auto;
	width: 960px;
	/*padding-top: 165px;*/
	overflow: hidden;
}
.nayami {
	margin-bottom: 40px;
}
.osusume {
	text-align: center;
}
.enq {
	text-align: right;
	margin-bottom: 5em;
}
.enq p {
	font-size: 12px;
	line-height: 3;
	color: #999;
}
.reason {
	margin-bottom: 5em;
}
.reason h2 {
	text-align: center;
	margin-bottom: 3em;
}
.reason ul {
	margin-bottom: 1em;
}
.reason li {
	display: inline;
	margin-right: 13px;
}
.reason li.end {
	margin-right: 0;
}
.reason .da {
	text-align: center;
}
.contents img{
  vertical-align:bottom;
}
#point1 {
	background-image: url(../img/bg_point1_2019.gif);
	height: 437px;
	width: 960px;
	margin-bottom: 25px;
}
.reason h3 {
	padding-top: 53px;
	margin-left: 190px;
	margin-bottom: 75px;
}
.reason p.mcp {
	margin-left: 35px;
	margin-bottom: 25px;
}
.reason p.point1 {
	margin-left: 35px;
	width: 500px;
}
#point2 {
	background-image: url(../img/bg-point2.gif);
	height: 407px;
	width: 960px;
	margin-bottom: 25px;
}
.reason p.point2 {
	margin-left: 35px;
	width: 470px;
}
.youtube {
	float: right;
	width: 400px;
	padding-top: 140px;
	padding-right: 25px;
}
#point3 {
	background-image: url(../img/bg-point3.gif);
	float: left;
	height: 463px;
	width: 471px;
	margin-bottom: 50px;
}
.reason h3.ttls {
	padding-top: 55px;
	margin-left: 175px;
	margin-bottom: 75px;
}
.reason p.point3 {
	margin-left: 35px;
	width: 400px;
}
#point4 {
	background-image: url(../img/bg-point4.gif);
	float: right;
	height: 463px;
	width: 471px;
}
.reason p.point4 {
	margin-left: 35px;
	width: 250px;
}
.osusume {
	margin-bottom: 40px;
	overflow: hidden;
	clear: both;
}
.osusume-box {
	border-right: 3px solid #B5B6B6;
	border-bottom: 3px solid #B5B6B6;
	border-left: 3px solid #B5B6B6;
	text-align: left;
}
#case1 {
	background-image: url(../img/bg-case1.jpg);
	margin: 0 auto 25px;
	height: 219px;
	width: 899px;
}
#case2 {
	background-image: url(../img/bg-case2.jpg);
	margin: 0 auto 25px;
	height: 219px;
	width: 899px;
}
#case3 {
	background-image: url(../img/bg-case3.jpg);
	margin: 0 auto 25px;
	height: 219px;
	width: 899px;
}
.osusume h3 {
	padding-top: 75px;
	padding-left: 25px;
	margin-bottom: 10px;
}
.osusume p {
	padding-left: 25px;
	font-size: 18px;
	line-height: 36px;
}
#voice {
	width: 960px;
	margin: 0 auto 50px;
}
#voice h2 {
	text-align: center;
	margin-bottom: 25px;
	padding-top: 15px;
}
#voice article {
	padding: 20px;
	margin-bottom: 20px;
	overflow: hidden;
	background-color: #f0f9fe;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border: 1px dashed #333;
}
#voice article img {
	float: left;
	padding-right: 20px;
}
#voice article p {
font-size: 1.05em;
    line-height: 1.75;
}
#howto {
	background-image: url(../img/bg-houhou.png);
	background-repeat: no-repeat;
	text-align: center;
	height: 449px;
	width: 960px;
	margin: 0 auto 50px;
}
#howto h2 {
	padding-top: 8px;
	margin-bottom: 30px;
}
.step1 {
	float: left;
	width: 475px;
	overflow: hidden;
	text-align: left;
}
.step1 h3 {
	margin-left: 25px;
	margin-bottom: 50px;
}
.step1 p.icon {
	margin-left: 35px;
	margin-bottom: 50px;
}

.step2 {
	float: right;
	width: 475px;
	overflow: hidden;
	text-align: left;
}
.step2 h3 {
	margin-left: 20px;
	margin-bottom: 50px;
}
.step2 p.icon {
	margin-left: 10px;
	margin-bottom: 25px;
}
.step2 p.notice {
}

/*pagetop*/
#page-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	font-size: 10px;
	z-index: 3;
}
#page-top a {
	background: #01b1cd;
	text-decoration: none;
	color: #fff;
	width: 80px;
	padding: 25px 0;
	text-align: center;
	display: block;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
#page-top a:hover {
	text-decoration: none;
	opacity: 0.7;
	-moz-opacity:0.7;
    filter: alpha(opacity=70);
}

footer {
	background-color: #fff;
    font-size: 12px;
    padding: 15px 0;
    text-align: center;
}
footer #info {
	margin-bottom: 10px;
}
footer #copyright {
	border-top-width: 5px;
	border-top-style: solid;
	border-top-color: #dddddd;
	padding-top: 10px;
	margin-bottom: 10px;
}
#news {
	background-image: url(../img/bg-news.gif);
	background-repeat: repeat;
	margin-bottom: 50px;
	overflow: hidden;
	padding: 10px 10px 10px 0;
}
#news article {
	background-color: #FFF;
	float: right;
	width: 730px;
	font-size: 13px;
	padding: 10px;
}
#info-pl {
	text-align: left;
	margin-left: 100px;
	overflow: hidden;
	margin-bottom: 12px;
}
#info-pl img {
	float: left;
	margin-right: 35px;
}
#info-pl p.pltxt {
	padding-top: 35px;
}

#info-cart {
	text-align: left;
	margin-left: 90px;
	overflow: hidden;
}
#info-cart img {
	float: left;
	margin-right: 35px;
	padding-top: 25px;
}
#info-cart p.carttxt {
	margin-bottom: 25px;
}
p.cartexp {
	margin: 0 auto 29px;
	padding: 0 25px;
	text-align: left;
	font-size: 12px;
}
.buybox {
	display: none;
	margin-bottom: 20px;
}
.buybox li {
	margin-bottom: 15px;
}
.buycart {padding-top: 10px;}

.none {float:none; text-align: center; max-width: 460px; width: 100%;}

#modal {
	border: 10px solid #00A7EB;
}
#fff {background-color: #fff;}

iframe {
    vertical-align: bottom;
}

#news h2 {
	padding: 8px 0 0;
	width: 200px;
	float: left;
	text-align: center;
}
.wrapper .shop {
	width: 910px;
	margin: 0px auto 30px;
	border-right-width: 5px;
	border-bottom-width: 5px;
	border-left-width: 5px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #ddd;
	border-bottom-color: #ddd;
	border-left-color: #ddd;
	padding: 20px 20px 20px;
	line-height: 2em;
}
.wrapper .ttl {width:960px;
margin:40px auto 0;
}
.wrapper.shopper { margin: 30px auto;}