@charset "utf-8";

.kg-keyvisual {
	display: grid;
	place-items: center;
	align-content: center;
	row-gap: 80px;
	min-height: inherit;
	color: #901627;
	line-height: 0;
}
.kg-keyvisual > * {
	grid-column: 1;
}
.kg-keyvisual .symbol,
.kg-keyvisual .logo,
.kg-keyvisual .inline {
	grid-row: 1;
}
.kg-keyvisual .copy {
	grid-row: 2;
}
.kg-keyvisual .inline {
	align-self: end;
}
.kg-keyvisual .hand,
.kg-keyvisual .petal,
.kg-keyvisual .text,
.kg-keyvisual .copy {
	fill: currentcolor;
}
.kg-keyvisual .line {
	width: 100%;
	height: auto;
	stroke: currentcolor;
	clip-path: url(#mask);
}
.kg-keyvisual .logo {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	align-content: space-between;
	justify-content: center;
	position: relative;
	aspect-ratio: 444 / 372;
	width: 444px;
}
.kg-keyvisual .logo > * {
	display: block;
	overflow: hidden;
	position: relative;
}
.kg-keyvisual .logo .emblem {
	top: -1px;
}
.kg-keyvisual .logo .kg {
	top: -3px;
	left: 1px;
}
.kg-keyvisual .logo .hundred {
	left: -6px;
}
.kg-keyvisual .logo .th {
	overflow: visible;
	top: -5px;
	left: -8px;
}
.kg-keyvisual .symbol {
	display: grid;
	grid-template-columns: 1fr 1fr;
	overflow: hidden;
	position: relative;
	aspect-ratio: 1 / 1;
	width: 313px;
	height: 313px;
	margin-bottom: 80px;
	border-radius: 50%;
}
.kg-keyvisual .symbol::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 9px solid currentcolor;
	border-radius: 50%;
}
.kg-keyvisual .symbol > * {
	grid-row: 1;
}
.kg-keyvisual .symbol .-l {
	grid-column: 1;
}
.kg-keyvisual .symbol .-r {
	grid-column: 2;
	transform: scaleX(-1);
}
.kg-keyvisual .symbol .line,
.kg-keyvisual .symbol .text {
	grid-column: 1 / 3;
	place-self: center;
}
.kg-keyvisual .symbol .line {
	stroke-dasharray: 30 30;
}
.kg-keyvisual .symbol .hand {
	align-self: end;
	position: relative;
	top: -6px;
}
.kg-keyvisual .symbol .hand svg {
	transform-origin: right bottom;
}
.kg-keyvisual .symbol .hand.-l {
	justify-self: end;
	left: 2px;
}
.kg-keyvisual .symbol .hand.-r {
	justify-self: start;
}
.kg-keyvisual .symbol .magnolia {
	display: grid;
	place-items: end;
	position: relative;
}
.kg-keyvisual .symbol .magnolia.-r {
	left: 2px;
}
.kg-keyvisual .symbol .magnolia .petal {
	grid-area: 1/ 1;
	position: relative;
	transform-origin: right bottom;
}
.kg-keyvisual .symbol .magnolia .-p1 { top: -4px; right: -3px; }
.kg-keyvisual .symbol .magnolia .-p2 { top: -8px; right: -10px; }
.kg-keyvisual .symbol .magnolia .-p3 { top: -4px; right: -30px; }
.kg-keyvisual .symbol .text {
	--deg: 13.5deg;
	--shift: translateY(-125px);
	display: grid;
	place-items: center;
	rotate: -3.8deg;
}
.kg-keyvisual .symbol .text > * {
	grid-area: 1 / 1;
}
.kg-keyvisual .symbol .text svg:nth-of-type(1)  { transform: rotate(calc(var(--deg) * -6))    var(--shift); }
.kg-keyvisual .symbol .text svg:nth-of-type(2)  { transform: rotate(calc(var(--deg) * -5.05)) var(--shift); }
.kg-keyvisual .symbol .text svg:nth-of-type(3)  { transform: rotate(calc(var(--deg) * -3.95)) var(--shift); }
.kg-keyvisual .symbol .text svg:nth-of-type(4)  { transform: rotate(calc(var(--deg) * -2.9))  var(--shift); }
.kg-keyvisual .symbol .text svg:nth-of-type(5)  { transform: rotate(calc(var(--deg) * -2))    var(--shift); }
.kg-keyvisual .symbol .text svg:nth-of-type(6)  { transform: rotate(calc(var(--deg) * -1))    var(--shift); }
.kg-keyvisual .symbol .text svg:nth-of-type(7)  { transform: rotate(calc(var(--deg) * .1))    var(--shift); }
.kg-keyvisual .symbol .text svg:nth-of-type(8)  { transform: rotate(calc(var(--deg) * 1.1))   var(--shift); }
.kg-keyvisual .symbol .text svg:nth-of-type(9)  { transform: rotate(calc(var(--deg) * 2.4))   var(--shift); }
.kg-keyvisual .symbol .text svg:nth-of-type(10) { transform: rotate(calc(var(--deg) * 3.3))   var(--shift); }
.kg-keyvisual .symbol .text svg:nth-of-type(11) { transform: rotate(calc(var(--deg) * 4.15))  var(--shift); }
.kg-keyvisual .symbol .text svg:nth-of-type(12) { transform: rotate(calc(var(--deg) * 5))     var(--shift); }
.kg-keyvisual .symbol .text svg:nth-of-type(13) { transform: rotate(calc(var(--deg) * 5.95))  var(--shift); }


