@charset "UTF-8";
/* CSS Document */
html, body, div, header, footer, section, article, nav, h1, h2, h3, h4, h5, h6, p, ul, ol, li {
	margin: 0;
	padding: 0;
	border: none;
	line-height: 1;
}

img {
	vertical-align: bottom;
	max-width:100%;
	height:auto;
}

li {
	list-style: none;
}

a:link, a:visited, a:active, a:hover {
	overflow: hidden;
	outline: none;
}

/**
 * micro clearfix 
**/
/* For modern browsers */
.cf:before, .cf:after {
	content: "";
	display: table;
}
.cf:after { clear: both; }
/* For IE 6/7 (trigger hasLayout) */
.cf { zoom: 1; }

.clear {
	clear:both;
}




body {
	background-color:#eee;
	color:#333;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:14px;
}

.icon {
	font-family: "foundation-icons";
	font-weight:normal !important;
	vertical-align:middle;
}

a {
	color:#333;
	text-decoration:underline;
}
a:hover {
	text-decoration:none;
}

table {
	width:100%;
}
.inner {
	max-width:900px;
	margin:0 auto;
}


select, input[type="text"], textarea {
	border:solid 1px #ddd;
	border-radius:0;
	background:none;
	background:#fff;
	-webkit-appearance:none;
	-moz-appearance:none;
	-ms-appearance:none;
}
select {
	background:#fff url(/assets/img/common/bg_select.png) no-repeat right center;
	background-size:22px 40px;
	padding:5px 35px 5px 5px;
}
input[type="text"] {
	padding:8px 5px;
}
input[type="submit"] {
	-webkit-appearance:none;
	-moz-appearance:none;
	-ms-appearance:none;
}
.btns {
	text-align:center;
}

.btn {
	position:relative;
	display:inline-block;
	background-color:#008CCE;
	border:solid 2px #008CCE;
	box-sizing:border-box;
	overflow:hidden;
	margin-bottom:10px;
}
.btn a, .btn input[type="submit"] {
	position:relative;
	display:block;
	width:100%;
	height:100%;
	border:none;
	font-weight:bold;
	background-color:transparent;
	color:#fff !important;
	text-decoration:none;
	font-size:20px;
	padding:20px 0;
}
.btn:hover a, .btn:hover input[type="submit"] {
	color:#008CCE !important;
}

.btn span {
	display:inline-block;
	background:url(/assets/img/common/icon_arrow_large.png) no-repeat right center;
	background-size:10px 16px;
	padding-right:20px; 
}
.btn:hover span {
	background:url(/assets/img/common/icon_arrow_large_on.png) no-repeat right center;
	background-size:10px 16px;
}

.btn::before {
	position:absolute;
	display:block;
	content:" ";
	background:#fff;
	top:0;
	left:0;
	width:0;
	height:100%;
	transition:all ease-out .2s;
}
.btn:hover::before {
	width:100%;
}

.mt0 { margin-top:0px !important; }
.mt5 { margin-top:5px !important; }
.mt10 { margin-top:10px !important; }
.mt15 { margin-top:15px !important; }
.mt20 { margin-top:20px !important; }
.mt25 { margin-top:25px !important; }
.mt30 { margin-top:30px !important; }
.mt35 { margin-top:35px !important; }
.mt40 { margin-top:40px !important; }
.mt50 { margin-top:50px !important; }
.mt60 { margin-top:60px !important; }
.mt70 { margin-top:70px !important; }
.mt80 { margin-top:80px !important; }

.mb0 { margin-bottom:0px !important; }
.mb5 { margin-bottom:5px !important; }
.mb10 { margin-bottom:10px !important; }
.mb15 { margin-bottom:15px !important; }
.mb20 { margin-bottom:20px !important; }
.mb25 { margin-bottom:25px !important; }
.mb30 { margin-bottom:30px !important; }
.mb35 { margin-bottom:35px !important; }
.mb40 { margin-bottom:40px !important; }
.mb50 { margin-bottom:50px !important; }
.mb60 { margin-bottom:60px !important; }
.mb70 { margin-bottom:70px !important; }
.mb80 { margin-bottom:80px !important; }

