@charset "UTF-8";

/* ==================================================

GRID

*/
.p-home-base {
	position: fixed;
	inset: 0;
	z-index: -1;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	will-change: width, height;
}
.hide-main .p-home-base {
	opacity: 0;
}
@media screen and (max-width: 768px) {
	.p-home-base {
		transform: translate(-54%, -50%) scale(0.8);
	}
}
.p-home-base .base {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(14, 1fr);
	grid-template-rows: repeat(9, 1fr);
	transform: rotate(-15deg);
}
.p-home-base .base div span {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
	transform: scale(0.3);
	opacity: 0;
}
.p-home-base .base div span i {
	display: block;
	width: 74%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url(../img/symbol-blue.svg);
	background-size: contain;
}
.p-home-base .base div span i.pop {
	animation: 0.6s ease animPop;
}

.p-home-base .base .p1 { grid-area: 1 / 1 / 2 / 2; }
.p-home-base .base .p2 { grid-area: 1 / 2 / 3 / 4; }
.p-home-base .base .p3 { grid-area: 1 / 4 / 2 / 5; }
.p-home-base .base .p4 { grid-area: 1 / 5 / 2 / 6; }
.p-home-base .base .p5 { grid-area: 1 / 6 / 2 / 7; }
.p-home-base .base .p6 { grid-area: 1 / 7 / 2 / 8; }
.p-home-base .base .p7 { grid-area: 1 / 8 / 3 / 10; }
.p-home-base .base .p8 { grid-area: 1 / 10 / 2 / 11; }
.p-home-base .base .p9 { grid-area: 1 / 11 / 2 / 12; }
.p-home-base .base .p10 { grid-area: 1 / 12 / 2 / 13; }
.p-home-base .base .p11 { grid-area: 1 / 13 / 2 / 14; }
.p-home-base .base .p12 { grid-area: 1 / 14 / 2 / 15; }
.p-home-base .base .p13 { grid-area: 2 / 1 / 3 / 2; }
.p-home-base .base .p14 { grid-area: 2 / 4 / 3 / 5; }
.p-home-base .base .p15 { grid-area: 2 / 5 / 4 / 7; }
.p-home-base .base .p16 { grid-area: 2 / 7 / 3 / 8; }
.p-home-base .base .p17 { grid-area: 2 / 10 / 3 / 11; }
.p-home-base .base .p18 { grid-area: 2 / 11 / 3 / 12; }
.p-home-base .base .p19 { grid-area: 2 / 12 / 4 / 14; }
.p-home-base .base .p20 { grid-area: 2 / 14 / 3 / 15; }
.p-home-base .base .p21 { grid-area: 3 / 1 / 4 / 2; }
.p-home-base .base .p22 { grid-area: 3 / 2 / 4 / 3; }
.p-home-base .base .p23 { grid-area: 3 / 3 / 4 / 4; }
.p-home-base .base .p24 { grid-area: 3 / 4 / 4 / 5; }
.p-home-base .base .p25 { grid-area: 3 / 7 / 4 / 8; }
.p-home-base .base .p26 { grid-area: 3 / 8 / 4 / 9; }
.p-home-base .base .p27 { grid-area: 3 / 9 / 4 / 10; }
.p-home-base .base .p28 { grid-area: 3 / 10 / 4 / 11; }
.p-home-base .base .p29 { grid-area: 3 / 11 / 4 / 12; }
.p-home-base .base .p30 { grid-area: 3 / 14 / 4 / 15; }
.p-home-base .base .p31 { grid-area: 4 / 1 / 5 / 2; }
.p-home-base .base .p32 { grid-area: 4 / 2 / 5 / 3; }
.p-home-base .base .p33 { grid-area: 4 / 3 / 6 / 5; }
.p-home-base .base .p34 { grid-area: 4 / 5 / 5 / 6; }
.p-home-base .base .p35 { grid-area: 4 / 6 / 5 / 7; }
.p-home-base .base .p36 { grid-area: 4 / 7 / 5 / 8; }
.p-home-base .base .p37 { grid-area: 4 / 8 / 5 / 9; }
.p-home-base .base .p38 { grid-area: 4 / 9 / 5 / 10; }
.p-home-base .base .p39 { grid-area: 4 / 10 / 6 / 12; }
.p-home-base .base .p40 { grid-area: 4 / 12 / 5 / 13; }
.p-home-base .base .p41 { grid-area: 4 / 13 / 5 / 14; }
.p-home-base .base .p42 { grid-area: 4 / 14 / 5 / 15; }
.p-home-base .base .p43 { grid-area: 5 / 1 / 6 / 2; }
.p-home-base .base .p44 { grid-area: 5 / 2 / 6 / 3; }
.p-home-base .base .p45 { grid-area: 5 / 5 / 6 / 6; }
.p-home-base .base .p46 { grid-area: 5 / 6 / 6 / 7; }
.p-home-base .base .p47 { grid-area: 5 / 7 / 7 / 9; }
.p-home-base .base .p48 { grid-area: 5 / 9 / 6 / 10; }
.p-home-base .base .p49 { grid-area: 5 / 12 / 6 / 13; }
.p-home-base .base .p50 { grid-area: 5 / 13 / 7 / 15; }
.p-home-base .base .p51 { grid-area: 6 / 1 / 7 / 2; }
.p-home-base .base .p52 { grid-area: 6 / 2 / 7 / 3; }
.p-home-base .base .p53 { grid-area: 6 / 3 / 7 / 4; }
.p-home-base .base .p54 { grid-area: 6 / 4 / 7 / 5; }
.p-home-base .base .p55 { grid-area: 6 / 5 / 7 / 6; }
.p-home-base .base .p56 { grid-area: 6 / 6 / 7 / 7; }
.p-home-base .base .p57 { grid-area: 6 / 9 / 7 / 10; }
.p-home-base .base .p58 { grid-area: 6 / 10 / 7 / 11; }
.p-home-base .base .p59 { grid-area: 6 / 11 / 7 / 12; }
.p-home-base .base .p60 { grid-area: 6 / 12 / 7 / 13; }
.p-home-base .base .p61 { grid-area: 7 / 1 / 9 / 3; }
.p-home-base .base .p62 { grid-area: 7 / 3 / 8 / 4; }
.p-home-base .base .p63 { grid-area: 7 / 4 / 8 / 5; }
.p-home-base .base .p64 { grid-area: 7 / 5 / 9 / 7; }
.p-home-base .base .p65 { grid-area: 7 / 7 / 8 / 8; }
.p-home-base .base .p66 { grid-area: 7 / 8 / 8 / 9; }
.p-home-base .base .p67 { grid-area: 7 / 9 / 8 / 10; }
.p-home-base .base .p68 { grid-area: 7 / 10 / 8 / 11; }
.p-home-base .base .p69 { grid-area: 7 / 11 / 9 / 13; }
.p-home-base .base .p70 { grid-area: 7 / 13 / 8 / 14; }
.p-home-base .base .p71 { grid-area: 7 / 14 / 8 / 15; }
.p-home-base .base .p72 { grid-area: 8 / 3 / 9 / 4; }
.p-home-base .base .p73 { grid-area: 8 / 4 / 9 / 5; }
.p-home-base .base .p74 { grid-area: 8 / 7 / 10 / 9; }
.p-home-base .base .p75 { grid-area: 8 / 9 / 9 / 10; }
.p-home-base .base .p76 { grid-area: 8 / 10 / 9 / 11; }
.p-home-base .base .p77 { grid-area: 8 / 13 / 9 / 14; }
.p-home-base .base .p78 { grid-area: 8 / 14 / 9 / 15; }
.p-home-base .base .p79 { grid-area: 9 / 1 / 10 / 2; }
.p-home-base .base .p80 { grid-area: 9 / 2 / 10 / 3; }
.p-home-base .base .p81 { grid-area: 9 / 3 / 10 / 4; }
.p-home-base .base .p82 { grid-area: 9 / 4 / 10 / 5; }
.p-home-base .base .p83 { grid-area: 9 / 5 / 10 / 6; }
.p-home-base .base .p84 { grid-area: 9 / 6 / 10 / 7; }
.p-home-base .base .p85 { grid-area: 9 / 9 / 10 / 10; }
.p-home-base .base .p86 { grid-area: 9 / 10 / 10 / 11; }
.p-home-base .base .p87 { grid-area: 9 / 11 / 10 / 12; }
.p-home-base .base .p88 { grid-area: 9 / 12 / 10 / 13; }
.p-home-base .base .p89 { grid-area: 9 / 13 / 10 / 14; }
.p-home-base .base .p90 { grid-area: 9 / 14 / 10 / 15; }

