@charset "utf-8";

main {
	padding-bottom: 20vw;
}

img {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* -------------------------------------------------
	first-view
------------------------------------------------- */

#first-view {
	height: 100vh;
	background: url(../images/mv.jpg) no-repeat center center;
	background-size: cover;
	position: relative;
}
#first-view::after {
	content: "";
	display: block;
	width: 100vw;
	height: 100vh;
	background: url(../images/main_mask.gif) repeat-y center center;
    background-size: 100% auto;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	animation: opbg 0.8s ease-out 3.5s forwards;
}
@keyframes opbg {
	0% { opacity: 1;}
	90% { opacity: 0; height: 100vh;}
	100% { opacity: 0; height: 0;}
}
#first-view .logo {
	width: calc(90 / 750 * 100vw);
	position: absolute;
	right: 6%;
	top: 11vw;

	animation: op2 1.5s ease-out 1.8s forwards;
	opacity: 0;
	z-index: 2;
}
#first-view h1 {
	/*font-family: starling, serif;
	font-weight: 700;
	font-size: calc(80 / 750 * 100vw);
	line-height: 1.2;*/
	position: absolute;
	top: 30%;
	left: 5%;
	animation: op 1.5s ease-out 0.8s forwards;
	opacity: 0;
	width: 90%;
	z-index: 2;
}
#first-view h1 span {
	font-size: calc(54 / 750 * 100vw);
	vertical-align: baseline;
}

@keyframes op {
	0% { opacity: 0; filter: blur(30px);}
	100% { opacity: 1; filter: blur(0);}
}
@keyframes op2 {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

#first-view .scroll {
	width: 1px;
	height: 14.6vw;
	display: block;
	background: #fff;
	position: absolute;
	left: 50%;
	bottom: -7.3vw;
	-webkit-animation: scroll 1.1s ease infinite;
	animation: scroll 1.1s ease infinite;
	z-index: 2;
}

@-webkit-keyframes scroll {
	0% { bottom: -7.3vw; height: 14.6vw; }
	49% { bottom: -7.3vw; height: 0; }
	50% { bottom: 7.3vw; height: 0; }
	100% { bottom: -7.3vw; height: 14.6vw; }
}
@keyframes scroll {
	0% { bottom: -7.3vw; height: 14.6vw; }
	49% { bottom: -7.3vw; height: 0; }
	50% { bottom: 7.3vw; height: 0; }
	100% { bottom: -7.3vw; height: 14.6vw; }
}

/* -------------------------------------------------
	h
------------------------------------------------- */

.h-year {
	font-size: calc(42 / 750 * 100vw);
	text-align: center;
	font-family: starling, serif;
	font-weight: normal;
	border-top: solid 1px #333;
	border-bottom: solid 1px #333;
	padding-top: 1.1em;
	padding-bottom: 1.1em;
}
/*.h-year::after {
	content: "";
	display: inline-block;
	border-width: 0.6em 0.35em 0 0.35em;
	border-color: #fff transparent transparent transparent;
	border-style: solid;
	margin-left: 0.5em;
}*/


/* -------------------------------------------------
	about
------------------------------------------------- */

.about {
	margin-top: 15vw;
}
.about a.aboutBtn {
	display: block;
    border: #252525 solid 1px;
    border-radius: 30px;
    text-align: center;
    font-family: starling, serif;
    font-weight: 400;
    font-size: 3.6vw;
    padding: 4vw;
    max-width: 75%;
    margin: 0 auto;
	position: relative;
	background-color: #000;
}

.about .update {
	text-align: center;
    font-size: 3.2vw;
	font-family: Helvetica, "sans-serif";
    margin: 10vw 0 14vw;
    color: #666;
}

