@charset "UTF-8";

/* -----------------------------------------------------------
CSS Information
File name:      pages.css
Style Info:     個別ページ用スタイル
----------------------------------------------------------- */

/*用語集TABスタイル
------------------------------------------------------------*/
ul.nav-tabs.tab-glossary {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  list-style: none;
}
ul.nav-tabs.tab-glossary li{
	border-top:1px solid #FFF;
	border-right:1px solid #FFF;
	width: 33%;
	text-align: center;
	font-size: 80%;
}
ul.nav-tabs a.nav-link {
	padding: 10px 0;
	background: #755398;
	display: block;
	color: #FFF;
	border:none;
	border-radius: 0px;
	text-decoration: none;
}
ul.nav-tabs a.nav-link:hover, ul.nav-tabs a.nav-link:focus {
	border:none;
	background: #222222;
	color: #FFF;
}
ul.nav-tabs a.nav-link.disabled {
  color: #FFF;
}
ul.nav-tabs a.nav-link.active,
ul.nav-tabs a.nav-link:hover,
ul.nav-tabs a.nav-link:active{
  color: #FFF;
  background-color: #222222;
  border:none;
}
ul.checkList li{
	margin-bottom: 14px;
	padding: 2px 0 0 24px;
	background: url(../images/share/icon_check.png) left top no-repeat;
}
div.productPicArea,
p.productPicArea{
	padding: 16px 8px;
	background: #FFF;
	text-align: center;
}
.productPicArea img{
	margin: 0 auto;
}
.slideshow{
	margin: 0 auto 20px;
}
@media (min-width: 576px) {
	ul.nav-tabs.tab-glossary{
		flex-wrap: nowrap;
	}
	ul.nav-tabs.tab-glossary li{
		width: 20%;
	}
}
@media (min-width: 768px) {
	ul.nav-tabs.tab-glossary li{
		border-right:2px solid #FFF;
		width: 20%;
	}
	ul.nav-tabs.tab-glossary li:last-child{
		width: 19%;
		border-right:none;
	}
	ul.nav-tabs a.nav-link {
		padding: 14px 0;
	}

	div.productPicArea,
	p.productPicArea{
		padding: 16px;
	}
}
@media (min-width: 1280px) {
	ul.nav-tabs.tab-glossary li{
		font-size: 100%;
	}
	ul.nav-tabs a.nav-link {
		padding: 26px 0;
	}
}
/*用語集画像と解説部分
------------------------------------------------------------------*/
#grossaryImgArea{
}
.bgFront{
	background: #f3e4c5 url("../glossary/images/front_original.jpg") no-repeat;
	background-size:cover;
}
.bgTop{
	background: url("../glossary/images/top_original.jpg") no-repeat;
	background-size:cover;
}
.bgDanmen{
	background: url("../glossary/images/side_original.jpg") no-repeat;
	background-size:cover;
}
.bgOnkyo{
	background: url("../glossary/images/control_original.jpg") no-repeat;
	background-size:cover;
}
.bgAmp{
	background: url("../glossary/images/amp_original.jpg") no-repeat;
	background-size:cover;
}

.ttlExp{
	padding: 0 0 0 40px;
	background:url("../glossary/images/az.png") left 2px no-repeat;
	background-size:36px 24px;
	font-weight: bold;
	font-size: 120%;
}
.ttlApch{
	padding: 0 0 0 40px;
	background:url("../glossary/images/eye.png") left 2px no-repeat;
	background-size:34px 20px;
	font-weight: bold;	
	font-size: 120%;
}
.glossaryExpBox .border{
	padding: 0.5em;
}
.glossaryExpBnArea{
	margin-left: auto;
	margin-right: auto;
	width: 240px;
}
@media (min-width: 992px) {
	.glossaryExpBox .border{
		padding: 1.5em;
	}
	.glossaryExpBox{
		display: flex;
		justify-content: space-between;
	}
	.glossaryExpTxtArea{
		margin-right: 2em;
		flex: 1

	}
}

/*SOLUTION
------------------------------------------------------------*/
.hallEyeCatch{
	height: 84vh;
	background: url("../solution/images/header_solution_01.jpg") center 50% no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	position: relative;
}
.studiumEyeCatch{
	height: 84vh;
	background: url("../solution/images/header_solution_02.jpg") center top no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	position: relative;
}
.eyeCatchTtlArea{
	position: absolute;
	left: 1.5em;
	top: 1.5em;
	color: #FFF;
}
.eyeCatchTtlArea p{
	margin-bottom: 0.2em;
	line-height: 1.5;
	text-shadow: #000 1px 0 10px;
}
.eyeCatchTtlArea p.font-size20{
	font-size: 100%;
}
.eyeCatchTtlArea p.font-min.fs-1{
	margin: 0px!important;
	font-size: 180%;
	line-height: 1.4!important;
	text-align: center;
}

.ttlRequestBox{
	margin-top: 20px;
	padding: 10px;
	background: #EEE;
	position: relative;
	overflow: visible;
}
.labelRequest{
	padding: 10px 10px 6px 16px;
	width: 200px;	
	background: #4989c4;
	-webkit-clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
	clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);	
	position: relative;
	top: -20px;
	left: -10px;
	color: #FFF;
	font-weight: 600;
	line-height: 1.5;
	z-index: 9;
}
.ttlRequestMainTxt{
	padding: 1.4em 1em;
	font-size: 110%;
	font-weight: 600;
}
.btnSt05{
	width: 275px;
	text-align: center
}
.btnSt05 a:link,
.btnSt05 a:visited{
	padding: 16px;
	display: block;
	background: #F0F0F0;
	border: 1px solid #DDD;
}
.ms-auto{
	margin-left: auto;
}
.mx-auto{
	margin-left: auto;
	margin-right: auto;
}
.solutionBnList{
	
}
.solutionBnArea{
	margin-left: auto;
	margin-right: auto;
	width: 280px;
	font-size: 90%;
}
.solutionBnArea p{
	line-height: 1.5;
}
.solutionBnArea a:hover img{
	opacity: 0.7;
}
@media (min-width: 768px) {
	.eyeCatchTtlArea{
		left: 4vw;
		top: 5vh;
	}
	.eyeCatchTtlArea p.font-size20{
		font-size: 2rem!important;
	}
	.eyeCatchTtlArea p.font-min.fs-1{
		font-size: clamp(2.5rem, -1.944rem + 9.26vw, 5rem)!important;
	}
	.labelRequest{
		padding: 14px 10px 10px 16px;
	}
	.ttlRequestMainTxt{
		font-size: 130%;
	}
	.ms-md-0{
		margin-left: 0px;
	}
	.ms-md-auto{
		margin-left: auto;
	}
	.me-md-0{
		margin-right: 0px;
	}
	.solutionBnList{
		display: flex;
		justify-content: flex-end;
	}
	.solutionBnThumb{
		width: 100%;
		background: #FFF;
		aspect-ratio: 2 / 1;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}
	.solutionBnArea{
		margin-left: 1em;
		margin-right: 0px;
	}
	.solutionSectionBox{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.solutionPicArea{
		width: 340px;
		margin-left: 1em;
		order: 1;
		flex-shrink: 0;
	}

}