@charset "UTF-8";

:root {
	--color-main1: #13b8b3;
	--color-white: #fff;
	--color-white-transparent50: rgba(255,255,255,.5);
	--color-black-transparent50: rgba(0,0,0,.25);
	--color-twitter: #000;
}

.header {
	.header_inner {
		.header_nav {
			.nav_tw {
				display: none;
				> span {
					font-size: 1rem;
					font-weight: 700;
					white-space: nowrap;
				}
				> a {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 24px;
					height: 24px;
					svg {
						width: 100%;
					}
				}
			}
		}
		@media (min-width: 768px) {
			.header_nav {
				display: flex;
				align-items: center;
				.nav_tw {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					gap: 0;
					margin: -8px 40px 8px 0;
					> a {
						width: 32px;
						height: 32px;
						border-radius: 1000px;
						background-color: #000;
						svg {
							width: 40%;
							fill: var(--color_white);
						}
					}
				}
			}
		}
		@media (min-width: 1280px) {
			.header_nav {
				.nav_tw {
					gap: 4px;
					margin: -12px 40px 12px 0;
					> a {
						width: 40px;
						height: 40px;
					}
				}
			}
		}
	}
}

/* share */
.share_wrap {
	.share_list {
		li {
			a {
				&::after {
				}
			}
			&.btn_share_fb {
				a {
					&::after {
					}
				}
			}
			&.btn_share_tw {
				a {
					display: flex;
					justify-content: center;
					align-items: center;
					&::after {
						display: none;
					}
					svg {
						width: 90%;
						height: auto;
					}
				}
			}
			&.btn_share_ln {
				a {
					&::after {
					}
				}
			}
		}
	}
}

/* btn */
.btn-s > a {
	display: inline-block;
	text-decoration: none;
	font-size: 16px;
	line-height: 1.5;
	border-style: solid;
	border-width: 1px;
	border-radius: 1000px;
}
section.form_input div.btn_wrap,
section.form_conf div.btn_wrap,
article.thx div.btn_wrap {
	margin: 0 0 180px 0;
}

/*fixed*/
body > .main {
	position: relative;
	> article {
		.sticky-button-wrapper {
			position: fixed;
			z-index: 9999;
			right: 0;
			bottom: 82px;
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			gap: 16px;
			p.btn-wanted {
				margin: 0 -16px 0 0;
				width: 120px;
				height: 120px;
				a {
					display: block;
					width: 100%;
					height: 100%;
					transition: all .1s;
				}
			}
			p.to-top {
				margin: 0;
				width: 48px;
				height: 48px;
				a {
					display: block;
					width: 100%;
					height: 100%;
					background-color: var(--color_main_bg);
					position: relative;
					border-radius: 16px 0 0 0;
					&::before {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);
						content: var(--font_arrow_up);
						font-family: var(--fontawesome);
						font-weight: 900;
						font-size: 16px;
						letter-spacing: normal;
						color: var(--color_white);
					}
				}
			}
			&.sticky-footer-area {
				position: absolute;
			}
		}
	}
}
body.wanted > .main > article {
	.sticky-button-wrapper {
		p.btn-wanted {
			display: none;
		}
	}
}

