@charset "shift-jis";
/* --------------------------------------------------
 * base styles
 * ----------------------------------------------- */

#document{
	min-width: 0;
}

.clearfix:after {
	display: block;
	clear: both;
	content: "";
}

ul.list li {
	margin-bottom: 6px;
	margin-left: 26px;
	list-style-type: disc !important;
}

ol.list li {
	margin-bottom: 6px;
	margin-left: 26px;
	list-style-type: decimal !important;
}
.mt0 {
  margin-top: 0px;
}

.mt5 {
  margin-top: 5px;
}

.mt10 {
  margin-top: 10px;
}

.mt15 {
  margin-top: 15px;
}

.mt20 {
  margin-top: 20px;
}

.mt25 {
  margin-top: 25px;
}

.mt30 {
  margin-top: 30px;
}

.mt35 {
  margin-top: 35px;
}

.mt40 {
  margin-top: 40px;
}

.mt45 {
  margin-top: 45px;
}

.mt50 {
  margin-top: 50px;
}

.mt55 {
  margin-top: 55px;
}

.mt60 {
  margin-top: 60px;
}

.mt65 {
  margin-top: 65px;
}

.mt70 {
  margin-top: 70px;
}

.mt75 {
  margin-top: 75px;
}

.mt80 {
  margin-top: 80px;
}

.ml0 {
  margin-left: 0px;
}

.ml5 {
  margin-left: 5px;
}

.ml10 {
  margin-left: 10px;
}

.ml15 {
  margin-left: 15px;
}

.ml20 {
  margin-left: 20px;
}

.ml25 {
  margin-left: 25px;
}

.ml30 {
  margin-left: 30px;
}

.ml35 {
  margin-left: 35px;
}

.ml40 {
  margin-left: 40px;
}

.ml45 {
  margin-left: 45px;
}

.ml50 {
  margin-left: 50px;
}

.ml55 {
  margin-left: 55px;
}

.ml60 {
  margin-left: 60px;
}

.ml65 {
  margin-left: 65px;
}

.ml70 {
  margin-left: 70px;
}

.ml75 {
  margin-left: 75px;
}

.ml80 {
  margin-left: 80px;
}

.mb0 {
  margin-bottom: 0px;
}

.mb5 {
  margin-bottom: 5px;
}

.mb10 {
  margin-bottom: 10px;
}

.mb15 {
  margin-bottom: 15px;
}

.mb20 {
  margin-bottom: 20px;
}

.mb25 {
  margin-bottom: 25px;
}

.mb30 {
  margin-bottom: 30px;
}

.mb35 {
  margin-bottom: 35px;
}

.mb40 {
  margin-bottom: 40px;
}

.mb45 {
  margin-bottom: 45px;
}

.mb50 {
  margin-bottom: 50px;
}

.mb55 {
  margin-bottom: 55px;
}

.mb60 {
  margin-bottom: 60px;
}

.mb65 {
  margin-bottom: 65px;
}

.mb70 {
  margin-bottom: 70px;
}

.mb75 {
  margin-bottom: 75px;
}

.mb80 {
  margin-bottom: 80px;
}

.fluid-image{
	max-width: 100%;
	height: auto;
}
/* --------------------------------------------------
 * contents styles
 * ----------------------------------------------- */
 .btn-wrap--single{
	margin-top: 26px;
 }
 .js_mh_item02--single{
	line-height: 50px!important;
 }
.btn-more {
	display: block;
	height: 42px;
	line-height: 42px;
	width: 100%;
	text-align: center;
	background-color: #003D53;
	position: relative;
	transition: background-color 0.2s;
	-moz-transition: opacity 0.3s ease;
	-o-transition: opacity 0.3s ease;
	-webkit-transition: opacity 0.3s ease;
	transition: opacity 0.3s ease;
}
.btn-more:hover, .btn-more02:hover {
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
	opacity: 0.75;
	color:#fff;
}
.btn-more:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 122px;
	height: 40px;
	background: url("../images/btn-more-txt.png") no-repeat center;
}
.btn-more.btn-txt {
	color: #38569E;
}
.btn-more.btn-txt:before {
	background: url(../images/btn-more-txt2.png) no-repeat center;
	background-size: 100% auto;
	width: 121px;
}
.btn-more.btn-bg:before {
	display: none !important;
}

.btn-more02 {
	display: block;
	height: 60px;
	line-height: 60px;
	width: 60%;
	text-align: center;
	background-color: #003D53;
	color:#fff;
	margin:30px auto 0;
	font-size:1.2em;
	position: relative;
	transition: background-color 0.2s;
	-moz-transition: opacity 0.3s ease;
	-o-transition: opacity 0.3s ease;
	-webkit-transition: opacity 0.3s ease;
	transition: opacity 0.3s ease;
}

.slider {
	position: absolute;
	width: 100%;
	height: 376px;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	overflow: hidden;
	z-index: 2;
}
.slider .abs-txt {
	position: absolute;
	bottom: 20px;
	text-align: center;
	width: 100%;
	display: block;
	font-size: 10px;
	color: #333;
}

.bx-wrapper {
	border: none;
	background: none;
	animation-direction: normal;
	padding: 0;
	margin: 0;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}
.bx-wrapper .bx-controls .bx-prev, .bx-wrapper .bx-controls .bx-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	border: 0;
	background: none;
	color: #FFF;
	height: auto;
	width: auto;
	text-indent: 0;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
	opacity: 0.3;
	font-size: 16px;
	color: #000;
}
.bx-wrapper .bx-controls .bx-prev:hover, .bx-wrapper .bx-controls .bx-next:hover {
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=25);
	opacity: 0.25;
}
.bx-wrapper .bx-controls .bx-prev {
	text-align: left;
	left: 5px;
}
.bx-wrapper .bx-controls .bx-prev:after {
	content: "��";
}
.bx-wrapper .bx-controls .bx-next {
	text-align: right;
	right: 5px;
}
.bx-wrapper .bx-controls .bx-next:after {
	content: "��";
}