/* 100年のともしび、未来へ繋ぐ。出現 */
.kg-keyvisual .copy {
	--interval: .025s;
}
.kg-keyvisual .copy.is-standby path {
	transform: translateY(44px);
}
.kg-keyvisual .copy.is-anim path {
	transition: transform .6s var(--easeOut);
}
.kg-keyvisual .copy.is-anim path:nth-of-type(1)  { transition-delay: calc(var(--interval) * 0); }
.kg-keyvisual .copy.is-anim path:nth-of-type(2)  { transition-delay: calc(var(--interval) * 1); }
.kg-keyvisual .copy.is-anim path:nth-of-type(3)  { transition-delay: calc(var(--interval) * 2); }
.kg-keyvisual .copy.is-anim path:nth-of-type(4)  { transition-delay: calc(var(--interval) * 3); }
.kg-keyvisual .copy.is-anim path:nth-of-type(5)  { transition-delay: calc(var(--interval) * 4); }
.kg-keyvisual .copy.is-anim path:nth-of-type(6)  { transition-delay: calc(var(--interval) * 5); }
.kg-keyvisual .copy.is-anim path:nth-of-type(7)  { transition-delay: calc(var(--interval) * 6); }
.kg-keyvisual .copy.is-anim path:nth-of-type(8)  { transition-delay: calc(var(--interval) * 7); }
.kg-keyvisual .copy.is-anim path:nth-of-type(9)  { transition-delay: calc(var(--interval) * 8); }
.kg-keyvisual .copy.is-anim path:nth-of-type(10) { transition-delay: calc(var(--interval) * 9); }
.kg-keyvisual .copy.is-anim path:nth-of-type(11) { transition-delay: calc(var(--interval) * 10); }
.kg-keyvisual .copy.is-anim path:nth-of-type(12) { transition-delay: calc(var(--interval) * 11); }
.kg-keyvisual .copy.is-anim path:nth-of-type(13) { transition-delay: calc(var(--interval) * 12); }
.kg-keyvisual .copy.is-anim path:nth-of-type(14) { transition-delay: calc(var(--interval) * 13); }
.kg-keyvisual .copy.is-anim path:nth-of-type(15) { transition-delay: calc(var(--interval) * 14); }
.kg-keyvisual .copy.is-anim path:nth-of-type(16) { transition-delay: calc(var(--interval) * 15); }

/* 100年のともしび、未来へ繋ぐ。を下へズラす */
.kg-keyvisual .copy:not(.is-fix) {
	transform: translateY(-20svh);
}
.kg-keyvisual .copy.is-anim.is-fix {
	animation: copyFix 1s var(--easeInOut) both;
}
@keyframes copyFix {
	from { transform: translateY(-20svh); }
	to { transform: none; }
}