.about a.aboutBtn span {
	position: relative;
	z-index: 2;
}
.about a.aboutBtn::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 80px;
    z-index: -1;
    animation: about 0.8s ease-out infinite;
	background-color: #252525;
}
@keyframes about {
	0% { transform: scale(0.8, 0.8); opacity: 0.7;}
	80% { opacity: 0.7;}
	100% { transform: scale(1.06, 1.26); opacity: 0;}
}

#modalAbout .aboutTtl {
	margin-bottom: 12vw;
    font-size: 6vw;
    line-height: 1.5;
    font-family: starling, serif;
    font-weight: 400;
}
#modalAbout .aboutTtl span {
    font-size: 4.4vw;
}
#modalAbout .aboutTxt p {
    font-size: 4vw;
    line-height: 1.6;
    margin-bottom: 8vw;
}
#modalAbout .aboutTxt p.note {
    font-size: 3.4vw;
}


.anchor {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
    margin: 0 8vw;
    padding: 6vw 0 0;
    border-top: #333 solid 1px;
}
.anchor li {
    width: 50%;
    border-right: #333 solid 1px;
    box-sizing: border-box;
    padding: 0 4vw;
    margin-bottom: 3vw;
}
.anchor li:nth-child(odd) {
    padding: 0 8vw 0 4vw;
}
.anchor li:nth-child(even) {
	border-right: none;
    padding: 0 4vw 0 8vw;
}
.anchor li a {
	display: block;
    padding: 1.5vw 0;
    font-size: 4.6vw;
	position: relative;
}
.anchor li a::after {
    content: "";
    display: block;
    width: 1.1vw;
    height: 1.1vw;
    border-right: #fff solid 1px;
    border-bottom: #fff solid 1px;
    position: absolute;
    right: 1.5vw;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}
.anchor li a::before {
	content: "";
    display: block;
    width: 4vw;
    height: 4vw;
    border: #555 solid 1px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -2vw;
}


/* -------------------------------------------------
	year-block
------------------------------------------------- */

.year-block {
	width: 100%;
	margin-top: calc(200 / 750 * 100vw);
	position: relative;
}
.year-block .year {
	font-size: calc(160 / 750 * 100vw);
	color: #333;
	transform: rotate(90deg);
	transform-origin: left bottom;
	white-space: nowrap;
	font-family: starling, serif;
	font-weight: 300;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	letter-spacing: 0;
}

.year-block .box {
	padding: 1.5vw;
	box-sizing: border-box;
	position: relative;
	margin: 0.6vw;
}
.year-block .box::before {
	content: "";
	display: block;
	position: absolute;
	top: 1.5vw;
	left: 1.5vw;
	width: calc(100% - 3vw);
	height: calc(100% - 3vw);
	background: url(../images/jkt_mask.gif) no-repeat center center;
	background-size: cover;
	transition: all 0.1s ease-out 0.6s;
}
.year-block .box.on::before,
.year-block .on .box::before {
	opacity: 0;
}

