@charset "UTF-8";
/*/////////////////////////////////////////////////////////////////////////
ポケモンだいすきクラブ (202308)
/////////////////////////////////////////////////////////////////////////*/
* { margin: 0; padding: 0; box-sizing: border-box;}
html,body { height: 100%;}
html { font-size: 62.5%; line-height: 1; font-family: "Noto Sans JP", sans-serif; -webkit-text-size-adjust: 100%;}
h1, h2, h3, h4, h5, h6 { font-size: 100%;}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary { display: block;}
audio,canvas,progress,video { display: inline-block;}
a,embed,object,button { outline: none;}
img { border: none; box-sizing: content-box;}
hr { display: none;}
li { list-style: none;}
a { background-color: transparent;}
iframe { border: 0;}


/*@common
/////////////////////////////////////////////////////////////////////*/
body {
	background: #fff;
	color: #000;
	font-weight: 400;
	text-align: center;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
a {
	color: #000;
	text-decoration: none;
	transition: all 0.15s;
}
img {
	display: block;
	width: 100%;
}
input, button, textarea, select {
	border: none;
	border-radius: 0;
	outline: none;
	background: none;
	vertical-align: baseline;
	font-family: inherit;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
button {
	cursor: pointer;
}

body.scroll-hidden {
	overflow: hidden;
}

#main {
	position: relative;
	overflow: hidden;
}
.red {
	color: #e60012;
}

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

/*lazyload*/
.lazyload {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s;
}
.lazyloaded {
	opacity: 1;
	visibility: visible;
}
img.lazyload:not([src]) {
	visibility: hidden;
}

/*link-btn*/
.link-btn {
	text-align: center;
}
.link-btn-text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 290px;
	height: 50px;
	font-size: 16px;
	font-weight: 700;
	background: #fff;
	border: 2px solid #000;
	border-radius: 50px;
}
.pc .link-btn-text:hover,
.sp .link-btn-text.hover {
	background: #e60012;
	color: #fff;
}
@media screen and (max-width: 767.98px) {
	.link-btn-text {
		min-width: 70%;
		height: auto;
		font-size: min(3.333vw, 20px);
		padding: 12px 10px;
	}
}


/*@header
/////////////////////////////////////////////////////////////////////*/
#header {
	position: relative;
	z-index: 10;
}
#header .logo {
	width: 375px;
	position: absolute;
	top: 220px;
	left: calc(50% - 187.5px);
}
@media screen and (max-width: 767.98px) {
	#header .logo {
		width: 100%;
		height: 0;
		padding-top: calc(120 / 390 * 100%);
		top: 0;
		left: 0;
	}
	#header .logo img {
		width: 54%;
		position: absolute;
		top: calc(100% - 7.692vw);
		left: 23%;
	}
}

