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

/*common*/
.sp {
	display: block;
}
.pc {
	display: none;
}
.a-img {
	width: 100%;
	height: auto;
	display: block;
}

.atext {
	font-size: 4vw;
}
.atext.b {
	font-weight: bold;
}

.start {
	transform-style: preserve-3d;
	perspective: 100vw;
}

.logo-pre90th .a-img {
	width: 69.3vw;
	margin: 8vw auto;
	padding-left: 7vw;
}
.logo-90th .a-img {
	width: 80vw;
	margin: 4vw auto;
	padding-bottom: 9vw;
	animation: open90th 1.6s forwards;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	-webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}
@keyframes open90th {
	0% {
		opacity: 0;
		transform: translateY(30px) scale(0.5) rotateY(360deg);
		mix-blend-mode: overlay;
	}
	70% {
		opacity: 1;
		transform: translateY(30px) scale(0.5) rotateY(0deg);
		mix-blend-mode: overlay;
	}
	70.1% {
		opacity: 1;
		transform: translateY(30px) scale(0.5) rotateY(0deg);
		mix-blend-mode: initial;
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1.0) rotateY(0deg);
		mix-blend-mode: initial;
	}
}

/*amain*/
.amain-bg {
	padding: 25px 0;
	box-sizing: border-box;
	background: linear-gradient(
		0deg,
		hsl(270deg 100%  50%)  0%,
		hsl(50deg  100%  80%) 18%,
		hsl(60deg  100%  90%) 40%,
		hsl(70deg  100%  95%) 60%,
		hsl(0deg   100% 100%) 70%,
		hsl(0deg   100% 100%) 100%
	);
	background-size: cover;
	position: relative;
}
.start .amain-bg {
	background: linear-gradient(
		0deg,
		hsl(0deg   100% 100%) 0%,
		hsl(270deg 100%  50%) 7%,
		hsl(270deg 100%  50%) 87%,
		hsl(50deg  100%  80%) 91%,
		hsl(60deg  100%  90%) 92%,
		hsl(70deg  100%  95%) 93%,
		hsl(0deg   100% 100%) 100%
	);
	background-size: cover;
}
.amain-bg-kira {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: calc(100% - 100vw);
	background: url(pre90-bg-sp.png) center top repeat;
	background-size: 100% auto;
	opacity: 0;
}
.start .amain-bg-kira {
	height: calc(100% - 50vw);
	z-index: 1;
}
.amain-bg-kira.k1 {
	animation: blink 6s 0s ease-out infinite;
}
.amain-bg-kira.k2 {
	transform: scale(1, -1);
	animation: blink2 6s 2s ease-out infinite;
}
.amain-bg-kira.k3 {
	transform: scale(-1, -1);
	animation: blink3 6s 4s ease-out infinite;
}
@keyframes blink {
	0% {
		opacity: 0;
		transform: translateY(30px);
	}
	40% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translateY(0);
	}
}
@keyframes blink2 {
	0% {
		opacity: 0;
		transform: translateY(30px) scale(-1, -1);
	}
	40% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translateY(0) scale(-1, -1);
	}
}
@keyframes blink3 {
	0% {
		opacity: 0;
		transform: translateY(30px) scale(1, -1);
	}
	40% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translateY(0) scale(1, -1);
	}
}

