/* Y'S GEAR : intercom.css */

.contentsWidth {
	font-weight: 500;
}
.contentsWidth *,
.contentsWidth *::before,
.contentsWidth *::after {
	box-sizing: border-box;
}

/* [ リンク ] */
.contentsWidth a {
	transition: all 0.3s ease;
}

/* [ セクション ] */
.contentsWidth > section {
	margin: 50px 0 100px;
}
.contentsWidth > section section {
	margin: 20px 0 50px;
}

/* [ 見出し・見出し下テキスト ] */
.contentsWidth h2, 
.contentsWidth h3, 
.contentsWidth h4, 
.contentsWidth h5 {
	line-height: 1.2;
}
.contentsWidth *:not(.repairList) > h3 {
	margin-bottom: 20px;
	padding: 12px 10px;
	background: #F1F1F1;
	font-size: 1.6rem;
}
.contentsWidth h3 + p {
	margin-bottom: 20px;
	font-size: 1.6rem;
	line-height: 1.6;
}

@media screen and (max-width: 980px) {
	/* [ セクション ] */
	.contentsWidth > section {
		padding-right: 20px;
		padding-left: 20px;
	}

	/* [ 共通見出し ] */
	.ttlNew {
		margin-right: -20px;
		margin-left: -20px;
	}
}

@media screen and (max-width: 568px) {
	/* [ セクション ] */
	.contentsWidth > section {
		margin: 20px 0 50px;
		padding-right: 10px;
		padding-left: 10px;
	}
	.contentsWidth > section section {
		margin: 15px 0 30px;
	}

	/* [ 共通見出し ] */
	.ttlNew {
		margin-right: -10px;
		margin-left: -10px;
	}

	/* [ 見出し・見出し下テキスト ] */
	.contentsWidth *:not(.repairList) > h3 {
		margin-bottom: 15px;
		padding: 10px;
		text-align: center;
	}
	.contentsWidth h3 + p {
		margin-bottom: 15px;
		font-size: 1.4rem;
	}
} /* */


/* [ 歴代モデル一覧リンク ] */
a.legacyLink {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: calc(33.33% - 13.33px);
	margin: 0 auto 50px;
	padding: 10px 10px 10px 30px;
	border: 1px solid #CC1533;
	border-radius: 3em;
	color: #CC1533;
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 1;
	text-align: center;
}
a.legacyLink::before {
	position: absolute;
	top: calc(50% - 6px);
	left: 15px;
	width: 12px;
	height: 12px;
	background: #CC1533;
	mask: url(../img/icon_blank.svg) center center / contain no-repeat;
	content: "";
	transition: 0.3s background ease;
}
a.legacyLink span {
	display: inline-block;
}
a.legacyLink:hover,
a.legacyLink:active {
	background: #CC1533;
	color: #fff !important;
}
a.legacyLink:hover::before,
a.legacyLink:active::before {
	background: #fff;	
}

@media screen and (max-width: 568px) {
	a.legacyLink {
		width: 100%;
		margin-bottom: 30px;
	}
} /* */


/*======================================================================*
 *  [ lineupList | ラインナップ ]
 *======================================================================*/

