@charset "utf-8";
/*--------------------------------
    cuppingTest
    created: 2025.07.03
---------------------------------*/

#article h2 {
    display: flex;
    align-items: center;
    padding: 0 20px;
    margin: 0;
}

h2#applicable-devices { background: url("../images/index/bg_red.png") no-repeat right center; height: 47px;}

h2#overview { background: url("../images/index/bg_orange.png") no-repeat right center; height: 47px; }

h2#apply { background: url("../images/index/bg_green.png") no-repeat right center; height: 47px; }

.basicTable th {
	background-color: #666666;
	color: white;
	font-weight: bold;
}

#article .section { margin-bottom:  80px;}
#article .sectionEnd { padding-bottom: 80px !important;}
#article .box { padding: 0 20px;}


#box_applicable-devices h3 {
	font-size: 110%;
    font-family: "Shin Go Bold", sans-serif;
    font-weight: 700;
	line-height: 1.6;
	margin: 30px 0;
}

#box_applicable-devices figure {
    margin: 30px 0;
}

#box_applicable-devices figure img {
    max-width: 40%;
    margin: 0 auto;
}


#box_overview { margin: 30px 0; }

#box_overview p { margin-bottom: 1rem; }

#box_overview table td:not(:nth-child(2)) { text-align: center;}

#box_overview table td:last-child { min-width: 150px;}


#box_apply { 
    margin: 30px 0 0;
    display: flex;
    column-gap: 50px;
}

#box_apply a {
    display: flex;
    justify-content: space-between;
    column-gap: 10px;
    width: 280px;
    background-color: #666666;
    border: 3px solid #00b050;
    padding: 15px;
}

#box_apply a span {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

#box_apply a:hover,
#box_apply a:active { text-decoration: underline; color: white;}

#box_apply a figure { align-self: flex-end;}

#box_apply ul { list-style: disc; padding-left: 1rem;}
#box_apply ul li { margin-bottom: 0.5rem;}


@media only screen and (max-width: 1025px) {

	#contents h1 {
		text-shadow: 2px 2px 3px #000;
		z-index: 99;
	}
    
    #article .box { padding: 0;}
    
    #box_overview table td:nth-child(2) { min-width: 150px;}
    
    #box_apply {
        flex-wrap: wrap;
        gap: 30px 10px;
    }
	
}

@media only screen and (max-width: 650px) {

    #box_applicable-devices figure img { max-width: 80%;}
    
     #box_apply {
         align-items: center;
        justify-content: center;
    }
    
}