.sm {
	display: none;
}
body {
	color: #000;
	scroll-behavior: smooth;
}

h1 {
	line-height: 0.6;
	font-size: 6em;
	font-family: serif;
	font-weight: normal;
}
h2 {
	font-size: 1.6em;
	font-family: serif;
}
p{
	font-size: 16px;
	margin: 0;
}
.lp_wrap {
	width: 100%;
}

.fadein {
	opacity: 0;
	transition: opacity 1s ease-out;
}
.fadein.blurred {
	opacity: 1;
}

.disc.fadein.blurred {
	animation: spin 20s linear infinite;
	animation-delay: 1s;
}
.player.fadein.blurred {
	animation: needle-in 1.5s ease forwards;
}
.sign.fadein.blurred .svg1 .path1 {
	animation: draw 3.5s linear forwards;
}


/* CHANGE BG */
:root {
	--bk-image: url('/sp/music_legends/img/lennon_1_bk.webp');
	--bk-color-content: #000;
	--text-color: #fff;
	--button-bg-image: url('/sp/music_legends/img/lennon_peace-1.svg');
	--text-h3-color: #eec766;
	--text-b-color: #a78737;

	--cont-1-img-1: url('/sp/music_legends/img/lennon_content_1-1.webp');
	--cont-2-img-2: url('/sp/music_legends/img/lennon_content_1-2.webp');

	--cont-4-img-3: url('/sp/music_legends/img/lennon_content_1-3.webp');
	--cont-4-img-4: url('/sp/music_legends/img/lennon_content_1-4.webp');

	--cont-5-img-5: url('/sp/music_legends/img/lennon_content_1-5.webp');
	--cont-5-img-6: url('/sp/music_legends/img/lennon_content_1-6.webp');

	--cont-6-img-7: url('/sp/music_legends/img/lennon_content_1-7.webp');
	--cont-6-img-8: url('/sp/music_legends/img/lennon_content_1-8.webp');
}

#peace_btn {
	padding: 25px;
	cursor: pointer;
	background-image: var(--button-bg-image);
	background-size: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: #00000000;
	border: none;
	position: fixed;
  top: 15%;
  right: 5%;
	opacity: 0.7;
	transition: opacity 0.3s;
	z-index: 100;
}
#peace_btn:hover {
	opacity: 1;
	transition: opacity 0.3s;
}




/* MV */
.mv {
	text-align: center;
	width: 100%;
	height: auto;
	padding-bottom: 870px;
	color: #fff;
	background-image: var(--bk-image);
	background-position: top center;
	transition: background-image 0.4s ease;
}
.mv-coin {
	height: 400px;
	margin-top: 50px;
}

.mv p {
	padding: 500px 0 0 0;
	font-size: 1.6em;
	font-family: serif;
}

.mv h1 {
	margin-top: 50px;
	line-height: 0.6;
	font-size: 6em;
	font-family: "Lato", sans-serif;
	font-weight: 900;
	font-style: normal;
	color: #eec766;
}

.mv h1 span {
	font-size: 0.3em;
	font-family: serif;
	color: #fff;
}


.mv-coin img {
	width: 400px;
}

.nav_top {
	width: 100%;
	position: relative;
}


	/* イントロ */

.intro {
	width: 100%;
	margin: -760px 0 60px;
	height: 700px;
	background-size: cover;
	z-index: 100;
}

.intro-inner {
	width: 700px;
	margin: 0 auto;
	color: #fff;
}

.intro-inner h2 {
	margin: 0 0 40px 0;
	text-align: center;
	font-size: 32px;
	font-family: serif;
	font-weight: normal;
	line-height: 1.8;
	letter-spacing: 0.1px;
	color: #eec766;
}

.intro-inner p {
	margin: 0 auto 30px;
	color: #fff;
}

	/* PRODUCT */

.product {
	width: 100%;
}

.product-list {
	position: relative;
	width: 1000px;
	margin: 0 auto;
	z-index: 3;
}

.product-list li {
	transition: all 0.15s ease-in;
	position: absolute;
}
.product-list li:hover {
	filter: brightness(115%);
	transition: all 0.15s ease-in;    
}

.product-list li:nth-child(1) {
	width: 60px;
	right: 15%;
	bottom: -80px;
	z-index: 5;
}
.product-list li:nth-child(2) {
	width: 280px;
	left: 10%;
	bottom: -100px;
	z-index: 2;
}
.product-list li:nth-child(3) {
	width: 240px;
	left: 30%;
	bottom: -160px;
	z-index: 3;
}
.product-list li:nth-child(4) {
	width: 210px;
	left: 58%;
	bottom: -200px;
	transform: translateX(-50%);
	z-index: 3;
}
.product-list li:nth-child(5) {
	width: 280px;
	left: 50%;
	bottom: -30px;
	transform: translateX(-50%);
}
.product-list li:nth-child(6) {
	width: 210px;
	right: 20%;
	bottom: -70px;
}


