@charset "utf-8";

@media screen and (max-width: 768px) {
	:root {
		--Sample_Div_Figure_flex-basis: 200px;
		--SampleA_gap: var(--Gap_L);
		--SampleA_Figure_A_Size: 100px;
		--SampleA_P_font-size: 3vw;
		--SampleA_H2_font-size: 5vw;
		--SampleA_A_font-size: var(--Size_08);
		--SampleList_A_P_font-size: var(--Size_06);
		--SampleList_B_flex-basis: calc( calc( 100% - calc( var(--Gap_M) * 1 ) ) / 2 );
	}
}

@media screen and (min-width:769px) and ( max-width:1160px) {
	:root {
		--Sample_Div_Figure_flex-basis: calc( var(--Size_10) * 12 );
		--SampleA_gap: 0;
		--SampleA_Figure_A_Size: 150px;
		--SampleA_P_font-size: var(--Size_10);
		--SampleA_H2_font-size: var(--Size_22);
		--SampleA_A_font-size: var(--Size_10);
		--Sample_Div_Div_A_display: inline-flex;
		--SampleList_A_P_font-size: var(--Size_08);
		--SampleList_B_flex-basis: calc( calc( 100% - var(--Margin_S) ) / 2 );
	}
}

@media screen and (min-width:1161px) {
	:root {
		--Sample_Div_Figure_flex-basis: calc( var(--Size_10) * 12 );
		--SampleA_gap: 0;
		--SampleA_Figure_A_Size: 150px;
		--SampleA_P_font-size: var(--Size_10);
		--SampleA_H2_font-size: var(--Size_22);
		--SampleA_A_font-size: var(--Size_10);
		--SampleList_margin: var(--Margin_S) 0 0;
		--SampleList_A_P_font-size: var(--Size_08);
		--SampleList_B_flex-basis: calc( calc( 100% - var(--Margin_S) ) / 2 );
	}
}

article {
	& #sample {
		margin: var(--Margin_S) 0 0;
		padding: var(--Margin_S) var(--News_padding) 0;
	}
}

aside {
	#sample {
		margin: var(--Margin_S) 0 0;
		padding: var(--Margin_S) var(--News_padding) 0;
	}
}

@media screen and (max-width: 768px) {
	#inner {
		display: flex;
		flex-direction: column;
		gap: var(--Gap_L);
	}
}

@media screen and (min-width:769px) {
	#inner {
		display: grid;
		grid-template-columns: 1fr 260px;
		& #sampleA {
			grid-row: 1 / 2;
			grid-column: 1 / 2;
		}
		& #sampleB {
			grid-row: 2 / 2;
			grid-column: 1 / 2;
			padding: var(--Margin_S) 0 0;
		}
		& #sampleC {
			grid-row: 1 / 3;
			grid-column: 2 / 3;
			padding: 0 0 0 var(--Margin_S);
		}
	}
}

#sampleA {
	& > div {
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		gap: var(--SampleA_gap);
		padding: 0;
		& div {
			flex: 0;
			white-space: nowrap;
			& p {
				font-size: var(--SampleA_P_font-size);
				font-weight: 600;
			}
			& h2 {
				margin: 0 !important;
				text-align: left !important;
				font-size: var(--SampleA_H2_font-size) !important;
				font-weight: 600;
				line-height: 1.1;
			}
			& a {
				margin: var(--Gap_L) 0 0;
				font-size: var(--SampleA_A_font-size) !important;
			}
			& a:before {
			}
		}
	}
}

figure#app {
	flex-basis: var(--Sample_Div_Figure_flex-basis);
	display: flex;
	justify-content: flex-start;
	aspect-ratio: 1 / 1;
	overflow: visible;
	& a {
		display: block;
		position: relative;
		width: var(--SampleA_Figure_A_Size);
		height: var(--SampleA_Figure_A_Size);
		background-color: var(--Color_R000);
		border-radius: 25px;
		transition: background-color cubic-bezier(0.215, 0.61, 0.355, 1) .4s;
		aspect-ratio: 1 / 1;
		& .icon {
			z-index: 1;
		}
		& .food {
			position: absolute;
			transition: all 0.6s ease;
		}
		& .pig {
			top: 2%;
			left: 2%;
			width: 80%;
		}
		& .chicken {
			top: 14%;
			left: 3%;
			width: 68%;
		}
		& .iseebi {
			top: 0%;
			left: 0;
			width: 86%;
		}
		& .fish {
			top: 2%;
			right: 2%;
			width: 59%;
		}
		& .squid {
			top: 5%;
			right: 0%;
			width: 40%;
		}
		& .lobster {
			bottom: 3%;
			right: 3%;
			width: 79%;
		}
	}
	& a:hover {
		& .pig {
			top: -22%;
			left: -26%;
		}
		& .chicken {
			top: 14%;
			left: -37%;
		}
		& .iseebi {
			top: 62%;
			left: -42%;
		}
		& .fish {
			top: -35%;
			right: -18%;
		}
		& .squid {
			top: 10%;
			right: -25%;
		}
		& .lobster {
			bottom: -36%;
			right: -34%;
		}
	}
	& .point.-active {
	}
	& .point.:focus {
		outline: none;
	}
	& .point:after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 25px;
		transform: translate(-50%, -50%);
		transition: all linear 0.4s;
		z-index: 0;
	}
	& .point.-active:after {
		animation: pulseMotion 4.4s linear infinite;
	}
}

@keyframes pulseMotion {
	0% {
		transform: translate(-50%, -50%) scale(1, 1);
		background-color: var(--Color_R040);
	}
	20% {
		transform: translate(-50%, -50%) scale(1.4, 1.4);
		background-color: var(--Color_R000);
	}
}


#sampleB {
	display: flex;
	justify-content: center;
	gap: var(--Margin_S);
	width: 100%;
	& a {
		flex-basis: var(--SampleList_B_flex-basis);
		& figure {
			display: flex;
			justify-content: center;
			align-items: center;
			aspect-ratio: 300 / 146;
			background: var(--Color_1D000);
			& img {
				width: 100%;
				scale: 1;
				transition: var(--Transition);
				-o-transition: var(--Transition);
				-moz-transition: var(--Transition);
				-webkit-transition: var(--Transition);
			}
		}
		& p {
			padding: var(--Gap_M) 0 0;
			text-align: center;
			font-size: var(--SampleList_A_P_font-size);
			font-weight: 600;
		}
	}
	& a:hover {
		& figure {
			& img {	
				scale: 1.04;
				opacity: .7;
			}
		}
		& p {
			color: var(--Color_R);
		}
	}
}

#sampleC {
	display: flex;
	flex-direction: var(--Flex-direction_RCC);
	gap: var(--Gap_L);
	width: 100%;
	& a {
		& figure {
			display: flex;
			justify-content: center;
			align-items: center;
			aspect-ratio: 284 / 231;
			background: var(--Color_1D000);
			& img {
				width: 100%;
				scale: 1;
				transition: var(--Transition);
				-o-transition: var(--Transition);
				-moz-transition: var(--Transition);
				-webkit-transition: var(--Transition);
			}
		}
	}
	& a:hover {
		& figure {
			& img {	
				scale: 1.04;
				opacity: .7;
			}
		}
	}
}

article > section#sample {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: var(--Margin_S) 0 0;
}