/* ------------------------------ */
/* ------------------------------ */
/* COMMENT */
.Comment {
   display: flex;
   flex-direction: column;
   gap: calc(15px * var(--scale));
   width: 100%;
   min-height: calc(150px * var(--scale));
   padding: calc(15px * var(--scale));
   overflow: auto;
   background-color: var(--background-c);
   border-radius: calc((var(--border-radius-2) * var(--scale)));
}

.Comment .body {
   display: grid;
   grid-template-columns: calc(180px * var(--scale)) auto;
   gap: calc(15px * var(--scale));
   width: 100%;
   min-height: calc(150px * var(--scale));
   overflow: auto;
}

.Comment .body .image {
   display: flex;
   justify-content: center;
   align-items: center;
   width: auto;
   aspect-ratio: var(--aspect-ration);
   overflow: visible;
}

.Comment .body .info {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: calc(15px * var(--scale));
   width: 100%;
   min-height: calc(150px * var(--scale));
   overflow: auto;
}

.Comment .body .name {
   display: block;
   width: 100%;
   height: calc(50px * var(--scale));
   padding: calc(15px * var(--scale));
   overflow: visible;
   font-size: calc(var(--font-size-5) * var(--scale));
   font-weight: var(--font-weight-4);
}

.Comment .body .textarea {
   display: block;
   width: 100%;
   min-height: calc(150px * var(--scale));
   padding: calc(25px * var(--scale));
   overflow: auto;
   background-color: var(--background-c);
   border-radius: calc((var(--border-radius-2) * var(--scale)));
   color: var(--text-color-a);
   font-size: calc(var(--font-size-4) * var(--scale));
   font-weight: var(--font-weight-2);
   line-height: 1.5;
   resize: none;
}

.Comment .submit {
   display: block;
   width: 100%;
   height: calc(60px * var(--scale));
   background-color: var(--primary-color);
   border-radius: calc((var(--border-radius-2) * var(--scale)));
   color: var(--text-color-b);
   font-size: calc(var(--font-size-4) * var(--scale));
   font-weight: var(--font-weight-4);
   text-align: center;
}