.year-block .box h3 {
    font-family: starling, serif;
    font-weight: 300;
    position: absolute;
    bottom: 1.3vw;
    left: 1.5vw;
    width: calc(100% - 3vw);
	font-size: 3vw;
    box-sizing: border-box;
	background: -webkit-linear-gradient(bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
	background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
}
.year-block .box.ico-live h3 {
    font-size: 5.4vw;
    padding: 1vw 2vw;
}
.year-block .box.ico-live.large h3,
.year-block .left .box.ico-live h3 {
    font-size: 8vw;
    padding: 1vw 2.5vw;
}
.year-block .box.ico-note h3 {
    font-size: 2.8vw;
    padding: 1.5vw;
}
.year-block .box.ico-member h3 {
    font-size: 2.8vw;
    padding: 1.5vw;
}

.year-block .box .live-icon,
.year-block .box .disc-icon,
.year-block .box .note-icon ,
.year-block .box .member-icon,
.year-block .comment-icon {
	width: calc(40 / 750 * 100vw);
	height: calc(40 / 750 * 100vw);
	content: "";
	display: block;
	position: absolute;
	right: calc(12 / 750 * 100vw);
	bottom: calc(12 / 750 * 100vw);
}
.year-block .box .live-icon img,
.year-block .box .disc-icon img,
.year-block .box .note-icon img,
.year-block .box .member-icon img {
	position: relative;
	z-index: 4;
}
/*.year-block .box.ico.ico-live::after {
	background: url(../images/ico_live.svg) no-repeat  0 0 / contain;
}
.year-block .box.ico.ico-disc::after {
	background: url(../images/ico_disc.svg) no-repeat  0 0 / contain;
}
.year-block .box.ico.ico-note::after {
	background: url(../images/ico_note.svg) no-repeat  0 0 / contain;
}*/

.year-block .live-icon::after,
.year-block .disc-icon::after,
.year-block .note-icon::after,
.year-block .member-icon::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    z-index: 0;
    animation: tap 0.8s ease-out infinite;
}
.year-block .live-icon::after {background-color: rgba(193,39,45,0.5);}
.year-block .disc-icon::after {background-color: rgba(255,255,0,0.5);}
.year-block .note-icon::after {background-color: rgba(0,146,69,0.5);}
.year-block .member-icon::after {background-color: rgba(140,80,140,0.5);}


/* -------------------------------------------------
	description
------------------------------------------------- */

.description {
	padding: 2vw 2.5vw;
	color: #ffff00;
	line-height: 1.34;
	font-size: calc(26 / 750 * 100vw);
	border: solid 2px #ffff00;
	border-radius: 2vw;
	position: absolute;
	z-index: 4;
	white-space: nowrap;
	letter-spacing: 0;
}

/* -------------------------------------------------
	y1989
------------------------------------------------- */

.year-block {
	background: url(../images/bg_01.gif) no-repeat center bottom / 100% auto;
}
.year-block .h-year {
	margin-bottom: calc(180 / 750 * 100%);
}

.year-block .year {
	left: -5.5vw;
	top: 0;
}

.year-block .box.large {
    width: calc(490 / 750 * 100%);
    float: right;
}

.year-block .box-group.box-group {
	display: flex;
	clear: both;
    padding: 0 0.6vw;
}
.year-block .box-group.rtl {
    flex-direction: row-reverse;
}
.year-block .box-group.bg1 > div {
	width: 33.33%;
}
.year-block .box-group > div.left {
	width: calc(500 / 750 * 100%);
}
.year-block .box-group > div.left img {
	width: 100%;
	height: auto;
}
.year-block .box-group > div.right {
	width: calc(250 / 750 * 100%);
}

.year-block .box.b1 {
	background: rgba(30,30,35,0.85);
}

.year-block .box.b2,
.year-block .box.b4 {
	background: rgba(51,51,51,0.80);
}
.year-block .box.b3 {
	background: #4C4833;
}
.year-block .box.b5,
.year-block .box.b7 {
	background: #666247;
}
.year-block .box.b6 {
	background: rgba(0,0,0,0.8);
}
.year-block .box.b8 {
	background: #34422e;
}
.year-block .box.b9 {
	background: #3a2939;
}