/* green */
.p-home-base .base .p6 span i,
.p-home-base .base .p8 span i,
.p-home-base .base .p10 span i,
.p-home-base .base .p12 span i,
.p-home-base .base .p13 span i,
.p-home-base .base .p14 span i,
.p-home-base .base .p23 span i,
.p-home-base .base .p25 span i,
.p-home-base .base .p27 span i,
.p-home-base .base .p29 span i,
.p-home-base .base .p33 span i,
.p-home-base .base .p35 span i,
.p-home-base .base .p37 span i,
.p-home-base .base .p39 span i,
.p-home-base .base .p40 span i,
.p-home-base .base .p42 span i,
.p-home-base .base .p43 span i,
.p-home-base .base .p45 span i,
.p-home-base .base .p48 span i,
.p-home-base .base .p52 span i,
.p-home-base .base .p54 span i,
.p-home-base .base .p56 span i,
.p-home-base .base .p58 span i,
.p-home-base .base .p60 span i,
.p-home-base .base .p64 span i,
.p-home-base .base .p66 span i,
.p-home-base .base .p67 span i,
.p-home-base .base .p70 span i,
.p-home-base .base .p72 span i,
.p-home-base .base .p76 span i,
.p-home-base .base .p78 span i,
.p-home-base .base .p81 span i,
.p-home-base .base .p85 span i,
.p-home-base .base .p89 span i {
	background-image: url(../img/symbol-green.svg);
}