@media only screen and (max-width:920px) {
	.inner {
		width:100%;
		padding:0 10px;
		box-sizing:border-box;
	}
	.btn::before, .btn:hover::before {
		display:none;
	}
	.btn a {
		font-size:18px;
	}
	.btn:hover a, .btn:hover input[type="submit"] {
		color:#fff !important;
	}
	.btn span {
		background-size:7px 11px;
		padding-right:12px; 
	}
}

@media only screen and (max-width:740px) {
	.pc {
		display:none;
	}
}




/**
 * header
 */
header {
	background-color:#fff;
	border-bottom:#eee solid 1px;
}
#hlogo {
	float:left;
	text-align:center;
	padding:10px 0 10px 0;
}
#gnav {
	float:right;
}
#gnav li {
	position:relative;
	float:left;
	height:50px;
	border-left:#eee solid 1px;
}
#gnav li.act::after {
	display:block;
	content:" ";
	position:absolute;
	left:0;
	bottom:-8px;
	width:100%;
	height:8px;
}
#gnav #gnav0.act::after { background:url(/assets/img/common/icon_gnav_act0.png) no-repeat center top; }
#gnav #gnav1.act::after { background:url(/assets/img/common/icon_gnav_act1.png) no-repeat center top; }
#gnav #gnav2.act::after { background:url(/assets/img/common/icon_gnav_act2.png) no-repeat center top; }
#gnav #gnav3.act::after { background:url(/assets/img/common/icon_gnav_act3.png) no-repeat center top; }
#gnav #gnav4.act::after { background:url(/assets/img/common/icon_gnav_act4.png) no-repeat center top; }
#gnav #gnav5.act::after { background:url(/assets/img/common/icon_gnav_act5.png) no-repeat center top; }
#gnav #gnav6.act::after { background:url(/assets/img/common/icon_gnav_act6.png) no-repeat center top; }

#gnav li a {
	position:relative;
	display:block;
	width:160px;
	height:100%;
	box-sizing:border-box;
	padding:20px 0 0 0;
	font-weight:bold;
	text-decoration:none;
	text-align:center;
}
#gnav li a:hover, #gnav .act a {
	color:#fff;
}

#gnav #gnav5 a:hover, #gnav #gnav5.act a {
	color:#333;
}

#gnav li::before {
	position:absolute;
	display:block;
	content:" ";
	width:100%;
	height:0;
	transition:all ease-out .15s;
}
#gnav li:hover::before {
	height:100%;
}

#gnav .icon {
	display:none;
}

#gnav0.act, #gnav0::before { background-color:#e00100; }
#gnav1.act, #gnav1::before { background-color:#ffb812; }
#gnav2.act, #gnav2::before { background-color:#ff5200; }
#gnav3.act, #gnav3::before { background-color:#44d1ff; }
#gnav4.act, #gnav4::before { background-color:#68f0a2; }
#gnav5.act, #gnav5::before { background-color:#eff500; }
#gnav6.act, #gnav6::before { background-color:#008c17; }

#gnav_close, #menu, #menuclose {
	display:none;
}

