.jumbotron-img {
    background-image: url("/assets/images/nazoml_main.jpg");
    background-size: cover;
}

.new-nazo-section, .extra-info-section {
    background-color: #393f5f;
}

.new-nazo-container {
    width: 95%;
    max-width: 600px;
    margin: auto;
    background-color: #fff;
    padding: 8px;
}

.new-nazo-img {
    width: 100%;
    max-width: 500px;
    max-height: 500px;
}
.new-nazo-link {
    font-size: 24px;
    text-decoration: none;
}

.recent-post-list {
    white-space: nowrap;
    width: 100%;
}

.filter-btn {
    display: block;
    margin: 0 4px 4px 0;
}
.nazo-title {
    font-size: 36px;
}
.post-date {
    color: #bbb;
    font-size: 24px;
}

.nazo-img {
    max-width: 100%;
    max-height: 600px;
}


.details {
	height: 71px;
	transition: all ease-in-out .3s;
	border-left: 2px solid #00a5a0;
	border-right: 2px solid #00a5a0;
	box-sizing: border-box;
}

.nazo-hint:last-child, .nazo-answer {
    border-bottom: 2px solid #00a5a0;
}

.details[open] {
	height: fit-content;
	padding-bottom: 10px;
	background-color: #bee1de;
}

.details-summary {
	display: block;
	padding: 20px;
	border-top: 1px solid #00a5a0;
	font-size: 20px;
	font-weight: bold;
	transition: all ease-in-out .3s;
}

.details-summary:hover {
    cursor: pointer;
    background-color: #bee1de;
}

.details-summary::-webkit-details-marker {
	display: none;
}

.details-content {
	margin: 0 20px 20px;
	padding: 20px;
	overflow: hidden;
	overflow-y: auto;
	background-color: #fff;
}

.details[open] .details-content {
  	animation: fadeIn .3s ease;
}

.recommend-nazo-list {
	white-space: nowrap;
    width: 100%;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}


/* 謎解き投稿フォーム用スタイル */
.nazo-card {
  max-width: 720px;
  margin: 0 auto;
}