.year-block .box.b2,
.year-block .box.b4 {
	text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.year-block .box.single img {
    width: calc(113.2 / 750 * 100vw);
}

.year-block .right .box.b2,
.year-block .right .box.b4 {
	height: calc(50% - 1vw);
}

.year-block .box.b1 .description {
    right: 2vw;
    bottom: 10vw;
}
.year-block .box.b1 .description::after {
    height: calc(30 / 750 * 100vw);
    content: "";
    display: block;
    width: 2px;
    background: #ffff00;
    position: absolute;
    top: 100%;
    right: 1.7vw;
}
.year-block .box.b2 .description,
.year-block .box.b3 .description,
.year-block .box.b8 .description,
.year-block .box.b9 .description {
	right: -1vw;
	bottom: 10vw;
    background-color: rgba(0,0,0,0.3);
}
.year-block .box.b2 .description::after,
.year-block .box.b3 .description::after,
.year-block .box.b8 .description::after,
.year-block .box.b9 .description::after {
    height: calc(30 / 750 * 100vw);
    content: "";
    display: block;
    width: 2px;
    background: #ffff00;
    position: absolute;
    top: 100%;
    right: 4.5vw;
}

.year-block .box.b5 .description {
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
.year-block .box.b7 .description {
	right: 2vw;
	bottom: -17.5vw;
}
.year-block .box.b7 .description::after {
	height: calc(44 / 750 * 100vw);
	content: "";
	display: block;
	width: 2px;
	background: #ffff00;
	position: absolute;
	bottom: 100%;
	right: 1.7vw;
}

/* #y2000.year-block .box.b7 .description {
    right: -24vw;
    bottom: -17vw;
}
#y2000.year-block .box.b7 .description::after {
    width: 2px;
    height: calc(30 / 750 * 100vw);
	top: inherit;
    bottom: calc(100% + 2px);
    left: calc(15% + 2px);
} */

/* .year-block .comment-icon {
	width: calc(70 / 750 * 100vw);
	position: absolute;
	right: calc(12 / 750 * 100vw);
	bottom: calc(3 / 750 * 100vw);
	z-index: 4;
} */
.year-block .comment-icon::after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 50%;
	background-color: rgba(255,255,255,0.5);
	z-index: 0;
	animation: tap 0.8s ease-out infinite;
}
@keyframes tap {
	0% { transform: scale(0.8); opacity: 1;}
	80% { opacity: 1;}
	100% { transform: scale(1.3); opacity: 0;}
}
.year-block .comment-icon img {
	position: relative;
	z-index: 4;
}

/* -------------------------------------------------
	post
------------------------------------------------- */

.post {
	margin-top: 25vw;
}
.post a.postBtn {
	display: block;
    border: #252525 solid 1px;
    border-radius: 30px;
    text-align: center;
    font-size: 3.6vw;
    padding: 4vw 4vw 4vw 8vw;
    max-width: 60%;
    margin: 0 auto;
    position: relative;
    background: #000 url(../images/ico_pen.svg) no-repeat 8% center;
    background-size: auto 50%;
}
.post a.postBtn.schedule {
    font-size: 3.2vw;
    max-width: 70%;
	background: none;
	pointer-events: none;
}

/* -------------------------------------------------
	coming-soon
------------------------------------------------- */

.coming-soon {
	margin-top: calc(100 / 750 * 100vw);
	padding-top: calc(130 / 750 * 100vw);
	text-align: center;
    font-size: calc(58 / 750 * 100vw);
	color: #333;
	white-space: nowrap;
	font-family: starling, serif;
	font-weight: 300;
	letter-spacing: 0;
	position: relative;
}
.coming-soon::before {
	width: 1px;
	height: calc(60 / 750 * 100vw);
	content: "";
	display: block;
	background: #fff;
	position: absolute;
	top: 0;
	left: 50%;
}

/* -------------------------------------------------
	h-with-border
------------------------------------------------- */

.h-with-border {
	font-size: calc(36 / 750 * 100vw);
	position: relative;
	font-family: starling, serif;
	font-weight: 300;
	letter-spacing: 0;
	text-align: center;
}
.h-with-border::before,
.h-with-border::after {
	content: "";
	width: calc(200 / 750 * 100vw);
	height: 1px;
	background: #fff;
	position: absolute;
	top: 50%;
}
.h-with-border::before {
	left: 0;
}
.h-with-border::after {
	right: 0;
}

/* -------------------------------------------------
	modal
------------------------------------------------- */

#modal-base {
	width: 100%;
	height: 100vh;
	background: #05050a;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 200;
	display: none;
}
#modal-close {
	width: calc(40 / 750 * 100vw);
	position: fixed;
	right: 5vw;
	top: 6vw;
	z-index: 220;
	display: none;
}
.modal-content {
	width: 100%;
	height: 100vh;
	padding: calc(140 / 750 * 100vw) 0;
	box-sizing: border-box;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 210;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	display: none;
}