/* red */
.p-home-base .base .p3 span i,
.p-home-base .base .p5 span i,
.p-home-base .base .p9 span i,
.p-home-base .base .p11 span i,
.p-home-base .base .p15 span i,
.p-home-base .base .p17 span i,
.p-home-base .base .p21 span i,
.p-home-base .base .p24 span i,
.p-home-base .base .p30 span i,
.p-home-base .base .p32 span i,
.p-home-base .base .p36 span i,
.p-home-base .base .p38 span i,
.p-home-base .base .p46 span i,
.p-home-base .base .p50 span i,
.p-home-base .base .p51 span i,
.p-home-base .base .p53 span i,
.p-home-base .base .p59 span i,
.p-home-base .base .p65 span i,
.p-home-base .base .p68 span i,
.p-home-base .base .p71 span i,
.p-home-base .base .p73 span i,
.p-home-base .base .p74 span i,
.p-home-base .base .p79 span i,
.p-home-base .base .p83 span i,
.p-home-base .base .p86 span i,
.p-home-base .base .p88 span i {
	background-image: url(../img/symbol-red.svg);
}

/* アニメーション */
.anim-start .p-home-base .base div span {
	transform: scale(1);
	opacity: 1;
}

/* 横移動 */
.anim-type01 .p-home-base .base div {
	transition: transform 8s linear;
	transform: translateX(14rem);
}
.anim-type05 .p-home-base .base div {
	transition: transform 8s linear;
	transform: translateX(-14rem);
}

/* 縦移動 */
.anim-type04 .p-home-base .base div {
	transition: transform 8s linear;
	transform: translateY(14rem);
}
.anim-type06 .p-home-base .base div {
	transition: transform 8s linear;
	transform: translateY(-14rem);
}

