@charset "utf-8";
:root {
		--Itadakimasu_Topimg_Img1_padding: 12% var(--padding) 0;
		--Itadakimasu_Topimg_Img2_padding: 14% var(--padding) 0;
		--Itadakimasu_Topimg_Img3_padding: 28% var(--padding) 0;
		--Itadakimasu_Topimg_Img4_padding: 22% var(--padding) 0;
		--Itadakimasu_Topimg_W11_width: 14ch;
		--Itadakimasu_Topimg_W12_width: 10ch;
		--Itadakimasu_Topimg_W13_width: 21ch;
		--Itadakimasu_Topimg_W21_width: 6ch;
		--Itadakimasu_Topimg_W22_width: 14ch;
		--Itadakimasu_Topimg_W23_width: 14ch;
		--Itadakimasu_Topimg_W24_width: 11ch;
		--Itadakimasu_Topimg_W31_width: 10ch;
		--Itadakimasu_Topimg_W32_width: 16ch;
		--Itadakimasu_Topimg_W33_width: 13ch;
		--Itadakimasu_Topimg_W41_width: 19ch;
		--Itadakimasu_Topimg_W42_width: 14ch;
		--Itadakimasu_Topimg_W43_width: 30ch;
		--Itadakimasu_Topimg_W44_width: 11ch;
}

@media screen and (max-width: 768px) {
	:root {
		--Itadakimasu_padding: 0;
		--Itadakimasu_Open_height: 36px;
		--Itadakimasu_Topimg_ImgB_font-size: var(--Size_14);
		--Itadakimasu_Topimg_ImgS_font-size: var(--Size_10);
		--Goon_paddinge: calc( var(--Size_10) * 4.8 ) var(--padding) 0;
		--Goon_background-size: contain;
		--Goon__Go_flex-basis: 48px;
		--Goon_Inner_Col_Movie_top: -40px;
		--Goon_Inner_Col_A_padding: 0 var(--Size_24) var(--Size_06) var(--Gap_L);
		--Video_width: 160%;
	}
}

@media screen and (min-width:769px) and ( max-width:1160px) {
	:root {
		--Itadakimasu_padding: 0;
		--Itadakimasu_Open_height: 94px;
		--Itadakimasu_Topimg_ImgB_font-size: var(--Size_36);
		--Itadakimasu_Topimg_ImgS_font-size: var(--Size_22);
		--Itadakimasu_Topimg_Img_font-size: var(--Size_36);
		--Goon_paddinge: calc( var(--Size_10) * 1.6 ) var(--padding) 0;
		--Goon_background-size: contain;
		--Goon__Go_flex-basis: 100px;
		--Goon_Inner_Col_Movie_top: -220px;
		--Goon_Inner_Col_A_padding: 0 var(--Margin_M) var(--Size_06);
		--Video_width: 100%;
	}
}

@media screen and (min-width:1161px) {
	:root {
		--Itadakimasu_padding: 0 var(--padding);
		--Itadakimasu_Open_height: 94px;
		--Itadakimasu_Topimg_ImgB_font-size: var(--Size_36);
		--Itadakimasu_Topimg_ImgS_font-size: var(--Size_22);
		--Itadakimasu_Topimg_Img_font-size: var(--Size_36);
		--Goon_paddinge: var(--Margin_M) var(--padding) 0;
		--Goon_background-size: 1024px;
		--Goon__Go_flex-basis: 100px;
		--Goon_Inner_Col_Movie_top: -400px;
		--Goon_Inner_Col_A_padding: 0 var(--Margin_L) var(--Size_06);
		--Video_width: 100%;
	}
}

