@charset "UTF-8";

:root {
	--breakPoint: 768px;
	--baseColor1: rgba(252,244,231,1.00);
	--baseColor2: rgba(239,229,212,1.00);
	--redColor: rgba(203,40,72,1.00);
	--white: rgba(255,255,255,1.00);
	--textColor: rgba(51,51,51,1.00);
	--shadowColor1: rgba(77,58,62,1.00);
	--shadowColor2: rgba(77,58,62,0.20);
	--baseFont: "Noto Sans JP", sans-serif;
	--subFont: "Roboto", sans-serif;
	--sizeVisualCopy: 56px;
	--sizeVisualSub: 36px;
	--sizeTitle: 40px;
	--sizeSubTitle: 20px;
	--sizeCopy1: 24px;
	--sizeCopy2: 20px;
	--sizeHeading: 20px;
	--sizeText1: 16px;
	--sizeText2: 15px;
	--sizeText3: 18px;
	--sizeName: 26px;
	@media screen and (max-width: 768px) {
		--sizeVisualCopy: 9.067vw;
		--sizeVisualSub: 6.4vw;
		--sizeTitle: 8vw;
		--sizeSubTitle: 5.333vw;
		--sizeCopy1: 5.333vw;
		--sizeCopy2: 4.8vw;
		--sizeHeading: 5.867vw;
		--sizeText1: 4.267vw;
		--sizeText2: 4vw;
		--sizeText3: 4.8vw;
		--sizeName: 6.933vw;
	}
}

html {
	overflow-x: hidden;
	scroll-behavior: smooth;
	scroll-padding-top: 88px;
}

body {
	background-color: var(--baseColor1);
	font-family: var(--baseFont);
	/* font-optical-sizing: auto; */
	font-weight: 400;
	color: var(--textColor);
	font-size: var(--sizeText1);
	@media screen and (max-width: 768px) {
		overflow-x: hidden;
	}
	>p.contact {
		position: fixed;
		right: 0;
		top: 168px;
		width: 100px;
		z-index: 105;
		text-align: center;
		@media screen and (max-width: 768px) {
			width: 100%;
			top: auto;
			bottom: 0;
		}
		>a {
			padding: 58px 0 20px;
			display: block;
			border-radius: 10px 0 0 10px;
			color: var(--white);
			background-color: var(--redColor);
			background-image: url("../images/common/icon-mail.svg");
			background-size: 40px 30px;
			background-position: center top 21px;
			background-repeat: no-repeat;
			font-size: 12px;
			line-height: 1.2;
			position: relative;
			@media screen and (max-width: 768px) {
				padding: 3.467vw 0;
				background-image: none;
				font-size: 4vw;
				font-weight: bold;
				border-radius: 0;
				&::before {
					margin-right: 2vw;
					content: "";
					display: inline-block;
					background-image: url("../images/common/icon-mail.svg");
					background-repeat: no-repeat;
					background-size: contain;
					width: 8.533vw;
					height: 6.4vw;
					vertical-align: middle;
				}
			}
		}
	}
}

header {
	width: 100%;
	height: 88px;
	background-color: var(--baseColor1);
	position: fixed;
	z-index: 105;
	top: 0;
	left: 0;
	@media screen and (max-width: 768px) {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		height: 16.8vw;
		width: 100%;
	}
	div.body {
		margin: 0 auto;
		width: 1180px;
		display: flex;
		justify-content: space-between;
		@media screen and (max-width: 768px) {
			width: auto;
			display: block;
			position: relative;
		}
		h1 {
			padding-top: 21px;
			@media screen and (max-width: 768px) {
				padding-top: 4.267vw;
				padding-left: 4.267vw;
				position: relative;
				z-index: 102;
				img {
					width: auto;
					height: 8.533vw;
				}
			}
			img + img {
				display: none;
			}
		}
		&.active {
			h1 img {
				display: none;
			}
			h1 img + img {
				display: inline-block;
			}
			nav > p {
				@media screen and (max-width: 768px) {
					span {
						margin-top: -2.667vw;
						background-color: transparent;
					}
					span::before {
						content: '';
						position: absolute;
						top: 2.667vw;
						width: 10.667vw;
						-webkit-transform: rotate(-45deg);
						transform: rotate(-45deg);
					}
					span::after {
						content: '';
						position: absolute;
						top: 2.667vw;
						width: 10.667vw;
						-webkit-transform: rotate(45deg);
						transform: rotate(45deg);
					}
				}
			}
			nav > ul {
				@media screen and (max-width: 768px) {
					display: block;
				}
			}
		}
		nav {
			p {
				display: none;
				@media screen and (max-width: 768px) {
					display: block;
					position: absolute;
					top: 0;
					right: 0;
					width: 16.8vw;
					height: 16.8vw;
					background-color: var(--redColor);
					z-index: 102;
					span {
						margin-top: -0.8vw;
						margin-left: -5.333vw;
						position: absolute;
						top: 50%;
						left: 50%;
						width: 10.667vw;
						height: 0.8vw;
						background-color: var(--white);
						&::before {
							content: '';
							position: absolute;
							top: -2.4vw;
							left: 0;
							width: 10.667vw;
						height: 0.8vw;
							background-color: var(--white);
						}
						&::after {
							content: '';
							position: absolute;
							top: 2.4vw;
							left: 0;
							width: 10.667vw;
							height: 0.8vw;
							background-color: var(--white);
						}
					}
				}
			}
			ul {
				display: flex;
				@media screen and (max-width: 768px) {
					display: none;
					padding: 16.8vw 4vw 0;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					background-color: var(--redColor);
					z-index: 101;
					box-sizing: border-box;
					
				}
				li {
					@media screen and (max-width: 768px) {
						&:not(:last-child) {
							border-bottom: solid 2px var(--white);
						}
					}
					a {
						padding: 28px 20px 0;
						color: var(--textColor);
						display: block;
						height: 88px;
						font-weight: bold;
						font-size: 15px;
						position: relative;
						text-align: center;
						box-sizing: border-box;
						&::after {
							margin-top: 9px;
							content: "About";
							text-transform: uppercase;
							display: block;
							text-align: center;
							font-size: 12px;
							font-family: var(--subFont);
							color: var(--redColor);
						}
						&:hover::before {
							content: "";
							position: absolute;
							left: 0;
							bottom: 0;
							display: block;
							width: 100%;
							height: 3px;
							background-color: var(--redColor);
						}
						@media screen and (max-width: 768px) {
							color: var(--white);
							padding: 4vw 0;
							height: auto;
							&::after {
								color: var(--textColor);
							}
							&:hover::before {
								display: none;
							}
						}
					}
					&.podcast > a::after {
						content: "Podcast";
					}
					&.works > a::after {
						content: "Works";
					}
				}
			}
		}
	}
}

