@charset "utf-8";
:root {
	--loading: calc(var(--duration) * 2) 1s all;
	--red: #E75532;
	--blue: #5082C2;
	--gray: #595757;
}
@keyframes audio {
	0% { transform: scale(1); }
	50% { transform: scale(0.95); }
	100% { transform: scale(1); }
}
@keyframes rotate {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
@keyframes icon {
	0% { transform: rotate(-5deg); }
	50% { transform: rotate(5deg); }
	100% { transform: rotate(-5deg); }
}
@keyframes egg {
	0% { transform: rotate(-15deg); }
	50% { transform: rotate(5deg); }
	100% { transform: rotate(-15deg); }
}
@keyframes duck {
	0% { transform: rotate(-15deg); }
	50% { transform: rotate(5deg); }
	100% { transform: rotate(-15deg); }
}
.icon {
	animation: icon calc(var(--duration)*3) infinite;
	&.egg {
		transform-origin: 0% 100%;
		animation: egg calc(var(--duration)*5) infinite;
	}
	&.duck {
		transform-origin: 50% 100%;
		animation: duck calc(var(--duration)*8) ease-in-out infinite;
	}
}
#load {
	position: absolute;
	top: 0;
	left: 0;
	width: 100dvw;
	height: 100dvh;
	background-color: rgb(255, 255, 255, 1);
	z-index: 100;
	overflow: auto;
    overscroll-behavior: contain;
	transition: var(--loading);
	.block {
		overflow: hidden;
		aspect-ratio: 750/1164;
		width: 100%;
		position: relative;
		h1 {
			aspect-ratio: 354.2744477/135.4501102;
			display: block;
			width: calc(335/375 * 100%);
			position: absolute;
			top: 50%;
			left: 50%;
			will-change: transform;
			transform: translateZ(0);
			transition: var(--loading);
			&::before {
				content: "";
				display: block;
				width: 100%;
				height: 100%;
				position: absolute;
				top: -50%;
				left: -50%;
				background: url(../img/cgname1.svg) center center/contain no-repeat;
			}
		}
	}
	&.active {
		pointer-events: none;
		background-color: rgb(255, 255, 255, 0);
		h1 {
			width: calc(240 / 375 * 100%);
			top: 81%;
		}
	}
	@media only screen and (min-width:768px) {
		width: 100%;
		height: 100%;
		.block {
			aspect-ratio: 2000/1090;
			h1 {
				width: calc(800/1440 * 100%);
				top: calc(50% - 26px);
			}
		}
		&.active {
			.block {
				h1 {
					width: calc(354/1440 * 100%);
					left: 27%;
				}
			}
		}
	}
}
main {
	position: relative;
	padding-bottom: 60px;
	@media only screen and (min-width:768px) {
		padding-bottom: 34px;
	}
}
#main_img {
	position: relative;
	.frame {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		.block {
			display: flex;
			flex-flow: wrap;
			justify-content: center;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			.area {
				width: calc(335/375 * 100%);
				padding-bottom: calc(64/375 * 100%);
				position: relative;
				display: flex;
				flex-flow: wrap;
				align-items: flex-end;
				justify-content: center;
				a.logo {
					width: calc(83 / 335 * 100%);
                    position: absolute;
                    top: 10%;
                    left: 9%;
				}
				.cm_icon {
					width: calc(120/335 * 100%);
                    position: absolute;
                    top: 7%;
                    right: 6%;
					&::before {
						content: "";
						display: block;
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						background: url(../img/cgcircle.svg) center center/contain no-repeat;
						animation: rotate calc(var(--duration)*100) infinite;
					}
				}
			}
		}
	}
	@media only screen and (min-width:768px) {
		.frame {
			.block {
				.area {
					justify-content: flex-start;
					align-items: center;
					padding: 0;
					width: calc(1200/1440 * 100%);
					a.logo {
						width: calc(116 / 1200 * 100%);
						top: 11%;
						left: 8.5%;
					}
					.cm_icon {
						width: calc(280/1200 * 100%);
						top: calc(136/1200 * 100%);
						right: calc(98/1200 * 100%);
					}
				}
			}
		}
	}
}
.audio_bb {
	aspect-ratio: 222.1842847/68.2976;
	display: block;
	width: 100%;
	border: none;
	background-color: rgb(255, 255, 255, 0);
	position: relative;
	>img {
		opacity: 0;
	}
	&::after {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: url(../img/cgvoicebb2.svg) center center/contain no-repeat;
		animation: audio calc(var(--duration)*5) infinite;
	}
	&:hover::after {
		background-image: url(../img/cgvoicebb.svg);
		animation: none;
	}
}
#prof {
	width: calc(335/375 * 100%);
	max-width: 1200px;
	margin: 0 auto 0 auto;
	padding-top: 80px;
	position: relative;
	display: flex;
	flex-flow: wrap;
	justify-content: center;
	row-gap: 50px;
	.icon {
		width: 30px;
		position: absolute;
		top: 22px;
		right: 22px;
	}
	h2 {
		width: calc(300/335 * 100%);
		max-width: 354px;
	}
	.flex {
		width: 100%;
		display: flex;
		flex-flow: column;
		row-gap: 38px;
		.body {
			display: flex;
			flex-flow: column;
			row-gap: 20px;
			font-size: 1.4rem;
			text-align: center;
			.audio {
				display: flex;
				flex-flow: nowrap;
				justify-content: center;
				align-items: center;
				column-gap: 5px;
				span {
					white-space: nowrap;
				}
				.audio_bb {
					max-width: 222px;
					padding: 0;
					margin: 0;
					img {
						width: 100%;
					}
				}
			}
		}
		.character {
			.swiper {
				mask: url(../img/cgprofhh.svg) center/100% no-repeat;
				background: #FFFFFF;
				aspect-ratio: 490/600;
				margin: 0 auto 0 auto;
				ul.swiper-wrapper {
					li.swiper-slide {
						display: flex;
						flex-flow: wrap;
						justify-content: center;
						>.swiper-slide-shadow-coverflow {
							display: none;
						}
						img {
							filter: drop-shadow(2px 3px 3px rgba(0, 0, 0, 0.2));
						}
					}
				}
				.swiper-button-next,
				.swiper-button-prev {
					aspect-ratio: 22.7965813/25.0352246;
					width: 16px;
					height: auto;
					mask: url(../img/cgprofile_yaji.svg) center/100% no-repeat;
					background: var(--gray);
					&::after {
						display: none;
					}
					&:hover {
						background-color: var(--red);
					}
				}
				.swiper-button-next {
					transform: rotate(180deg);
					&:hover {
						background-color: var(--blue);
					}
				}
				.swiper-pagination {
					display: none;
					top: auto;
					bottom: 26px;
					.swiper-pagination-bullet {
						background-color: var(--gray);
						opacity: 1;
						margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 7px);
						&.swiper-pagination-bullet-active {
							transform: scale(1.5);
							background-color: var(--red);
						}
						&:nth-of-type(even) {
							&.swiper-pagination-bullet-active {
								background-color: var(--blue);
							}
						}
					}
				}
			}
		}
	}
	@media only screen and (min-width:768px) {
		padding-top: 132px;
		row-gap: 88px;
		h2 {
			max-width: 503px;
		}
		.icon {
			width: 50px;
			top: 172px;
			right: 60px;
		}
		.flex {
			flex-flow: wrap;
			align-items: center;
			justify-content: center;
			column-gap: 63px;
			.body {
				order: 2;
				row-gap: 36px;
				line-height: 2.6;
				font-size: 1.6rem;
				text-align: left;
				.audio {
					justify-content: flex-start;
					.audio_bb {
						width: 254px;
						max-width: none;
					}
				}
				br.none {
					display: none;
				}
			}
			.character {
				order: 1;
				width: 490px;
				.swiper {
					.swiper-pagination {
						bottom: 36px;
					}
				}
			}
		}
	}
}
.content {
	width: calc(335/375 * 100%);
	max-width: calc(400px * 3 + 32px * 2);
	margin: 0 auto 0 auto;
	padding-top: calc(10px + 84px + 12px);
	display: flex;
	flex-flow: column;
	row-gap: calc(30px + 54px + 30px);
	position: relative;
	.icon {
		position: absolute;
		&.thunder {
			width: 30px;
			top: 30px;
			left: 22px;
		}
		&.egg {
			width: 76px;
			top: 10px;
			right: 12px;
		}
	}
	.block {
		display: flex;
		flex-flow: column;
		row-gap: 30px;
		h2 {
			text-align: center;
			img {
				height: 45px;
			}
		}
	}
	@media only screen and (min-width:768px) {
		width: calc(100% - 20px*2 - 100px*2);
		padding-top: 202px;
		row-gap: calc(30px + 54px + 30px + 88px);
		.icon {
			&.thunder {
				width: 50px;
				top: 144px;
				left: 40px;
			}
			&.egg {
				width: 126px;
				top: -40px;
				right: 28px;
			}
		}
		.block {
			row-gap: 48px;
			h2 {
				img {
					height: 63px;
				}
			}
			.body {
				.banner_swip {
					padding-bottom: calc(20px + 15px);
					ul.swiper-wrapper {
						>li {
							a {
								display: block;
								overflow: hidden;
								img {
									transition: var(--duration) all;
								}
								&:hover {
									img {
										transform: scale(1.1);
									}
								}
							}
						}
					}
					.swiper-pagination {
						top: auto;
						bottom: 0;
						display: flex;
						flex-flow: wrap;
						justify-content: center;
						column-gap: 15px;
						.swiper-pagination-bullet {
							aspect-ratio: 1/1;
							width: 15px;
							height: auto;
							margin: 0;
							background-color: var(--blue);
							opacity: 1;
							&.swiper-pagination-bullet-active {
								background-color: var(--red);
							}
						}
					}
				}
			}
		}
	}
}
#cm {
	position: relative;
	ul.cm_list {
		display: flex;
		flex-flow: column;
		row-gap: 40px;
		list-style: none;
	}
	.duck {
		width: 81px;
		position: absolute;
		right: 0;
		bottom: calc(-30px - 54px);
	}
	@media only screen and (min-width:768px) {
		ul.cm_list {
			flex-flow: wrap;
			column-gap: calc(32/804 * 100%);
			row-gap: 45px;
			max-width: calc(386px*2 + 32px*1);
			margin: 0 auto 0 auto;
			> li {
				width: calc(386/804 * 100%);
			}
		}
		.duck {
			width: 135px;
			bottom: calc(-102px - 90px);
			right: 8px
		}
	}
}
#movie_list {
	/*width: calc(335/375 * 100%);*/
	width: calc(100% - 20px*2 - 100px*2);
	max-width: 1200px;
	margin: 0 auto 0 auto;
	padding-top: calc(40px + 64px + 20px);
	position: relative;
	.icon {
		position: absolute;
		&.gas_stove {
			width: 82px;
			top: 20px;
			left: 22px;
		}
		&.bathtub {
			width: 77px;
			top: 36px;
			right: 22px;
		}
	}
	h2 {
		width: 204px;
		margin: 0 auto 0 auto;
	}
	p {
		text-align: center;
		margin-top: 30px;
	}
	.random {
		margin-top: 20px;
		position: relative;
		.icon {
			&.bathtub {
				display: none;
			}
		}
	}
	.all_play {
		margin: 20px auto 0 auto;
		width: 170px;
		position: relative;
		&::after {
			content:"";
			display: block;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			pointer-events: none;
		}
		&:hover {
			&::after {
				background: url(../img/cgplay_on.svg) center center/contain no-repeat;
			}
		}
	}
	@media only screen and (min-width:768px) {
		padding-top: 184px;
		.icon {
			&.gas_stove {
				width: 136px;
				top: 124px;
				left: 0;
			}
			&.bathtub {
				display: none;
			}
		}
		h2 {
			width: 290px;
		}
		p {
			margin-top: 26px;
		}
		.random {
			margin-top: 32px;
			.icon {
				&.bathtub {
					display: block;
					width: 128px;
					top: 8px;
					right: 8px;
				}
			}
			.play {
				width: 450px;
				margin: 0 auto 0 auto;
			}
		}
		.all_play {
			margin-top: 25px;
		}
	}
}
.copy {
	width: calc(335/375 * 100%);
	max-width: 1200px;
	margin: 60px auto 0 auto;
	display: flex;
	flex-flow: wrap;
	justify-content: center;
	position: relative;
	.icon {
		display: none;
		position: absolute;
	}
	.img {
		width: calc(300/335 * 100%);
		max-width: 470px;
	}
	@media only screen and (min-width:768px) {
		margin-top: 138px;
		.icon {
			display: block;
			&.thunder {
				width: 50px;
				top: calc(-138px + 44px);
				left: 22px;
			}
		}
	}
}
/* youtube */
.play {
	display: flex;
	flex-flow: column;
	row-gap: 20px;
	cursor: pointer;
	>p {
		text-align: center;
	}
	>.img {
		position: relative;
		overflow: hidden;
		&::before {
			content: "";
			display: block;
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: 2;
			top: 0;
			left: 0;
			background: url(../img/cgtvcmp_play.png) center center/cover no-repeat;
		}
		img {
			transition: var(--duration) all;
		}
	}
	&:hover {
		>.img {
			img {
				transform: scale(1.1);
			}
		}
	}
	@media only screen and (min-width:768px) {
		row-gap: 15px;
	}
}
#movie {
	overflow: auto;
    overscroll-behavior: contain;
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	width: 100dvw;
	height: 100dvh;
	display: none;
	flex-flow: wrap;
	justify-content: center;
	align-items: center;
	background-color: rgb(0, 0, 0, 0.7);
	.box {
		aspect-ratio: 16/9;
		width: calc(335/375 * 100%);
		max-width: 1200px;
		position: relative;
		.close {
			cursor: pointer;
			aspect-ratio: 1/1;
			width: 30px;
			position: absolute;
			top: calc(0px - 30px - 10px);
			right: 0;
			background-color: #FFFFFF;
			clip-path: polygon(
				0 calc(50% - 1px), 
				calc(50% - 1px) calc(50% - 1px), 
				calc(50% - 1px) 0, 
				calc(50% + 1px) 0, 
				calc(50% + 1px) calc(50% - 1px), 
				100% calc(50% - 1px), 
				100% calc(50% + 1px), 
				calc(50% + 1px) calc(50% + 1px), 
				calc(50% + 1px) 100%, 
				calc(50% - 1px) 100%, 
				calc(50% - 1px) calc(50% + 1px), 
				0 calc(50% + 1px)
			);
			transform: rotate(45deg);
		}
	}
	&.active {
		display: flex;
	}
}