/* Coinlist */
.coinlist {
	margin: 300px 0 100px; 
	min-height: 100%;
	display: flex;
	flex-direction: column;
}
#coinlist_cate {
	flex-grow: 1;
}
#coinlist_cate ul {
	display: flex;
	flex-wrap: wrap;
}
.coinlist h2 {
	text-align: center;
	font-size: 30px;
	font-family: serif;
	margin-bottom: 60px;
	position: relative;
}
.coinlist h2::before {
	content: '';
	width: 30px;
	height: 1.5px;
	background-color: #000;
	display: inline-block;
	margin: 0 8px 9px 0;
}
.coinlist h2::after {
	content: '';
	width: 30px;
	height: 1.5px;
	background-color: #000;
	display: inline-block;
	margin: 0 0 9px 8px;
}

/* MID BANNER */
.mid-banner {
	width: 100%;
	height: 400px;
	background: linear-gradient(90deg, #d2d4d8 50%, #e4e5e9 50%);
}
.legend-banner {
	width: 100%;
	height: 400px;
	background: url(/sp/music_legends/img/lennon_mid.webp) no-repeat;
	background-size: auto 100%;
	background-position: top center;
}

/* CONTENT */
.content {
	width: 100%;
	margin: -20px 0 0;
	background-color: var(--bk-color-content);
	transition: background-color 0.4s ease;
	overflow: hidden;
}
.content_wrap {
	width: 1500px;
	margin: 0 auto;
	padding: 260px 0 140px;
	position: relative;
	z-index: 1;
}

.cont {
	width: 100%;
	position: relative;
	z-index: 1;
}

.cont_img-L {
	width: 400px;
	height: 400px;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: top center;
}
.cont_img-M {
	width: 300px;
	height: 300px;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: top center;
}
.cont_img-S {
	width: 260px;
	height: 260px;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: top center;
}
.cont_img-XS {
	width: 200px;
	height: 200px;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: top center;
}
.cont_txt {
	width: 400px;
}

.content p {
	color: var(--text-color);
	margin: 0 0 20px;
}
.content b {
	font-weight: normal;
	background-color: var(--text-b-color);
	transition: background-color 0.4s ease;
}
.content h3 {
	font-size: 128px;
	font-family: serif;
	cursor: default;
	-webkit-text-fill-color: #ffffff00;
	-webkit-text-stroke-width: 0.7px;
	-webkit-text-stroke-color: var(--text-h3-color);
	/* mix-blend-mode: difference; */
	position: absolute;
}


/* cont-1, cont-2 */
.cont-1, .cont-2 {
	width: 940px;
	margin: 0 auto 200px;
}

.cont-1 ul, .cont-2 ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	position: relative;
}
.cont-1 ul {
	margin: 0 0 0 40px;
}
.cont-2 ul {
	margin: 0 40px 0 0;
}

.cont-1 ul li.img-1 {
	background-image:  var(--cont-1-img-1);
}
.cont-2 ul li.img-2 {
	background-image:  var(--cont-2-img-2);
}
.cont-1 ul li.cont_txt,
.cont-2 ul li.cont_txt {
	width: 440px;
	margin-top: 30px;
}
.cont-1 h3 {
	left: -1.5%;
	top: -30%;
	transform: translate(-50%, -100%);
	z-index: 10;
}
.cont-2 h3 {
	right: 2.2%;
	top: -30%;
	transform: translate(50%, -100%);
	z-index: 10;
}


/* cont-3 */
.cont-3 {
	width: 660px;
	margin: 100px auto;
}

.cont-3 p {
	margin-top: 800px;
}

.disc {
	width: 500px;
	position: absolute;
	top: -40%;
	left: 50%;
	transform: translate(-50%, -110%);
	z-index: 1;
	/* animation: spin 20s linear infinite; */
	animation-delay: 1.8s;
}
.player {
	width: 200px;
	position: absolute;
	top: 25%;
	right: 0%;
	transform: translate(50%, -200%);
	z-index: 2;
	transform-origin: top right;
	/* animation: needle-in 1.5s ease forwards; */
}

@keyframes spin {
	0% {
		transform: translate(-50%, -110%) rotate(0deg);
	}
	100% {
		transform: translate(-50%, -110%) rotate(360deg);
	}
}

@keyframes needle-in {
	0% {
		transform: translate(50%, -200%) rotate(0deg);
	}
	100% {
		transform: translate(50%, -200%) rotate(20deg);
	}
}


/* cont-4 */
.cont-4 {
	height: 1000px;
	margin: 200px auto 100px;
}

.cont-4 h3 {
	left: 50%;
	top: 0;
	transform: translate(-50%, -100%);
	z-index: 10;
}

.cont-4 .cont_txt {
	width: 410px;
	position: absolute;
	top: 18%;
	left: 0%;
}

.cont-4 .img-3 {
	background-image: var(--cont-4-img-3);
	position: absolute;
	top: 33%;
	left: 45%;
	transform: translateX(-50%);
}
.cont-4 .img-4 {
	background-image: var(--cont-4-img-4);
	position: absolute;
	top: 70%;
	left: 0%;
}

