@charset "UTF-8";

/* ========================================
   @media screen and (min-width: 768px),print
======================================== */
@media screen and (min-width: 768px),print {
/* voice -------------------------------------*/
#voice .system-contents{
   padding: 137px 0 160px;
}
#voice .system-list {
   width: min(95%, 1600px);
   margin-inline: auto;
   display: block grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 0 32px;
}
#voice .system-list li {
   display: block grid;
   grid-template-rows: subgrid;
   grid-row: span 5;
   margin-bottom: 80px;
}
#voice .system-list li a {
   display: block grid;
   grid-template-rows: subgrid;
   grid-row: span 5;
}
#voice .system-list li .upper-wrap {
   display: flex;
   justify-content: space-between;
   margin-bottom: 10px;
}
#voice .system-list li .system-area {
   color: #B9B9B9;
   font-size: 13px;
   font-weight: 400;
   line-height: 2.30769; /* 230.769% */
   letter-spacing: 0;
}
#voice .system-list li .system-category span {
   color: #FFF;
   text-align: center;
   font-size: 13px;
   font-weight: 400;
   line-height: 2.30769; /* 230.769% */
   letter-spacing: 0;
   padding: 0 10px;
   border-radius: 4px;
   background: #1A1A1A;
   display: block;
}
#voice .system-list li .system-pic {
   margin-bottom: 16px;
   width: 100%;
   height: 240px;
   text-align: center;
}
#voice .system-list li .system-pic img {
   width: auto;
   height: 100%;
   max-width: 100%;
}
#voice .system-list li .system-company {
   font-size: 13px;
   font-weight: 400;
   line-height: 2.30769; /* 230.769% */
   letter-spacing: 0;
   position: relative;
   padding-left: 28px;
   margin-bottom: 10px;
}
#voice .system-list li .system-company::before {
   position: absolute;
   content: "";
   background: url(../images/index/ellipse1.svg)no-repeat;
   background-size: contain;
   width: 10px;
   height: 10px;
   top: 50%;
   left: 10px;
   transform: translateY(-50%);
}
#voice .system-list li .system-ttl-01 {
   font-size: 16px;
   font-weight: 500;
   line-height: 1.75; /* 175% */
   letter-spacing: 0;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* ← 2行でカット */
   -webkit-box-orient: vertical;
   overflow: hidden;
   margin-bottom: 15px;
}
#voice .system-list li .comment-box {
   border-radius: 10px;
   background: #FFF;
   padding: 20px;
   position: relative;
}
#voice .system-list li .system-comment {
   font-size: 13px;
   font-weight: 400;
   line-height: 1.69231; /* 169.231% */
   letter-spacing: 0;
   width: min(95%, 360px);
}
#voice .system-list li .system-illust {
   position: absolute;
   top: -20px;
   right: 20px;
}

/* single */
#voice .system-contents.single {
   background: #F5F5F5;
   width: min(95%, 1200px);
   margin-inline: auto;
   padding: 64px 80px 120px;
   margin-top: 136px;
   margin-bottom: 80px;
}
#voice .system-contents.single .inBox {
   display: grid;
   grid-template-columns: 49.23% 46.92%;
   gap: 40px;
   padding-bottom: 32px;
}
#voice .system-contents.single .inBox .txt-box {
   position: relative;
}
#voice .system-contents.single .system-pic {
   margin: 0;
}
#voice .system-contents.single .system-pic img {
   height: 240px;
   object-fit: contain;
}
#voice .system-contents.single .system-area {
   color: #B9B9B9;
   font-size: 13px;
   font-weight: 400;
   line-height: 1.84615; /* 184.615% */
   margin-bottom: 8px;
   letter-spacing: 0;
}
#voice .system-contents.single .system-company {
   font-size: 24px;
   font-weight: 600;
   line-height: 1.75; /* 175% */
}
#voice .system-contents.single .system-ttl-01 {
   font-size: 16px;
   font-weight: 400;
   line-height: 1.875; /* 187.5% */
   position: absolute;
   bottom: 0;
}
#voice .system-contents.single .comment-box {
   padding: 16px 80px;
   border-radius: 10px;
   background: #FFF;
   display: grid;
   grid-template-columns: 11.38% 85.91%;
   gap: 24px;
   align-items: center;
   margin-bottom: 80px;
}
#voice .system-contents.single .system-illust img {
   width: 100%;
   height: auto;
}
#voice .system-contents.single .system-comment {
   font-size: 13px;
   font-weight: 400;
   line-height: 1.69231; /* 169.231% */
}
#voice .util-btn {
   width: min(95%, 640px);
   margin-inline: auto;
   padding-bottom: 240px;
}
#voice .util-btn a{
   border-radius: 200px;
   background: #1A1A1A;
   display: block;
   color: #FFF;
   text-align: center;
   font-size: clamp(0.75rem, 0.583rem + 0.35vw, 1rem);
   font-weight: 500;
   line-height: 1.875; /* 187.5% */
   position: relative;
   padding: 24px 0;
   letter-spacing: 0;
}
#voice .util-btn a::after {
   position: absolute;
   content: "＞";
   color: #FFF;
   text-align: center;
   font-family: "Hanken Grotesk";
   font-size: 13px;
   font-weight: 900;
   line-height: 1.3333; /* 133.333% */
   top: 50%;
   right: 40px;
   transform: translateY(-50%);
}
#voice .util-btn.toworks {
   padding: 40px 0 0;
}
#voice .util-btn.toworks a {
   border: 1px solid #1A1A1A;
   background: #FFF;
   color: #1A1A1A;
}
#voice .util-btn.toworks a::after {
   color: #1A1A1A;
}

}


