@charset "UTF-8";

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

/* voice -------------------------------------*/
#voice .system-list {
   width: min(95%, 1560px);
   margin-inline: auto;
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 40px;
   margin-bottom: 60px;
}
#voice .system-list .system-pic {
   margin-bottom: 0;
   width: 100%;
   height: 260px;
   text-align: center;
}  
#voice .system-list .system-pic img{
   width: auto;
   height: 100%;
   max-width: 100%;
}
#voice .system-list li .content{
   background: #e3e3e3;
   padding: 8px 0 0;
}
#voice .system-list li .content .name-wrap {
   display: flex;
   gap: 9px;
   border-bottom: 1px solid #FFFFFF;
   padding: 0 20px 5px;
}
#voice .system-area {
   font-weight: 500;
   font-size: 12px;
   letter-spacing: 0.05em;
   line-height: 2.16666;
   color: #d75b43;
}
#voice .system-name {
   font-weight: 500;
   font-size: 12px;
   letter-spacing: 0.05em;
   line-height: 2.16666;
   color: #1a1a1a;
}
#voice .system-list li .content .system-ttl-01 {
   font-weight: bold;
   font-size: 14px;
   letter-spacing: 0.05em;
   line-height: 1.7142857;
   color: #1a1a1a;
   border-top: 1px solid #AAAAAA;
   padding: 15px 20px 20px;
}

/* single */
#voice .name-wrap {
   display: flex;
   gap: 9px;
}
.system-date{ text-align: center;}

#voice .system-contents {
   background-color:#fff;
   padding: 3rem 3rem 3rem 3rem;
   width: min(95%, 1650px);
   margin:0 auto 30px auto;
}
#voice #main-voice {
   width: min(95%, 1560px);
   margin-inline: auto;
}



#voice .system-category {margin: 4px 0 0px 0;text-align: left;}
#voice .system-category.no-category {margin-right: -1rem;}
#voice .system-category span {background: #D75B43;color: #fff;font-size: 12px;font-weight: 400;letter-spacing: 0.05em;line-height: 2;
padding: 0.2rem 0.25rem;margin: 0 10px 5px 0;width: -moz-fit-content;width: fit-content; display: inline-block;}
#voice .systemdetail .system-category{ text-align: center;}


#voice .cate-list {background: #fff;width: 1000px;margin: 0 auto 50px;padding: 30px 50px 20px;border:1px solid #333;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-wrap: wrap;flex-wrap: wrap;display:-webkit-box;display:-ms-flexbox;display:flex;}
#voice .cate-list .cate-ttl {border-bottom: none;padding-bottom: 0;margin-bottom: 0;margin: 10px 0 0px 0;font-size: 18px;font-weight: 700;width: 150px;line-height: 1;}
#voice .cate-list .list-frame{width: 730px;}
#voice .cate-list span {display: inline-block;margin-right: 20px;}
#voice .cate-list a {background: #333333;color: #ffffff;font-size: 14px;font-size: clamp(0.75rem, 0.667rem + 0.17vw, 0.875rem);font-weight: 400;letter-spacing: 0.05em;line-height: 2;padding-block: 16px;padding-block: clamp(0.3rem, 0.167rem + 0vw, 1rem);padding-inline: 15px;text-align: center;width: -moz-fit-content;width: fit-content;margin-bottom: 8px;margin-right: 8px;display: inline-block;}
#voice .cate-list span a:hover {text-decoration: none;}

}






/* ========================================
@media screen and (min-width:768px) and (max-width:1640px)
======================================== */
@media screen and (min-width:768px) and (max-width:1640px) {
   /* voice -------------------------------------*/
   #voice .enttl {
      font-size: 1.22vw;
      margin-bottom: 0.976vw;
   }
   #voice h2 {
      font-size: 2.439vw;
      margin-bottom: 3.537vw;
   }
   #voice .system-list {
    width: 100%; /* 95.122vwから変更 */
    max-width: 1540px; /* 最大幅を設定 */
    gap: 2.439vw;
    margin-bottom: 3.659vw;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-inline: auto;
    padding: 0 2vw; /* 左右に余白を追加 */
    box-sizing: border-box; /* パディングを含めた幅計算 */
   }
   #voice .system-list li {
      min-width: 0; /* グリッドアイテムのはみ出し防止 */
   }
   #voice .system-list .system-pic{
      width: 100%; /* 追加 */
      height: 15vw; /* 追加 */
      display: block; /* 追加 */
   }

   #voice .system-list .system-pic img{
      width: 100%; /* 追加 */
      height: 15vw; /* 追加 */
      display: block; /* 追加 */
   }
   #voice .system-list li .content{
      padding: 0.488vw 0;
      min-width: 0; /* テキストのはみ出し防止 */
   }
   #voice .system-list li .content .name-wrap {
      gap: 0.549vw;
      padding: 0 1.22vw 0.305vw;
   }
   #voice .system-list li .content .name-wrap .system-area {
      font-size: clamp(0.625rem, 0.515rem + 0.23vw, 0.75rem);
   }
   #voice .system-list li .content .name-wrap .system-name {
      font-size: clamp(0.625rem, 0.515rem + 0.23vw, 0.75rem);
   }
   #voice .system-list li .content .system-ttl-01 {
      padding: 0.915vw 1.22vw 0.22vw;
      word-wrap: break-word; /* 長いタイトル対応 */
      overflow-wrap: break-word; /* 長いタイトル対応 */
   }
}