/* footer */
body > .footer {
	.show-sp {
		display: inline-block;
	}
	.show-pc {
		display: none;
	}
	> .footer-nav-btn {
		position: fixed;
		z-index: 10003;
		right: 0;
		bottom: 20px;
		padding: 8px;
		width: 60px;
		height: 60px;
		> span {
			display: block;
			width: 44px;
			height: 44px;
			border-radius: 4px;
			transition: .2s;
			cursor: pointer;
			> span {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 4px;
				height: 4px;
				border-radius: 1000px;
				background-color: var(--color_basetxt);
				&:nth-child(1) {
					transform: translate(-50%, calc(-50% - 8px));
				}
				&:nth-child(3) {
					transform: translate(-50%, calc(-50% + 8px));
				}
			}
		}
	}
	> .footer-inner {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -100;
	width: 100vw;
	height: 100vh;
	background-color: var(--color_main_transparent);
	backdrop-filter: blur(8px);
	opacity: 0;
	transition: .5s;
		> .sp-slide-footer {
		position: fixed;
		left: 0;
		bottom: -100%;
		width: 100%;
		height: calc(100vh - 220px);
		background-color: var(--color_white);
		transition: .5s;
			> .footer-nav-close-btn-wrap {
				width: 100%;
			height: 40px;
			background-color: var(--color-white);
				> .footer-nav-close-btn {
					position: absolute;
				right: 8px;
				top: 8px;
				width: 24px;
				height: 24px;
				cursor: pointer;
				&::before {
					position: absolute;
					top: 0;
					left: 0;
					display: block;
					content: var(--font_close);
					width: 100%;
					height: 100%;
					font-family: var(--fontawesome);
					font-weight: 900;
					font-size: 24px;
					line-height: 1;
					letter-spacing: normal;
					text-align: center;
				}
				}
			}
			> .sp-scroll-area {
			overflow-y: scroll;
			padding: 0 24px 24px 24px;
			height: calc(100% - 40px);
			transition: .5s;
				> .footer-nav-wrap {
					text-align: center;
					nav {
						.label-logo {
							margin: 0 auto 8vw;
							width: 48%;
							a {
								display: block;
								img {
									display: block;
								}
							}
						}
						.footer-nav-list {
							display: block;
							margin: 0;
							padding: 0;
							list-style: none;
							font-size: 14px;
							line-height: 1.6;
							li {
								margin-top: .5em;
								a {
									display: block;
									padding: 8px 16px;
									color: var(--color-main1);
									text-decoration: none;
									border: solid 1px var(--color-main1);
									border-radius: 1000px;
									&::after {
										display: none;
									}
								}
							}
						}
						.nav_tw {
							display: flex;
							justify-content: center;
							align-items: center;
							gap: 8px;
							margin: 24px 0 0 0;
							span {
								font-size: 1rem;
								font-weight: 700;
								color: #666;
							}
							a {
								display: flex;
								justify-content: center;
								align-items: center;
								width: 24px;
								svg {
									display: block;
									width: 100%;
								}
							}
						}
					}
				}
				> .wanted-bnr-wrap {
					.wanted-bnr-list {
						margin: 8vw 0 0;
						padding: 0;
						list-style: none;
						li {
							& + li {
								margin-top: 4vw;
							}
							a {
								display: block;
								&.img-border {
									border: solid 1px var(--color-black-transparent50);
								}
								img {
									vertical-align: bottom;
								}
							}
						}
					}
				}
				> .address-box {
					position: relative;
					padding: 16px 24px;
					border: solid 1px #fff;
					border-radius: 4px;
					line-height: 1.6;
					margin-top: calc(8vw + 12px);
					padding: 12px 4vw 16px;
					font-size: 14px;
					line-height: 1.8;
					border-color: var(--color-black-transparent50);
					> .txt-ttl {
						position: absolute;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						margin: -20px 0 0 0;
						padding: 0 16px;
						font-size: 16px;
						line-height: 1;
						background-color: var(--color-white);
						&::before {
							display: inline-block;
							margin-right: 8px;
							content: var(--font_mail);
							font-family: var(--fontawesome);
							font-weight: 400;
							font-size: 24px;
							line-height: 1;
						}
					}
					> p,
					> address {
						margin: 8px 0 0;
					}
					> p:first-child {
						margin-top: 0;
						margin-bottom: .5em;
					}
					.btn-s {
						margin-top: 16px;
						a {
							padding: 7px 20px;
							font-size: 12px;
							font-weight: 700;
							transition: 0.3s;
							&:hover {
								color: var(--color-main1);
								box-shadow: none;
								background-color: var(--color-white);
							}
						}
					}
				}
				> .footer-aside-wrap {
					margin-top: 8vw;
					.s-bnr-wrap {
						.s-bnr-list {
							margin: 0;
							padding: 0;
							list-style: none;
							li {
								margin: 0 auto;
								width: calc(100% - 32vw);
								& + li {
									margin-top: 4vw;
								}
								a {
									display: block;
									border: none;
									background-color: var(--color-white);
									&.img-border {
										border: solid 1px var(--color-black-transparent50);
									}
									img {
										display: block;
										aspect-ratio: 11 / 3;
										object-fit: contain;
									}
								}
							}
						}
					}
					.footer-abj-wrap {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 4vw;
						.img-wrap {
							margin: 0;
							width: 21%;
							img {
								display: block;
								filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(173deg) brightness(104%) contrast(104%);
							}
							svg {
								display: block;
							}
						}
						.txt-wrap {
							margin: 0;
							width: 74%;
							font-size: 10px;
							line-height: 1.6;
						}
					}
					.recaptcha-txt {
						margin: 4vw 0 0;
						font-size: 10px;
						line-height: 1.6;
					}
				}
				> .footer-copyright-wrap {
					margin-top: 8vw;
					.btn-corp-list {
						display: flex;
						justify-content: center;
						margin: 0 auto;
						padding: 0;
						list-style: none;
						width: calc(100% - 8vw);
						li {
							display: flex;
							justify-content: center;
							align-items: center;
							margin: 0 4vw;
							width: 50%;
							height: 8vw;
							a {
								display: block;
								img {
									display: block;
								}
							}
						}
					}
					.txt-footer-copyright {
						margin: 12px 0 0 0;
						text-align: center;
						font-size: 12px;
						line-height: 1.6;
					}
				}
			}
		}
		&.active {
			z-index: 10001;
		opacity: 1;
		> .sp-slide-footer {
			bottom: 80px;
		}
		}
	}
}






