@charset "UTF-8";

#main .filter-controls .item { text-align: center; background: #EFEFEF; }
#main .filter-controls .item select { border: 1px solid #003C93; }
#main .filter-controls .item button[type="submit"] { display: inline-block; color: #fff; background: #003C93; }
#main .tme-post { border-bottom: 1px solid #CBCBCB; }
#main .tme-post:first-child { border-top: 1px solid #CBCBCB; }
#main .tme-post .image { text-align: center; }
#main .tme-post .features { display: flex; flex-wrap: wrap; }
#main .tme-post .feature { display: inline-block; text-align: center; }
#main .tme-post .feature-green { color: #fff; background: #64C78B; }
#main .tme-post .feature-red { color: #fff; background: #EF6478; }
#main .tme-post .feature-blue { color: #fff; background: #4678DB; }
#main .tme-post .feature-yellow { color: #646464; background: #F9EF32; }
#main .tme-post .ratio-list .ratios { display: flex; flex-wrap: wrap; }
#main .tme-post .ratio-list .ratio { display: inline-block; text-align: center; border: 1px solid #000; }
#main .tme-post .ratio-list .ratio.active { background: #F9EF32; }
#main .tme-post .spec { clear: both; }
#main .tme-post .probe-content { margin-bottom: 1.0em; }


/**
 * SP
 */
@media screen and (max-width: 767px) {

    #main .filter-controls .item { padding: calc(10vw * var(--to-vw)) calc(20vw * var(--to-vw)); margin-bottom: calc(20vw * var(--to-vw)); }
    #main .filter-controls .item select { width: calc(350vw * var(--to-vw)); padding: calc(10vw * var(--to-vw)); border-radius: calc(25vw * var(--to-vw)); margin: calc(10vw * var(--to-vw)) 0; }
    #main .filter-controls .item button[type="submit"] { padding: calc(5vw * var(--to-vw)) calc(20vw * var(--to-vw)); margin-left: calc(20vw * var(--to-vw)); }
    #main .tme-post { margin: calc(30vw * var(--to-vw)) 0; padding-bottom: calc(30vw * var(--to-vw)); }
    #main .tme-post .image { text-align: right; margin-top: calc(-60vw * var(--to-vw)); }
    #main .tme-post .image img { max-width: 40%; }
    #main .tme-post .headline { margin: calc(10vw * var(--to-vw)) 0; }
    #main .tme-post .features { margin: calc(10vw * var(--to-vw)) calc(-5vw * var(--to-vw)); }
    #main .tme-post .feature { width: calc(50% - calc(10vw * var(--to-vw))); margin: 0 calc(5vw * var(--to-vw)) calc(10vw * var(--to-vw)); padding: calc(5vw * var(--to-vw)) calc(10vw * var(--to-vw)); border-radius: calc(5vw * var(--to-vw)); }
    #main .tme-post .ratio-list .ratios { margin: 0 calc(10vw * var(--to-vw)); }
    #main .tme-post .ratio-list .ratio { margin: calc(3vw * var(--to-vw)); padding: 0 calc(5vw * var(--to-vw)); }

}

/**
 * PC・タブレット
 */
@media print, screen and (min-width: 768px) {

    #main .filter-controls .items { display: flex; flex-wrap: wrap; margin: 0 -10px; }
    #main .filter-controls .item { width: calc(33.33% - 20px); margin: 0 10px 20px; padding: 10px 20px; }
    #main .filter-controls .item select { font-size: 14px; width: 100%; padding: 10px; border-radius: 20px; margin: 10px 0; }
    #main .filter-controls .item button[type="submit"] { font-size: 14px; padding: 5px 20px; }
    #main .tme-post { margin: 30px 0; padding-bottom: 30px; }
    #main .tme-post::after { content: ""; display: block; clear: both; }
    #main .tme-post .image { float: left; width: 25%; }
    #main .tme-post .text { float: right; width: 75%; }
    #main .tme-post .headline { margin: 10px 0; }
    #main .tme-post .features { margin: 10px -5px; }
    #main .tme-post .feature { width: calc(25% - 10px); margin: 0 5px; padding: 5px 10px; border-radius: 5px; }
    #main .tme-post .ratio-list .ratios { margin: 0 10px; }
    #main .tme-post .ratio-list .ratio { margin: 3px; padding: 0 5px; }

}