/*
 #main
----------------------------*/
#main {
	overflow: hidden;
	color: #343434;
}
#main a {
	outline: none;
}
#main * {
	box-sizing: border-box;
}

/*
 .container
----------------------------*/
#main .container {
	width: 100%;
	max-width: 1060px;
	margin-left: auto;
	margin-right: auto;
	padding: 45px 40px 40px;
	position: relative;
}

/*
 .key-visual
----------------------------*/
.key-visual {
	height: 0px;
	padding-top:28.5714%;
	background: url("../images/kv.jpg") center top;
	background-size: cover;
	min-height: 500px;
	box-sizing: border-box;
	margin-bottom: 15px;
}
.key-visual > h1 {
	font-size: 0;
}

.section-header {
	padding-bottom: 35px;
	text-align: center;
	margin-bottom: 20px;
}
.section-header h2 {
	font-size: 28px;
	line-height: 1.2;
	letter-spacing: 0.04em;
	font-weight: normal;
}
.section-header h2 span{
	display: block;
	font-size: 16px;
	line-height: 1.5;
	margin-top: 17px;
	letter-spacing: 0.04em;
}



.accessory-block {
	font-size: 0;
}

.accessory-list {
	margin-left: -5px;
	margin-right: -5px;
	position: relative;
	box-sizing: border-box;
}
.accessory-list > li {
	display: inline-block;
	vertical-align: top;
	font-size: initial;
	width: 33.333333%;
	padding-left: 5px;
	padding-right: 5px;
	margin-bottom: 10px;
}
.accessory-list + .accessory-list {
	margin-top: 10px;
}

.accessory-item {
	position: relative;
	padding: 36px 25px 28px;
}
.accessory-item.bg-blue {
	background-color: #bfd5dc;
}
.accessory-item.bg-gray {
	background-color: #f6f3f0;
}
.accessory-item.bg-light-gray {
	background-color: #F6F3F0;
}
.accessory-detail {
	padding-top: 331px;
}
.accessory-detail > dt {
	margin-top: 8px;
	font-size: 18px;
	line-height: 1.44;
	margin-bottom: 18px;
	position: relative;
}
.accessory-detail > dt.row-1 {
	height: 50px;
	line-height: 50px;
}
.accessory-detail > dt .icn {
	position: absolute;
	bottom: 0;
	right: 0;
}
.accessory-detail > dd {
	border-top: 1px solid #343434;
	padding-top: 17px;
	min-height: 94px;
}

.design-stand:after {
	top: 175%;
	left: -110px;
	width: 60px;
	height: 48px;
	background-image: url('../images/decorate-03.png?1494372520');
	z-index: 1;
}

.design-soft2:after {
	top: 65%;
	right: -110px;
	width: 70px;
	height: 606px;
	background-image: url('../images/decorate-02.png?1494372517');
	z-index: -1;
	background-size: auto 100%;
	background-position: 0 0;
}

.adapter small {
	margin-top: 4px;
}

.reflect small {
	margin-top: 8px;
}

.accessory-desc {
	min-height: 77px;
	margin-bottom: 5px;
}
.accessory-desc > p {
	font-size: 15px;
	line-height: 1.5;
}
@media (max-width: 1080px) {
	.accessory-desc > p {
		font-size: 14px;
	}
}
.accessory-desc > small {
	font-size: 10px;
	line-height: 15px;
	letter-spacing: -0.4px;
	display: block;
}

.to-top-block {
	padding-top: 18px;
	padding-bottom: 20px;
	/*background-color: #F7F7F7;*/
	text-align: center;
}

.to-top {
	display: inline-block;
	width: 84px;
	height: 46px;
	background: url("../images/to-top.png") no-repeat;
	background-size: 100% auto;
	transition: 0.2s;
}
.to-top:hover {
	opacity: 0.7;
}
@media only screen and (min-width:1px) and (max-width:640px){
	#main .key-visual {
		height: 0;
		padding-bottom: 141.25%;
		padding-top:0;
		background: url(../images/kv_sp.jpg) center;
		background-size: cover;
		box-sizing: border-box;
		min-height: 0;
		margin-bottom: 0;
	}
	.btn-more02 {
	display: block;
	width: 90%;
	height:auto;
	padding:10px 15px;
	line-height:1.6;
	text-align: center;
	background-color: #222d48;
	color:#fff;
	margin:30px auto 0;
	font-size:0.9em;
	}
	.btn-wrap--single{
		margin-top: 0;
	}
	.js_mh_item02--single{
		line-height: 1.44!important;
	}

}
@media only screen and (min-width:1px) and (max-width:1050px){
	#document{
		min-width: auto;
	}

	.section-header h2 img{
		width: 300px;
	}
/*
	.section-header h2{
		font-size: 14px;
		font-weight: bold;
	}
	.section-header h2 span{
		margin-top: 5px;
		font-size: 12px;
	}
*/
	.section-header{
		padding: 6px 0 0;
	}
	
	#main .container{
		padding: 15px;
	}
	.slider{
		height: auto;
	}
	.bx-wrapper img{
		max-width: 290px;
		height: auto;
		margin: 0 auto;
	}
	#main .accessory-detail {
		padding-top: 320px;
	}
	#main .accessory-item {
		padding: 36px 21px 28px;
	}
	.accessory-list{
		max-width: 320px;
		margin:  0 auto;
	}
	.accessory-desc{
		min-height: 60px;
	}
	.accessory-list > li{
		display:block;
		width: 100%;
		margin-bottom: 13px;
		padding: 0;
	}
}