/* -------------------------------------------------
	modal-type1
------------------------------------------------- */

.modal-type1 {
	text-align: center;
}
.modal-type1 .pic {
	width: calc(300 / 750 * 100vw);
	position: relative;
    margin: 0 auto;
}
.modal-type1 .pic.wide {
	width: 100%;
}
.modal-type1 .pic::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 5;
}
.modal-type1 .title {
	margin-top: 2em;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-size: calc(42 / 750 * 100vw);
}
.modal-type1 .sub-title {
	margin-top: 1.5em;
	font-size: calc(28 / 750 * 100vw);
}
.modal-type1 .track-list dt {
	margin: 2.5em 0 2.2em;
    line-height: 1.8;
}
.modal-type1 .track-list dd {
	text-align: left;
	font-size: calc(28 / 750 * 100vw);
    line-height: 1.6;
}
.modal-type1 .track-list dd + dd {
    margin-top: 1em;
}
.modal-type1 .btn {
	width: calc(480 / 750 * 100vw);
	height: calc(90 / 750 * 100vw);
	margin-top: calc(60 / 750 * 100vw);
	border: solid 1px #fff;
	border-radius: calc(45 / 750 * 100vw);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-family: starling, serif;
	font-weight: 300;
	font-size: calc(24 / 750 * 100vw);
	background: url(../images/yt.svg) no-repeat 10% center / 4.4vw auto;
}
.modal-type1 .btn.vm {
	background: none;
	padding-left: 0;
}

/* -------------------------------------------------
	modal-type2
------------------------------------------------- */

.modal-type2 .pic {
    margin: 0 auto 8vw;
	position: relative;
}
.modal-type2 .pic::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 5;
}
.modal-type2 .title {
	text-align: center;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    font-size: 4.8vw;
    margin-bottom: 6vw;
}
.modal-type2 .comment {
    font-size: 3.4vw;
    line-height: 1.8;
    margin-bottom: 6vw;
}


/* -------------------------------------------------
	modal1
------------------------------------------------- */

.history .year {
	font-size: calc(100 / 750 * 100vw);
	font-family: starling, serif;
	font-weight: 300;
}
.history .desc {
	margin: 1.5em 0 1.3em;
	font-size: calc(28 / 750 * 100vw);
	line-height: 1.78;
}
.history iframe {
	width: 100%;
	height: calc(360 / 750 * 100vw);
	/*filter: grayscale(100%);*/
}
.history .live-title {
	margin: 1.8em 0 1.2em;
}
.history .live-name {
    margin-bottom: 0.7em;
    font-size: calc(28 / 750 * 100vw);
    line-height: 1.6;
    margin-top: 8vw;
}
.history .live-desc {
	font-size: calc(24 / 750 * 100vw);
	line-height: 1.78;
}
.history .live-desc + .live-pic {
	margin-top: 5vw;
}

.history .live-pic {
	position: relative;
}
.history .live-pic::after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
}
.history .live-pic img {
	width: 100%;
}


/* -------------------------------------------------
	modal4
------------------------------------------------- */

