@charset "UTF-8";

/* ========================================
   @media screen and (min-width: 768px),print
======================================== */
@media screen and (min-width: 768px),print {

/* voice -------------------------------------*/
#voice .system-contents{
   width: min(95%, 1320px);
   margin-inline: auto;
}
#voice .system-list {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 2.5rem;
}
#voice .system-list li{ 
   position: relative;
}
#voice .system-list li a:hover{ text-decoration: none; }
#voice .system-list li .label {
   position: absolute;
   top: -20px;
   right: -20px;
   z-index: 2;
}
#voice .pic-frame {
   position: relative;
}
#voice .system-pic{width: 100%;height: 13.125rem;overflow: hidden;text-align: center;margin-bottom: 15px;}
#voice .system-pic img{width: 100%;height: 100%;object-fit: cover;}
#voice .system-area{
   font-weight: 500;
   font-size: 14px;
   letter-spacing: 0.05em;
   line-height: 1.8571428;
   text-align: center;
   color: #a78f43;
   background: #F8F8F8;
   position: absolute;
   bottom: 0;
   left: 0;
   padding: 3px 38px;
}
#voice .system-ttl-01{font-size: 1em;margin-bottom: 10px;line-height: 1.625;font-weight: 700;letter-spacing: 0.05em;}
#voice .system-list li .label {
   position: absolute;
   top: -20px;
   right: -20px;
   z-index: 2;
   width: 55px;
   height: 82px;
   color: #fff;
   font-size: 16px;
   font-weight: 600;
   line-height: 1.1875;
   letter-spacing: 0;
   text-align: center;
   padding: 1.2rem 0 0;
}
#voice .system-list li .label .tit {
   display: inline-block;
   border-bottom: 1px solid #FFFFFF;
   margin-bottom: 0.25rem;
}
#voice .bg-red {
   background-color: #9F434A;
 }
 #voice .bg-green {
   background-color: #5E8958;
 }
 #voice .bg-gold {
   background-color: #A78F43;
 }
 #voice .bg-blue {
   background-color: #436788;
 }
}


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

/* voice -------------------------------------*/
#voice .system-list{
   order: 2;
   gap: 7vw 2.415vw;
}
#voice .system-list li{ 
   position: relative;
}
#voice .system-list li a:hover{ text-decoration: none; }
#voice .system-list li .label {
   position: absolute;
   top: -1.4vw;
   right: 1vw;
   z-index: 2;
   width: 7.25vw;
}
#voice .pic-frame {
   position: relative;
}
#voice .system-pic{width: 100%;height: 12.5rem;overflow: hidden;text-align: center;margin-bottom: 1.8vw;}
#voice .system-pic img{width: 100%;height: 100%;object-fit: cover;}
#voice .system-area{
   font-weight: 500;
   font-size:2.898vw;
   letter-spacing: 0.05em;
   line-height: 2.16666;
   text-align: center;
   color: #a78f43;
   background: #F8F8F8;
   position: absolute;
   bottom: 0;
   left: 0;
   padding: 0 3.65vw;
}
#voice .system-ttl-01{font-size: 3.382vw;margin-bottom: 1vw;line-height: 1.7142857;font-weight: 700;letter-spacing: 0.05em;}
#voice .system-list li .label {
   position: absolute;
   top: -1.8vw;
   right: 1vw;
   z-index: 2;
   width: 7.25vw;
   color: #fff;
   font-size: 1.932vw;
   font-weight: 600;
   line-height: 1.25;
   letter-spacing: 0;
   text-align: center;
   padding: 2.45vw 0;
}
#voice .system-list li .label .tit {
   display: inline-block;
   border-bottom: 0.2vw solid #FFFFFF;
   margin-bottom: 0.5vw;
   padding: 0 0 0.4vw;
}
#voice .bg-red {
   background-color: #9F434A;
 }
 #voice .bg-green {
   background-color: #5E8958;
 }
 #voice .bg-gold {
   background-color: #A78F43;
 }
 #voice .bg-blue {
   background-color: #436788;
 }
}