@charset "utf-8";
/*
	==================================================
		202403 support aibo qa qa_index.css
	==================================================
*/

/* ------------------------
	common
---------------------------*/
html{
	font-size: 1rem
}
#contents {
	padding: 0 1em;
}
#contents h1,
#contents h2{
	margin-bottom: 0.875rem;
}

#contents > p,
#contents > section > p{
	margin-left: 1em;
}

#contents ul{
	list-style-type: none;
	margin-left: 0;
	padding:0;
}

#contents ul.disc{
	list-style-type: disc !important;
}

#contents li{
	margin:0;
	float: none;
}
#contents .border_box{
	padding: 0 1em;
}
#contents .border_box li{
	list-style-type: none;
}


@media (max-width: 640px){
	
	#contents p{
		margin-left: 0;
	}
}

/* --------------------------- */

#selectArea {
	margin-top: 1.5em;
}

#contents ul.selectBtn{
	display: flex;
	flex-wrap: wrap;
	margin-left: 0;
	margin-bottom: 1em;
	justify-content: space-between;
}
#contents ul.selectBtn > li{
	width: calc((100% / 3) - 15px);
	max-width: 214px;
	margin-bottom: 16px;
}

#contents ul.selectBtn > li button{
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	min-height: 168px;
	padding: 10px 0 0;
	border: #d2d2d2 1px solid;
	border-radius: 6px;
	box-sizing: border-box;
	background: url(/support/share/images/bg_mod-linkButton.jpg);
	background-size: contain;
	color: #333;
	font-weight: bold;
}

#contents ul.selectBtn > li button span{
	padding-top: 12px;
	font-size: 0.875rem;
	
}
#contents ul.selectBtn > li button img{
	max-height: 94px;
	width: auto;
}

#contents ul.selectBtn > li button:hover{
	opacity: 0.7;
}

#contents .qa_detailArea{
	margin-bottom: 3em;
}

#contents .openDetail {
	display: none;
}
#contents .openDetail.active {
	display: block;
}

#contents h3{
	margin-top: 1.5em;
	margin-bottom: 0.75em;
	padding: 0.3em 0.5em 0.3em;
	border-left: 6px solid #999;
}

#contents h3 ~ *:not(ul){
	margin-left: 0.75em;
}
#contents .s5-linkV3{
	display: inline-block;
}

#contents span.s5-linkV3.s5-linkV3--down{
	color: #2f353d !important;
}

#contents span.s5-linkV3.s5-linkV3--down:after{
	margin-left: 5px;
	margin-right: 0;
	background-image: url(/share5/svg/icon/angle-down.svg);
}
/*#contents a.s5-linkV3:after {
	background-image: url(/share5/svg/icon/angle-right.svg);
}*/

#contents .qa_detailArea ul{
	margin: 0;
}
#contents .qa_detailArea ul li{
	border-bottom: 1px solid #d2d2d2;
	margin: 0 1em;
	padding: 1em 0;
}

#contents .qa_detailArea ul li:last-child{
	border-bottom: none;
}

#contents .border_box{
	padding: 0 1em;
	border: 1px solid #d2d2d2;
	overflow: hidden;
}

#contents a.s5-linkV3{
	color: #3865e0 !important;
}

#contents a.s5-linkV3:after{
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20fill%3D'%233865e0'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20x%3D'0px'%20y%3D'0px'%20width%3D'32px'%20height%3D'32px'%20viewBox%3D'0%200%2032%2032'%3E%3Cpath%20d%3D'M25.6%2C16l-16%2C16l-3.2-3.2L19.1%2C16L6.4%2C3.2L9.6%2C0L25.6%2C16z'%2F%3E%3C%2Fsvg%3E") !important;
}

#contents span.new{
	font-weight: bold;
	color: #cc0000;
}
.s5-iconInline[src$="up.svg"]{
	font-size: 80%;
	padding-right: 5px;
}

#contents .s5-searchBox{
	background: none;
}

#contents .s5-searchBox input.s5-searchBox__searchInput {
	width: 60%;
	display: inline-block;
	float: none;
	border: 1px solid #c8cbce;
	box-sizing: border-box;
}

#contents button.s5-searchBox__searchSubmit{
	float: none;
	display: inline-block;
}

@media (max-width: 1280px){
	#contents ul.selectBtn{
		justify-content: flex-start;
		gap:1em;
	}

}

@media (max-width: 640px){
	#contents {
		padding: 0;
	}
	#contents > p,
	#contents > section > p{
		margin-left: 0;
	}
	
	#selectArea {
		padding: 0;
	}
	
	#contents h3{
		margin-bottom: 1.5em;
	}
	
	#contents h3 ~ *:not(ul) {
		margin-left: 0;
	}
	
	#contents ul.selectBtn{
		gap:10px;
	}
	
	#contents ul.selectBtn > li{
		width: calc((100% / 3) - 10px);
	}
	#contents ul.selectBtn > li button{
		justify-content: space-between;
		
	}
	
	#contents ul.selectBtn > li button img{
		margin-top: 1em;
		max-width: 120px;
		height: auto;
	}
	
	#contents ul.selectBtn > li button span{
		height: 3em;
		padding: 0 12px;
		line-height: 1.3;
	}
	#contents .s5-general--mt40{
		margin-top: 40px !important;
	}
	#contents .s5-searchBox{
		padding: 5px 0;
	}
}

@media (max-width: 480px){
	#contents ul.selectBtn > li{
		width: calc((100% / 2) - 10px);
	}
	#contents .s5-searchBox.s5-row__col1 input.s5-searchBox__searchInput {
		width: 100%;
	}
	
}

@media (max-width: 391px){
}

/* accordion */
#contents .accordion button {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 1em;
	padding: 0.2em 1.5em 0;
	background: url(/support/share/images/bg_mod-linkButton.jpg);
	background-size: contain;
	border: #d2d2d2 1px solid;
	border-radius: 6px;
	font-size: 1.143rem;
	font-weight: bold;
	line-height: 1.3;
}
#contents .accordion button::after{
	content:"+";
	width: 1em;
	display: block;
	font-size: 240%;
	color: #ea5c6f;
}

#contents .accordion button[aria-expanded="false"]::after{
	transition: all 0.5s;
}
.accordion button[aria-expanded="true"]::after {
	transform: rotate(45deg);
}

#contents .accordion button span{
	text-align: left;
}

#contents .accordion .border_box[aria-hidden="false"]{
	display: block !important;
}

@media (max-width: 640px){
	#contents .accordion button {
		font-size: 0.875rem;
		padding: 0.6em 0.4em;
	}
	#contents .accordion button::after{
		font-size: 186%;
	}
}

@media (max-width: 480px){
	#contents .accordion button {
		line-height: 1.5;
	}
	
}