.entry-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.entry-meta {
  display: flex;
  flex-direction: column;
}

.single-spot-kana {
  font-size: clamp(0.875rem, 0.787rem + 0.44vw, 1.313rem);
}

.single-spot-author {
  text-align: right;
}

.post-thumbnail {
  margin-top: 16px;
}

.post-thumbnail img {
  box-shadow: 10px 5px 5px #eee;
  width: 100%;
}

.entry-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-size: clamp(0.875rem, 0.787rem + 0.44vw, 1.313rem);
}

.single-spot-intro {
  text-align: justify;
  word-break:break-all; 
  text-justify:inter-ideograph;
  text-justify:inter-character;
  word-wrap:break-word;
  overflow-wrap:break-word;
  border: solid 4px #333;
  border-radius: 12px;
  background: var(--back-color);
  padding: 16px;
}

.single-spot-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.single-spot-buttons .wpulike {
  width: fit-content;
}

.single-spot-link {
  width: fit-content;
  border: solid 4px transparent;
  background: var(--main-color);
  color: #fff;
  padding: 8px 16px;
  border-radius: 12px;
  font-weight: 700;
}

.single-spot-link:focus {
  color: #fff;
}

@media (hover:hover) {
  .single-spot-link:hover,
  .single-spot-link:focus:hover {
    border-color: var(--sub-color);
    background: #fff;
    color: var(--sub-color);
  }
}

@media (hover:none) {
  .single-spot-link:active,
  .single-spot-link:focus:active {
    border-color: var(--sub-color);
    background: #fff;
    color: var(--sub-color);
  }
}

.entry-footer {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.single-spot-tarms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.single-spot-area {
  font-weight: 500;
  padding: 4px 8px;
  border: solid 2px var(--main-color);
  background: var(--back-color);
  color: var(--main-color);
}

@media (hover:hover) {
  .single-spot-area:hover {
    border-color: var(--sub-color);
    background: #fff;
    color: var(--sub-color);
  }
}

@media (hover:none) {
  .single-spot-area:active {
    border-color: var(--sub-color);
    background: #fff;
    color: var(--sub-color);
  }
}

.single-spot-station {
  font-weight: 500;
  color: #333;
  border-bottom: solid 2px #333;
}

@media (hover:hover) {
  .single-spot-station:hover {
    border-color: var(--sub-color);
    color: var(--sub-color);
  }
}

@media (hover:none) {
  .single-spot-station:active {
    border-color: var(--sub-color);
    color: var(--sub-color);
  }
}

.single-spot-sub-images {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.single-spot-post-sub-image {
  width: fit-content;
  border: solid 4px #333;
  border-radius: 12px;
  margin-top: 24px;
}

.post-sub-image-label {
  font-weight: 700;
  background: var(--back-color);
  padding: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: .3s;
}

@media (hover:hover) {
  .post-sub-image-label:hover {
    background: #ccc;
  }
}
@media (hover:none) {
  .post-sub-image-label:active {
    background: #ccc;
  }
}

.single-spot-post-sub-image[open] .post-sub-image-label {
  border-radius: 8px 8px 0 0;
}

.post-sub-image-wrapper {
  padding: 16px;
}

.sub-image-input {
  width: fit-content;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sub-image-input-inner {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

.sub-image-input-inner--checkbox {
  align-items: initial;
  gap: 12px;
}

input[type="submit"].sub-image-submit {
  width: fit-content;
  background: var(--accent-color);
  color: #fff;
  margin-top: 24px;
  padding: 16px;
}

.single-spot-guest-notice {
  background: #fafafa;
  border: solid 4px #333;
  border-radius: 12px;
  padding: 16px;
}

/* コメント関連 */
.comments-area {
  margin: 40px 0;
}

.single-spot-comment-notice {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.single-spot-user-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.single-spot-user-links li a {
  font-weight: 500;
}

.comment-list {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.comment-respond {
  margin-top: 24px;
  padding-top: 24px;
  border-top: dashed 2px #ccc;
}

.comment {
  padding: 16px;
  border-radius: 12px;
}

.comment.depth-1 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  border: solid 4px var(--main-color);
  background: var(--back-color);
}

.comment.depth-1 > article {
  width: 100%;
}

.comment.depth-2 {
  width: 95%;
  border: dashed 4px #333;
  background: #fafafa;
}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.comment-form .submit {
  cursor: pointer;
}