/*main-visual*/
.main-visual {
	height: 300px;
	background: #efede6 url(/index_assets/img/bg_header.png) repeat-x center bottom;
	background-size: auto 100%;
	border-bottom: 2px solid #56655e;
	overflow: hidden;
	position: relative;
}
.main-visual-inner {
	display: flex;
	height: inherit;
	align-items: flex-end;
	justify-content: center;
	padding: 0 45px;
}
.main-visual .puppet {
	width: 160px;
	height: 100%;
	position: relative;
}
.main-visual .puppet-inner {
	width: 100%;
	height: 0;
	padding-top: calc(540 / 320 * 100%);
	transform: translate3d(0, 0, 0);
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
.main-visual .puppet-inner::before {
	content: "";
	display: block;
	width: 100%;
	padding-top: calc(2200 / 320 * 100%);
	background: transparent no-repeat 0 0;
	background-size: contain;
	position: absolute;
	top: 0;
	left: 0;
	animation: pp_frames 6s steps(4) infinite;
}
.main-visual .puppet-inner.ppm1::before {
	background-image: url(/index_assets/img/puppet/m1.png);
	animation-duration: 6.1s;
	animation-delay: 0.12s;
}
.main-visual .puppet-inner.ppm2::before {
	animation-duration: 6.5s;
	animation-delay: 0.17s;
}
.main-visual .puppet-inner.ppm3::before {
	animation-duration: 6s;
	animation-delay: 0s;
}
.main-visual .puppet-inner.ppm4::before {
	animation-duration: 6.3s;
	animation-delay: 0.15s;
}
.main-visual .puppet-inner.ppm5::before {
	animation-duration: 6.2s;
	animation-delay: 0.05s;
}
.main-visual .puppet-inner.puppet2::before { background-image: url(/index_assets/img/puppet/m2.png);}
.main-visual .puppet-inner.puppet3::before { background-image: url(/index_assets/img/puppet/m3.png);}
.main-visual .puppet-inner.puppet4::before { background-image: url(/index_assets/img/puppet/m4.png);}
.main-visual .puppet-inner.puppet5::before { background-image: url(/index_assets/img/puppet/m5.png);}
.main-visual .puppet-inner.puppet6::before { background-image: url(/index_assets/img/puppet/m6.png);}
.main-visual .puppet-inner.puppet7::before { background-image: url(/index_assets/img/puppet/m7.png);}
.main-visual .puppet-inner.puppet8::before { background-image: url(/index_assets/img/puppet/m8.png);}
.main-visual .puppet-inner.puppet9::before { background-image: url(/index_assets/img/puppet/m9.png);}
.main-visual .puppet-inner.puppet10::before { background-image: url(/index_assets/img/puppet/m10.png);}
.main-visual .puppet-inner.puppet11::before { background-image: url(/index_assets/img/puppet/m11.png);}
.main-visual .puppet-inner.puppet12::before { background-image: url(/index_assets/img/puppet/m12.png);}
.main-visual .puppet-inner.puppet13::before { background-image: url(/index_assets/img/puppet/m13.png);}
.main-visual .puppet-inner.puppet14::before { background-image: url(/index_assets/img/puppet/m14.png);}
.main-visual .puppet-inner.puppet15::before { background-image: url(/index_assets/img/puppet/m15.png);}
.main-visual .puppet-inner.puppet16::before { background-image: url(/index_assets/img/puppet/m16.png);}

@keyframes pp_frames {
	0% {
		transform: translate(0, 0);
	}
	100% {
		transform: translate(0, -100%);
	}
}

@media screen and (max-width: 767.98px) {
	.main-visual {
		height: 0;
		padding-top: calc(120 / 390 * 100%);
	}
	.main-visual-inner {
		width: 100%;
		height: 100%;
		position: absolute;
		bottom: -2px;
		left: 0;
		padding: 0;
	}
	.main-visual .puppet {
		width: 15%;
	}
}

/*timeline*/
.timeline-embed {
	width: 100%;
	height: 100%;
	position: relative;
}
.timeline-embed iframe {
	width: 100% !important;
	height: 100% !important;
	position: absolute !important;
	top: 0;
	left: 0;
}
@media screen and (min-width: 768px) {
	.tw-timeline {
		width: 460px;
		height: 800px;
		max-height: calc(100vh - 70px);
		position: absolute;
		top: 45px;
		right: 0;
		z-index: 10;
		transform: translateX(calc(100% - 42px));
		transition: transform 0.35s;
	}
	.timeline-outer {
		height: 100%;
	}
	.timeline-tab {
		width: 35px;
		height: 170px;
		font-size: 15px;
		font-weight: 700;
		color: #fff;
		letter-spacing: 0.07em;
		white-space: nowrap;
		background: #69b693;
		border: 2px solid #56655e;
		border-right: none;
		border-radius: 10px 0 0 10px;
		cursor: pointer;
		position: absolute;
		top: 40px;
		left: -34px;
		transition: background 0.2s;
	}
	.timeline-tab span {
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(-90deg);
		transform-origin: center center;
		padding-left: 5px;
	}
	.timeline-tab:hover {
		background: #4a9c74;
	}
	.timeline-inner {
		width: 100%;
		height: 100%;
		background: #fff;
		border: 2px solid #56655e;
		border-right: none;
		border-radius: 25px 0 0 25px;
		padding: 30px 30px 25px 40px;
		position: absolute;
		top: 0;
		left: 0;
	}
	/*open*/
	.tw-timeline.open {
		transform: translateX(0);
	}
}
@media screen and (max-width: 767.98px) {
	.tw-timeline {
		text-align: left;
		padding-top: 17.948vw;
		position: relative;
	}
	.timeline-tab {
		display: inline-block;
		font-size: 15px;
		font-weight: 600;
		color: #fff;
		letter-spacing: 0.07em;
		background: #69b693;
		border: 2px solid #56655e;
		border-bottom: none;
		border-radius: 8px 8px 0 0;
		padding: 6px 30px 5px;
		margin-left: 4%;
		display: none;
	}
	.timeline-inner {
		width: 90%;
		height: 300px;
		background: #fff;
		border-radius: 10px;
		padding: 3.076vw;
		margin: 0 auto;
	}
}


/*@info
/////////////////////////////////////////////////////////////////////*/
.main-info {
	background: #dedacd;
}
.info-list {
	padding: 90px 45px 50px;
}
.info-list-inner {
	display: flex;
	max-width: 1110px;
	margin: 0 auto 30px;
	position: relative;
}
.info-item {
	width: calc((100% - 30px) / 3);
	text-align: left;
	margin: 0 5px;
}
.info-link {
	display: block;
	background: #f8f8f8;
	border-radius: 18px;
	padding: 20px;
}
.info-pic {
	width: 100%;
	height: 0;
	padding-top: calc(9 / 16 * 100%);
	margin-bottom: 12px;
	position: relative;
	overflow: hidden;
}
.info-pic img {
	position: absolute;
	top: 0;
}
.info-title {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0.03em;
	padding: 0 10px;
}
.info-title span {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	height: calc(1.35em * 3);
	overflow: hidden;
}
/*hover*/
.pc .info-link:hover {
	background: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	transform: scale(1.08);
}
.sp .info-link.hover {
	background: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 900px) {
	.info-list {
		padding-left: 5px;
	}
}
@media screen and (max-width: 767.98px) {
	.info-list {
		padding: 0 5% 40px;
		position: relative;
	}
	.info-list::before {
		content: "";
		display: block;
		width: 32%;
		height: 0;
		padding-top: calc(290 / 450 * 32%);
		background: url(/index_assets/img/pic_info.png) no-repeat;
		background-size: contain;
		margin: -1.794vw auto -7px;
	}
	.info-list-inner {
		flex-direction: column;
		margin-bottom: 20px;
	}
	.info-item {
		width: 100%;
		margin: 5px 0;
	}
	.info-link {
		display: flex;
		align-items: center;
		border-radius: 10px;
		padding: 10px;
	}
	.info-pic {
		width: 48%;
		height: 0;
		padding-top: calc(9 / 16 * 48%);
		margin-bottom: 0;
		flex-shrink: 0;
	}
	.info-title {
		font-size: 12px;
		letter-spacing: 0.03em;
		padding-left: 13px;
		padding-right: 0;
	}
	.info-title span {
		-webkit-line-clamp: 5;
		height: auto;
		max-height: calc(1.35em * 5);
	}
}


/*@localacts
/////////////////////////////////////////////////////////////////////*/
.section-localacts {
	background: url(/index_assets/img/bg_dot.png) center 0;
	background-size: auto 12px;
	margin-top: 60px;
	position: relative;
}
.section-localacts.manhole {
	margin-top: 80px;
}
@media screen and (max-width: 767.98px) {
	.section-localacts {
		background-size: auto 8px;
		margin-top: 12.82vw;
	}
	.section-localacts.manhole {
		margin-top: 12.82vw;
	}
}

.la-inner {
	display: flex;
	justify-content: center;
}
.portal .la-inner {
	min-height: 545px;
}
.manhole .la-inner {
	min-height: 565px;
}
@media screen and (max-width: 767.98px) {
	.la-inner {
		flex-direction: column;
	}
	.portal .la-inner {
		min-height: 0;
	}
	.manhole .la-inner {
		min-height: 0;
		flex-direction: column-reverse;
	}
}

/*pic*/
.la-pic {
	width: 800px;
	position: relative;
}
.la-pic::before {
	content: "";
	display: block;
	width: 100vw;
	height: 100%;
	background: url(/index_assets/img/bg_dot_red.png) right 0;
	background-size: auto 12px;
	position: absolute;
	top: 0;
	right: -50px;
}
.manhole .la-pic::before {
	background-image: url(/index_assets/img/bg_dot_green.png);
	right: initial;
	left: -20px;
}
.la-picinner img {
	position: absolute;
	top: 0;
	opacity: 0;
}
.la-picinner img:first-child {
	opacity: 1;
	z-index: 10;
}
.portal .la-picinner {
	width: 100%;
	height: 0;
	padding-top: calc(580 / 800 * 100%);
}
.manhole .la-picinner {
	width: 100%;
	height: 0;
	padding-top: calc(600 / 800 * 100%);
}
@media screen and (min-width: 768px) {
	.la-picinner {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}
	.portal .la-picinner {
		right: 20px;
		margin-top: -35px;
	}
	.manhole .la-picinner {
		left: 20px;
	}
}
@media screen and (max-width: 767.98px) {
	.la-pic {
		width: 100%;
	}
	.la-pic::before {
		background-size: auto 8px;
		right: 0;
	}
	.manhole .la-pic::before {
		background-size: auto 8px;
		left: 0;
	}
	.la-picinner {
		position: relative;
		transform: translateY(-6.41vw);
		margin-bottom: -3.846vw;
	}
}

/*pic-item*/
.la-pic-item {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
}
.la-pic-item a {
	display: block;
	transition: transform 0.25s;
}
.pc .la-pic-item a:hover,
.sp .la-pic-item a.hover {
	transform: scale(1.05);
}

/*detail*/
.la-detail {
	font-size: 20px;
	font-weight: 500;
	font-feature-settings: "palt";
	letter-spacing: 0.07em;
	padding-bottom: 40px;
	position: relative;
	z-index: 10;
	flex-shrink: 0;
}
@media screen and (max-width: 767.98px) {
	.la-detail {
		font-size: 13px;
		font-size: 3.33vw;
		letter-spacing: 0.02em;
		padding-bottom: 10.256vw;
	}
}
@media screen and (min-width: 768px) {
	.portal .la-detail {
		padding-right: 60px;
	}
	.manhole .la-detail {
		padding-left: 70px;
	}
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
	.portal .la-detail {
		padding-right: 20px;
	}
	.manhole .la-detail {
		padding-left: 20px;
	}
	.la-detail {
		font-size: calc(16px + 4 * (100vw - 768px) / 432);
	}
}

/*logo*/
.la-logo {
	width: 255px;
	margin: -27px auto 15px;
}
.manhole .la-logo {
	margin: -23px auto 35px;
}
.la-logo a {
	display: block;
	transition: transform 0.25s;
}
.pc .la-logo a:hover,
.sp .la-logo a.hover {
	transform: scale(1.1);
}
@media screen and (max-width: 767.98px) {
	.la-logo {
		width: 40%;
		margin: -12.82vw auto 3.846vw;
	}
	.manhole .la-logo {
		margin: -7.692vw auto 5.128vw;
	}
}

/*text*/
.la-body-text {
	text-align: left;
	margin-bottom: 18px;
	overflow: hidden;
}
.manhole .la-body-text {
	text-align: right;
}
.la-text-item {
	overflow: hidden;
	margin: 10px 0;
}
.la-text-item span {
	display: inline-block;
	vertical-align: bottom;
	background: #fff;
	white-space: nowrap;
	padding: 5px 10px 5px 12px;
}
.la-lead-text {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin-bottom: 5px;
	overflow: hidden;
}
.la-lead-text .la-text-item {
	margin: 5px 0;
}
.la-text-item span.large {
	font-size: 40px;
	padding-left: 4px;
	padding-right: 0;
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
	.la-lead-text {
		font-size: calc(20px + 4 * (100vw - 768px) / 432);
	}
	.la-text-item span.large {
		font-size: calc(30px + 10 * (100vw - 768px) / 432);
	}
}
@media screen and (max-width: 767.98px) {
	.la-body-text {
		display: inline-block;
		margin-bottom: 15px;
	}
	.manhole .la-body-text {
		text-align: left;
	}
	.la-text-item {
		margin: 1.538vw 0;
	}
	.la-text-item span {
		padding: 4px 6px 4px 8px;
	}
	.la-lead-text {
		font-size: 16px;
		font-size: 4.1vw;
		letter-spacing: 0.05em;
		margin-bottom: 10px;
	}
	.la-lead-text .la-text-item {
		margin: 0.769vw 0;
	}
	.la-text-item span.large {
		font-size: 26px;
		font-size: 6.6vw;
		padding-left: 2px;
		padding-right: 0;
	}
}


/*@comic
/////////////////////////////////////////////////////////////////////*/
.section-comic {
	margin-top: 165px;
	position: relative;
}
@media screen and (max-width: 767.98px) {
	.section-comic {
		margin-top: 20.512vw;
	}
}

/*header*/
.comic-header {
	width: 430px;
	position: absolute;
	top: -72px;
	left: calc(50% - 215px);
}
.comic-header-title {
	position: relative;
	z-index: 10;
}
.comic-header .puppet {
	position: absolute;
	overflow: hidden;
}
.comic-header .puppet.pp1 {
	width: 175px;
	height: 140px;
	top: -67px;
	left: -135px;
}
.comic-header .puppet.pp2 {
	width: 140px;
	top: -58px;
	right: -137px;
}
@media screen and (max-width: 767.98px) {
	.comic-header {
		width: 100%;
		top: -11.538vw;
		left: 0;
	}
	.comic-header-title {
		width: 65%;
		margin: 5px auto 0;
	}
	.comic-header .puppet.pp1 {
		width: 20%;
		height: auto;
		top: -5.128vw;
		left: 0;
	}
	.comic-header .puppet.pp2 {
		width: 15%;
		top: 2.564vw;
		right: 0;
	}
}

/*list*/
.comic-inner {
	background: #e6e6e6 url(/index_assets/img/bg_comic.png) center;
	border-top: 5px solid #000;
	border-bottom: 5px solid #000;
	padding: 70px 0 40px;
	animation: bgComic 60s linear infinite;
}
.comic-list {
	display: flex;
	justify-content: center;
	max-width: 1230px;
	margin: 0 auto 35px;
	position: relative;
}
.comic-item {
	width: calc((100% - 40px) / 4);
	text-align: left;
	margin: 0 5px;
}
.comic-link {
	display: block;
	background: #000;
	font-size: 14px;
	color: #fff;
}
.comic-title {
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 12px 10px 16px 15px;
	overflow: hidden;
}
.pc .comic-link:hover,
.sp .comic-link.hover {
	transform: scale(1.08);
}
@media screen and (max-width: 767.98px) {
	.comic-inner {
		background-size: 700px auto;
		padding: 11.538vw 0 40px;
		animation: bgComic 70s linear infinite;
	}
	.comic-list {
		flex-wrap: wrap;
		margin-bottom: 20px;
	}
	.comic-item {
		width: calc((100% - 40px) / 2);
		margin: 0 5px 10px;
	}
	.comic-link {
		font-size: 11px;
	}
	.comic-title {
		padding: 9px 10px 12px 12px;
	}
}


/*@paint
/////////////////////////////////////////////////////////////////////*/
.section-paint {
	margin: 90px 0;
	position: relative;
}
.paint-inner {
	display: flex;
	max-width: 1140px;
	min-height: 490px;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	position: relative;
}
.paint-inner::before {
	content: "";
	display: block;
	width: 100vw;
	height: 100%;
	background: url(/index_assets/img/bg_paint.jpg) repeat-x center;
	background-size: auto 460px;
	margin: 0 calc(50% - 50vw);
	position: absolute;
	top: 0;
	left: 0;
}
@media screen and (max-width: 767.98px) {
	.section-paint {
		margin: 60px 0 0;
	}
	.paint-inner {
		min-height: 0;
		flex-direction: column;
	}
	.paint-inner::before {
		background-size: auto 100%;
	}
}

/*pic*/
.paint-pic {
	width: 710px;
	position: relative;
	z-index: 10;
}
.paint-picinner {
	width: 100%;
	height: 0;
	padding-top: calc(490 / 710 * 100%);
}
.paint-picinner img {
	position: absolute;
	top: 0;
	opacity: 0;
}
@media screen and (min-width: 768px) {
	.paint-picinner {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}
}
@media screen and (max-width: 767.98px) {
	.paint-pic {
		width: 90%;
	}
}

/*detail*/
.paint-detail {
	position: relative;
	z-index: 10;
	flex-shrink: 0;
	padding-bottom: 25px;
}
.paint-title {
	width: 430px;
	margin: 0 auto;
}
.paint-text {
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.6;
	margin-bottom: 20px;
}
@media screen and (max-width: 767.98px) {
	.paint-detail {
		padding-bottom: 0;
	}
	.paint-title {
		width: 65%;
	}
	.paint-text {
		font-size: 3.589vw;
		margin-bottom: 5.128vw;
	}
}

/*puppet*/
.paint-inner .puppet {
	position: absolute;
	overflow: hidden;
}
.paint-inner .puppet.pp3 {
	width: 135px;
	bottom: 0;
	left: -120px;
}
.paint-inner .puppet.pp4 {
	width: 145px;
	bottom: 0;
	right: -125px;
}
@media screen and (max-width: 767.98px) {
	.paint-inner .puppet.pp3 {
		width: 15%;
		bottom: 7.692vw;
		left: 2%;
	}
	.paint-inner .puppet.pp4 {
		width: 15%;
		bottom: 7.692vw;
		right: 1%;
	}
}


/*@special
/////////////////////////////////////////////////////////////////////*/
.section-special {
	background: #ffd200 url(/index_assets/img/bg_special.png) center;
	margin: 90px 0 30px;
	position: relative;
}
.special-inner {
	display: flex;
	max-width: 800px;
	min-height: 370px;
	justify-content: center;
	align-items: center;
	background: url(/index_assets/img/bg_special_mb.png) no-repeat center;
	background-size: 504px auto;
	margin: 0 auto;
	position: relative;
}
@media screen and (max-width: 767.98px) {
	.section-special {
		background-size: 100px auto;
		margin: 50px 0 0;
	}
	.special-inner {
		flex-direction: column;
		min-height: 0;
		background-size: 90% auto;
		overflow: hidden;
	}
}

/*detail*/
.special-detail {
	padding-top: 20px;
	position: relative;
	z-index: 10;
}
.special-title {
	width: 385px;
	margin: 0 auto 10px;
}
.special-text {
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.6;
	margin-bottom: 20px;
}
@media screen and (max-width: 767.98px) {
	.special-detail {
		padding: 10.256vw 0 17.948vw;
	}
	.special-title {
		width: 62%;
		margin-bottom: 2.564vw;
	}
	.special-text {
		font-size: 3.589vw;
		margin-bottom: 3.846vw;
	}
}

/*puppet*/
@media screen and (min-width: 768px) {
	.special-inner .puppet {
		position: absolute;
		bottom: 0;
		overflow: hidden;
	}
	.special-inner .puppet.pp5 {
		width: 100px;
		left: 0;
	}
	.special-inner .puppet.pp6 {
		width: 130px;
		left: 95px;
	}
	.special-inner .puppet.pp7 {
		width: 90px;
		right: 120px;
	}
	.special-inner .puppet.pp8 {
		width: 110px;
		right: 0;
	}
}
@media screen and (max-width: 767.98px) {
	.special-inner .puppet {
		position: absolute;
		bottom: -10.256vw;
		overflow: hidden;
	}
	.special-inner .puppet.pp5 {
		width: 14%;
		left: 8%;
	}
	.special-inner .puppet.pp6 {
		width: 18%;
		left: 23%;
	}
	.special-inner .puppet.pp7 {
		width: 13%;
		right: 23%;
	}
	.special-inner .puppet.pp8 {
		width: 15%;
		right: 5%;
	}
}


/*@animation
/////////////////////////////////////////////////////////////////////*/
@keyframes fadeIn {
	0% { opacity: 0;}
	100% { opacity: 1;}
}
@keyframes fadeInUp {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 30px, 0);
		transform: translate3d(0, 30px, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
@keyframes slideIn {
	100% { transform: translateX(0);}
}
@keyframes slideUp {
	100% { transform: translateY(0);}
}
@keyframes zoomIn {
	0% { opacity: 0; transform: scale(0.5);}
	100% { opacity: 1; transform: scale(1);}
}
@keyframes bgComic {
	0% { background-position: 0 0;}
	100% { background-position: 1000px -995px;}
}
@keyframes bgComic-sp {
	0% { background-position: 0 0;}
	100% { background-position: 700px -697px;}
}

.fade { opacity :0;}
.fadeIn { animation: fadeIn 1s ease both;}

/*main*/
#header .logo { opacity: 0;}
#header .logo.on { animation: zoomIn .4s ease-in-out forwards;}
.main-visual-inner { transform: translateY(100%);}
.main-visual-inner.on { animation: slideUp .5s ease forwards;}
.info-list { opacity: 0;}
.info-list.on { animation: fadeIn 1s ease both;}
@media screen and (max-width: 767.98px) {
	.tw-timeline { opacity: 0;}
	.tw-timeline.on { animation: fadeIn 1s ease both;}
	.info-list::before { transform: translateY(100%);}
	.info-list.on::before { animation: slideUp .5s ease .5s forwards;}
	.headerMenuBtn { transform: translateX(100%);}
	.headerMenuBtn.on { animation: slideIn .5s ease .5s forwards;}
}

/*localacts*/
.section-localacts,
.section-localacts .link-btn { opacity: 0;}
.section-localacts.on { animation: fadeIn 1s ease both;}

.la-logo,
.la-pic-item { transform: scale(0);}
.section-localacts.on .la-inner.on .la-logo { animation: zoomIn .65s ease .2s forwards;}
.section-localacts.on .la-inner.on .la-pic-item { animation: zoomIn .75s ease .4s forwards;}
@media screen and (max-width: 767.98px) {
	.section-localacts.on .la-inner.on .la-logo { animation-delay: .4s;}
	.section-localacts.on .la-inner.on .la-pic-item { animation-delay: .2s;}
}

.portal .la-text-item { transform: translateX(100%);}
.manhole .la-text-item { transform: translateX(-100%);}
@media screen and (min-width: 768px) {
	.section-localacts.on .la-inner.on .la-text-item { animation: slideIn .85s ease forwards;}
	.section-localacts.on .la-inner.on .la-text-item.line1 { animation-delay: .6s;}
	.section-localacts.on .la-inner.on .la-text-item.line2 { animation-delay: .65s;}
	.section-localacts.on .la-inner.on .la-text-item.line3 { animation-delay: .7s;}
	.section-localacts.on .la-inner.on .la-text-item.line4 { animation-delay: .75s;}
	.section-localacts.on .la-inner.on .la-text-item.line5 { animation-delay: .8s;}
	.section-localacts.on .la-inner.on .link-btn { animation: fadeIn 1s ease 1.3s forwards;}
}
@media screen and (max-width: 767.98px) {
	.section-localacts.on .la-detail.on .la-text-item { animation: slideIn .95s ease forwards;}
	.section-localacts.on .la-detail.on .la-text-item.line1 { animation-delay: .2s;}
	.section-localacts.on .la-detail.on .la-text-item.line2 { animation-delay: .25s;}
	.section-localacts.on .la-detail.on .la-text-item.line3 { animation-delay: .3s;}
	.section-localacts.on .la-detail.on .la-text-item.line4 { animation-delay: .35s;}
	.section-localacts.on .la-detail.on .la-text-item.line5 { animation-delay: .4s;}
	.section-localacts.on .la-detail.on .link-btn { animation: fadeIn 1s ease 1s forwards;}
}

/*comic/paint/special*/
.section-comic,
.section-paint,
.section-special { opacity: 0;}
.section-comic.on,
.section-paint.on,
.section-special.on { animation: fadeInUp 1s ease both;}
@media screen and (max-width: 767.98px) {
	.special-inner .puppet { transform: translateY(100%);}
	.special-inner.on .puppet { animation: slideUp .5s ease .3s forwards;}
}