@media only screen and (max-width:1060px) {
	#hlogo {
		float:none;
		padding:10px 0;
	}
	#gnav {
		float:none;
		border-top:#eee solid 1px; 
	}
	#gnav li {
		width:16.6%;
		box-sizing:border-box;
	}
	#gnav li a {
		width:100%;
	}
}
@media only screen and (max-width:740px) {
	header {
		border:none;
		height:45px;
		padding:0;
	}
	#hlogo {
		float:left;
		padding:10px;
	}
	#hlogo img {
		width:104px;
		height:auto;
	}
	
	#menu, #menuclose {
		float:right;
		display:block;
		text-align:center;
		font-size:34px;
		color:#123A78;
		padding-top:5px;
		height:45px;
		width:45px;
	}
	#menuclose {
		display:none;
		color:#fff;
		background-color:#123A78;
		margin:0;
		padding-top:12px;
		font-size:24px;
	}
	#menuclose.open {
		display:block;
	}
	#menu.open {
		display:none;
	}
	
	#gnav {
		display:none;
		position:absolute;
		width:100%;
		top:45px;
		background-color:#123A78;
		z-index:10000;
		border-top:none; 
	}
	#gnav.open {
		display:block;
	}
	#gnav li {
		position:relative;
		float:none;
		width:100%;
		border:none;
		border-bottom:solid 1px #000A3A;
	}
	#gnav li a {
		width:100%;
		color:#fff;
		text-align:left;
		padding-left:20px;
		background:url(/assets/img/common/icon_arrow.png) no-repeat right center;
		background-size:18px 8px;
	}
	#gnav #gnav5 a:hover, #gnav #gnav5.act a {
		color:#fff;
	}
	#gnav .icon {
		display:inline-block;
		font-size:18px;
		margin-right:6px;
		margin-top:-5px;
	}
	
	#gnav li.act::after, #gnav li::before { background:none; display:none; }
	#gnav0.act, #gnav1.act, #gnav2.act, #gnav3.act, #gnav4.act, #gnav5.act { background-color:transparent; }
	
	#gnav #gnav0 a {
		background-image:url(/assets/img/common/icon_moba7.png), url(/assets/img/common/icon_arrow.png);
		background-position:20px center, right center;
		background-position:no-repeat, no-repeat;
		background-size:70px 31px, 18px 8px;
		padding-left:100px;
	}
	#gnav #gnav1 a {
		background-image:url(/assets/img/common/icon_pstown.png), url(/assets/img/common/icon_arrow.png);
		background-position:20px center, right center;
		background-position:no-repeat, no-repeat;
		background-size:70px 31px, 18px 8px;
		padding-left:100px;
	}
	
	#gnav #gnav6 a {
		background-image:url(/assets/img/common/icon_moba7plus.png), url(/assets/img/common/icon_arrow.png);
		background-position:20px center, right center;
		background-position:no-repeat, no-repeat;
		background-size:70px 31px, 18px 8px;
		padding-left:100px;
	}
	
	#gnav #gnav_close {
		display:block;
	}
	#gnav #gnav_close a {
		background:#000A3A;
		text-align:center;
	}
}


/**
 * contents
 */
#contents {
	background-color:#fff;
}

#title {
	background-color:#f7f7f7;
	padding:30px 0 0 0;
	height:90px;
	box-sizing:border-box;
}
#title li {
	float:left;
	font-size:20px;
	line-height:1.5;
	font-weight:bold;
	background:url(/assets/img/common/icon_breadcrumb.png) no-repeat 25px center;
	background-size:10px 14px;
	padding-left:60px;
}
#title li:nth-of-type(1), #title li:nth-of-type(2) {
	background:none;
	padding-left:2px;
}
#title li:nth-of-type(1) {
	margin-top:-4px;
}
#title li .icon {
	font-size:28px;
	line-height:1.3;
	margin-right:8px;
}
#title li a {
	color:#008CCC;
	text-decoration:none;
}

#main {
	padding:25px 0 100px 0;
}
#main a {
	color:#008CCC;
}

@media only screen and (max-width:740px) {
	#title {
		background-color:#f7f7f7;
		padding:15px 0;
		height:auto;
	}
	#title li {
		font-size:16px;
		background:url(/assets/img/common/icon_breadcrumb.png) no-repeat 10px center;
		background-size:7px 11px;
		padding-left:27px;
	}
	#title li:nth-of-type(1), #title li:nth-of-type(2) {
		background:none;
		padding-left:0;
	}
	#title li:nth-of-type(1) {
		margin-top:-2px;
	}
	#title li .icon {
		font-size:20px;
		margin-right:6px;
	}
	#main {
		padding:10px 0 50px 0;
	}
}



/**
 * footer
 */