#modal4 .year,
.comments .year {
	font-size: calc(170 / 750 * 100vw);
	font-family: starling, serif;
	font-weight: 300;
	text-align: center;
	letter-spacing: 0;
	position: relative;
	color: #333;
}
#modal4 .year::after,
.comments .year::after {
	width: 100%;
	height: 0.8vw;
	background: #333;
	display: block;
	content: "";
	position: absolute;
	bottom: 4.2vw;
	left: 0;
}
#modal4 .headline,
.comments .headline {
	text-align: center;
	font-family: starling, serif;
	font-weight: 700;
}
#modal4 .comment-box,
.comments .comment-box {
	padding: calc(30 / 750 * 100vw) calc(30 / 750 * 100vw) calc(50 / 750 * 100vw);
	display: flex;
	justify-content: space-between;
	background: rgba(30,30,35,0.85);
	position: relative;
}
#modal4 .comment-box.new,
.comments .comment-box.new {
	background: #3c3a2e;
}
#modal4 .comment-box.member,
.comments .comment-box.member {
	background: #3a2939;
}
#modal4 .comment-box:first-of-type,
.comments .comment-box:first-of-type {
	margin-top: calc(90 / 750 * 100vw);
}
#modal4 .comment-box + .comment-box,
.comments .comment-box + .comment-box {
	margin-top: calc(20 / 750 * 100vw);
}
#modal4 .comment-box .left,
.comments .comment-box .left {

}
#modal4 .comment-box .left img,
.comments .comment-box .left img {
	width: calc(150 / 750 * 100vw);
}
#modal4 .comment-box .right,
.comments .comment-box .right {
	width: 100%;
}
#modal4 .comment-box .left + .right,
.comments .comment-box .left + .right {
	width: calc(455 / 750 * 100vw);
}
#modal4 .comment-box .right .text1,
.comments .comment-box .right .text1 {
	font-size: calc(32 / 750 * 100vw);
	line-height: 1.2;
}
#modal4 .comment-box .right .text2,
.comments .comment-box .right .text2 {
	margin-top: 0.4em;
	font-size: calc(24 / 750 * 100vw);
	line-height: 1.2;
}
#modal4 .comment-box .right .comment,
.comments .comment-box .right .comment {
	margin-top: 1em;
	font-size: calc(24 / 750 * 100vw);
	line-height: 1.6;
}

#modal4 .d1,
.comments .d1 {
	left: calc(34 / 750 * 100vw);
	top: calc(-60 / 750 * 100vw);
}
#modal4 .d1::after,
.comments .d1::after {
	width: 2px;
	height: calc(30 / 750 * 100vw);
	background: #ffff00;
	content: "";
	display: block;
	position: absolute;
	left: calc(60 / 750 * 100vw);
	top: calc(100% + 2px);
}

#modal4 .d2,
.comments .d2 {
	right: calc(20 / 750 * 100vw);
	bottom: calc(-40 / 750 * 100vw);
}
#modal4 .d2::after,
.comments .d2::after {
	width: 2px;
	height: calc(30 / 750 * 100vw);
	background: #ffff00;
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	bottom: calc(100% + 2px);
}


#modalMember .pic {
	margin-bottom: 6vw;
}
#modalMember .pic.portrait {
	margin: 0 10vw 6vw;
}



