@charset "utf-8";

*, *:before, *:after {
	box-sizing: border-box;
}
::selection {
	color: #fff;
	background: #e1b7b9; /* Safari用 */
}
::-moz-selection {
	color: #fff;
	background: #e1b7b9; /* Firefox用 */
}
@font-face {
	font-family: "YuGothic-M";
	font-weight: normal;
	 src: local("YuGothic-Medium"),
		  local("Yu Gothic Medium"),
		  local("YuGothic-Regular");
}

@font-face {
	font-family: "YuGothic-M";
	font-weight: bold;
	 src: local("YoGothic-Bold"),
		  local("Yu Gothic");
}

html {
	font-size: 62.5%;/* 16px x 0.625 = 10px(=1rem) */
}

body {
	font-size: 1.4rem;/* 14px */
	line-height: 1.8;
	font-family: -apple-system, blinkMacSystemFont, YuGothic-M, YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	-webkit-text-size-adjust: 100%;
	font-feature-settings: "palt";
	color: #666666;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, body {
		font-feature-settings: "pkna";
	}
}
.mincho {
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	-o-transform: rotate(0.028deg);
	-ms-transform: rotate(0.028deg);
	-moz-transform: rotate(0.028deg);
	-webkit-transform: rotate(0.028deg);
	transform: rotate(0.028deg);
}