/* ========================================
@media screen and (min-width:768px) and (max-width:1640px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1640px) {
/* voice -------------------------------------*/
#voice .system-contents{
   padding: 8.354vw 0 9.756vw;
}
#voice .system-list {
   gap: 0 1.951vw;
}
#voice .system-list li {
   margin-bottom: 4.878vw;
}
#voice .system-list li .upper-wrap {
   margin-bottom: 0.61vw;
}
#voice .system-list li .system-area {
   font-size: clamp(0.625rem, 0.46rem + 0.34vw, 0.813rem);
}
#voice .system-list li .system-category span {
   font-size: clamp(0.625rem, 0.46rem + 0.34vw, 0.813rem);
   padding: 0 0.61vw;
}
#voice .system-list li .system-pic {
   margin-bottom: 0.976vw;
   height: 14.634vw;
}
#voice .system-list li .system-company {
   font-size: clamp(0.625rem, 0.46rem + 0.34vw, 0.813rem);
   padding-left: 1.707vw;
   margin-bottom: 0.61vw;
}
#voice .system-list li .system-company::before {
   width: 0.61vw;
   height: 0.61vw;
   left: 0.61vw;
   transform: translateY(-50%);
}
#voice .system-list li .system-ttl-01 {
   font-size: clamp(0.75rem, 0.53rem + 0.46vw, 1rem);
   margin-bottom: 0.915vw;
}
#voice .system-list li .comment-box {
   border-radius: 0.61vw;
   padding: 1.22vw;
}
#voice .system-list li .system-comment {
   font-size: clamp(0.625rem, 0.46rem + 0.34vw, 0.813rem);
   width: 20.95vw;
}
#voice .system-list li .system-illust {
   top: -1.22vw;
   right: 0.22vw;
}
#voice .system-list li .system-illust img {
   width: 6.10vw;
   height: 6.10vw;
}

}


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