/* -------------------------------------------------
	PC
------------------------------------------------- */
@media screen and (min-width: 737px) {

	main {
		padding-bottom: 140px;
	}

	#first-view {
		background: url(../images/mv.jpg) no-repeat center 72%;
    	background-size: cover;
	}
	#first-view::after {
		background: url(../images/main_mask.gif) repeat center center;
		background-size: auto;
		position: absolute;
	}

	#first-view h1 {
		top: 35%;
		max-width: 640px;
		left: 50%;
		transform: translateX(-50%);
	}
	#first-view h1 span {
		font-size: 5vh;
	}

	#first-view .logo {
		width: 10vh;
		right: 5vh;
		top: 5vh;
	}

	.about a.aboutBtn {
		border-radius: 50px;
		font-size: 24px;
		padding: 30px;
		max-width: 480px;
	}
	.about .update {
		font-size: 18px;
		margin: 60px 0 100px;
	}
	.post {
		margin-top: 60px;
	}
	.post a.postBtn {
		border-radius: 50px;
		font-size: 20px;
		padding: 30px;
		max-width: 480px;
	}
	.post a.postBtn.schedule {
		font-size: 20px;
	}



	.h-year {
		font-size: 38px;
	}
	.year-block .year {
		left: -25px;
		top: 0;
    	font-size: 120px;
	}
	.year-block .h-year {
		margin-bottom: 60px;
	}

	.year-block {
		width: 100%;
		margin-top: 0px;
		padding: 200px 18%;
		box-sizing: border-box;
	}
	.year-block .box {
		padding: 10px;
	}
	.year-block .box::before {
		top: 10px;
		left: 10px;
		width: calc(100% - 20px);
		height: calc(100% - 20px);
		background: url(../images/jkt_mask.gif) repeat center center;
		background-size: auto;
	}

	.year-block .box.single img{
		width: 51.6%;
	}

	.year-block .box h3 {
		bottom: 10px;
		left: 10px;
		width: calc(100% - 20px);
		font-size: 3vw;
	}
	.year-block .box.ico-live h3 {
		font-size: 36px;
		padding: 5px 12px;
	}
	.year-block .box.ico-live.large h3,
	.year-block .left .box.ico-live h3,
	.year-block .left .box.ico-member h3 {
		font-size: 80px;
		padding: 10px 25px;
	}
	.year-block .box.ico-note h3 {
		font-size: 18px;
		padding: 10px;
	}

	.year-block .box .live-icon,
	.year-block .box .disc-icon,
	.year-block .box .note-icon,
	.year-block .box .member-icon,
	.year-block .comment-icon {
		width: 30px;
		height: 30px;
		right: 20px;
		bottom: 20px;
	}
	.year-block .box .live-icon img,
	.year-block .box .disc-icon img,
	.year-block .box .note-icon img,
	.year-block .box .member-icon img {
		width: 100%;
	}

	.year-block .box.ico::after {
		width: 40px;
		height: 40px;
		right: 15px;
		bottom: 15px;
	}

	.description {
		padding: 15px 20px;
		line-height: 1.6;
		font-size: 18px;
		border-radius: 12px;
	}

	.year-block {
		background: url(../images/bg_01.gif) repeat center top;
		background-size: 30% auto;
    	margin-top: 80px;
	}
	/* .year-block .comment-icon {
		width: 50px;
		right: 15px;
		bottom: 15px;
	} */

	.year-block .box.b1 .description,
	.year-block .box.b2 .description,
	.year-block .box.b3 .description,
	.year-block .box.b8 .description,
	.year-block .box.b9 .description {
		right: -17px;
		bottom: 72px;
	}
	.year-block .box.b1 .description::after,
	.year-block .box.b2 .description::after,
	.year-block .box.b3 .description::after,
	.year-block .box.b8 .description::after,
	.year-block .box.b9 .description::after {
		height: 25px;
		right: 49px;
	}

	.year-block .box.b7 .description::after {
		height: 52px;
    right: 49px;
	}
	.year-block .box.b7 .description {
		right: -17px;
    bottom: -118px;
	}
	/* #y2000.year-block .box.b7 .description {
		right: -0;
		bottom: -110px;
	}
	#y2000.year-block .box.b7 .description::after {
		width: 2px;
		height: 60px;
    	left: calc(80% + 2px);
	} */

	.coming-soon {
		margin-top: 100px;
		padding-top: 160px;
		font-size: 64px;
	}
	.coming-soon::before {
		height: 80px;
	}


	.modal-content {
		padding: 80px 0;
	}
	#modal-close {
		width: 34px;
		right: 35px;
		top: 35px;
	}

	.modal-content .instance {
		max-width: 960px;
		margin: 0 auto;
	}
	.history.year {
		font-size: 42px;
	}
	.history .year {
		font-size: 120px;
	}
	.history .desc {
		margin: 40px 0;
		font-size: 16px;
		line-height: 1.8;
	}
	.history iframe {
		height: 400px;
	}

	.history .live-title {
		margin: 100px 0 40px;
	}
	.h-with-border {
		font-size: 38px;
	}

	.history .live-name {
		margin-bottom: 30px;
		font-size: 24px;
		line-height: 1.6;
	}
	.history .live-desc {
		font-size: 18px;
	}
	.history .live-desc + .live-pic {
		margin-top: 40px;
	}

	.anchor {
    	padding: 40px 40px 0;
		max-width: 800px;
		margin: 0 auto;
	}
	.anchor li a {
		padding-bottom: 30px;
		font-size: 24px;
	}
	.anchor li a::after {
		width: 10px;
		height: 10px;
		right: 10px;
		top: 48%;
	}
	.anchor li a::before {
		width: 30px;
		height: 30px;
		margin-top: -15px;
	}


	#modalAbout .aboutTtl {
		margin-bottom: 60px;
		font-size: 32px;
	}
	#modalAbout .aboutTtl span {
		font-size: 24px;
	}
	#modalAbout .aboutTxt p {
		font-size: 18px;
		line-height: 1.8;
		margin-bottom: 30px;
	}
	#modalAbout .aboutTxt p.note {
		font-size: 14px;
	}

	.modal-type1 .pic {
		width: auto;
		height: 420px;
	}
	.modal-type1 .pic img {
		height: 100%;
		width: auto;
	}
	.modal-type1 .title {
		margin-top: 60px;
		font-size: 34px;
	}

	.modal-type1 .sub-title {
		margin-top: 25px;
		font-size: 18px;
	}

	.modal-type1 .track-list {
    	display: inline-block;
	}
	.modal-type1 .track-list dt {
		margin: 60px 0 30px;
	}
	.modal-type1 .track-list dd {
		font-size: 18px;
	}


	.modal-type1 .btn {
		width: 340px;
		height: 80px;
		margin: 80px auto 0;
		border-radius: 40px;
		display: flex;
		font-size: 20px;
		background: url(../images/yt.svg) no-repeat 10% center / 24px auto;
		padding-left: 20px;
	}

	.modal-type2 .pic {
		margin-bottom: 60px;
		max-width: 480px;
	}
	.modal-type2 .title {
		font-size: 32px;
		margin-bottom: 50px;
		letter-spacing: 0.1em;
	}
	.modal-type2 .comment {
		font-size: 16px;
		line-height: 1.8;
    	margin-bottom: 30px;
	}

	#modal4 .comment-box:first-of-type,
	.comments .comment-box:first-of-type {
		margin-top: 120px;
	}
	#modal4 .year,
	.comments .year {
		font-size: 84px;
	}
	#modal4 .year::after,
	.comments .year::after {
		height: 4px;
		bottom: 15px;
	}
	#modal4 .headline,
	.comments .headline {
		font-size: 18px;
		letter-spacing: 0.1em;
	}

	#modal4 .comment-box,
	.comments .comment-box {
		padding: 40px;
	}
	#modal4 .d1,
	.comments .d1 {
		left: 50px;
		top: -70px;
	}
	#modal4 .d1::after,
	.comments .d1::after {
		height: 40px;
		left: 50px;
		top: 87px;
	}
	#modal4 .d2,
	.comments .d2 {
		right: 260px;
		bottom: -50px;
	}
	#modal4 .d2::after,
	.comments .d2::after {
		height: 40px;
	}

	#modal4 .comment-box .left,
	.comments .comment-box .left {
		width: 100px;
	}
	#modal4 .comment-box .left + .right,
	.comments .comment-box .left + .right {
		width: calc(100% - 140px);
	}
	#modal4 .comment-box .right .text1,
	.comments .comment-box .right .text1 {
		font-size: 20px;
	}
	#modal4 .comment-box .right .text2,
	.comments .comment-box .right .text2 {
		margin-top: 0.6em;
		font-size: 14px;
	}
	#modal4 .comment-box .right .comment,
	.comments .comment-box .right .comment {
		margin-top: 15px;
		font-size: 14px;
		line-height: 1.6;
	}


}

.psotModal {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 4;
}