@charset "UTF-8";

/* ==================================================
#topics-area / #special-area
================================================== */
#topics-area,
#special-area {
	background-color: transparent;
}

#topics-area::after,
#special-area::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(../img/bg_topics.jpg);
	background-repeat: repeat-y;
	background-position: center top;
	background-size: 100% auto;
	opacity: 0.8;
	z-index: -1;
}

#topics-area .area-inner {
}

#topics-area .area-title {
}

#topics-area .area-title span {
}


/* [data-block-topics] */
[data-block-topics] {
	position: relative;
}

[data-block-topics].disable #list_topics {
  opacity: 0;
	transition: all 0.8s ease-out 0s;
}

[data-block-topics] .block_topics_inner {
	/* position: relative; */
}

[data-block-topics] nav {
	/*position: sticky;
  top: 0px;
  z-index: 10;*/
	margin-bottom: 60px;
}

@media screen and (max-width: 900px) {
	[data-block-topics] nav {
		margin-bottom: 50px;
	}
}


/* #nav_topics_category
------------------------------ */
#nav_topics_category {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	flex-direction: row;
	margin: 0 auto;
}

#nav_topics_category li {
	margin: 0 8px 20px;
}

#nav_topics_category li a {
	display: block;
	font-weight: 700;
	font-size: 1.4rem;
	letter-spacing: 0.06em;
	line-height: 1;
	border: 1px solid #000;
	border-radius: 30px;
	background: #fff;
	padding: 10px 25px;
	transition: all 0.4s ease-out 0s;
}

#nav_topics_category li a:hover {
	background: #10edff;
}

#nav_topics_category li a span {

}

#nav_topics_category li a.disable {
  pointer-events: none;
  opacity: 0.3;
}

#nav_topics_category li a.active {
	background: #5258ff;
	color: #fff;
	pointer-events: none;
}

#nav_topics_category li a.active span {
}


@media screen and (max-width: 900px) {
	#nav_topics_category {
		max-width: 500px;
	}

	#nav_topics_category li {
		margin: 0 4px 15px;
	}

	#nav_topics_category li a {
		padding: 10px 15px;
	}

	#nav_topics_category li a:hover {
	}

	#nav_topics_category li a span {

	}

	#nav_topics_category li a.disable {
	}

	#nav_topics_category li a.active {
	}

	#nav_topics_category li a.active span {
	}
}



/* #list_topics
------------------------------ */
#list_topics {
	transition: all 0.6s ease 0s;
}

#list_topics ul {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
	flex-direction: row;
	width: min(100%, 1440px);
	margin: 0 auto;
}

#list_topics ul li.topic {
	width: min(calc(100% / 4 - 40px), 320px);
	margin: 0 20px 60px;
	transition: transform 0.4s ease 0s, opacity 0.4s ease 0s;
	opacity: 0;
	transform: translate3d(0, 20px, 0);
}

#list_topics ul li.topic.animate {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

#list_topics ul li.topic a {
	display: block;
}


@media screen and (max-width: 900px) {
	#list_topics {
	}

	#list_topics ul {
		width: min(100%, 870px);
	}

	#list_topics ul li.topic {
		width: min(calc(100% / 3 - 30px), 260px);
		margin: 0 15px 50px;
	}

	#list_topics ul li.topic.animate {
	}

	#list_topics ul li.topic a {
	}
}


@media screen and (max-width: 640px) {
	#list_topics {
	}

	#list_topics ul {
		width: min(100%, 580px);
	}

	#list_topics ul li.topic {
		width: min(calc(100% / 2 - 30px), 260px);
		margin: 0 15px 40px;
	}

	#list_topics ul li.topic.animate {
	}

	#list_topics ul li.topic a {
	}
}


/* .thumb_topics (サムネイル) */
#list_topics .thumb_topics {
	position: relative;
	margin-bottom: 25px;
	transition: all 0.4s ease-out 0s;
	z-index: 1;
}

#list_topics .thumb_topics::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 1px solid #000;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.8);
	transform: translate(8px, 6px);
	transition: all 0.4s ease-out 0s;
}

@media screen and (max-width: 900px) {
	#list_topics .thumb_topics {
		margin-bottom: 20px;
	}

	#list_topics .thumb_topics::after {
		transform: translate(6px, 4px);
	}
}

#list_topics a:hover .thumb_topics::after {
	background: rgba(255, 241, 74, 0.8);
}

#list_topics .thumb_topics figure {
	display: block;
	overflow: hidden;
	position: relative;
	z-index: 2;
	border: 1px solid #000;
	border-radius: 12px;
}

#list_topics .thumb_topics figure img {
	transition: all 0.4s ease-out 0s;
}

#list_topics a:hover .thumb_topics figure img {
	filter: brightness(110%) contrast(110%) saturate(120%);
	transform: scale(1.06);
}

