
@media screen and (max-width: 480px) {
	}

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

svg : メイン画像の下マスク

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

#main .svg-wrapper {
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	padding-top: 10%; /* 高さを幅のxx% */
	}
#main .svg-wrapper svg {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}
#main .a {
	fill: #fff;
	}

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

svg : ロゴアニメ

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

.ntnm-wrapper {
	position: absolute;
	top: 35%;
	left: 23%;
	width: 54%;
	padding-top: 16%; /* 高さを幅のxx% */
	}
@media screen and (max-width: 640px) {
.ntnm-wrapper {
	top: 42%;
	left: 4%;
	width: 92%;
	padding-top: 30%; /* 高さを幅のxx% */
	}
	}
@media screen and (max-width: 480px) {
.ntnm-wrapper {
	top: 42%;
	left: 4%;
	width: 92%;
	padding-top: 30%; /* 高さを幅のxx% */
	}
	}

.ntnm-wrapper svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

.path{
	stroke:#fff;
	fill:none;
	stroke-width:5;
	stroke-dasharray: 2000;
	-stroke-dashoffset:2000;
/*	-webkit-animation:st0_anime 2s ease-out 1s forwards;
	animation:st0_anime 2s ease-out 1s forwards;*/
}
/*@keyframes st0_anime{
	0%{stroke-dashoffset:2000;}
	100%{stroke-dashoffset:0;}
	}
	@-moz-keyframes st0_anime{
		0%{stroke-dashoffset:2000;}
		100%{stroke-dashoffset:0;}
		}
	@-webkit-keyframes st0_anime{
		0%{stroke-dashoffset:2000;}
		100%{stroke-dashoffset:0;}
		}*/

