@charset "utf-8";/* @latest 2022.07.29 JRA */

.quick138 {padding-bottom:10px; border:1px solid transparent; width: 100%; height: 100%; float: left; background: #fdf4db; position: relative; box-sizing: border-box; } 
.quick138 .titlebox { width: 100%; float: left; padding: 0 15px; box-sizing: border-box; height: 58px; line-height: 58px; } 
.quick138 .titlebox .qTitle { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 
.quick138 .q138_wrap { width: 100%; float: left; box-sizing: border-box; text-align: center; padding: 0 15px; } 
.quick138 .q138_wrap div.q138box { width: 50%; float: left; padding: 0 15px 0 6px; text-align: left; position: relative; box-sizing: border-box; border-radius: 30px; height: 100%; border: 2px solid transparent; } 
.quick138 .q138_wrap div.q138box a { display: block; } 
.quick138 .q138_wrap div.q138box div.icon { float: left; text-align: center; position: absolute; top: 50%; transform: translateY(-50%); box-sizing: border-box; border: 1px solid rgb(0 0 0 / 21%); padding: 8px; border-radius: 100%; width: 36px; height: 36px; } 
.quick138 .q138_wrap div.q138box div.icon img { max-width: 18px; max-height: 18px; display: inline-block; vertical-align: middle; } 
.quick138 .q138_wrap div.q138box p { font-size: 14px; color: #000; line-height: 42px; width: 100%; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left:45px; } 
.quick138 .q138_wrap div.q138box:hover p { font-weight: 600; } 
.quick138 .q138_wrap div.q138box:hover p:after { opacity: 1; right: 13px; } 
.quick138 .q138_wrap div.q138box:hover>a>span.arr { opacity:1; right: 18px; } 
.quick138 .q138_wrap div.q138box a>span.arr { right: 24px; font-weight: 400; opacity: 0; transition: all 0.4s; width: 6px; height: 6px; border-style: solid; border-width: 2px 2px 0 0; border-color: inherit; position: absolute; top: 18px; transform: rotate(45deg); } 
.quick138 .q138_wrap div.q138box:hover { border: 2px solid #333; } 



/* height set */

@media (min-width:700px){
.layout_01 .quick138 .q138_wrap div.q138box{width:25%;}
}

.layout_height_L .quick138 .titlebox{    height: 50px; line-height: 50px;}
.layout_height_L .quick138 .q138_wrap div.q138box:nth-child(4)~div{display:none;}
.layout_height_M .quick138 .q138_wrap div.q138box:nth-child(8)~div{display:none;}


.layout_04 .quick138 .q138_wrap div.q138box a>span.arr{display:none;}



@media (min-width:800px) and (max-width:1100px){
    .layout_03 .quick138 .q138_wrap div.q138box a>span.arr{display:none;}

}

@media (max-width:799px){
 .quick138 .titlebox { height: 48px; line-height: 48px; } 
 }

@media (max-width:599px){
 .quick138 .q138_wrap div.q138box p { width: 80%; } 
 }

 .div_wrap.border-radius .quick138 { border-radius: 15px; }