@charset "UTF-8";
#container::before {
 content: "";
 background: #fff url("../images/comment_bg.jpg") no-repeat left bottom;
 background-size: auto 100%;
 top: 0;
 left: 0;
 right: 0;
 width: 100%;
 max-width: 1920px;
 height: 100vh;
 display: block;
 position: fixed;
 margin: auto;
}
.copyright {
 color: #555;
}
.entry-header .pagettl.en {
 font-size: clamp(4rem, 5vw, 6.8rem);
 line-height: 1em;
 text-align: center;
 text-shadow: 5px 5px 0 #fdec42;
}
.entry-header .noto {
 font-size: .85em;
 text-align: right;
 opacity: .5;
 padding-right: 12px;
}
.article-box .entry-header .contents {
 padding-bottom: 0;
 padding-top: 12px;
}
.skew {
 -webkit-transform: skew(0deg, -5deg);
 -moz-transform: skew(0deg, -5deg);
 transform: skew(0deg, -5deg);
 width: 88%;
 max-width: 1600px;
 margin: 2rem auto;
}
.comment-list {
 margin: .5rem auto 2rem;
}
.comment-list .item {
 background-color: #fff;
 padding: clamp(20px, 30px + (100vw - 812px) * 0.1, 40px);
 border-radius: 20px;
 -webkit-box-shadow: 5px 5px 0 #fdec42;
 box-shadow: 5px 5px 0 #fdec42;
 text-align: justify;
 hyphens: auto;
 word-break: break-all;
 margin-bottom: 3rem;
}
.comment-list .item p {
 margin-bottom: 1rem;
}
.comment-list .item .name {
 font-size: clamp(3rem, 4vw, 4rem);
 font-weight: 700;
 line-height: 1.2em;
 color: #eb6c73;
 text-shadow: 2px 3px 0 #fff89e;
 margin-bottom: 12px;
 margin-top: 1rem;
 font-feature-settings: "palt"1;
}
.comment-list .item .name span {
 display: block;
 font-size: .5em;
 line-height: 1.2em;
 margin-top: 5px;
 margin-bottom: 5px;
}
@media screen and (min-width : 813px) {
 #container::before {
  background: #fff url("../images/comment_bg.jpg") no-repeat center top;
  background-size: cover;
 }
 .comment-list {
  column-count: 2;
  column-gap: 4rem;
 }
 .comment-list .item {
  break-inside: avoid;
  border-radius: 4rem;
  margin-bottom: 4rem;
 }
 .comment-list .item .name {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
  align-items: flex-end;
  space: nowrap;
 }
}
@media screen and (min-width : 1241px) {
 .comment-list {
  column-count: 3;
 }
}
@media screen and (max-width : 812px) {
 .comment-list {
  display: flex;
  flex-direction: column;
 }
 /* 1番目の要素を先頭に */
 .comment-list .item:nth-child(1) {
  order: -3; /* 他の要素より小さい値を指定 */
 }
 /* 5番目の要素を次に */
 .comment-list .item:nth-child(5) {
  order: -2;
 }
 /* 8番目の要素をその次に */
 .comment-list .item:nth-child(8) {
  order: -1;
 }
 /* 他の要素はデフォルトのままか、明示的にorder: 0;と指定 */
 .comment-list .item {
  order: 0;
 }
}