/* [ 見出し ] */
.lineupList           h3 { color: #fff; }
.lineupList.mesh      h3 { background: #8F3030; }
.lineupList.bluetooth h3 { background: #30568F; }
.lineupList.headset   h3 { background: #2C7442; }

/* [ テキスト ] */
.lineupList .text {
	font-size: 1.4rem;
}
.lineupList .text b {
	display: block;
	margin-bottom: 5px;
	font-size: 1.6rem;
	line-height: 1.4;
}
.lineupList .text b + br {
	display: none;
}

/* [ 一覧 ] */
.lineupList .items {
	display: flex;
	flex-wrap: wrap;
	text-align: center;
}
.lineupList .items > li {
	width: calc(25% - 15px);
	margin-left: 20px;
}
.lineupList .items > li:nth-child(4n+1) { margin-left: 0; }
.lineupList .items > li:nth-child(4n) ~ li { margin-top: 20px; }
/* リンク */
.lineupList .items a {
	display: block;
	position: relative;
	border: 1px solid #EDEDED;
	color: #000;
}
.lineupList .items a .new {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 45px;
	height: 45px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	z-index: 1;
	background: linear-gradient(135deg,  rgba(204,21,51,1) 0%,rgba(204,21,51,1) 50%,rgba(204,21,51,0) 51%); /* W3C */
}
.lineupList .items a .new span {
	display: block;
	width: 45px;
	height: 45px;
	background-size: 100% 100%;
	background-image: url(/shared/img/db-list/icon_new.png);
}
.lineupList .items a p {
	position: relative;
	margin-bottom: 10px;
	padding: 0 5px;
	font-size: 2.2rem;
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing : -0.05em;
}
.lineupList .items a .btn {
	display: block;
	position: relative;
	padding: 10px;
	background: #000;
	color: #fff;
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.2;
	transition: background 0.3s ease;
}
.lineupList .items a .btn::after {
	position: absolute;
	top: 50%;
	right: 10px;
	width: 10px;
	height: 14px;
	background: url(../img/icon_arrow.svg) center center / contain no-repeat;
	transform: translateY(-50%);
	content: "";	
}
.lineupList .items a:hover .btn,
.lineupList .items a:active .btn {
	background: #CC1533;
}
/* オススメ */
.lineupList .recommend {
	margin-top: 5px;
	padding: 20px 10px 10px;
	background: #eee;
	clip-path: polygon(50% 0%, calc(50% + 7px) 10px, 100% 10px, 100% 100%, 0 100%, 0 10px, calc(50% - 7px) 10px);
}
.lineupList.mesh      .recommend { background: #F6EFEF; }
.lineupList.bluetooth .recommend { background: #EAEEF4; }
.lineupList.headset   .recommend { background: #DBE8DF; }
.lineupList .recommend b {
	font-size: 1.6rem;
}
.lineupList .recommend ul {
	margin-left: 20px;
	text-align: left;
}
.lineupList .recommend li {
	list-style-type: disc;
	margin-top: 5px;
}

@media screen and (max-width: 568px) {
	/* [ テキスト ] */
	.lineupList .text b {
		font-size: 1.5rem;
	}

	/* [ 一覧 ] */
	.lineupList .items > li {
		width: calc(50% - 5px);
		margin-left: 10px;
	}
	.lineupList .items > li:nth-child(4n+1) { margin-left: 5px; }
	.lineupList .items > li:nth-child(2n+1) { margin-left: 0; }
	.lineupList .items > li:nth-child(2n) ~ li { margin-top: 20px; }
	/* リンク */
	.lineupList .items a p {
		font-size: 2rem;
	}
	.lineupList .items a .btn {
		font-size: 1.4rem;
	}
	/* オススメ */
	.lineupList .recommend b {
		font-size: 1.4rem;
	}
	.lineupList .recommend ul {
		margin-left: 15px;
	}
} /* */


/*======================================================================*
 *  [ repairList | 補修部品 ]
 *======================================================================*/

.repairList {
	padding: 50px;
	background: #F9F9F9;
}

/* [ 見出し ] */
.repairList h3 {
	margin-bottom: 20px;
	font-size: 2rem;
	text-align: center;
}
.repairList h3 span {
	font-size: 1.6rem;
}

/* [ 対象 ] */
.repairList dl {
	padding: 10px 20px;
	background: #F1F1F1;
	font-size: 1.6rem;
	text-align: center;
}
.repairList dt { margin-bottom: 5px; font-weight: bold; }
.repairList dd { display: inline-block; }
.repairList dd::after { content: " /";}
.repairList dd:last-child::after { display: none; }

/* [ 一覧 ] */
.repairList .items {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	font-size: 1.4rem;
}
.repairList .items a {
	display: flex;
	align-items: center;
	position: relative;
	width: calc(50% - 10px);
	margin-top: 20px;
	background: #fff;
	color: #333;
	font-weight: bold;
}
.repairList .items img { width: 100px; }
.repairList .items p {
	flex: 1;
	padding: 0 10px;
}
.repairList .items span {
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 10px 25px 10px 15px;
	background: #000;
	color: #fff;
	font-size: 1.3rem;
	line-height: 1.2;
	transition: background 0.3s ease;
}
.repairList .items span::after {
	position: absolute;
	top: calc(50% - 8px);
	right: 7px;
	width: 10px;
	height: 14px;
	background: url(../img/icon_arrow.svg) center center / contain no-repeat;
	content: "";	
}
.repairList .items a:hover span,
.repairList .items a:active span {
	background: #CC1533;
}

@media screen and (max-width: 568px) {
	.repairList {
		padding: 20px;
	}

	/* [ 見出し ] */
	.repairList h3 {
		font-size: 1.8rem;
	}
	.repairList h3 span {
		font-size: 1.4rem;
	}

	/* [ 対象 ] */
	.repairList dl {
		padding: 10px;
		font-size: 1.4rem;
	}
	
	/* [ 一覧 ] */
	.repairList .items {
		display: block;
	}
	.repairList .items a {
		width: 100%;
	}
	.repairList .items span {
		padding: 5px 20px 5px 10px;
		font-size: 1.2rem;
	}
	.repairList .items span::after {
		right: 5px;
	}
} /* */


/*======================================================================*
 *  [ settingGuide | 操作方法 ]
 *======================================================================*/

.settingGuide ul {
	display: flex;
	flex-wrap: wrap;
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 1;
	text-align: center;
}
.settingGuide li {
	display: flex;
	/* width: calc(20% - 16px); */
	width: calc(25% - 15px);
	margin-left: 20px;
}
/* .settingGuide li:nth-child(5n+1) {
	margin-left: 0;
}
.settingGuide li:nth-child(5n) ~ li {
	margin-top: 10px;
} */
.settingGuide li:nth-child(4n+1) {
	margin-left: 0;
}
.settingGuide li:nth-child(4n) ~ li {
	margin-top: 10px;
}
.settingGuide a {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 100%;
	padding: 10px 10px 10px 30px;
	border: 1px solid #CC1533;
	border-radius: 3em;
	color: #CC1533;
}
.settingGuide a::before {
	position: absolute;
	top: calc(50% - 6px);
	left: 15px;
	width: 12px;
	height: 12px;
	background: #CC1533;
	mask: url(../img/icon_blank.svg) center center / contain no-repeat;
	content: "";
	transition: 0.3s background ease;
}
.settingGuide a span {
	display: inline-block;
}
.settingGuide a:hover,
.settingGuide a:active {
	background: #CC1533;
	color: #fff !important;
}
.settingGuide a:hover::before,
.settingGuide a:active::before {
	background: #fff;	
}

@media screen and (max-width: 768px) {
	.settingGuide li {
		width: calc(33.33% - 13.33px);
	}
	/* .settingGuide li:nth-child(5n+1) {
		margin-left: 20px;
	} */
	.settingGuide li:nth-child(4n+1) {
		margin-left: 20px;
	}
	.settingGuide li:nth-child(3n+1) {
		margin-left: 0;
	}
	.settingGuide li:nth-child(3) ~ li {
		margin-top: 10px;
	}
} /* */

@media screen and (max-width: 568px) {
	.settingGuide li {
		width: calc(50% - 5px);
		margin-left: 10px;
	}
	.settingGuide li:nth-child(5n+1),
	.settingGuide li:nth-child(3n+1) {
		margin-left: 10px;
	}
	.settingGuide li:nth-child(2n+1) {
		margin-left: 0;
	}
	.settingGuide li:nth-child(2) ~ li {
		margin-top: 10px;
	}
} /* */


/*======================================================================*
 *  [ specTable | 早見表 ]
 *======================================================================*/

/* [ 注釈 ] */
.specTable h3 + p {
	display: none;
}

/* [ テーブル ] */
.specTable table,
.specTable th,
.specTable td {
	border: 1px solid #ccc;
	text-align: center;
}
.specTable th,
.specTable td {
	padding: 10px 5px;
	vertical-align: middle;
}
.specTable thead th { position: relative; }
.specTable thead th b { position: absolute; top: 10px; left: 5px; }
.specTable tbody span {
	display: inline-block;
	font-size: 1rem;
	font-weight: 500;
}
.specTable tbody th {
	background: #F2F2F2;
	line-height: 1.1;
}
/* モデル */
.specTable .model th {
	padding: 5px;
	color: #fff;
}
.specTable .model .mesh      { background: #8F3030; }
.specTable .model .bluetooth { background: #30568F; }
.specTable .model .headset   { background: #2C7442; }
/* 画像 */
.specTable .img th {
	position: relative;
	padding: 5px;
	background: #fff;
	vertical-align: text-bottom;
}
.specTable .img p + img {
	margin-top: 5px;
}
/* NEW */
.specTable .new {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 45px;
	height: 45px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	z-index: 1;
	background: linear-gradient(135deg,  rgba(204,21,51,1) 0%,rgba(204,21,51,1) 50%,rgba(204,21,51,0) 51%); /* W3C */
}
.specTable .new span {
	display: block;
	width: 45px;
	height: 45px;
	background-size: 100% 100%;
	background-image: url(/shared/img/db-list/icon_new.png);
}

@media screen and (max-width: 980px) {
	/* [ 注釈 ] */
	.specTable h3 + p {
		display: block;
	}
	/* [ スクロール ] */
	.specTable .swipe {
		overflow-x: scroll;
	}
	.specTable .swipe table {
		width: 980px;
	}
} /* */


/*======================================================================*
 *  [ leafletList | リーフレット ]
 *======================================================================*/

.leafletList .items {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	font-size: 1.4rem;
}
.leafletList .items a {
	display: flex;
	align-items: center;
	gap: 15px;
	position: relative;
	width: calc(50% - 10px);
	padding: 15px;
	border: 1px solid #ccc;
}
.leafletList .items a::after {
	position: absolute;
	right: 15px;
	top: 50%;
	width: 24px;
	height: 24px;
	background: #ccc;
	mask: url(/shared/svg/icon_download_white.svg) center center / contain no-repeat;
	transition: all 0.3s ease;
	transform: translateY(-50%);
	content: "";
}
.leafletList .items a:hover::after,
.leafletList .items a:active::after {
	background: #CC1533;
}
.leafletList .items img {
	width: min(134px, 40%);
	aspect-ratio: 3/2;
	object-fit: cover;
}
.leafletList .items div {
	flex: 1;
	position: relative;
	z-index: 2;
}
.leafletList .items p {
	margin-bottom: 5px;
	font-size: 1.6rem;
	font-weight: bold;
}

@media screen and (max-width: 768px) {
	.leafletList .items {
		flex-direction: column;
	}
	.leafletList .items a {
		width: 100%;
	}
} /* */

@media screen and (max-width: 568px) {
	.leafletList .items {
		font-size: 1.2rem;
	}
	.leafletList .items a {
		gap: 10px;
		padding: 10px;
	}
	.leafletList .items p {
		font-size: 1.5rem;
	}
} /* */


/*======================================================================*
 *  [ partnerShop | パートナーショップ制度 ]
 *======================================================================*/

.partnerShop {
	padding: 30px;
	background: #FCF8F0;
	font-size: 1.6rem;
}
.partnerShop > div {
	position: relative;
	padding: 40px;
	border: 1px solid #C88C0E;
}
.partnerShop > div::after {
	display: block;
	clear: both;
	content: "";
}
.partnerShop > div > * {
	float: right;
	width: calc(72% - 40px);
}

/* [ 見出し ] */
.partnerShop h2 {
	margin-bottom: 20px;
	font-size: 2rem;
}
.partnerShop h2 span {
	display: inline-block;
}

/* [ 画像 ] */
.partnerShop figure {
	float: left;
	width: 28%;
}

/* [ テキスト ] */
.partnerShop p {
	margin-bottom: 10px;
	color: #C88C0E;
	font-weight: bold;
}
.partnerShop p br {
	display: none;
}

/* [ リンク ] */
.partnerShop li {
	margin-top: 10px;
}
.partnerShop li a {
	display: inline-block;
	position: relative;
	padding-left: 1.2em;
}
.partnerShop li a::before {
	position: absolute;
	top: 0.3em;
	left: 0;
	width: 0.8em;
	height: 0.8em;
	background: #333;
	mask: url(../img/icon_blank.svg) center center / contain no-repeat;
	content: "";
}


@media screen and (max-width: 980px) {
	.partnerShop {
		padding: 20px;
	}
} /* */

@media screen and (max-width: 568px) {
	.partnerShop {
		padding: 20px !important;
		text-align: center;
	}
	.partnerShop > div {
		padding: 20px;
	}
	.partnerShop > div > * {
		float: none;
		width: 100%;
	}

	/* [ 見出し ] */
	.partnerShop h2 {
		font-size: 1.8rem;
	}

	/* [ 画像 ] */
	.partnerShop figure {
		margin-bottom: 20px;
	}
	.partnerShop figure img {
		max-width: 200px;
	}

	/* [ リンク ] */
	.partnerShop ul {
		width: fit-content;
		margin: 0 auto;
		font-size: 1.4rem;
		text-align: left;
	}
	
} /* */



/* .partnerShop h2 { margin-bottom: 20px; font-size: 1.8rem; text-align: center; }
.partnerShop > div { display: flex; align-items: center; }
.partnerShop figure { width: 35%; text-align: center; }
.partnerShop img { width: 180px; }
.partnerShop > div div { flex: 1; padding-left: 40px; }
.partnerShop p { margin-bottom: 20px; }
.partnerShop li { margin-top: 5px; } */