@charset "UTF-8";
#contents *{
    font-size: 1rem;
}

#contents .flex {
	display: flex;
    flex-wrap: wrap;
    margin: 1em 0;
}

#contents .menu{
	width: 21%;
    margin: 1em;
}

#contents .menu a {
    display: block;
    padding: 1em 0.5em;
    border: #7b7a7a 3px solid;
    border-radius: 13px;
    text-align: center;
	min-height: 185px;
}

#contents .menu a:hover,.menu a:focus,.menu a:active {
	opacity: 0.7;
}

#contents .menu p {
    margin-left: 0;
    text-align: left;
}

#contents .menu .icon-link {
    background: url(/support/software/videotvsideview/img/ico_link.png) no-repeat 0 8px;
    display: inline-block;
}

@media (max-width: 640px){     
    #contents .menu{
        width: 45%;
        margin: 1em 0 0 1em;
    }

    #contents .menu a {
		padding: 0 0.5em;
		height: 160px;
	    min-height: auto;	
    }
}

@media (max-width: 424px){
    #contents .menu a {
    	height: 175px;
		min-height: auto;
    }
}

@media (max-width: 360px){
    #contents .menu a {
    	height: 155px;
		min-height: auto;
    }
}

/* 20230106 */

#contents .tabArea ul > li button {
    background-color: #f0f0f0;
    width: 100%;
    height: 100%;
    border-radius: 8px 8px 0 0;
}

#contents .tabArea ul > li span {
    font-size: 1.25rem;
    cursor: pointer;
    font-weight: bold;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 0.5em;
}

#contents .tabArea ul > li.active button {
    background-color: #fff;
    border-bottom: none;
}

#contents .tabArea ul > li.active {
    background-color: #fff;
    border-bottom: none;
}


#contents .tabArea ul > li button :focus {
    opacity: 0.7;
    outline: auto;
    outline-color: black;
}

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

#contents .tabArea ul > li button :focus-visible {
    opacity: 0.7;
    outline: auto;
    outline-color: black;
}