/* サムネイルの傾き */
#list_topics li.topic:nth-child(12n+1) .thumb_topics { transform: rotate(6deg); }
#list_topics li.topic:nth-child(12n+2) .thumb_topics { transform: rotate(-4deg); }
#list_topics li.topic:nth-child(12n+3) .thumb_topics { transform: rotate(-2deg); }
#list_topics li.topic:nth-child(12n+4) .thumb_topics { transform: rotate(4deg); }
#list_topics li.topic:nth-child(12n+5) .thumb_topics { transform: rotate(-5deg); }
#list_topics li.topic:nth-child(12n+6) .thumb_topics { transform: rotate(7deg); }

#list_topics li.topic:nth-child(12n+7) .thumb_topics { transform: rotate(3deg); }
#list_topics li.topic:nth-child(12n+8) .thumb_topics { transform: rotate(-5deg); }
#list_topics li.topic:nth-child(12n+9) .thumb_topics { transform: rotate(2deg); }
#list_topics li.topic:nth-child(12n+10) .thumb_topics { transform: rotate(-6deg); }
#list_topics li.topic:nth-child(12n+11) .thumb_topics { transform: rotate(-3deg); }
#list_topics li.topic:nth-child(12n+12) .thumb_topics { transform: rotate(5deg); }


#list_topics li.topic a:hover .thumb_topics { transform: rotate(0deg); }


/* .topics_info (テキスト) */
#list_topics .topics_info {
	text-align: left;
	letter-spacing: 0.06em;
}

#list_topics .topics_info .cols {
	margin-bottom: 10px;
}

#list_topics .topics_info .cols .date {
	font-weight: 500;
	font-size: 1.4rem;
	line-height: 1.2;
	transition: all 0.4s ease-out 0s;
}

#list_topics a:hover .topics_info .cols .date {
	color: #fa3c46;
}

#list_topics .topics_info .cols .cat {
	display: none;
}

/*#list_topics .topics_info .cols .cat span {
}*/

#list_topics .topics_info .ttl {
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 1.4;
	border-bottom: 2px dotted #000;
	padding-bottom: 15px;
	margin-bottom: 15px;
	transition: all 0.4s ease-out 0s;
}

#list_topics .topics_info p.description {
	line-height: 1.6;
	transition: all 0.4s ease-out 0s;
}

#list_topics a:hover .topics_info .ttl {
	color: #fa3c46;
	border-bottom-color: #fa3c46;
}

#list_topics a:hover .topics_info p.description {
	color: #fa3c46;
}


@media screen and (max-width: 900px) {
	#list_topics .topics_info {
	}

	#list_topics .topics_info .cols {
		margin-bottom: 6px;
	}

	#list_topics .topics_info .cols .date {
		font-size: 1.4rem;
	}

	#list_topics .topics_info .cols .cat {
	}

	#list_topics .topics_info .ttl {
		font-size: 1.5rem;
		padding-bottom: 10px;
		margin-bottom: 10px;
	}

	#list_topics .topics_info p.description {
		line-height: 1.5;
		font-size: 1.5rem;
	}
}


/* ==================================================
#special-area
================================================== */
#special-area {
}

#special-area .special-links {
}

#special-area .special-links ul {
}

#special-area .special-links ul > li + li {
	margin-top: 0.8em;
}


#special-area a.btn-links {
	display: block;
	background: transparent;
	border: 1px solid #000;
	width: min(80%, 560px);
	margin: 0 auto;
	padding: 6px;
	transition: all 0.4s ease-out 0s;
}

#special-area a.btn-links .inner {
	border: 1px solid #000;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	flex-direction: column;
	background: #fff;
	color: #0340cf;
	font-family: bungee, sans-serif;
	font-size: 2.2rem;
	letter-spacing: 0;
	line-height: 1.2;
	padding: 0.5em 0.2em;
}

#special-area a.btn-links .inner .font-s {
	font-size: 80%;
	margin-top: 0.2em;
	font-family: source-han-sans-japanese, sans-serif;
	font-weight: 400;
	font-weight: 700;
	letter-spacing: 0.04em;
}

#special-area a.btn-links .inner .label {
	font-size: 72%;
	font-weight: 700;
	background-color: #0340cf;
	color: #fff;
	line-height: 1;
	padding: 0.2em 0.5em;
	border-radius: 64px;
	margin-top: 0.3em;
}

#special-area a.btn-links .inner b {
	display: inline-block;
}

/* hover */
#special-area a.btn-links:hover {
	background: #fdc23e;
	filter: brightness(110%) contrast(110%) saturate(120%);
}


@media screen and (max-width: 900px) {
	#special-area a.btn-links .inner {
		font-size: 1.8rem;
	}
}