@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap');

/*header固定の際　アンカーリンクのずれ調整*/
#title,.cont{
  padding-top: 70px;
}
#about,#comparison,#howto,#case,#component,#lineup,#delivery{
	margin-top:-70px;
  padding-top:70px;}
	
body{
	color: #FFF;
	background: linear-gradient(-45deg, #0080cb, #011842);
	background-attachment: fixed;
	}
ul.dot{color:#444;}
#title h2{
	font-family: 'Sawarabi Mincho', sans-serif;
	font-weight:normal;
	font-size:2.2rem;
	}
h3{
	border-top:solid 2px #FF0;
	border-bottom:solid 2px #FF0;
	font-size:1.8rem;
	color:#FF0;
	margin:0 0 20px 0;
	padding:5px 0;
	text-align:center;
	}
.cont{
	max-width:850px;
	margin:0px auto 50px auto;
	}
/* ◆drawer-menu ***********/
.drawer-nav{
	background: rgba(255,255,255,1);
	}
.drawer-menu.list>li.d-title{
	border-bottom:1px dotted #ccc;
}
/* ◆header **********************/
#header,.drawer-menu.list>li.d-title{
	background:rgba(255,255,255,0.98);}

/* ◆main **********************/
main{
	padding:10px 4% 0 4%}
#title{
	text-align:center;}
#title span{
	margin:0;
	font-size:1.2rem;
	line-height:1.0;
	display:block;}
#title img{
	width:150px;
	margin:10px auto 30px auto;}
#title p{
	text-align:left;}

#comparison ul.h{
	display:flex;
	flex-wrap:wrap;
	border-top:solid 1px #FFF;
	border-left:solid 1px #FFF;
	margin:20px 0 0 0;
	width:100%;
	}
#comparison ul.h>li{
	width:28%;
}
#comparison ul.h>li.cate{
	width:44%;
	font-size:1.4rem;
	}
#comparison ul.h>li.jia{
	color:#FF0;
	font-weight:bold;
	}
#comparison ul.h dt,#comparison ul.h dd{
	display:flex;
	align-items: center;
	justify-content: center;
	border-bottom:solid 1px #FFF;
	border-right:solid 1px #FFF;
	height:50px;
	}
#comparison ul.h dt{
	font-size:1.2rem;
	}
#comparison ul.h>li.jia dt{
	font-size:1.4rem;
	}

.w{
	color:#012857;
	background-color:#FFF;
	padding:20px 25px;
	margin:20px 0 0 0;}
	
/* ◆howto **************/
#howto .w img{
	max-width:500px;
	margin:auto;}
#howto .w dl{
	margin-bottom:10px;
	font-weight:bold;}
#howto .w dt{
	display:inline-block;
	color:#FF0;
	padding:2px 20px;
	background-color:#012857;
	margin-bottom:10px;}
#howto .w dd{
	line-height:1.3;
}
#howto .w p{
	border:solid 2px #012857;
	padding:5px 10px;
	margin-top:20px;
	font-weight:bold;
	}
#howto .w p span{
	color:#C00;
	}
/* ◆case **************/
#case ul.img,#lineup ul.item{
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top:20px;
}
#case ul.img li,#lineup ul.item>li{
	width:49%;
	margin-bottom:8px;
}
#case ul.img p,#lineup ul.item h4{
	text-align:center;
	background-color:#013365;
	font-size:1.4rem;
	padding:4px 0;
}

/* ◆lineup **************/
#lineup ul.item{
	background-color:#FFF;
	padding:20px 20px 25px 20px;
}
#lineup ul.item>li{
	width:85%;
	max-width:350px;
	margin:0 auto;
	color:#013365;
	text-align:center;
	margin-bottom:20px;
}
#lineup ul.item h4{
	margin:10px 0;
	font-size:1.6rem;
	color:#FFF;}
#lineup ul.item p{
	margin-bottom:10px;}
ul.price>li.discount:after,ul.price>li.normal:after,ul.price>li span.tax:after{
  display: inline;
  content: "(税抜)";
	font-size:1.0rem;}
	
ul.price>li.normal:before{
  display: inline;
  content: "通常価格";}
ul.price>li.normal{
	font-size:1.2rem;
	line-height:1.0;
	}
ul.price>li.discount{
	color:#F36;
	}
ul.price .money{
	font-size:2.0rem;
	font-weight:bold;}

ul.price>li.postage{
	border-top:1px dotted #aaa;
	border-bottom:1px dotted #aaa;
	padding:10px 0;
	margin:10px 20px 0 20px;
	}
ul.price>li.postage .cau{
	margin:0;}
/* ●footer **************/
footer{
	background-color:#101937;
	padding:40px 0 0 0;
	}
ul.order{
	}
ul.order>li.info div{
	display:inline-block;
	width:85%;
	max-width:500px;
	color:#FF0;
	font-size:1.7rem;
	font-weight:bold;
	margin:0 auto 20px auto;
	border: solid 0.5px #FF0;
	padding:8px 0;
	}
ul.order>li.btm a{
	display:inline-block;
	width:75%;
	border: solid 1px #fff;
	padding:12px 0;
	border-radius: 4px;
	margin-bottom:20px;
	color:#101937;
	background-color:#FFF;
	}
ul.order>li.tel{
	font-size:2.6rem;
	font-weight:bold;
	}
ul.order>li.tel a{
	color:#FFF;
	}
ul.order>li.tel:before{
  display: inline;
  content: "TEL. ";
	font-size:1.6rem;}
ul.order>li.time{
	font-size:1.2rem;}	
#copyright{
	color:rgba(255, 255, 255, 0.8);
	background-color:#101937;
	border-top: dotted 0.5px rgba(255, 255, 255, 0.3);
	margin:30px auto 0 auto;
	}

/* ●bottm menu **************/
#bottom-menu{
	position:fixed;
	transition: all 0.8s ease 0s;
	right:0;
	bottom:-200px;
	width:100%;
	max-width:200px;
	height:150px;
	}
#bottom-menu img.ad{
	position:absolute;
	right:0;
	bottom:0;
	height:auto;
	width:100%;
	z-index:15;
	max-width:300px;
	}
#bottom-menu img.back{
	position:absolute;
	right:0;
	bottom:0;
	height:auto;
	z-index:10;
	width:95%;
	max-width:320px;
	}
#bottom-menu.on{
	bottom:0;
	}
video{
	width:299px;
	height:222px;
	width:100%;
	height:auto;}

/*----------------------------*/
/* ●タブレット */
/*----------------------------*/
@media (min-width:600px) {
/* ◆case **************/
#case ul.img li{
	width:32%;
	margin-bottom:10px;
}
#lineup ul.item>li{
	width:46%;
	max-width:none;
}

#bottom-menu{
	max-width:250px;
	}
}