section {
	padding: 70px 0;
	@media screen and (max-width: 768px) {
		padding: 14.667vw 4vw;
	}
	> div {
		margin: 0 auto;
		width: 1180px;
		@media screen and (max-width: 768px) {
			width: auto;
		}
		> h2 {
			margin-bottom: 40px;
			min-height: 94px;
			position: relative;
			background-repeat: no-repeat;
			background-position: center top;
			font-size: var(--sizeTitle);
			font-weight: 700;
			text-align: center;
			&::after {
				margin: 20px auto;
				padding-bottom: 11px;
				display: block;
				text-align: center;
				color: var(--redColor);
				text-transform: uppercase;
				font-weight: bold;
				font-family: var(--subFont);
				font-size: var(--sizeSubTitle);
			}
			&::before {
				content: "";
				width: 64px;
				border-bottom: solid 3px var(--redColor);
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
			}
		}
	}
}

br.pc {
	display: inline-block;
}

br.sp {
	display: none;
}

footer {
	background-color: var(--textColor);
	> div {
		margin: 0 auto;
		padding: 40px 0;
		width: 1080px;
		@media screen and (max-width: 768px) {
			padding: 8vw 0 20.8vw;
			width: auto;
		}
		>ul {
			
			padding-bottom: 40px;
			display: block grid;
			grid-template-columns: repeat(5, 1fr);
			gap: 20px;
			@media screen and (max-width: 768px) {
				padding-bottom: 10.667vw;
				padding-right: 4vw;
				padding-left: 4vw;
				grid-template-columns: repeat(2, 1fr);
				gap: 4vw;
			}
			>li{
				height: 70px;
				@media screen and (max-width: 768px) {
/*					width: calc(50% - 2vw);*/
					height: 14.667vw;
				}
				>a {
					display: flex;
					background-color: var(--white);
					width: 100%;
					height: 100%;
					border-radius: 5px;
					justify-content: center;
					align-items: center;
				}
				&.au img {
					width: 82.92%;
					height: auto;
				}
				&.digi img {
					width: 75.42%;
					height: auto;
				}
				&.studio img {
					width: 88.75%;
					height: auto;
				}
				&.bc img {
					width: 58.33%;
					height: auto;
				}
				&.pikkuni img {
					/* width: 53.75%;
					height: auto; */
					border-radius: 5px;
				}
				&.bc-shop img {
					width: 80%;
					height: auto;
				}
				&.jre img {
					width: 80%;
					height: auto;
				}
			}
		}
		>div.copy {
			display: flex;
			justify-content: space-between;
			align-items: center;
			@media screen and (max-width: 768px) {
				display: block;
			}
			p {
				color: var(--white);
				font-family: var(--subFont);
				font-size: 13px;
				@media screen and (max-width: 768px) {
					font-size: 3.2vw;
				}
				&.info {
					text-align: left;
					line-height: 1.4;
					@media screen and (max-width: 768px) {
						margin-bottom: 4vw;
						text-align: center;
					}
				}
				&.copy {
					text-align: center;
				}
			}
			img {
				margin-right: 24px;
				width: 45px;
				height: auto;
				vertical-align: middle;
				@media screen and (max-width: 768px) {
					width: 12vw;
					display: block;
					margin: 0 auto 2.667vw;
				}
			}
		}
	}
	img {
		width: 100%;
		height: auto;
	}
	.yt_pk img {
		border-radius: 5px;
	}
}

@media screen and (max-width: 768px) {
	br.pc {
		display: none;
	}

	br.sp {
		display: inline-block;
	}
}