#pagetop {
	position:fixed;
	right:-50px;
	bottom:70px;
	width:50px;
	height:50px;
	background-color:#ccc;
	text-align:center;
	cursor:pointer;
	
	-webkit-transition:all .4s cubic-bezier(0,.85,.81,1);
	-moz-transition:all .4s cubic-bezier(0,.85,.81,1);
	-o-transition:all .4s cubic-bezier(0,.85,.81,1);
	transition:all .4s cubic-bezier(0,.85,.81,1);
}
#pagetop.on {
	right:20px;
}
#pagetop span {
	display:block;
	color:#fff;
	padding-top:10px;
	width:100%;
	font-size:30px;
}

 
footer {
	height:50px;
	bottom:0;
	left:0;
	background-color:#eee;
}

footer nav {
	float:left;
	margin-left:30px;
	padding-top:15px;
}
footer nav li {
	float:left;
	margin-right:20px;
}

.glogo {
	width: 73px;
	height: 24px;
	float: left;
	margin-left:30px;
	padding-top:13px;
}

#copy {
	float:right;
	margin-right:30px;
	font-size:12px;
	padding-top:20px;
}

@media only screen and (max-width:740px) {
	#pagetop {
		right:-50px;
		bottom:40px;
	}
	#pagetop.on {
		right:10px;
		bottom:40px;
	}
	footer {
		height:auto;
	}
	footer nav {
		margin-left:10px;
		padding:10px 0;
	}
	footer nav li {
		font-size:12px;
	}
	.glogo {
		margin-left:10px;
		padding:10px 0;
	}
	#copy {
		margin-right:10px;
		padding:10px 0;
	}
}


/**
 * 商品ページ
 * #productlist, #makerlist
 */
#productlist, #productlist2, #productlist3, #makerlist {
	margin-top:40px;
}

#productlist .btns, #productlist2 .btns, #productlist3 .btns, #makerlist .btns {
	display:none;
}
#productlist table, #productlist2 table, #productlist3 table {
	float:left;
	width:50%;
	border-top:solid 2px #eee;
	border-bottom:solid 2px #eee;
}
#productlist th, #productlist td, #productlist2 th, #productlist2 td, #productlist3 th, #productlist3 td {
	border-bottom:solid 1px #eee;
	padding:2px 5px;
	line-height:1.3;
}

#productlist table td, #productlist2 table td, #productlist3 table td {
	padding: 10px 5px;
}

#productlist th, #productlist2 th, #productlist3 th {
	vertical-align:central;
	padding:4px 5px;
}


#productlist tr:nth-child(1) th:nth-child(3), #productlist2 tr:nth-child(1) th:nth-child(3), #productlist3 tr:nth-child(1) th:nth-child(3) {
	width: 30px;
	padding-left: 0;
	padding-right: 0;
}

#productlist tr:nth-child(2) th, #productlist2 tr:nth-child(2) th, #productlist3 tr:nth-child(2) th {
	padding-left: 0;
	padding-right: 0; 
	font-size: 10px;
}

#productlist tr:nth-child(2) th:nth-child(1), #productlist2 tr:nth-child(2) th:nth-child(1), #productlist3 tr:nth-child(2) th:nth-child(1) {
	width: 50px;
	border-right:solid 1px #eee;
}

#productlist tr:nth-child(2) th:nth-child(2), #productlist2 tr:nth-child(2) th:nth-child(2), #productlist3 tr:nth-child(2) th:nth-child(2) {
	width: 70px;
	border-right:solid 1px #eee;
}