/* 100th ANNIVERSARY 出現 */
.kg-keyvisual .logo.is-standby .hundred {
	opacity: 0;
	transform: scale(30);
}
.kg-keyvisual .logo.is-standby .th path {
	opacity: 0;
	transform: translateX(-16px);
}
.kg-keyvisual .logo.is-standby .emblem > *,
.kg-keyvisual .logo.is-standby .kg > *,
.kg-keyvisual .logo.is-standby .anniv > * {
	transform: translateY(100%);
}
.kg-keyvisual .logo.is-anim .hundred {
	transition: opacity 1s, transform 1s cubic-bezier(.2,1,.3,1);
}
.kg-keyvisual .logo.is-anim .th path {
	transition: opacity .6s, transform .6s var(--easeOut);
	transition-delay: .8s;
}
.kg-keyvisual .logo.is-anim .th path:last-child {
	transition-delay: .9s;
}
.kg-keyvisual .logo.is-anim .emblem > *,
.kg-keyvisual .logo.is-anim .kg > *,
.kg-keyvisual .logo.is-anim .anniv > * {
	transition: transform .6s var(--easeOut);
}
.kg-keyvisual .logo.is-anim .emblem > * {
	transition-delay: 1.1s;
}
.kg-keyvisual .logo.is-anim .kg > * {
	transition-delay: 1.2s;
}
.kg-keyvisual .logo.is-anim .anniv > * {
	transition-delay: 1.3s;
}

/* 100th ANNIVERSARY フェードアウト */
.kg-keyvisual .logo.is-hide {
	opacity: 0;
	transform: scale(.9);
}
.kg-keyvisual .logo.is-anim.is-hide {
	transition: opacity .8s;
	animation: logoFix .8s var(--easeInOut);
}
@keyframes logoFix {
	from { transform: none; }
	to { transform: scale(.9); }
}

/* 円だけ出現 */
.kg-keyvisual .symbol.is-standby {
	opacity: 0;
	transform: scale(.6);
}
.kg-keyvisual .symbol.is-anim {
	transition: opacity .6s, transform .6s var(--easeOut);
}

/* シンボルアニメーション */
.kg-keyvisual .symbol:not(.is-fix) .magnolia .petal {
	opacity: 0;
}
.kg-keyvisual .symbol:not(.is-fix) .magnolia .-p1 {
	transform: rotate(53deg) translate(4px, 4px);
}
.kg-keyvisual .symbol:not(.is-fix) .magnolia .-p2 {
	transform: rotate(36deg) translateY(4px);
}
.kg-keyvisual .symbol:not(.is-fix) .magnolia .-p3 {
	transform: rotate(7deg) translateY(4px);
}
.kg-keyvisual .symbol:not(.is-fix) .hand svg {
	opacity: 0;
	transform: rotate(-12deg) translateY(24px);
}
.kg-keyvisual .symbol:not(.is-fix) .line {
	stroke-dashoffset: 30;
}
.kg-keyvisual .symbol:not(.is-fix) .text > * {
	--shift: translateY(-112px);
	opacity: 0;
}
.kg-keyvisual .symbol.is-anim.is-fix .magnolia .petal {
	transition: opacity .6s, transform .8s var(--easeOut);
	transition-delay: .4s;
}
.kg-keyvisual .symbol.is-anim.is-fix .magnolia .-p2 {
	transition-delay: .5s;
}
.kg-keyvisual .symbol.is-anim.is-fix .magnolia .-p3 {
	animation: petal3 1.2s both var(--easeOut);
	animation-delay: .6s;
}
/* 合掌 */
.kg-keyvisual .symbol.is-anim.is-fix .hand svg {
	transition: opacity .6s, transform .8s var(--easeOut);
	transition-delay: 1.1s;
}
.kg-keyvisual .symbol.is-anim.is-fix .line {
	transition: stroke-dashoffset .6s var(--easeOut);
	transition-delay: 1.3s;
}
.kg-keyvisual .symbol.is-anim.is-fix .text > * {
	transition: opacity .6s, transform .6s var(--easeOut);
	transition-delay: 1.5s;
}
@keyframes petal3 {
	from { opacity: 0; transform: rotate(7deg) translateY(4px); }
	50% { opacity: 1; transform: rotate(0deg) translateY(0); fill: currentcolor; }
	to { opacity: 1; fill: white; transform: scale(.8); }
}


.kg-keyvisual .inline.is-standby {
	opacity: 0;
	transform: translateY(24px);
}
.kg-keyvisual .inline.is-anim {
	transition: opacity 1s, transform 1s var(--easeOut);
	transition-delay: 1s;
}


/* .kg-keyvisual .logo { background: url(img/logo.svg) center / cover no-repeat; }
.kg-keyvisual .symbol { background: url(img/symbol.svg) center / cover no-repeat; } */