/* voice -------------------------------------*/
#voice .system-contents{
   padding: 11.5vw 0 24.5vw;
}
#voice .system-list {
   width: 82.13vw;
   margin-inline: auto;
   display: block grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
   gap: 10.35vw;
   margin-bottom: 14.2vw;
}
#voice .system-list li a {
   display: block grid;
   grid-template-rows: subgrid;
   grid-row: span 5;
}
#voice .system-list li .upper-wrap {
   display: flex;
   justify-content: space-between;
   margin-bottom: 0.85vw;
}
#voice .system-list li .system-area {
   color: #B9B9B9;
   font-size:3.14vw;
   font-weight: 400;
   letter-spacing: 0;
}
#voice .system-list li .system-category {
   position: relative;
   top: -1vw;
}
#voice .system-list li .system-category span {
   color: #FFF;
   text-align: center;
   font-size:3.14vw;
   font-weight: 400;
   letter-spacing: 0;
   padding: 0.7vw 2.42vw;
   border-radius: 0.97vw;
   background: #1A1A1A;
   display: block;
   line-height: 1.55;
}
#voice .system-list li .system-pic {
   margin-bottom: 4.83vw;
   width: 100%;
   height: 38.65vw;
   text-align: center;
}
#voice .system-list li .system-pic img {
   width: auto;
   height: 100%;
   max-width: 100%;
}
#voice .system-list li .system-company {
   font-size:3.14vw;
   font-weight: 400;
   line-height: 1.07692;
   letter-spacing: 0;
   position: relative;
   padding-left: 4.5vw;
   margin-bottom: 2.7vw;
}
#voice .system-list li .system-company::before {
   position: absolute;
   content: "";
   background: url(../images/index/ellipse1.svg)no-repeat;
   background-size: contain;
   width: 2.42vw;
   height: 2.42vw;
   top: 50%;
   left: -0.1vw;
   transform: translateY(-50%);
}
#voice .system-list li .system-ttl-01 {
   font-size:3.865vw;
   font-weight: 500;
   line-height: 1.75; /* 175% */
   letter-spacing: 0;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   margin-bottom: 3vw;
   overflow: clip;
}
#voice .system-list li .comment-box {
   border-radius: 2.42vw;
   background: #FFF;
   padding: 4.83vw 2.42vw;
   position: relative;
   display: grid;
   grid-template-columns: 14.49vw 1fr;
   gap: 2.42vw;
   align-items: center;
}
#voice .system-list li .system-comment {
   font-size:3.14vw;
   font-weight: 400;
   line-height: 1.69231; /* 169.231% */
   letter-spacing: 0;
   order: 2;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: clip;
   width: 57.97vw;
}
#voice .system-list li .system-illust {
   order: 1;
}


/* single */
#voice .system-contents.single {
   background: #F5F5F5;
   width: 100%;
   padding: 9.66vw 0 19.32vw;
}
#voice .system-contents.single .inBox {
   display: grid;
   width: 89.37vw;
   margin-inline: auto;
}
#voice .system-contents.single .inBox .txt-box {
   display: contents;
}
#voice .system-contents.single .system-pic {
   margin: 0 0 3.86vw;
   order: 3;
}
#voice .system-contents.single .system-pic img {
   height: 57.97vw;
}
#voice .system-contents.single .system-area {
   color: #B9B9B9;
   font-size:3.14vw;
   font-weight: 400;
   line-height: 1.84615; /* 184.615% */
   margin-bottom: 1.93vw;
   letter-spacing: 0;
   order: 1;
}
#voice .system-contents.single .system-company {
   font-size:4.831vw;
   font-weight: 500;
   line-height: 1.7;
   margin-bottom: 3.86vw;
   order: 2;
}
#voice .system-contents.single .system-ttl-01 {
   font-size:3.382vw;
   font-weight: 400;
   line-height: 1.85714;
   order: 4;
   margin-bottom: 5.80vw;
}
#voice .system-contents.single .comment-box {
   padding: 3.86vw 5.80vw;
   border-radius: 2.42vw;
   background: #FFF;
   display: grid;
   grid-template-columns: 15.46vw 51.93vw;
   gap: 5.80vw;
   align-items: flex-start;
   margin-bottom: 9.66vw;
   width: 89.37vw;
   margin-inline: auto;
}
#voice .system-contents.single .system-comment {
   font-size:3.14vw;
   font-weight: 400;
   line-height: 1.84615;
}
#voice .util-btn {
   width: 72.46vw;
   margin-inline: auto;
   padding-bottom: 38.39vw;
   padding-top: 15.46vw;
}
#voice .util-btn a{
   border-radius: 48.31vw;
   background: #1A1A1A;
   display: block;
   color: #FFF;
   text-align: center;
   font-size:3.382vw;
   font-weight: 500;
   line-height: 1.57143;
   position: relative;
   padding: 4.59vw 0;
   letter-spacing: 0;
}
#voice .util-btn a::after {
   position: absolute;
   content: "＞";
   color: #FFF;
   text-align: center;
   font-family: "Hanken Grotesk";
   font-size: 2.42vw;
   font-weight: 900;
   line-height: 1;
   top: 50%;
   right: 5.80vw;
   transform: translateY(-50%);
}
#voice .util-btn.toworks {
   padding: 15.46vw 0 0;
}
#voice .util-btn.toworks a {
   border: 0.2vw solid #1A1A1A;
   background: #FFF;
   color: #1A1A1A;
   padding: 1.93vw 8.32vw;
}
#voice .util-btn.toworks a::after {
   color: #1A1A1A;
}
#voice .wysiwyg {
   width: 89.37vw;
   margin-inline: auto;
}

}