/* ========================================
@media screen and (min-width:768px) and (max-width:1000px)
======================================== */
@media screen and (min-width:768px) and (max-width:1000px) {
#voice .cate-list {background:#fff;width:100%;margin:0 auto 5vw;padding:3vw 5vw 2vw;border:0.1vw solid #333;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-wrap:wrap;flex-wrap:wrap;display:-webkit-box;display:-ms-flexbox;display:flex;}
#voice .cate-list .cate-ttl {border-bottom:none;padding-bottom:0;margin-bottom:0;margin: 0.8vw 0 0vw 0;font-size:1.8vw;font-weight:700;width: 21%;line-height:1;}
#voice .cate-list .list-frame {width: 73%;}
#voice .cate-list span {display:inline-block;margin-right:2vw;}
#voice .cate-list a {background:#333333;color:#ffffff;font-size:1.4vw;font-weight:400;/* letter-spacing:0.25vw; */line-height:2;/* padding-block:1.6vw; *//* padding-inline:1.5vw; */text-align:center;width:fit-content;/* margin-bottom:0.8vw; *//* margin-right:0.8vw; */display:inline-block;}
#voice .cate-list span a:hover {text-decoration:none;}
}



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

/* voice -------------------------------------*/
#voice .system-list {
   width: 94.205vw;
   margin-inline: auto;
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 4.8vw 2.4vw;
   margin-bottom: 9.2vw;
}
#voice .system-list .system-pic {
   margin-bottom: 0;
   width: 100%;
   height: 33.335vw;
   text-align: center;
}  
#voice .system-list .system-pic img{
   width: auto;
   height: 100%;
   max-width: 100%;
} 
#voice .system-list .system-pic img{
   width: auto;
   height: 33.335vw;
}
#voice .system-list li .content{
   background: #e3e3e3;
   padding: 0;
   height: 25.5vw;
}
#voice .system-list li .content .name-wrap {
   display: flex;
   gap: 2vw;
   border-bottom: 0.2vw solid #FFFFFF;
   padding: 1.2vw 2.4vw 0.5vw;
}
#voice .system-area {
   font-weight: 500;
   font-size:2.898vw;
   letter-spacing: 0.05em;
   line-height: 2.16666;
   color: #d75b43;
}
#voice .system-name {
   font-weight: 500;
   font-size:2.898vw;
   letter-spacing: 0.05em;
   line-height: 2.16666;
   color: #1a1a1a;
}
#voice .system-list li .content .system-ttl-01 {
   font-weight: bold;
   font-size:3.14vw;
   letter-spacing: 0.05em;
   line-height: 1.69230769;
   color: #1a1a1a;
   border-top: 0.2vw solid #AAAAAA;
   padding: 2vw 2.4vw 0;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
   -webkit-line-clamp: 2;
}

/* single */
#voice .name-wrap {
   display: flex;
   gap: 9px;
}
#voice .system-contents {
   width: 100%;
   padding: 4vw 2vw 4vw 2vw;
   margin:0 auto 10vw auto;
}
#voice #main-voice {
   width: 94.205vw;
   margin-inline: auto;
}

.system-date{
   text-align: center;
}


#voice .system-category {margin: 1vw 0 0px 0;text-align: left;}
#voice .systemdetail .system-category {margin-bottom: 0;text-align: center;}
#voice .system-category.no-category {margin-right: -1vw;}
#voice .system-category span {background: #D75B43;color: #fff;font-size: 2.899vw;font-weight: 400;letter-spacing: 0.05em;line-height: 1.6;padding: 0.5vw 1.831vw;width: -moz-fit-content;width: fit-content;margin:0 1vw 0.5vw 0;display: inline-block;}

#voice .cate-list{background:#fff;width: 94%;margin:0 auto 12.08vw;padding: 5.25vw 6.08vw 4.83vw 6.08vw;border:0.24vw solid #333;}
#voice .cate-list .cate-ttl{border-bottom:none;padding-bottom:0;margin-bottom:0;margin: 2.41vw 0 4vw 0;font-size:4.35vw;font-weight:700;width:100%;line-height:1;letter-spacing:0.25vw;text-align: center;}
#voice .cate-list .list-frame{width:100%;}
#voice .cate-list span{display:inline-block;margin-right:4.83vw;}
#voice .cate-list a{background:#333333;color:#ffffff;font-size:3.38vw;font-weight:400;letter-spacing:0.25vw;line-height:2;padding-block: 1.86vw;padding-inline: 3.62vw;text-align:center;width:fit-content;margin-bottom: 1.2vw;margin-right: 1.2vw;display:inline-block;}
#voice .cate-list span a:hover{text-decoration:none;}




}