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

/*common*/
.sp {
	display: block;
}
.pc {
	display: none;
}
.aa_img {
	width: 100%;
	height: auto;
	display: block;
}
.aatext {
	font-size: 4vw;
	line-height: 1.7em;
	color: #fff;
}
.aatext.b {
	font-weight: bold;
}

.f-acumin {
	font-family: acumin-pro, sans-serif;
	font-weight: 900;
}
.f-kasane {
	font-family: ta-kasanemarugo, sans-serif;
	font-weight: 400;
}
.f-kodomo {
	font-family: kodomo-rounded, sans-serif;
	font-weight: 400;
}
.f-kakugo {
	font-family: hiragino-kaku-gothic-pron, sans-serif;
	font-weight: 600;
}
.wf-loading {
	opacity: 0;
}

#aanimals {
	background-color: #17191a;
	padding-bottom: 2em;
	position: relative;
}
#aanimals + #footer {
	margin-top: 0;
}

.aahead-wrap {
	overflow: hidden;
}
.logo-aa {
	margin-top: 0.5em;
	width: 100vw;
}
.aaread {
	margin: 1em auto;
	transform: rotate(3deg);
}
.aaread .aatext {
	text-align: center;
	font-size: 8vw;
	color: #c93a2f;
	line-height: 1.3em;
	text-shadow: -1px -1px 1px #fff;
	letter-spacing: 0.05em;
}
.aaread .aatext em {
	font-weight: 400;
	color: #bb24a3;
}

/*animals news*/
.aanews {
	background-color: #3cbea2;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 4vw;
	position: sticky;
	bottom: 0;
	left: 0;
	margin: 3em;
}
.aanews .new-label {
	width: 4em;
	display: block;
	line-height: 1em;
	padding: 0.5em 0 0.25em;
	background-color: #48cbaf;
	text-shadow: -1px 1px 1px #e4017f;
}
.aanews-date {
	line-height: 1em;
	color: #17191a;
}
.aanews-date-y {
	font-size: 10px;
}
.aanews .marquee {
	padding: 0.5em 0;
	overflow: hidden;
	width: calc(100% - 4em);
}   
.aanews .marquee-text {
	display: inline-block;
	padding-left: 100%;
	white-space: nowrap;
	animation: marquee 20s linear infinite;
	color: #17191a;
}
.aanews .marquee-text a {
	display: inline-block;
	font-family: hiragino-kaku-gothic-pron, sans-serif;
	font-weight: 600;
	font-size: 4vw;
	color: #000;
	text-decoration: underline;
	transform: translateY(0.4em);
}
@keyframes marquee {
	0% { transform: translate(0); }
	100% { transform: translate(-100%); }
}
.aanews .marquee-text .f-kodomo {
	font-size: 5vw;
}

.aamenu-wrap {
	position: relative;
	padding-top: 80px;
}
/*タブボタン*/
.switch-button {
	width: 100%;
	height: 60px;
	text-align: center;
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate3D(-50%, 0, 0);
	will-change: transform;
	z-index: 197 !important;
	cursor: pointer;
	transition: .3s ease all;
	border: 1px solid #000;
	box-sizing: border-box;
	background-color: #000;
}
.switch-button-case {
	display: inline-block;
	background: none;
	width: 49%;
	height: 100%;
	color: white;
	position: relative;
	border: none;
	transition: .3s ease all;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding-bottom: 1px;
	font-size: 4vw;
	font-weight: bold;
}
.switch-button-case:hover {
	color: grey;
	cursor: pointer;
}
.switch-button-case:focus {
	outline: none;
}
.switch-button .active {
	color: #000;
	background-color: #e82335;
	position: absolute;
	left: 0;
	top: 0;
	width: 50%;
	height: 100%;
	z-index: -1;
	transition: .3s ease-out all;
}
.switch-button .active-case {
	color: #000;
}

/*aamenu title*/
.aagenre_h3 {
	color: #fff;
	font-size: 5.4vw;
	font-weight: bold;
	text-align: left;
	padding-left: 0.5em;
	line-height: 1.8em;
}
.aagenre_h3 a {
	color: #fff;
	transition: 0.3s;
}
.aagenre_h3 a:hover {
	color: gray;
}
.aagenre_h3 .f-kakugo {
	font-size: 5.25vw;
	letter-spacing: 0.1em;
}
.aagenre_h3 a .f-kakugo {
	text-decoration: underline;
}
.aagenre_h3 .f-kodomo {
	transform: translateY(0.05em);
	display: inline-block;
}
.aagenre_h3 .aagenre_count {
	font-size: 3.8vw;
	font-weight: normal;
}

