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

#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; }

#article h2 img { height: 16px; }

.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 ul {
    list-style: disc;
    margin-left: 1em;
}

#box_applicable-devices ul li { margin-bottom: 0.5em;}

#box_applicable-devices .pic {
    display: flex;
    justify-content: center;
    column-gap: 50px;
    align-items: flex-end;
    margin: 50px 0 0;
}

#box_applicable-devices .pic figure:first-child { flex-basis: 200px;}

#box_applicable-devices .pic figure:last-child {
    display: flex;
    column-gap: 0;
}

#box_applicable-devices .pic figure:last-child img { 
    flex-basis: 200px;
    flex-shrink: 0;
}


#box_overview { margin: 30px 0; }

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

#box_overview table td { text-align: center;}

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

#box_overview table td figure { 
    width: 230px;
    margin: 0 auto;
    padding: 15px;
}


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

#box_apply a.measurement-conditions {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    width: 33.3%;
    height: 180px;
    background-color: #666666;
    border: 3px solid #239CFF;
    padding: 15px;
    color: white;
    text-decoration: none;
}

#box_apply a.measurement-conditions figure {
    display: flex;
    justify-content: space-between;
}

#box_apply a.measurement-conditions figure figcaption {
    padding-left: 1em;
}

#box_apply a.measurement-conditions figure img { 
    align-self: flex-end;
    max-width: 100px;
}

#box_apply a span { font-weight: 500;}

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


#box_apply div.regular-apply {
    display: flex;
    column-gap: 0;
    width: 99.9%;
    border: 3px solid #00b050;
}

#box_apply div.regular-apply a {
    display: block;
    width: 33.3%;
    height: 180px;
    background-color: #666666;
    padding: 15px;
    color: white;
    text-decoration: none;
}

#box_apply div.regular-apply a:nth-child(2) {
    border-right: 3px solid #00b050;
    border-left: 3px solid #00b050;
}

#box_apply div.regular-apply a figure {
    display: flex;
    height: 100%;
     justify-content: space-between;
    align-content: space-between;
    column-gap: 30px;
}

#box_apply div.regular-apply a figure img { align-self: flex-end;}



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

	#contents h1 {
		text-shadow: 2px 2px 3px #000;
		z-index: 99;
	}
    
    #article .box { padding: 0;}
    
    #box_applicable-devices .pic {
        flex-wrap: wrap;
        gap: 30px;
    }
    
    #box_apply a.measurement-conditions,
    #box_apply div.regular-apply a {
        height: auto;
    }
    
    #box_apply a.measurement-conditions figure,
    #box_apply div.regular-apply a figure {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    #box_apply a.measurement-conditions figure img,
    #box_apply div.regular-apply a figure img {
        margin-left: auto;
    }
	
}

@media only screen and (max-width: 650px) {
    
    #box_applicable-devices .pic figure:last-child { 
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }
    
    #box_applicable-devices .pic figure:last-child img {  flex-shrink: 1;}
    
    #box_apply a.measurement-conditions { width: 100%;}
    
    #box_apply div.regular-apply {
        flex-wrap: wrap;
        gap: 0;
    }
    
    #box_apply div.regular-apply a { 
        width: 100%;
        min-height: 180px;
    }
        
    #box_apply div.regular-apply a:nth-child(2) {
        border-right: 0px solid rgba(0,0,0,0);
        border-left: 0px solid rgba(0,0,0,0);
        border-top: 3px solid #00b050;
        border-bottom: 3px solid #00b050;
    }
    
    #box_apply div.regular-apply a figure {
        flex-wrap: nowrap;
        gap: 0;
    }
    
}