.cont-4::before {
	content: '';
	width: 200px;
	height: 60px;
	background: center center / 100% url(/sp/music_legends/img/lennon_content_1-15.webp) no-repeat;
	position: absolute;
	top: 68.8%;
	left: 34.5%;
	transform: translateX(-50%) rotate(10deg);
	z-index: 2;
}
.cont-4::after {
	content: '';
	width: 900px;
	height: 900px;
	background: center center / 100% url(/sp/music_legends/img/lennon_content_1-11.webp) no-repeat;
	position: absolute;
	top: -10%;
	right: -22.5%;
	z-index: 2;
	animation-delay: 1s;
}

/* con-5 */
.cont-5 {
	height: 600px;
}

.cont-5 .cont_txt {
	width: 420px;
	position: absolute;
	top: -15%;
	left: 60%;
	transform: translateX(-50%);
}

.cont-5 .img-5 {
	background-image: var(--cont-5-img-5);
	position: absolute;
	top: -20%;
	right: 2%;
}
.cont-5 .img-6 {
	background-image:  var(--cont-5-img-6);
	position: absolute;
	top: 0%;
	left: 15%;
}

/* con-6 */
.cont-6 {
	height: 600px;
}

.cont-6 .cont_txt {
	position: absolute;
	top: 0%;
	left: 56%;
	transform: translateX(-50%);
}

.cont-6 .img-7 {
	background-image: var(--cont-6-img-7);
	position: absolute;
	top: -20%;
	right: 10%;
}
.cont-6 .img-8 {
	background-image: var(--cont-6-img-8);
	position: absolute;
	top: 45%;
	right: 2%;
}

/* con-7 */
.cont-7 {
	height: 1000px;
}

.cont-7 .cont_txt {
	width: 420px;
	position: absolute;
	top: -12%;
	left: 65%;
	transform: translateX(-50%);
}

.cont-7::after {
	content: '';
	width: 900px;
	height: 900px;
	background: center center / 100% url(/sp/music_legends/img/lennon_content_1-12.webp) no-repeat;
	position: absolute;
	top: -60%;
	left: -22%;
	z-index: 2;
}

/* con-8 */
.cont-8 {
	height: 240px;
}

.cont-8 .cont_txt {
	width: 600px;
	position: absolute;
	top: 0%;
	left: 50%;
	transform: translateX(-50%);
}

.cont-8 .img-9 {
	width: 400px;
	position: absolute;
	top: -20%;
	left: 50%;
	transform: translate(-50%, -100%);
}
.cont-8::after {
	content: '';
	width: 760px;
	height: 760px;
	background: center center / 100% url(/sp/music_legends/img/lennon_content_1-10.webp) no-repeat;
	position: absolute;
	top: 35%;
	left: 50%;
	transform: translate(-50%, -100%);
	z-index: -1;
}

.sign {
	position: relative;
}
.svg1 {
	width: 220px;
	height: 120px;
	position: absolute;
	top: -65%;
	left: 60%;
	transform: translate(-50%, -130%);
}
.path1 {
	stroke-dasharray: 4000;
	stroke-dashoffset: 4000;
	fill: none;
	stroke: #000;
	stroke-width: 10px;
	stroke-miterlimit: 10;
	stroke-linecap:round;
	stroke-linejoin:round;

	/* animation: draw 3.5s linear forwards; */
}

@keyframes draw {
	0% {
		stroke: #674f11;
	}
	100% {
		stroke-dashoffset: 0;
		stroke: #f6c957;
	}
}





/* LEGENDS LINK */
.legends-link {
	margin: 0 0 -170px 0;
	padding: 100px 0 150px;
	background-color: #f5f2ed;
}

.switch-wrap {
	width: 920px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 20% 20% 20% 20% 20%;
	grid-template-rows: 50% 50%;
	position: relative;
}

.switch-btn {
	text-align: center;
	width: 100%;
	position: relative;
}
.switch-btn img {
	width: 140px;
	height: auto;
}
.switch-btn img:nth-child(2) {
	width: 142px;
	height: auto;
}

.switch-btn:hover {
	text-decoration: underline;
	text-decoration-color: #063047;
	opacity: 1;
	transition: all 0.2s;
}

.switch-btn p {
	margin: 20px 54px 40px 0;
	font-family: serif;
	color: #063047;
	font-weight: bold;
	font-size: 18px;
}

.switch-btn img:first-child {
	position: relative;
}

.switch-btn img:nth-child(2) {
	position: absolute;
	top: -1px;
	left: -1px;
	transition: .3s;
}

.switch-btn img:nth-child(2):hover {
	opacity: 0;
	transition: .3s;
}

.legends-link h1 {
	text-align: center;
	margin: 0 0 40px 0;
	font-size: 20px;
	font-family: serif;
	color: #a78d30;
	line-height: 42px;
}

.legends-link h1 span {
	font-size: 26px;
	color: #1a1a1a;
}
#toppage {
	text-align: center;
	margin: 80px 0 0 0;
}
#toppage a {
	background-size: 200% auto;
	background-image: linear-gradient(45deg, #002539 0%, #034e77  51%, #063047  100%);
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	color: #fff;
	font-size: 16px;
	padding: 12px 50px;
	transition: .3s;
}

#toppage a:hover {
	background-position: right center;
	transition: .3s;
}