#itadakimasu {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--Itadakimasu_padding);
	padding: 0;
	background: #000000;
	overflow: clip;
	& .topimg {
		position: relative;
		width: 100%;
		aspect-ratio: 16 / 9;
		& .topimg_children {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			opacity: 0;
			transform: translateX(100px);
			aspect-ratio: 16 / 9;
			transition: opacity 2s ease, transform 2s ease;
			z-index: 0;
			& div {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				height: 100%;
				& p {
					display: inline-block;
					line-height: 1.3;
					white-space: nowrap;
					font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Noto Sans JP",  sans-serif;
					line-height: 1.6;
					font-weight: 600;
					overflow: hidden;
					visibility: hidden;
					opacity: 1;
					z-index: 1;
					transition: opacity 0.5s ease;
				}
				& .textB {
					font-size: var(--Itadakimasu_Topimg_ImgB_font-size);
				}
				& .textS {
					font-size: var(--Itadakimasu_Topimg_ImgS_font-size);
				}
				& .pa {
					padding: var(--Gap_M) 0 0;
				}
				/* 選ばれる実績。 */
				& .w-11 {
					width: var(--Itadakimasu_Topimg_W11_width);
					animation:
						typing-11 .7s steps(7) forwards,
						caretHide .7s step-end forwards;
				}
				& .w-12 {
					width: var(--Itadakimasu_Topimg_W12_width);
					animation:
						typing-12 .5s steps(5) forwards,
						caretHide .5s step-end forwards;
					animation-delay: .7s, .7s;
				}
				& .w-13 {
					width: var(--Itadakimasu_Topimg_W13_width);
					animation:
						typing-13 1.2s steps(12) forwards,
						typingEffect 1.2s step-end infinite alternate,
						caretBlinkW 1.2s step-end infinite alternate;
					animation-delay: 1.2s, 1.2s;
				}
				/* 挑戦、止めるな改善。 */
				& .w-21 {
					width: var(--Itadakimasu_Topimg_W21_width);
					animation:
						typing-21 .3s steps(3) forwards,
						caretHide .3s step-end forwards;
				}
				& .w-22 {
					width: var(--Itadakimasu_Topimg_W22_width);
					animation:
						typing-22 .7s steps(7) forwards,
						caretHide .7s step-end forwards;
					animation-delay: .3s, .3s;
				}
				& .w-23 {
					width: var(--Itadakimasu_Topimg_W23_width);
					animation:
						typing-23 .7s steps(7) forwards,
						caretHide .7s step-end forwards;
					animation-delay: 1s, 1s;
				}
				& .w-24 {
					width: var(--Itadakimasu_Topimg_W24_width);
					animation:
						typing-24 .6s steps(6) forwards,
						typingEffect .6s step-end infinite alternate,
						caretBlinkW 1.2s step-end infinite alternate;
					animation-delay: 1.7s, 1.7s;
				}
				/* We Team. */
				& .w-31 {
					width: var(--Itadakimasu_Topimg_W31_width);
					animation:
						typing-31 .8s steps(8) forwards,
						caretHide .8s step-end forwards;
				}
				& .w-32 {
					width: var(--Itadakimasu_Topimg_W32_width);
					animation:
						typing-32 .8s steps(8) forwards,
						caretHide .8s step-end forwards;
					animation-delay: 1.6s, 1.6s;
				}
				& .w-33 {
					width: var(--Itadakimasu_Topimg_W33_width);
					animation:
						typing-33 .7s steps(7) forwards,
						typingEffect .7s step-end infinite alternate,
						caretBlink 1.2s step-end infinite alternate;
					animation-delay: 2.3s, 2.3s;
				}
				/* 挑戦、止めるな改善。 */
				& .w-41 {
					width: var(--Itadakimasu_Topimg_W41_width);
					animation:
						typing-41 1s steps(10) forwards,
						caretHide 1s step-end forwards;
				}
				& .w-42 {
					width: var(--Itadakimasu_Topimg_W42_width);
					animation:
						typing-42 .7s steps(7) forwards,
						caretHide .7s step-end forwards;
					animation-delay: 1s, 1s;
				}
				& .w-43 {
					width: var(--Itadakimasu_Topimg_W43_width);
					animation:
						typing-43 1.7s steps(17) forwards,
						caretHide 1.7s step-end forwards;
					animation-delay: 1.7s, 1.7s;
				}
				& .w-44 {
					width: var(--Itadakimasu_Topimg_W44_width);
					animation:
						typing-44 .6s steps(6) forwards,
						typingEffect .6s step-end infinite alternate,
						caretBlink 1.2s step-end infinite alternate;
					animation-delay: 3.3s, 3.3s;
				}
			}
			& figure {
				position: absolute;
				top: 0;
				right: 0;
				width: 100%;
				height: auto;
				aspect-ratio: 16 / 9;
				& img {
					width: 100%;
				}
			}
		}
		& .img1 {
			& div {
				padding: var(--Itadakimasu_Topimg_Img1_padding);
				& p {
					color: var(--Color_FF);
					border-right: 3px var(--Color_FF100) solid;
				}
			}
		}
		& .img2 {
			& div {
				padding: var(--Itadakimasu_Topimg_Img2_padding);
				& p {
					color: var(--Color_FF);
					border-right: 3px var(--Color_FF100) solid;
				}
			}
		}
		& .img3 {
			& div {
				padding: var(--Itadakimasu_Topimg_Img3_padding);
				& p {
					border-right: 3px var(--Color_1D100) solid;
				}
			}
		}
		& .img4 {
			& div {
				padding: var(--Itadakimasu_Topimg_Img4_padding);
				& p {
					border-right: 3px var(--Color_1D100) solid;
				}
			}
		}
		& .topimg_children.active {
			opacity: 1;
			transform: translateX(0);
			z-index: 1;
			transition: opacity 2s ease, transform 2s ease;
		}
		& .topimg_children.fade-out-left {
			opacity: 0;
			transform: translateX(-100px);
			z-index: 0;
			transition: opacity 2s ease, transform 2s ease;
		}
		& .topimg_children.prepare-reset {
			opacity: 0; /* 透明 */
			transform: translateX(100px); /* 右端外側 */
			transition: none !important; /* !important を付けて確実にtransitionを無効化 */
			z-index: 0;
		}
	}
	& #open {
		position: absolute;
		bottom: -1px;
		left: 0;
		display: flex;
		width: 100%;
		height: var(--Itadakimasu_Open_height);
		z-index: 2;
		& img {
			width: 100%;
			height: var(--Itadakimasu_Open__height);
			object-fit: fill;
		}
	}
}