@media (min-width: 768px) {

	/* btn */
	.btn-s > a {
		font-size: 14px;
	}
	section.form_input div.btn_wrap,
	section.form_conf div.btn_wrap,
	article.thx div.btn_wrap {
		margin-bottom: 3rem;
	}

	/*fixed*/
	body > .main > article > .sticky-button-wrapper {
		bottom: 0;
		p.btn-wanted {
			margin-right: -24px;
			width: 200px;
			height: 200px;
		}
	}

	/* footer */
	body > .footer {
	overflow: hidden;
		position: relative;
		padding: 40px 4vw 4vw 4vw;
		color: var(--color-white);
		background: var(--color-main1);
		.show-sp {
			display: none;
		}
		.show-pc {
			display: inline-block;
		}
		a {
			color: var(--color-white);
		}
		> .footer-nav-btn {
			display: none;
		}
		> .footer-inner {
			position: static;
			width: 100%;
			height: auto;
			background-color: transparent;
			backdrop-filter: blur(0px);
			opacity: 1;
			> .sp-slide-footer {
				position: static;
				height: auto;
				background-color: transparent;
				> .footer-nav-close-btn-wrap {
					display: none;
				}
				> .sp-scroll-area {
					overflow: hidden;
					display: flex;
					flex-direction: column;
					flex-wrap: wrap;
					justify-content: space-between;
					padding: 0;
					height: auto;
					> .footer-nav-wrap {
						order: 1;
						margin-right: 40px;
						width: calc(40% - 40px);
						text-align: left;
						nav {
							.label-logo {
								margin: 0 0 24px;
								width: auto;
								height: 80px;
								a {
									display: inline-flex;
									aspect-ratio: 17 / 8;
									height: 100%;
									img {
										filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(173deg) brightness(104%) contrast(104%);
									}
								}
							}
							.footer-nav-list {
								font-size: 12px;
								li {
									margin-top: 1em;
									a {
										display: inline-block;
										padding: 0;
										color: var(--color-white);
										border: none;
										&:hover {
											text-decoration: underline;
										}
									}
								}
							}
							.nav_tw {
								display: none;
							}
						}
					}
					> .wanted-bnr-wrap {
						order: 3;
						width: 60%;
						.wanted-bnr-list {
							margin-top: 0;
							li {
								& + li {
									margin-top: 16px;
								}
								a {
									&.img-border {
										border-color: var(--color-white-transparent50);
									}
								}
							}
						}
					}
					> .address-box {
						order: 4;
						margin-top: 30px;
						padding-left: 24px;
						padding-right: 24px;
						width: 60%;
						border-color: var(--color-white-transparent50);
						> .txt-ttl {
							background-color: var(--color-main1);
						}
					}
					> .footer-aside-wrap {
						order: 2;
						margin: 24px 40px 0 0;
						width: calc(40% - 40px);
						.s-bnr-wrap {
							.s-bnr-list {
								li {
									margin: 0;
									width: 100%;
									max-width: 200px;
									& + li {
										margin-top: 8px;
									}
									a {
										&.img-border {
											border: solid 1px var(--color-white-transparent50);
										}
									}
								}
							}
						}
						.footer-abj-wrap {
							flex-direction: column;
							align-items: flex-start;
							margin-top: 24px;
							.img-wrap {
								width: 72px;
								svg {
									fill: var(--color-white);
								}
							}
							.txt-wrap {
								margin-top: 1em;
								width: 100%;
							}
						}
						.recaptcha-txt {
							margin-top: 24px;
						}
					}
					> .footer-copyright-wrap {
						order: 5;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 24px;
						width: 60%;
						.btn-corp-list {
							margin: 0;
							width: auto;
							li {
								margin: 0;
								width: auto;
								height: 24px;
								& + li {
									margin-left: 24px;
								}
								a {
									width: auto;
									height: 100%;
									img {
										width: auto;
										height: 100%;
									}
								}
							}
						}
						.txt-footer-copyright {
							margin-top: 0;
						}
					}
				}
			}
		}
	}

}