#productlist .lable0, #productlist .lable1, #productlist2 .lable0, #productlist2 .lable1, #productlist3 .lable0, #productlist3 .lable1 {
	padding:2px 0;
	width:80px;
}
#productlist table:nth-of-type(2) .lable0, #productlist table:nth-of-type(2) .lable1, #productlist2 table:nth-of-type(2) .lable0, #productlist2 table:nth-of-type(2) .lable1, #productlist3 table:nth-of-type(2) .lable0, #productlist3 table:nth-of-type(2) .lable1 {
	padding:2px 0 2px 2px;
}
#productlist .lable span, #productlist .lable0 span, #productlist .lable1 span, #productlist2 .lable span, #productlist2 .lable0 span, #productlist2 .lable1 span, #productlist3 .lable span, #productlist3 .lable0 span, #productlist3 .lable1 span {
	display:block;
	padding:8px;
	text-align:center;
	white-space:nowrap;
}
#productlist .lable0 span, #productlist2 .lable0 span, #productlist3 .lable0 span {
	background-color:#FFF0BC;
}
#productlist .lable1 span, #productlist2 .lable1 span, #productlist3 .lable1 span {
	background-color:#D6EAEA;
}
#productlist .center, #productlist2 .center, #productlist3 .center {
	text-align:center;
}

#makerlist ul {
	float:left;
	box-sizing:border-box;
	border-left:solid 4px #eee;
	width:25%;
}
#makerlist li {
	margin:10px;
	line-height:1.2;
}

.copy {
	margin-top:30px;
	text-align:center;
}

@media only screen and (max-width:740px) {
	#productlist, #productlist2, #productlist3, #makerlist {
		margin-top:20px;
	}
	
	
	#productlist .list, #productlist2 .list, #productlist3 .list, #makerlist .list {
		display:none;
	}
	
	#productlist .btns, #productlist2 .btns, #productlist3 .btns, #makerlist .btns, 
	#productlist.open .btn_close, #productlist2.open .btn_close, #productlist3.open .btn_close, #makerlist.open .btn_close,
	#productlist.open .list, #productlist2.open .list, #productlist3.open .list, #makerlist.open .list {
		display:block;
	}
	#productlist .btn_close, #productlist2 .btn_close, #productlist3 .btn_close, #makerlist .btn_close,
	#productlist.open .btn_open, #productlist2.open .btn_open, #productlist3.open .btn_open, #makerlist.open .btn_open {
		display:none;
	}
	#productlist .btn, #productlist2 .btn, #productlist3 .btn, #makerlist .btn {
		width:100%
	}
	#productlist.open .btn_close, #productlist2.open .btn_close, #productlist3.open .btn_close, #makerlist.open .btn_close {
		margin-top:20px;
	}
	.btn_open a, .btn_close a {
		padding:15px 0;
	}
	
	.btn_close {
		margin-top:20px;
		border:solid 2px #ddd;
	}
	.btn_close a, .btn_close a:hover {
		background-color:#ddd;
		color:#666 !important;
	}
	.btn_close span, .btn_close a:hover span {
		display:inline-block;
		background-image:url(/assets/img/common/icon_arrow_up.png), url(/assets/img/common/icon_arrow_up.png);
		background-position:left 2px, right 2px;
		background-repeat:no-repeat;
		background-size:8px;
		padding:0 15px;
	}
	
	.btn_open span, .btn_open a:hover span {
		display:inline-block;
		background-image:url(/assets/img/common/icon_arrow_under.png), url(/assets/img/common/icon_arrow_under.png);
		background-position:left 2px, right 2px;
		background-repeat:no-repeat;
		background-size:8px;
		padding:0 15px;
	}
	
	#productlist table:nth-of-type(1), #productlist2 table:nth-of-type(1), #productlist3 table:nth-of-type(1) {
		border-right:none;
		border-bottom:none;
	}
	#productlist table:nth-of-type(2) .lable0, #productlist table:nth-of-type(2) .lable1, #productlist2 table:nth-of-type(2) .lable0, #productlist2 table:nth-of-type(2) .lable1, #productlist3 table:nth-of-type(2) .lable0, #productlist3 table:nth-of-type(2) .lable1 {
		padding:2px 0;
	}
	#productlist table, #productlist2 table, #productlist3 table {
		float:none;
		width:100%;
	}
	#makerlist ul {
		float:none;
		width:100%;
		border-left:none;
	}
	#makerlist li {
		margin-left:0;
		margin-right:0;
	}
	.copy {
		margin-top:20px;
	}
}