.atopics-wrap {
	width: 97vw;
	margin: 0 0 12vw 3vw;
}
.topics90th_h {
	width: 40vw;
	margin: 0 0 20px 10px;
	transform: rotate(-9deg);
	mix-blend-mode: hard-light;
}
/*swiper*/
.swiper {
	width: 100%;
	height: 100%;
}
.swiper-slide {
	text-align: center;
	font-size: 18px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.swiper-slide:last-of-type {
	padding-right: 3vw;
}
.swiper-slide {
	width: 70%;
	margin-bottom: 2em;
}
.swiper-pagination-bullet {
	background: #ccc;
	opacity: 1;
}
.swiper-pagination-bullet-active {
	background: #000;
}
.swiper-slide ul {
	width: 100%;
	background-color: #fff;
	padding: 1em;
	box-sizing: border-box;
	border: 1px #e5e5e5 solid;
	border-radius: 1em;
}
.swiper-slide ul li a {
	display: flex;
	justify-content: center;
	align-items: start;
}
.swiper-slide ul li a .a-img {
	width: 40%;
}
.swiper-slide ul li a .atext {
	margin-left: 0.5em;
	text-align: left;
}
.swiper-slide ul li a:hover .atext {
	color: #10b2f0;
}
.swiper-slide ul li a .atext .a-img {
	height: 1.6em;
	width: auto;
	display: inline;
	vertical-align: middle;
}
.swiper-slide ul li a .atext .day {
	display: block;
	text-align: right;
	color: #10b2f0;
	font-size: 90%;
}
.swiper-slide ul li a .atext .day em {
	font-weight: normal;
}

.amenu {
	width: 94vw;
	height: 48vw;
	margin: 12vw auto;
	padding: 0;
	border: 2px #e5e5e5 solid;
	border-radius: 10px;
	box-sizing: border-box;
	background-color: #fff;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
.amenu.open {
	height: auto;
	margin: 5vw auto 18vw;
	border-width: 3px;
	padding: 10vw 0;
}
.start .amenu {
	z-index: 2;
	opacity: 0;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	will-change: opacity;
	-webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}
.start .amenu.open:first-of-type {
	animation: open90th 1.6s forwards;
}
.start .amenu.open.is-animated:not(:first-of-type) {
	animation: open90th 1.6s forwards;
}
.start .amenu-wrap .amenu.is-animated {
	animation: open90th 1.6s forwards;
}
.ribbon-img,
.coming-img {
	width: 212px;
	position: absolute;
	top: -28px;
	left: 0;
	right: 0;
	margin: auto;
}
.amenu-img .a-img {
	margin: 0 auto 5vw;
}
.amenu-btn:hover .atitle,
.amenu-btn:hover .atitle .eng,
.amenu-btn:hover .atext {
	color: #fa5d52;
}
.atitle {
	color: #333;
	font-size: 5vw;
	text-align: left;
	font-weight: bold;
	margin: 0 auto 0.5em;
	display: inline-block;
	letter-spacing: -0.025em;
	line-height: 1.2em;
}
.atitle span {
	color: #555;
	font-size: 3vw;
	font-weight: normal;
	letter-spacing: 0;
}
.atext {
	color: #555;
	font-size: 3.8vw;
	line-height: 1.6em;
}
.atext.ss {
	margin-top: 1em;
	color: #888;
	font-size: 3vw;
	line-height: 1.2em;
}

/*「『まんが 赤塚不二夫伝』を読む。」のだ！*/
.afd .amenu-img .a-img {
	width: 32vw;
}
/*赤塚まんがのひとコマ目*/
.firstframe .amenu-img .a-img {
	width: 64vw;
}
/*べしすくい*/
.beshisukuiswith .amenu-img .a-img {
	width: 64vw;
}
/*バカ大川柳*/
.bakasen90th .amenu-img .a-img {
	width: 64vw;
}
.bakasen90th .atitle {
	text-align: center;
}
/*アカツカアニマルズ*/
.animals .amenu-img .a-img {
	width: 64vw;
}
/*バンザイ！菊千代*/
.bkikuchiyo .amenu-img .a-img {
	width: 64vw;
}
/*コーフク川柳*/
.kofuku .amenu-img .a-img {
	width: 64vw;
}
/*シェーの自叙伝紹介*/
.sheee90th .amenu-img .a-img {
	width: 64vw;
}
.sheee90th .atext {
	padding: 0 1em;
}
/*2025present*/
.present90th .amenu-img .a-img {
	width: 84vw;
}
.present_list {
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.present_img {
	width: 30%;
	height: auto;
	margin: 0;
}
/*べしが行くべし。*/
.ikubeshi.amenu.open {
	padding: 5vw 0 10vw;
}
.ikubeshi .amenu-img .a-img {
	width: 80vw;
	margin-bottom: 1vw;
}
.ikubeshi .atitle {
	text-align: center;
}
.ikubeshi_posts {
	width: 94%;
	margin: 0 auto;
}
.ikubeshi_posts .ib_img {
	width: 100%;
	height: auto;
}
.ikubeshiSwiper .swiper-slide {
	width: 44%;
	margin: 0 5% 0 0;
	flex-direction: column;
	align-items: start;
}
.ib_posts_catch {
	aspect-ratio: 4 / 3;
	background-color: #ddd;
	border-radius: 10px;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-weight: bold;
	font-size: 100%;
	overflow: hidden;
}
.ib_posts_catch .ib_img {
	border-radius: 10px;
	vertical-align: bottom;
}
.ib_posts_info {
	text-align: left;
}
.ib_posts_title {
	font-size: 14px;
	font-weight: bold;
	margin-top: 0.5em;
}
.ib_eventdate {
	font-size: 12px;
	font-weight: bold;
	margin-top: 0.5em;
}
.ib_posts_link {
	display: block;
	width: 100%;
}
a.ib_posts_link {
	color: #000;
}
a.ib_posts_link.new {
	position: relative;
}
a.ib_posts_link.new:before {
	position: absolute;
	content: "";
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 50px 50px 0 0;
	border-color: #fc5d52 transparent transparent transparent;
	border-radius: 8px 0 0 0;
}
a.ib_posts_link.new:after {
	position: absolute;
	content: "UP!!";
	transform: rotate(315deg);
	display: block;
	font-size: 14px;
	white-space: nowrap;
	letter-spacing: 0.1em;
	color: #fff;
	top: 12px;
	left: 4px;
	text-align: center;
	z-index: 2;
	line-height: 1;
}

@media (min-width: 768px) {
	
	/*common*/
	#aniv90th {
		margin: auto;
		font-size: 18px;
	}
	.sp {
		display: none;
	}
	.pc {
		display: block;
	}
	.a-img {
		width: auto;
	}
	.logo-pre90th .a-img {
		width: 305px;
		margin: 20px auto;
		padding-left: 30px;
	}
	.logo-90th .a-img {
		width: 520px;
		margin: 20px auto;
		padding-bottom: 40px;
	}
	.start .amain-bg {
		background: linear-gradient(
			0deg,
			hsl(0deg   100% 100%) 0%,
			hsl(270deg 100%  50%) 14%,
			hsl(270deg 100%  50%) 74%,
			hsl(50deg  100%  80%) 80%,
			hsl(60deg  100%  90%) 84%,
			hsl(70deg  100%  95%) 86%,
			hsl(0deg   100% 100%) 100%
		);
		background-size: cover;
	}
	.amain-bg-kira {
		height: calc(100% - 300px);
		background: url(pre90-bg-sp.png) center top repeat;
		background-size: 750px auto;
	}
	.start .amain-bg-kira {
		height: calc(100% - 300px);
		background-size: 375px auto;
		z-index: 0;
	}
	.amenu-wrap {
		width: 880px;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}
	.amenu {
		width: 414px;
		height: 237px;
		border-width: 3px;
		margin: 22px auto;
	}
	.amenu.open {
		width: 680px;
	    height: 240px;
	    border-width: 5px;
	    margin: 35px auto 35px;
	    padding: 0;
	}
	.amenu.open .amenu-img {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.amenu-img .a-img {
		margin: 0 auto;
	}
	.atitle {
		font-size: 24px;
	}
	.atitle span {
		font-size: 14px;
		font-weight: bold;
		line-height: 1.7em;
	}
	.atext {
		font-size: 15px;
		line-height: 1.5em;
	}
	.amenu.open .atitle,
	.amenu.open .atext {
		text-align: left;
	}
	.amenu.open .atitle {
		display: block;

		margin: 0 0 0.5em;
	}
	.amenu.open .atext {
		font-size: 18px;
	}

	.amenu.open .atext.ss {
		font-size: 12px;
	}
	.ribbon-img, .coming-img {
		width: 250px;
		top: -30px;
	}

	.at-wrap {
		width: 440px;
	}

	/*「『まんが 赤塚不二夫伝』を読む。」のだ！*/
	.afd .amenu-img .a-img {
		width: 120px;
		margin: 0 40px;
	}
	/*赤塚まんがのひとコマ目*/
	.firstframe .amenu-img .a-img {
		width: 160px;
		margin: 0 20px;
	}
	/*べしすくい*/
	.beshisukuiswith .amenu-img .a-img {
		width: 160px;
		margin: 0 20px;
	}
	/*バカ大川柳*/
	.bakasen90th .amenu-img .a-img {
		width: 160px;
		margin: 0 20px;
	}
	/*アカツカアニマルズ*/
	.animals .amenu-img .a-img {
		width: 160px;
		margin: 0 20px;
	}
	/*バンザイ！菊千代*/
	.bkikuchiyo .amenu-img .a-img {
		width: 160px;
		margin: 0 20px;
	}
	/*コーフク川柳*/
	.kofuku .amenu-img .a-img {
		width: 160px;
		margin: 0 20px;
	}
	.kofuku .at-wrap {
		width: 470px;
	}
	/*シェーの自叙伝紹介*/
	.sheee90th .amenu-img .a-img {
		width: 160px;
		margin: 0 20px;
	}
	.sheee90th .atext {
		padding: 0 1em 0 0;
	}
	/*2025present*/
	.present90th .amenu-img .a-img {
		width: 210px;
	}
	.present_img {
		width: 25%;
	}
	/*べしが行くべし。*/
	.ikubeshi.amenu.open {
		width: 780px;
		height: 400px;
		padding: 0;
	}
	.ikubeshi.amenu.open .amenu-img {
		align-items: start;
	}
	.ikubeshi .amenu-img .a-img {
		width: 180px;
		margin: 80px 20px 0 10px;
	}
	.ikubeshi .at-wrap {
		width: 560px;
	}
	.ikubeshi_posts {
		width: 100%;
	}
	.ikubeshiSwiper .swiper-slide {
		width: 30%;
		margin: 0 3% 0 0;
	}
	.ib_eventdate {
		font-size: 14px;
	}
	a.ib_posts_link:hover .ib_posts_title,
	a.ib_posts_link:hover .ib_eventdate {
		color: #fa5d52;
	}

	.atopics-wrap {
		width: 100%;
		margin: 0 auto 80px;
	}
	.topics90th_h {
		width: 180px;
		margin: -20px auto 5px;
		transform: rotate(0);
	}
	.topics90th_h .a-img {
		width: 100%;
	}
	.swiper-slide {
		width: 280px;
	}
	.swiper-slide:last-of-type {
		padding-right: 0;
	}

}