@keyframes typing-11,
@keyframes typing-12,
@keyframes typing-13,
@keyframes typing-21,
@keyframes typing-22,
@keyframes typing-23,
@keyframes typing-24,
@keyframes typing-31,
@keyframes typing-32,
@keyframes typing-33,
@keyframes typing-41,
@keyframes typing-42,
@keyframes typing-43,
@keyframes typing-44 {
	from {
		width: 0;
		visibility: visible;
	}
	to {
		visibility: visible;
	}
}

@keyframes typing-11 {
	to {
		width: var(--Itadakimasu_Topimg_W11_width);
	}
}

@keyframes typing-12 {
	to {
		width: var(--Itadakimasu_Topimg_W12_width);
	}
}

@keyframes typing-13 {
	to {
		width: var(--Itadakimasu_Topimg_W13_width);
	}
}

@keyframes typing-21 {
	to {
		width: var(--Itadakimasu_Topimg_W21_width);
	}
}

@keyframes typing-22 {
	to {
		width: var(--Itadakimasu_Topimg_W22_width);
	}
}

@keyframes typing-23 {
	to {
		width: var(--Itadakimasu_Topimg_W23_width);
	}
}

@keyframes typing-24 {
	to {
		width: var(--Itadakimasu_Topimg_W24_width);
	}
}

@keyframes typing-31 {
	to {
		width: var(--Itadakimasu_Topimg_W31_width);
	}
}

@keyframes typing-32 {
	to {
		width: var(--Itadakimasu_Topimg_W32_width);
	}
}

@keyframes typing-33 {
	to {
		width: var(--Itadakimasu_Topimg_W33_width);
	}
}

@keyframes typing-41 {
	to {
		width: var(--Itadakimasu_Topimg_W41_width);
	}
}

@keyframes typing-42 {
	to {
		width: var(--Itadakimasu_Topimg_W42_width);
	}
}

@keyframes typing-43 {
	to {
		width: var(--Itadakimasu_Topimg_W43_width);
	}
}

@keyframes typing-44 {
	to {
		width: var(--Itadakimasu_Topimg_W44_width);
	}
}


@keyframes caretHide {
	to {
		border-color: transparent;
	}
}

@keyframes typingEffect {
	0% {
		border-color: transparent;
	}
}

@keyframes typingEffect_end {
	50% {
		border-color: transparent;
	}
}

@keyframes caretBlink,
@keyframes caretBlinkW {
	50% {
		border-color: transparent;
	}
}

@keyframes caretBlink {
	0% {
		border-color: var(--Color_1D100);
	}
	100% {
		border-color: var(--Color_1D100);
	}
}

@keyframes caretBlinkW {
	0% {
		border-color: var(--Color_FF100)
	}
	100% {
		border-color: var(--Color_FF100);
	}
}