/* 縦グループ（交差） */
.anim-type02 .p-home-base .base div {
	transition: transform 8s linear;
	transform: translateY(-14rem);
}
.anim-type02 .p-home-base .base .p1,
.anim-type02 .p-home-base .base .p2,
.anim-type02 .p-home-base .base .p3,
.anim-type02 .p-home-base .base .p13,
.anim-type02 .p-home-base .base .p14,
.anim-type02 .p-home-base .base .p21,
.anim-type02 .p-home-base .base .p22,
.anim-type02 .p-home-base .base .p23,
.anim-type02 .p-home-base .base .p24,
.anim-type02 .p-home-base .base .p31,
.anim-type02 .p-home-base .base .p32,
.anim-type02 .p-home-base .base .p33,
.anim-type02 .p-home-base .base .p43,
.anim-type02 .p-home-base .base .p44,
.anim-type02 .p-home-base .base .p51,
.anim-type02 .p-home-base .base .p52,
.anim-type02 .p-home-base .base .p53,
.anim-type02 .p-home-base .base .p54,
.anim-type02 .p-home-base .base .p61,
.anim-type02 .p-home-base .base .p62,
.anim-type02 .p-home-base .base .p63,
.anim-type02 .p-home-base .base .p72,
.anim-type02 .p-home-base .base .p73,
.anim-type02 .p-home-base .base .p79,
.anim-type02 .p-home-base .base .p80,
.anim-type02 .p-home-base .base .p81,
.anim-type02 .p-home-base .base .p82,
.anim-type02 .p-home-base .base .p6,
.anim-type02 .p-home-base .base .p7,
.anim-type02 .p-home-base .base .p16,
.anim-type02 .p-home-base .base .p25,
.anim-type02 .p-home-base .base .p26,
.anim-type02 .p-home-base .base .p27,
.anim-type02 .p-home-base .base .p36,
.anim-type02 .p-home-base .base .p37,
.anim-type02 .p-home-base .base .p38,
.anim-type02 .p-home-base .base .p47,
.anim-type02 .p-home-base .base .p48,
.anim-type02 .p-home-base .base .p57,
.anim-type02 .p-home-base .base .p65,
.anim-type02 .p-home-base .base .p66,
.anim-type02 .p-home-base .base .p67,
.anim-type02 .p-home-base .base .p74,
.anim-type02 .p-home-base .base .p75,
.anim-type02 .p-home-base .base .p85 {
	transition: transform 8s linear;
	transform: translateY(14rem);
}

/* 横グループ（交差） */
.anim-type03 .p-home-base .base div {
	transition: transform 8s linear;
	transform: translateX(-14rem);
}
.anim-type03 .p-home-base .base .p31,
.anim-type03 .p-home-base .base .p32,
.anim-type03 .p-home-base .base .p33,
.anim-type03 .p-home-base .base .p34,
.anim-type03 .p-home-base .base .p35,
.anim-type03 .p-home-base .base .p36,
.anim-type03 .p-home-base .base .p37,
.anim-type03 .p-home-base .base .p38,
.anim-type03 .p-home-base .base .p39,
.anim-type03 .p-home-base .base .p40,
.anim-type03 .p-home-base .base .p41,
.anim-type03 .p-home-base .base .p42,
.anim-type03 .p-home-base .base .p43,
.anim-type03 .p-home-base .base .p44,
.anim-type03 .p-home-base .base .p45,
.anim-type03 .p-home-base .base .p46,
.anim-type03 .p-home-base .base .p47,
.anim-type03 .p-home-base .base .p48,
.anim-type03 .p-home-base .base .p49,
.anim-type03 .p-home-base .base .p50,
.anim-type03 .p-home-base .base .p51,
.anim-type03 .p-home-base .base .p52,
.anim-type03 .p-home-base .base .p53,
.anim-type03 .p-home-base .base .p54,
.anim-type03 .p-home-base .base .p55,
.anim-type03 .p-home-base .base .p56,
.anim-type03 .p-home-base .base .p57,
.anim-type03 .p-home-base .base .p58,
.anim-type03 .p-home-base .base .p59,
.anim-type03 .p-home-base .base .p60 {
	transition: transform 8s linear;
	transform: translateX(14rem);
}