@charset "UTF-8";
/* CSS Document */

#wrapper {
	width: auto;
}
div.cautionTitle,
p.caution,
#footer {
	display: none;
}
div.content-block.inner-block *,
#wrapper,
#content {
	font-family: 'Noto Sans JP', sans-serif;
}

div.item-page-list {
	display: flex;
	align-items: start;
	justify-content: center;
	margin: 0 auto;

	div.main-area {
		width: 870px;

		div.cate-area {
			margin-bottom: 5px;
			padding: 5px;
			border: solid 1px #ccc;
			overflow-x: auto;

			div.cate-item {
				margin-right: 5px;


/*
				box-shadow:inset 0px 1px 0px 0px #ffffff;
				background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
				background-color:#ffffff;
*/

				a {
					display: block;
					color: #666;
					text-decoration: none;
					font-weight: bold;
					text-align: center;
					white-space: nowrap;
					line-height: normal;
					min-width: 100px;
					padding: 2px 10px;
					border: solid 1px #ccc;
					border-radius: 3px;
					box-sizing: border-box;

					background: linear-gradient(to bottom, #fff 48%, #EEE 51%, #E5E5E5 100%, #E5E5E5 100%);

					&:hover {
						color: #000;


/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f0f9ff+0,cbebff+47,a1dbff+100;Blue+3D+%2313 */
background: linear-gradient(to bottom,  rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

					}
				}

				&.active {
					a {
background: linear-gradient(to bottom,  rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
					}
				}
			}
		}

		div.search-result-area {
			margin: 10px 0;

			div.search-result-inner {
				justify-content: space-between;

				div.search-result-keyword {
					color: #555;
					font-size: 120%;
				}
			}
		}

		div.item-list {
			display: flex;
			flex-wrap: wrap;

			div.item {
				margin-right: 10px;
				margin-bottom: 10px;
				padding: 5px 0 0 0;

				&:nth-child(-n+2) {
					width: 48%;
				}
				&:nth-child(n+3) {
					width: 32%;
				}

				div.title {
					margin-top: 5px;

					a {
						text-decoration: none;
						word-break: break-all;
						font-weight: bold;
						color: #3192ba;
						line-height: 1.5em;

						&:hover {
							color: #ff9c3d;
						}
					}
				}
				div.image-area {
					aspect-ratio: 2 / 1;

					a {
						img {
							width: 100%;
							height: 100%;
						}

						&:hover {
							opacity: 0.7;
						}
					}
				}

				div.date-area {
					margin-top: 20px;

					div.cate {
						margin-right: 10px;

						a {
							color: #fff;
							font-weight: bold;
							font-size: 90%;
							padding: 1px 5px;
							background-color: #258cb7;
							border-radius: 3px;
							text-decoration: none;

							&:hover {
								text-decoration: underline;
							}
						}
					}
					div.date {
						color: #999;
					}
				}
			}
		}

		div.archive-link {
			margin-top: 30px;

			a {
				color: #09c;
				text-decoration: none;

				&:hover {
					color: #ff9c3d;
				}
			}
		}
	}

	div.side-area {
		width: 234px;
		margin-left: 30px;

		div.search-area {
			height: 25px;
			margin-bottom: 5px;

			form {
				height: 100%;

				div.search-inner {
					height: 100%;

					div.input {
						height: 100%;

						&.image {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 23px;
							height: 100%;

							input[type="image"] {
							}
						}
						&.text {
							flex: 1;

							input[type="text"] {
								width: 100%;
								height: 100%;
								padding: 3px;
								border-radius: 3px;
								border: solid 1px #aaa;
								box-sizing: border-box;
							}
						}
					}
				}
			}
		}

		div.theme-area {
			#theme-check-id {
				display: none;

				&:checked ~ div.theme-list-area {
					height: auto;
				}
			}
			div.theme-title-area {
				justify-content: space-between;
				background: linear-gradient(to bottom, #ffffff 0%, #c5c5c5 100%);

				font-size: 100%;
				font-weight: bold;
				color: #535F66;
				margin: 4px 0px 0px 0px;
				padding: 8px 8px 8px 10px;
				border-style: solid;
				border-width: 1px 1px 0 1px;
				border-color: #cdcdcd;
				border-radius: 10px 10px 0 0;
				box-shadow: 1px 1px 1px #888;

				div.theme-title-str {
					font-size: 100%;
				}
				div.theme-title-all {
					label {
						display: block;
						font-size: 80%;
						cursor: pointer;

						&:hover {
							color: #ff9c3d;
						}
					}
				}
			}
			div.theme-list-area {
				box-sizing: border-box;
				border-style: solid;
				border-width: 0 1px;
				border-color: #cdcdcd;
				background-color: #f1f1f1;
				box-shadow: 1px 1px 1px #888;

				padding: 0 5px;
				height: 347px;
				background: #fff;
				overflow-y: hidden;

				div.theme-item {
					text-align: center;
					padding: 5px 0 0 0;

					a {
						display: block;
						color: #3192ba;
						padding: 5px 0;
						background-color: #eaeaea;
						font-weight: bold;
						text-decoration: none;

						&:hover {
							color: #ff9c3d;
						}
					}
				}
			}
			div.theme-bottom-area {
				height: 14px;
				margin-bottom: 10px;
				background-color: #fff;
				border-style: solid;
				border-width: 0 1px 1px 1px;
				border-color: #cdcdcd;
				border-radius: 0 0 10px 10px;
				box-shadow: 1px 1px 1px #888;
			}
		}

		div.recommend-rank-area {
			div.recommend-rank-title-area {
				justify-content: space-between;
				background: linear-gradient(to bottom, #ffffff 0%, #c5c5c5 100%);

				font-size: 100%;
				font-weight: bold;
				color: #535F66;
				margin: 4px 0px 0px 0px;
				padding: 8px 8px 8px 10px;
				border-style: solid;
				border-width: 1px 1px 0 1px;
				border-color: #cdcdcd;
				border-radius: 10px 10px 0 0;
				box-shadow: 1px 1px 1px #888;

				div.recommend-rank-title-str {
					font-size: 100%;
				}
				div.recommend-rank-title-all {
					font-size: 80%;
					cursor: pointer;

					&:hover {
						color: #ff9c3d;
					}
				}
			}
			div.recommend-rank-list-area {
				box-sizing: border-box;
				border-style: solid;
				border-width: 0 1px;
				border-color: #cdcdcd;
				background-color: #f1f1f1;
				box-shadow: 1px 1px 1px #888;

				padding: 0 5px;

				div.recommend-rank-item {
					padding: 5px 0 0 0;

					border-style: dotted;
					border-width: 0 0 2px 0;
					border-color: #aaa;

					div.recommend-rank-item-title-area {
						align-items: start;

						div.recommend-rank-item-title-rank {
							width: 35px;

							font-weight: bold;
							color: #ff6501;
							width: 35px;
							text-align: center;

							img {
							}
						}
						div.recommend-rank-item-title-str {
							flex: 1;

							a {
								text-decoration: none;
								word-break: break-all;
								font-weight: bold;
								color: #3192ba;
								line-height: 1.5em;

								&:hover {
									color: #ff9c3d;
								}
							}
						}
					}
					div.recommend-rank-item-image-area {
						aspect-ratio: 2 / 1;

						a {
							img {
								width: 100%;
								height: 100%;
							}

							&:hover {
								opacity: 0.7;
							}
						}
					}
					div.recommend-rank-item-desc-area {
						padding: 5px;
						font-size: 90%;
					}
				}
			}
			div.recommend-rank-bottom-area {
				height: 14px;
				margin-bottom: 7px;
				background-color: #f1f1f1;
				border-style: solid;
				border-width: 0 1px 1px 1px;
				border-color: #cdcdcd;
				border-radius: 0 0 10px 10px;
				box-shadow: 1px 1px 1px #888;
			}
		}
	}
}

/* Footer */
footer {
	background-color: #333;
	color: white;
	margin-top: 30px;
	padding: 80px 0 40px;

	.container {
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 20px;
		position: relative;
	}

	.footer-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 40px;
		margin-bottom: 60px;
	}

	.footer-logo {
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 700;
		font-size: 24px;
		color: white;
		margin-bottom: 20px;
	}

	.footer-about {
		color: rgba(255,255,255,0.7);
		margin-bottom: 20px;
	}

	.footer-social {
		display: flex;
		gap: 15px;

		a {
			background-repeat: no-repeat;
			background-position: center;
			background-size: 50%;

			&.twitter {
				background-image: url('../../../img/user/story/icon/twitter.svg');
			}
			&.facebook {
				background-image: url('../../../img/user/story/icon/facebook.svg');
			}
			&.instagram {
				background-image: url('../../../img/user/story/icon/instagram.svg');
			}
			&.youtube {
				background-image: url('../../../img/user/story/icon/youtube.svg');
			}
		}
	}

	.footer-social-link {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background-color: rgba(255,255,255,0.1);
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		text-decoration: none;
		transition: background-color 0.3s ease;
	}

	.footer-social-link:hover {
		background-color: #4A90E2;
	}

	.footer-heading {
		font-size: 18px;
		margin-bottom: 20px;
		font-weight: 700;
		color: white;

		background: none;
		margin-top: 0;
		padding: 0;
	}

	.footer-links {
		list-style: none;
	}

	.footer-link {
		margin-bottom: 10px;
	}

	.footer-link a {
		color: rgba(255,255,255,0.7);
		text-decoration: none;
		transition: color 0.3s ease;
	}

	.footer-link a:hover {
		color: white;
	}

	.footer-newsletter p {
		color: rgba(255,255,255,0.7);
		margin-bottom: 20px;
	}

	.footer-form {
		display: flex;
	}

	.footer-input {
		flex-grow: 1;
		padding: 10px 15px;
		border: none;
		border-radius: 5px 0 0 5px;
		font-family: inherit;
	}

	.footer-button {
		background-color: #4A90E2;
		color: white;
		border: none;
		width: 60px;
		padding: 0 15px;
		border-radius: 0 5px 5px 0;
		font-family: inherit;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	.footer-button:hover {
		background-color: #3A80D2;
	}

	.footer-bottom {
		text-align: center;
		padding-top: 40px;
		border-top: 1px solid rgba(255,255,255,0.1);
		color: rgba(255,255,255,0.5);
		font-size: 14px;
	}
}

@media screen and (max-width: 768px) {
	#wrapper {
		width: auto;
	}

	div.item-page-list {
		display: block;

		div.main-area {
			width: auto;

			div.cate-area {
				div.cate-item {
					a {
						font-size: 80%;
						padding: 3px 5px;
					}
				}
			}

			div.item-list {
				display: block;

				div.item {
					width: auto !important;
					margin-right: 0;
					padding: 0 5px;
				}
			}

			div.archive-link {
				padding: 0 5px;
			}
		}

		div.side-area {
			display: none;
		}
	}

	#header,
	div.cautionTitle,
	p.caution,
	#footer {
		display: none;
	}

	/* Footer */
	footer {
		.footer-grid {
			grid-template-columns: 1fr;
		}
	}
}