#goon {
	display: flex;
	gap: var(--Gap_L);
	padding: var(--Goon_paddinge);
	background: var(--Color_K);
	z-index: 1;
	& #go {
		flex-basis: var(--Goon__Go_flex-basis);
		& img {
			position: sticky;
			top: calc( 70px + var(--Gap_S) );
			width: 100px;
		}
	}
	& .inner {
		flex: 1;
		& .row {
			z-index: 10;
			& figure {
				& img {
				}
			}
			& > div {
				align-items: stretch;
				& > h3 {
					color: var(--Color_FF);
				}
				& p {
					color: var(--Color_FF);
				}
				& a {
					color: var(--Color_FF);
					border-bottom: 3px var(--Color_FF) solid;
				}
				& a:before {
					background-color: var(--Color_FF);
				}
				& a.out:after {
				}
				& a:hover {
					color: var(--Color_R);
					border-bottom: 3px var(--Color_R) solid;
				}
				& a:hover:before {
					background-color: var(--Color_R);
				}
				& a.btn2 {
					position: relative;
					display: inline-flex;
					align-items: center;
					margin: var(--Size_12) auto 0;
					padding: var(--Size_04) var(--Size_30);
					font-size: var(--Size_12);
					color: var(--Color_FF);
					font-weight: 600;
					background: var(--Color_R);
					border-radius: var(--Border-radius_L) var(--Border-radius_L) 0 var(--Border-radius_L);
					border: 3px var(--Color_R) solid;
				}
				& a.btn2:after {
					content: "\f054";
					padding: 0 0 0 var(--Size_04);
					font-size: var(--Size_10);
					font-family: "Font Awesome 5 Free";
					font-weight: 900;
				}
				& a.btn2:hover {
					color: var(--Color_R);
					background: var(--Color_FF);
					border-radius: var(--Border-radius_L);
					& i {
						color: var(--Color_R);
					}
				}
				& a.btn3 {
					position: relative;
					display: inline-flex;
					align-items: center;
					margin: var(--Size_12) auto 0;
					padding: var(--Size_04) var(--Size_30);
					font-size: var(--Size_12);
					color: var(--Color_R);
					font-weight: 600;
					background: var(--Color_FF);
					border-radius: var(--Border-radius_L) 0 var(--Border-radius_L) var(--Border-radius_L);
					border: 3px var(--Color_FF) solid;
				}
				& a.btn3:after {
					content: "\f08e";
					padding: 0 0 0 var(--Size_04);
					font-size: var(--Size_10);
					font-family: "Font Awesome 5 Free";
					font-weight: 900;
				}
				& a.btn3:hover {
					color: var(--Color_FF);
					background: var(--Color_K);
					border-radius: var(--Border-radius_L);
				}
			}
		}
		& .col {
			align-items: center;
			& #background-area {
				position: absolute;
				z-index: 0;
				top: var(--Goon_Inner_Col_Movie_top);
				left:0;
				width: 100%;
				aspect-ratio: 16 / 9;
				overflow: hidden;
				mix-blend-mode: screen;
				z-index: 2;
				& video {
					position: absolute;
					z-index: -1;
					top: 50%;
					left: 50%;
					width: var(--Video_width);
					transform: translate(-50%, -50%);
					aspect-ratio: 16 / 9;
					opacity: .5;
				}
				& img {
					position: absolute;
					z-index: -1;
					top: 50%;
					left: 50%;
					width: 100%;
					transform: translate(-50%, -50%);
					aspect-ratio: 16 / 9;
					opacity: .5;
					display: none;
				}
			}
			& #background-area:before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: var(--Size_24);
				background: linear-gradient( to top, var(--Color_1D000), #000 );
				z-index: 2;
				mix-blend-mode: none;
			}
			& figure {
				display: flex;
				justify-content: center;
				margin: 0 0 var(--Gap_L);
				aspect-ratio: auto;
				& img {
					width: calc( var(--Size_10) * 26 );
				}
			}
			& > div {
				text-align: center;
				& h3 {
					margin: 0 0 var(--Gap_L);
					text-align: center;
					color: var(--Color_FF);
				}
				& p {
					margin: 0 0 var(--Gap_L);
					text-align: center;
					color: var(--Color_FF);
				}
				& a {
					color: var(--Color_FF);
					border-bottom: 3px var(--Color_FF) solid;
				}
				& a:before {
					background: var(--Color_FF);
				}
				& a.out:after {
				}
				& a:hover {
					color: var(--Color_R);
					border-bottom: 3px var(--Color_R) solid;
				}
				& a:hover:before {
					background: var(--Color_R);
				}
			}
		}
		& .img-right {
			padding: var(--Margin_M) 0 0;
		}
	}
}

article {
	#news {
		margin: 0;
		padding: 0;
	}
}