@media (min-width: 960px) {

	/* btn */
	.btn-s > a {
		font-size: 16px;
	}
	section.form_input div.btn_wrap,
	section.form_conf div.btn_wrap,
	article.thx div.btn_wrap {
		margin-bottom: 6rem;
	}

	/* main */
	.cont-wrapper > main {
		width: 100%;
		article {
			div.h1-wrapper {
				background-image: url(/footer-assets/img/h1-bg-pc.gif);
			}
		}
	}

	/* body#list */
	body#list {
		.search-box {
			.search-cont-wrap {
				width: calc(100% - 280px);
				.nice-select,
				fieldset {
					width: calc(100% - 40px);
				}
			}
		}
		ul.comic-list {
			margin-left: 0;
			gap: 40px;
			> li {
				margin: 0;
				width: calc(calc(100% - 120px) / 4);
				figure {
					width: 100%;
				}
				h4.title,
				h3.name,
				p.cap {
					margin-left: 0;
					width: 100%;
				}
			}
		}
	}
	ul.site-list {
		display: flex;
		flex-wrap: wrap;
		gap: 24px;
		margin-left: auto;
		width: 100%;
		li {
			display: block;
			margin-right: 0;
			margin-bottom: 0;
			margin-left: 0;
			width: calc(calc(100% - 120px) / 6);
			aspect-ratio: 11 / 6;
		}
	}

	/* footer */
	body > .footer {
		padding: 40px;
		> .footer-inner {
			> .sp-slide-footer {
				> .sp-scroll-area {
					> .footer-nav-wrap {
						width: calc(30% - 40px);
					}
					> .wanted-bnr-wrap {
						width: 70%;
					}
					> .address-box {
						width: 70%;
					}
					> .footer-aside-wrap {
						width: calc(30% - 40px);
						.footer-abj-wrap {
							flex-direction: row;
							align-items: center;
							margin-top: 24px;
							.img-wrap {
								width: 72px;
							}
							.txt-wrap {
								margin-top: 0;
								width: calc(100% - 88px);
							}
						}
					}
					> .footer-copyright-wrap {
						width: 70%;
					}
				}
			}
		}
	}

}