/*aamenu thumbnails*/
/*swiper*/
.swiper {
	width: 98%;
	height: 100%;
	margin: 0 auto;
	padding-bottom: 2em;
}
.swiper-slide {
	text-align: center;
	font-size: 4vw;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.swiper-slide:last-of-type {
	padding-right: 3vw;
}
.swiper-slide {
	width: 80px;
}
.swiper-pagination-bullet {
	background: #ccc;
	opacity: 1;
}
.swiper-pagination-bullet-active {
	background: #000;
}

/*aamenu thumbnail btn*/
.aath_btn {
	display: block;
	position: relative;
}
.aath_btn::after {
	content: "";
	display: block;
	width: 80px;
	height: 80px;
	position: absolute;
	top: 0;
	left: 0;
	border: 5px #000 solid;
	box-sizing: border-box;
	transition: 0.4s;
}
.aath_btn:hover::after {
	border: 1px rgba(0,0,0,0) solid;;
}
.new-label {
	display: flex;
	justify-content: center;
	font-size: 4vw;
	color: #ffe400;
}

/*ぜんぶ見る*/
.aaall_btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	background-color: #000;
	border-radius: 10px 0 0 10px;
	position: absolute;
	top: 20px;
	right: 0;
	z-index: 1;
	transition: 0.2s;
}
.triangle {
	background: #e6e6e6;
	height: calc(tan(60deg) * 1em / 2);
	width: 1em;
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	transition: 0.2s;
}
.triangle.right {
	width: 0.75em;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.aaall_btn:hover {
	background-color: #e6e6e6;
}
.aaall_btn:hover .triangle {
	background-color: #000;
}

/*------------------animals single------------------*/
.aasingle .aahead {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1em;
}
.aasingle .aahead_title {
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc(40vw + 8em);
	margin: auto;
}
.aasingle .logo-aa {
	width: 30vw;
	margin-top: 0;
	margin-right: 10vw;
}
/* single タブボタン */
.aasingle .switch-button_wrap {
	width: 8em;
	font-size: 3.4vw;
	position: relative;
	height: 70px;
}
.aasingle .switch-button {
	height: 100%;
}
.aasingle .switch-button .active {
	width: 100%;
	height: 50%;
}
.aasingle .switch-button-case {
	width: 100%;
	height: 50%;
	font-size: 3.4vw;
	white-space: nowrap;
}
.aasingle .switch-button-case.left,
.aasingle .switch-button-case.right {
	float: none;
}

/* single post */
.single-animals {
	background-color: #000;
	padding: 2em 0;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto 2em;
}
.single-animals_body {
	width: 86%;
	margin: auto;
}
.as-image {
	display: flex;
	justify-content: center;
	align-items: end;
}
.as-image_empty,
.as-image_zoom_btn {
	display: block;
	width: 50px;
}
.as-image_zoom_img {
	display: block;
	width: calc(98% - 100px);
	margin: auto;
}
.as-image_zoom_btn {
	background-color: #8d9499;
	border-radius: 10px;
	transition: 0.4s;
}
.as-image_zoom_btn:hover {
	background-color: #fff;
}
.as-charaname {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin: 0.5em auto 0;
}
.as-charaname .as-charaname-link {
	display: block;
	margin: 0 1em;
	font-family: hiragino-kaku-gothic-pron, sans-serif;
    font-weight: 600;
    font-size: 4vw;
    color: #fff;
}
.as-charaname a.as-charaname-link {
    text-decoration: underline;
    padding-left: 1.1em;
    background: url(ico_charasearch.png) 0 0 no-repeat;
    background-size: 1em auto;
}
.as-caption {
	margin-top: 1em;
	font-size: 4.25vw;
	font-weight: bold;
	text-align: center;
	color: #fff;
}
.as-caption .yori {
	font-size: 3.6vw;
	font-weight: normal;
}

.post_taxonomy_link {
	color: #fff;
	text-align: left;
	line-height: 1.8em;
	width: 90%;
	margin: 0.1em auto 0;
}
.aapost_tags {
	margin-top: 1em;
}
.post_taxonomy_link h4 {
	font-size: 3.2vw;
	font-weight: normal;
	display: inline;
	color: #ddd;
}
.post_taxonomy_link a {
	display: inline-block;
	font-family: hiragino-kaku-gothic-pron, sans-serif;
	font-weight: 600;
	font-size: 4vw;
	color: #fff;
	text-decoration: underline;
	transform: translateY(0.4em);
}
.post_taxonomy_link .f-kodomo {
	font-size: 4.6vw;
	color: #ddd;
}
.aapost_next_link {
	width: 90%;
	margin: 1em auto 2em;
	display: flex;
	justify-content: center;
	align-items: center;
}
.aapost_next_link a,
.aapost_next_link span {
	display: block;
	text-align: center;
	font-family: acumin-pro, sans-serif;
	font-weight: 900;
	font-size: 8vw;
	margin: 0 2px;
	height: 50px;
	line-height: 50px;
	width: 50%;
	box-sizing: border-box;
}
.aapost_next_link a {
	color: #fff;
	background-color: #000;
}
.aapost_next_link a:hover {
	background-color: #e82335;
	color: #000;
}
.backtop_btn a {
	font-family: kodomo-rounded, sans-serif;
	font-weight: 400;
	font-size: 4vw;
	width: 20em;
}

/*------------------animals taxonomy archive------------------*/
.aaarchive .aamenu-wrap {
	padding-top: 0;
}
.aaarchive .archivelist_ul {
	width: 98%;
	height: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: start;
	align-items: start;
	flex-wrap: wrap;
}
.aaarchive .archivelist_li {
	width: calc(98vw / 4);
	text-align: center;
}
.aaarchive .archivelist_li .aath_btn::after {
	width: calc(98vw / 4);
	height: calc(98vw / 4);
}

.link_90th {
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	display: flex;
	justify-content: end;
	align-items: center;
}
.aasingle .link_90th {
	justify-content: start;
}
.link_90th .link_90th_btn {
	display: block;
	width: 68px;
	transition: 0.3s;
}
.link_90th .link_90th_btn:hover .aa_img {
	animation: logo90thhover 0.8s;
}
@keyframes logo90thhover {
	0% {
		transform: rotateY(360deg);
	}
	100% {
		transform: rotateY(0deg);
	}
}

@media (min-width: 768px) {
	
	/*common*/
	#aanimals {
		margin: auto;
		font-size: 18px;
	}
	.sp {
		display: none;
	}
	.pc {
		display: block;
	}
	.aa_img {
		width: auto;
	}

	.aahead-wrap,
	.aamenu-wrap {
		width: 100%;
		max-width: 1120px;
		margin: 0 auto;
	}

	.logo-aa {
		margin-top: 25px;
		width: 100%;
	}
	.logo-aa .aa_img {
		margin: auto;
	}
	.aaread {
		margin: 2em auto;
		transform: rotate(-1.5deg);
	}
	.aaread .aatext {
		font-size: 28px;
		line-height: 1.6em;
	}

	/*animals news*/
	.aanews {
		font-size: 18px;
		margin: 1em auto 3em;
        width: 500px;
        border-radius: 0 40px 40px 0;
	}
	.aanews-date-y {
		font-size: 12px;
	}
	.aanews-date.aatext,
	.aanews .marquee-text,
	.aanews .marquee-text a,
	.aanews .marquee-text .f-kodomo {
		font-size: 18px;
	}

	.aagenre_h3 {
		font-size: 24px;
		padding-left: 0;
	}
	.aagenre_h3 a {
	}
	.aagenre_h3 a:hover {
		text-decoration: none;
	}
	.aagenre_h3 .f-kakugo {
		font-size: 24px;
	}
	.aagenre_h3 .aagenre_count {
		font-size: 18px;
	}
	.switch-button-case {
		font-size: 18px;
	} 

	.swiper {
		width: 100%;
	}
	.swiper-slide {
		width: 160px;
	}
	.aath_btn::after {
		width: 160px;
		height: 160px;
	}
	.new-label {
		font-size: 18px;
	}
	.aaall_btn {
		top: 60px;
	}

	/*----animals single----*/
	.aasingle .logo-aa {
		width: 160px;
		margin-right: 10px;
	}
	.aasingle .logo-aa .aa_img {
		width: 100%;
	}
	.aasingle .aahead_title {
		width: auto;
		margin: 10px 0 0;
	}
	.aasingle .switch-button_wrap {
		width: 150px;
		font-size: 18px;
		height: 80px;
	}
	.aasingle .switch-button-case {
		font-size: 18px;
	}

	.aaarchive .archivelist_ul {
		width: 100%;
	}
	.aaarchive .archivelist_li {
		width: 160px;
		height: 180px;
	}
	.aaarchive .archivelist_li .aath_btn::after {
		width: 160px;
		height: 160px;
	}

	.single-animals_body {
		width: 680px;
	}
	.as-image_empty,
	.as-image_zoom_btn {
		width: 100px;
	}
	.as-image_zoom_img {
		width: calc(680px - 200px - 40px);
		margin: auto;
	}
	.as-image_zoom_img .aa_img {
		width: 100%;
	}
	.as-charaname .as-charaname-link {
		font-size: 18px;
	}
	.as-caption {
		margin-top: 1em;
		font-size: 20px;
	}
	.as-caption .yori {
		font-size: 16px;
	}
	.post_taxonomy_link {
		text-align: center;
	}
	.post_taxonomy_link a,
	.post_taxonomy_link .f-kodomo {
		font-size: 18px;
	}
	.post_taxonomy_link h4 {
		font-size: 16px;
		font-weight: bold;
	}
	.aapost_next_link {
		width: 50%;
		margin: 3em auto 0em;
	}
	.aapost_next_link a,
	.aapost_next_link span {
		font-size: 60px;
	}
	.backtop_btn a {
		font-size: 18px;
	}

	.aahead {
		position: relative;
	}
	.link_90th {
		width: 104px;
		padding: 0;
		justify-content: center;
		position: absolute;
		top: -13px;
		left: 0;
		z-index: 1;
	}
	.aasingle .link_90th {
		position: relative;
		top: 0;
	}

	.link_90th .link_90th_btn,
	.link_90th .link_90th_btn .aa_img {
		width: 104px;
	}

}