h1,h2,h3,h4 {
    margin: 0 0 0 0;
}
p {
    margin: 0;
}
dl,
menu,
ol,
ul,
dd {
    margin: 0;
}
menu,
ol,
ul {
    padding: 0;
	margin: 0;
}
a {
	text-decoration: none;
	outline: none !important;
}
em { font-style: normal }
figure {margin:0;}
img {
	vertical-align: bottom;
}
li {
	list-style: none;
}
strong {
	font-weight: normal;
}
a:link {
	color: #e1b7b9;
}
a:visited {
	color: #e1b7b9;
}
a:hover {
	color: #e1b7b9;
	text-decoration: none;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
a:hover img {
	filter: alpha(opacity=70);        /* ie lt 8 */
	-ms-filter: "alpha(opacity=70)";  /* ie 8 */
	-moz-opacity:0.7;                 /* FF lt 1.5, Netscape */
	-khtml-opacity: 0.7;              /* Safari 1.x */
	opacity:0.7;
	zoom:1;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
a:active {
	color: #e1b7b9;
}

/* =============================================================================
   移動＋フェードイン表示
   ========================================================================== */
.fade {
	opacity: 0;
	transform: translate(0,60px);
	-webkit-transform: translate(0,60px);
}
.fadein{
	opacity: 1.0;
	transform: translate(0,0);
	-webkit-transform: translate(0,0);
	transition: .8s;
}
/* =============================================================================
   class
   ========================================================================== */
.wrap {
	width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	position: relative;
}
section {
	padding: 30px 0;
}
/* =============================================================================
   header
   ========================================================================== */
header {
	height: 770px;
	padding: 20px 0 0;
	background: url(../images/bluetooth/bgHeade202104r.jpg) no-repeat 50% 50%;
	background-size: cover;
}
header h1 {
	padding: 100px 0 180px 100px;
}
header nav li {
	display: inline-block;
}
header nav li a {
	padding: 20px;
	color: #fff;
	display: block;
	color: #000;
}
header nav li a:link,
header nav li a:visited,
header nav li a:active {
	color: #000;
}
header nav li a:hover {
	color: #ad6d70;
}
header .company {
	position: absolute;
	top: -20px;
	right: 0;
}
header .gNavi {
	width: 100%;
	display: table;
}
header .gNavi li {
	text-align: center;
	display: table-cell;
}
header .gNavi li a {
	font-size: 1.6rem;
}

/* =============================================================================
   #aboutSec
   ========================================================================== */
#aboutSec {padding: 60px 0 80px 0;}
#aboutSec figure img {vertical-align: top;}
#aboutSec figure .img1 {padding: 30px 50px 0 40px;}
#aboutSec figure .img2 {padding: 60px 0 20px 0;}
#aboutSec ul {display: table; width: 100%;padding: 0 0 0 390px; position: absolute; bottom: 0; right: 0;}
#aboutSec ul li {display: table-cell; width: 14.28%; text-align: center; font-size: 11px;line-height: 1.6;}
#aboutSec ul li img { margin-bottom: 10px; }

/* =============================================================================
   #functionSec
   ========================================================================== */
#functionSec {padding-bottom: 30px; background: url(../images/bluetooth/bg4function.png) repeat 0 0;}
#functionSec h2 {padding-bottom: 20px;}
#functionSec h2 + div {padding: 60px 600px 0 0;position: relative; height: 500px;}
#functionSec h2 + div figure {position: absolute; top: 0; right: 60px;}
#functionSec h3 { font-weight: bold; color: #8c8300; font-size: 2.4rem; position: relative;}
#functionSec h3 img {position: absolute;top: 0; left: 0;}
#functionSec h3 span { margin: 0 0 10px 120px; padding-top: 30px; display: block; border-bottom: 1px solid #595757; }
#functionSec p { padding-left: 120px;}
#functionSec p em {font-size: 1.8rem; color: #c5757e;}
#functionSec .fn {overflow: hidden; padding-bottom: 30px; background: url(../images/bluetooth/imgDeco4function.png) no-repeat 0 100%;}
#functionSec .fn > div {width: 370px;float: left; margin-right: 15px;}
#functionSec .fn > div:nth-child(2n) figure {padding-top: 50px;}
#functionSec .fn > div:nth-child(3n) figure {padding-top: 80px;}

/* =============================================================================
   #sceneSec
   ========================================================================== */
#sceneSec {padding: 60px 0 0 0;background: url(../images/bluetooth/bg4function.png) repeat 0 0;}
#sceneSec > div {background: url(../images/bluetooth/bgScene.png) repeat 0 0;}
#sceneSec > div > .wrap {position: relative;padding-bottom: 20px;}
#sceneSec h2 {text-align: center;position: absolute;top: -40px;left: 50%;
	transform: translate3d(-50%, 0, 0);
	-webkit-transform: translate(-50%, 0); /* Safari用 */
	transform: translate(-50%, 0);}
#sceneSec h2 + div {padding-top: 100px; display: table; border-collapse: separate; border-spacing: 20px;}
#sceneSec .scene {padding: 20px 0 0;background-color: #fff;display: table-cell;position: relative; width: 365px;}
#sceneSec .scene h3 {text-align: center;padding-bottom: 10px;}
#sceneSec .scene p {padding: 20px;}
#sceneSec .scene div {display: table;}
#sceneSec .scene div img,#sceneSec .scene div p {display: table-cell;padding:0;vertical-align: middle; }
#sceneSec .scene div img,#sceneSec .scene div p span{color: #f54882;}
#sceneSec .scene:nth-child(1):after {content: "";width: 75px; height: 75px;display: block;position: absolute;top: -20px;left: 10px;background: url(../images/bluetooth/imgSceneDeco1.png) no-repeat 0 0;}
#sceneSec .scene:nth-child(2n):after {content: "";width: 55px; height: 117px;display: block;position: absolute;top: -10px;left: 20px;background: url(../images/bluetooth/imgSceneDeco2_202104.png) no-repeat 0 0;}
#sceneSec .scene:nth-child(3n):after {content: "";width: 93px; height: 97px;display: block;position: absolute;top: -60px;right: 10px;background: url(../images/bluetooth/imgSceneDeco3.png) no-repeat 0 0;}

/* =============================================================================
   #specSec
   ========================================================================== */
#specSec .wrap {overflow: hidden;}
#specSec h2 {margin-bottom: 20px; color: #f54882;font-size: 2.2rem;text-align: center;font-weight: normal;position: relative;}
#specSec h2:before {content: ""; display: block; width: 100%; height: 10px; background-color: #eeeeee; position: absolute; top: 50%; left: 0;z-index: 0;}
#specSec h2 span {display: inline-block; padding: 0 40px;background-color: #fff;z-index: 1;position: relative;}
#specSec h2 small {display: block; font-size: 1.6rem;}
#specSec .cont1 {overflow: hidden;margin-bottom: 30px;}
#specSec .cont1 img {padding: 60px 30px;float: left;}
#specSec .cont1 table {width: 400px; float: right;}
#specSec .cont1 th {vertical-align: top;text-align: left;}
#specSec .cont2 {width: 580px;float: left;}
#specSec .cont2 ul {display: table;width: 100%; text-align: center;}
#specSec .cont2 li {display: table-cell;}
#specSec .cont2 li img {margin-bottom: 10px;}
#specSec .cont2 li p {line-height: 1.4;}
#specSec .cont3 {width: 560px;float: right;text-align: center;}

/* =============================================================================
   #manualSec
   ========================================================================== */
#manualSec {background: url(../images/bluetooth/bg4function.png) repeat 0 0;}
#manualSec h2 {margin-bottom: 20px; color: #f54882;font-size: 2.2rem;text-align: center;font-weight: normal;position: relative;}
#manualSec h2:before {content: ""; display: block; width: 100%; height: 10px; background-color: #7d7d7d; position: absolute; top: 50%; left: 0;z-index: 1;}
#manualSec h2 span {display: inline-block; padding: 0 40px;background: url(../images/bluetooth/bg4function.png) repeat 0 0;z-index: 2;position: relative;}
#manualSec h2 small {display: block; font-size: 1.6rem;}
#manualSec ol {overflow: hidden;}
#manualSec ol > li {width: 560px;float: left;position: relative;padding: 20px 0 20px 0;height: 420px;}
#manualSec ol > li:nth-child(odd) {margin-right: 20px;}
#manualSec ol li h3 {margin-bottom: 20px;}
#manualSec ol li h3 span {color: #f54882; font-size: 2rem;padding: 0 0 10px 10px;display: inline-block;}
#manualSec ol li h3 small {color: #f54882;display: block; padding-left: 75px; margin-top: -10px;}
#manualSec ol li ul {padding: 0 300px 0 10px;}
#manualSec ol li ul + img {position: absolute; top: 110px; right: 0;}
#manualSec ol li ul li {list-style: disc inside;padding-left:1em;text-indent: -1em; margin-bottom: 1em;}

/* =============================================================================
   #shopSec
   ========================================================================== */
#shopSec {position: relative;background-color: #252422;height: 270px;}
#shopSec:before {width: 50%;min-width: 600px; content: "";height: 270px; display: block;background-color: #252422;position: absolute;top: 0;left: 0;z-index: 1;}
#shopSec:after {width: 50%; content: "";height: 270px; display: block;background: url(../images/bluetooth/bgShop202104.jpg) no-repeat 0 0;background-size: cover;position: absolute;top: 0;right: 0;}
#shopSec .wrap > div {width: 580px;position: relative;z-index: 1;}
#shopSec .wrap > div img {margin-top: -60px;}
#shopSec .wrap > div > div {position: absolute;bottom: 0;right: 20px;}


/* =============================================================================
   footer.php
   ========================================================================== */
footer {
	background-color: #fff;
	text-align: left;
}
footer .wrap {position: relative;}
footer h1 {
	padding: 30px 0 10px;
}
footer nav {position: absolute;top: 46px;right: 0; width: 800px;}
footer nav ul {
	text-align: center;
	padding: 0 0 30px;
}
footer nav li {
	display: inline-block;
	line-height: 1;
	border-right: 1px solid #666;
}
footer nav li:last-child {
	border: none;
}
footer nav li a {
	padding: 0 10px;
	font-weight: normal;
}
footer a:link {
	color: #000;
}
footer a:visited {
	color: #000;
}
footer a:hover {
	color: #e1b7b9;
}
footer a:active {
	color: #e1b7b9;
}

footer p {
	margin: 0;
	padding: 1rem;
	text-align: center;
}
footer p small {
	color: #000;
	font-size: 1.4rem;
}
#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 1.2rem;
	padding: 0;
	background-color: transparent;
	line-height: 1;
	z-index: 100;
}
#page-top a {color: #fff;}
#page-top a:link {
    background: #111111;
    text-decoration: none;
    color: #fff;
    padding: 20px 15px;
    text-align: center;
    display: block;
    border-radius: 50px;
}

#page-top a:hover {
    text-decoration: none;
    background: #327B92;
}

.btnSolidOut {
	display: block;
	border: 2px solid red;
	text-align: center;
	color: red;
}