@charset "utf-8";
/* CSS Document */

/*===========================================
	howto wh-1000xm5 pairing-pc css
=============================================*/

#pairing .tabArea {
	margin-left: 0;
	margin-top: 3em;
}

#pairing .tabArea ul.three_tab{
	list-style:none;
	margin-left: 0;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
    margin: 0 ;
	padding: 0;

}

#pairing .tabArea ul.three_tab li{
	margin-left: 0;
	margin-bottom: 0!important;
	flex: 1;
	background-color: #fff;
	border-radius: 8px 8px 0 0;
	padding: 1em 0.5em 1em;
	display: flex;
	border: 1px solid #ccc;
    justify-content: center;
}

#pairing .tabArea ul.three_tab li.active{
	background-color: rgba(189, 183, 174, 0.16);
	border-bottom: none;
}

#pairing .tabArea ul.three_tab li span {
	width: auto;
	font-weight: bold;
	cursor: pointer;
	font-size: 1.25em;
}


#pairing .tabArea ul.three_tab li span [aria-presse=false]{
	background-color: #b9b2a785;
}

#pairing .tabArea ul.three_tab li span:focus{
	outline: none;
}
#pairing .tabArea ul.three_tab li span:focus-visible{
	outline: thin dotted;
}


.OpentabArea:not(:last-of-type) {
	margin-right: 5px;
}

#pairing .openArea {
	margin-left: 0;
	display: block;
	height: auto;
	padding: 2em 15px;
	opacity: 1;
	transition: opacity 0.5s ease 0s;
	background-color: rgba(189, 183, 174, 0.16);
	border: 1px solid #ccc;
	border-top: none;
}

#win10_Area.openArea,#win8_Area.openArea,#mac_Area.openArea{
    display: none;
}


#pairing .tabArea ul.three_tab li:focus,
#pairing .tabArea ul.three_tab li:hover,
#pairing .tabArea ul.three_tab li:active{
	opacity: 0.5;
}

#contents .stepArea{
    margin-left: 0;
}

#contents .stepArea .openArea ol.stepList{
   counter-reset: square 1;
}

#contents .stepArea .openArea .detailArea ol.stepList{
   counter-reset: square 1;
}

#pairing .openArea figure{
    margin: 2em 0 !important;
}

#contents > .notice_gray{
    margin-left: 1em;
}

#contents .flex-center{
    display: flex;
    justify-content: center;
    margin: 2em auto;
}

#contents .flex-center p{
    width: 45%;
    margin-left: 0;
}



@media (min-width: 641px){
    #contents section{
        margin-left: 1em;
    }
}


@media (max-width: 640px){
	#pairing .tabArea ul.three_tab li{
		padding: 1em 0.1em 1em;
	}

	#pairing .tabArea ul.three_tab li span {
		font-size: 1em;
	}
    #contents > .notice_gray,
    #contents > section > .notice_gray{
        margin-left: 5px;
    }
    
    #contents .flex-center{
        flex-direction: column;
    }
    
    #contents .flex-center p{
        width: auto;
        margin-bottom: 1em;
        margin-left: 0;
    }
    
    #contents .flex-center img{
        width: 100%;
        height: auto;
        max-width: 290px!important;
    }
}

@media (max-width: 480px){
	#pairing .tabArea ul.three_tab li{
		text-align: center;
		display: inline-flex;
		flex-direction: column;
		align-items: center;
	}
	
}

@media (max-width: 380px){
    #contents .stepArea .openArea ol.stepList figure {
        max-width: 300px;
    }
}