.st1 {
	fill:none;
	stroke-dasharray: 2000;
	-stroke-dashoffset: 0;
	stroke-width: .5;
	stroke:none;
	-webkit-animation: st1_anime .5s ease-in 2s forwards; 
	animation: st1_anime .5s ease-in 2s forwards;
	}
	@keyframes st1_anime{
		0% {fill:transparent}
		100% {fill:#fff;}
		}
	@-moz-keyframes st1_anime{
		0% {fill:transparent}
		100% {fill:#fff;}
		}
	@-webkit-keyframes st1_anime{
		0% {fill:transparent}
		100% {fill:#fff;}
		}
@media all and (-ms-high-contrast: none) {
.st1 {
	fill:#fff;
	}
	}

.st2 {
	fill:none;
	stroke-dasharray: 2000;
	-stroke-dashoffset: 0;
	stroke-width: .5;
	stroke:none;
	-webkit-animation: st2_anime 1s ease-in 2s forwards; 
	animation: st2_anime 1s ease-in 2s forwards; 
	}
	@keyframes st2_anime{
		0% {fill:transparent}
		100% {fill:#fff;}
	}
	@-moz-keyframes st2_anime{
		0% {fill:transparent}
		100% {fill:#fff;}
		}
	@-webkit-keyframes st2_anime{
		0% {fill:transparent}
		100% {fill:#fff;}
		}
@media all and (-ms-high-contrast: none) {
.st2 {
	fill:#fff;
	}
	}

.st3 {
	fill:none;
	stroke-dasharray: 2000;
	-stroke-dashoffset: 0;
	stroke-width: .5;
	stroke:none;
	-webkit-animation: st3_anime 1.5s ease-in 2.5s forwards; 
	animation: st3_anime 1.5s ease-in 2.5s forwards; 
	}
	@keyframes st3_anime{
		0% {fill:transparent}
		100% {fill:#fff;}
	}
	@-moz-keyframes st3_anime{
		0% {fill:transparent}
		100% {fill:#fff;}
		}
	@-webkit-keyframes st3_anime{
		0% {fill:transparent}
		100% {fill:#fff;}
		}
@media all and (-ms-high-contrast: none) {
.st3 {
	fill:#fff;
	}
	}

.st4 {
	fill:none;
	stroke-dasharray: 2000;
	-stroke-dashoffset: 0;
	stroke-width: .5;
	stroke:none;
	-webkit-animation: st4_anime 2s ease-in 2.5s forwards; 
	animation: st4_anime 2s ease-in 2.5s forwards; 
	}
	@keyframes st4_anime{
		0% {fill:transparent}
		100% {fill:#fff;}
	}
	@-moz-keyframes st4_anime{
		0% {fill:transparent}
		100% {fill:#fff;}
		}
	@-webkit-keyframes st4_anime{
		0% {fill:transparent}
		100% {fill:#fff;}
		}
@media all and (-ms-high-contrast: none) {
.st4 {
	fill:#fff;
	}
	}

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

svg : event

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

.event .svg-wrapper-upper {
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	padding-top: 3%; /* 高さを幅のxx% */
	}

.event .svg-wrapper-upper svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

.event .svg-wrapper-bottom {
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	padding-top: 3.5%; /* 高さを幅のxx% */
	}

.event .svg-wrapper-bottom svg {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

.event .a {
	fill: #fff;
	}

.event .title {
	fill: #ff6c6c;
	}

.event .svg-wrapper-title {
	position: absolute;
	top: -70px;
	left: 50%;
	margin-left: -88px;
	width: 175px;
	height: 115px;
	}
@media screen and (max-width: 640px) {
.event .svg-wrapper-title {
	top: -75px;
	}
	}

.event .svg-wrapper-title svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

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

svg : story

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

.story .title {
	fill: #ff6c6c;
	}

.story .svg-wrapper-title {
	position: relative;
	margin: 0 auto;
	width: 194px;
	height: 153px;
	}
@media screen and (max-width: 640px) {
.story .svg-wrapper-title {
	width: 154px;
	height: 123px;
	}
	}

.story .svg-wrapper-title svg {
	position: absolute;
	top: 0;
	left: 20px;
	width: 100%;
	height: 100%;
	}

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

svg : mind

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

.mind .svg-wrapper-upper {
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	padding-top: 3%; /* 高さを幅のxx% */
	}

.mind .svg-wrapper-upper svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

.mind .svg-wrapper-bottom {
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	padding-top: 3.5%; /* 高さを幅のxx% */
	}

.mind .svg-wrapper-bottom svg {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

.mind .a {
	fill: #fff;
	}

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

svg : noverty

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

.noverty .svg-wrapper-upper {
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	padding-top: 3%; /* 高さを幅のxx% */
	}

.noverty .svg-wrapper-upper svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

.noverty .svg-wrapper-bottom {
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	padding-top: 3.5%; /* 高さを幅のxx% */
	}

.noverty .svg-wrapper-bottom svg {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

.noverty .a {
	fill: #fff;
	}

.noverty .title {
	fill: #ff6c6c;
	}

.noverty .svg-wrapper-title {
	position: relative;
	margin: 0 auto;
	width: 217px;
	height: 137px;
	}
@media screen and (max-width: 640px) {
.noverty .svg-wrapper-title {
	width: 200px;
	height: 116px;
	}
	}

.noverty .svg-wrapper-title svg {
	position: absolute;
	top: 0;
	left: 10px;
	width: 100%;
	height: 100%;
	}

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

svg : workshop

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

.workshop .svg-wrapper-upper {
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	padding-top: 3%; /* 高さを幅のxx% */
	}

.workshop .svg-wrapper-upper svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

.workshop .svg-wrapper-bottom {
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	padding-top: 3.5%; /* 高さを幅のxx% */
	}

.workshop .svg-wrapper-bottom svg {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

.workshop .a {
	fill: #fff;
	}

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

svg : watch_common

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

.watch_common .svg-wrapper-upper {
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	padding-top: 3%; /* 高さを幅のxx% */
	}

.watch_common .svg-wrapper-upper svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

.watch_common .svg-wrapper-bottom {
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	padding-top: 3.5%; /* 高さを幅のxx% */
	}

.watch_common .svg-wrapper-bottom svg {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

.watch_common .a {
	fill: #fff;
	}

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

svg : novelty_page

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

.novelty_page .svg-wrapper-upper {
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	padding-top: 3%; /* 高さを幅のxx% */
	}

.novelty_page .svg-wrapper-upper svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

.novelty_page .svg-wrapper-bottom {
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	padding-top: 3.5%; /* 高さを幅のxx% */
	}

.novelty_page .svg-wrapper-bottom svg {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

.novelty_page .a {
	fill: #fff;
	}

.novelty_page .title {
	fill: #ff6c6c;
	}

.novelty_page .svg-wrapper-title {
	position: absolute;
	top: -70px;
	left: 50%;
	margin-left: -88px;
	width: 217px;
	height: 137px;
	}
@media screen and (max-width: 640px) {
.novelty_page .svg-wrapper-title {
	top: -50px;
	margin-left: -88px;
	width: 197px;
	height: 107px;
	}
	}

.novelty_page .svg-wrapper-title svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

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

svg : watchvisual

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

.watchvisual .svg-wrapper-upper {
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	padding-top: 3%; /* 高さを幅のxx% */
	}

.watchvisual .svg-wrapper-upper svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

.watchvisual .svg-wrapper-bottom {
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	padding-top: 3.5%; /* 高さを幅のxx% */
	}

.watchvisual .svg-wrapper-bottom svg {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

.watchvisual .a {
	fill: #fff;
	}

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

svg : story_page

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

.story_page .svg-wrapper-upper {
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	padding-top: 3.4%; /* 高さを幅のxx% */
	}

.story_page .svg-wrapper-upper svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

.story_page .a {
	fill: #f2f5f5;
	}

.story_page .title {
	fill: #ff6c6c;
	}

.story_page .svg-wrapper-title {
	position: absolute;
	top: -40px;
	left: 50%;
	margin-left: -70px;
	width: 170px;
	height: 140px;
	}
@media screen and (max-width: 640px) {
.story_page .svg-wrapper-title {
	top: -50px;
	margin-left: -62px;
	width: 154px;
	height: 123px;
	}
	}

.story_page .svg-wrapper-title svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}
