@charset "UTF-8";
/* RESET - ADAPTED FROM MEYER RESET URL - http://meyerweb.com/eric/tools/css/reset/ LICENSE - PUBLIC DOMAIN */
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, caption, canvas, center, cite, code,dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, form, footer, header, hgroup, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, main, small, span, strike, strong, sub, summary, sup, tt, table, tbody, textarea, tfoot, thead, time, tr, th, td,u, ul, var, video{font-family:inherit;font-size:100%;font-weight:inherit;font-style:inherit;vertical-align:baseline;margin:0;padding:0;border:0;outline:0;background:transparent;}article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main{display:block;}ol, ul{list-style:none;}blockquote, q{quotes:none;}table{border-collapse:collapse;border-spacing:0;}body{line-height:1;}
textarea{font-family:inherit;font-size:100%;font-weight:inherit;font-style:inherit;vertical-align:baseline;margin:0;padding:0;}
/* YUI 3.14.1 (build 63049cb) Copyright 2013 Yahoo! Inc. All rights reserved. Licensed under the BSD License. http://yuilibrary.com/license/ */
body{font:13px/1.231 sans-serif;*font-size:small;*font:x-small;}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.container{margin:0 auto; padding:0;}
// .container:after,.row:after,.col:after,.clr:after,.group:after{content:"";display:table;clear:both;}


// BASE COLOR
@white:#fff;
@black:#000;
@gray:#666;
@grayL:#eee;
@blue:#000fff;
@blueD:#98bed3;
@ivory:#fffce0;
@yellow:#fff000;

// 変更相談：BASE COLOR
@white:#FFFCE0;
@black:#37485A;
@gray:#666;
@grayL:#eee;
@blue:#356C90;
@blueD:#98bed3;
@ivory:#FFFCE0;
@yellow:#fff000;

// LESS
@ncc:no-repeat center center;

// MIXIN
.trans{-webkit-transition:0.4s; -moz-transition:0.4s; -o-transition:0.4s; -ms-transition:0.4s; transition:0.4s;}
.transs{-webkit-transition:0.2s; -moz-transition:0.2s; -o-transition:0.2s; -ms-transition:0.2s; transition:0.2s;}
.tac{text-align:center;}
.tar{text-align:right;}
.tdn{text-decoration:none;}
.tdu{text-decoration:underline;}
.bgsc{-webkit-background-size:cover; -moz-background-size:cover; -ms-background-size:cover; -o-background-size:cover; background-size:cover;}
.inline{display:inline-block;}
.fb{font-weight:bold;}

/*BASE*/
// html,body{width:100%; height:auto; margin:0; padding:0;}
body{/*position:relative; */line-height:1; -webkit-text-size-adjust:100%; color:@black; font-weight:normal; font-weight:400; font-style:normal; font-feature-settings:"palt";
font-family:"Zen Kaku Gothic New","Helvetica Neue",Helvetica,Arial,Roboto,"Droid Sans","游ゴシック",YuGothic,"游ゴシック体","游ゴシック Medium","Yu Gothic Medium","Hiragino Sans","ヒラギノ角ゴシック",sans-serif;
background:@grayL;
}

/*BASE修正*/
html, body {
    height: 100%;
    margin: 0;
}

img{max-width:100%; height:auto; vertical-align:middle;}
video{width:100%; max-width:100%; height:auto; vertical-align:middle; display:block; background:rgba(255,255,255,0.5);}

/*CF*/
.cf:before,.cf:after{content:" ";display:table;}.cf:after{clear:both;}.cf{*zoom:1;}
/*LINK*/
a:link{color:@ivory; .tdu(); .trans();}
a:visited{color:@ivory; .tdu();}
a:hover{color:@black; .tdu();}
a:active{color:@ivory; .tdu();}
a img{border:none; .tdn(); .trans();}
a img:hover{border:none; opacity:0.6; .tdn();}

/*LETTER*/
strong{.fb();}
.wf{font-family:"Noto Serif Display", serif; font-weight:400;}
.arrow{font-family:"游ゴシック体","YuGothic","游ゴシック Medium","Yu Gothic Medium","游ゴシック","Yu Gothic"; font-weight:bold!important;}
.fontsmall{font-size:85%!important;}
.fontlarge{font-size:124%!important;}
.attention{color:#ed1b24;}
::selection{background:@ivory; color:@blueD;}
::-moz-selection{background:@ivory; color:@blueD;}

/*LOADING*/
div#splash{position:fixed; z-index:20000; top:0; left:0; width:100%; height:100%; pointer-events:none; background:@white;
	div.loading{width:100%; position:absolute; top:50%; transform:translateY(-50%);
		img{display:block; width:120px; margin:0 auto; opacity:0;}
	}
}
div#splash.loaded{animation:splashOut 1.6s linear 0.8s forwards;
	div.loading{
		img{animation:blurIn 0.3s ease-in-out 0s forwards;}
	}
}


/*HEADER*/
header{z-index:999; position:fixed; width:100%; padding:13px 57px 13px 13px;
	display:flex;
	flex-flow:row nowrap;
	justify-content:space-between;
	align-items:center;
	h1{width:70px; margin:0;
		transition: .35s ease;

	}
	div#clocks{font-size:9px;}

	.logo-pc {
		display: none;
	  }
	  .logo-sp {
		display: block;
	  }
}

/*HEADERscrolle*/
  h1.scrolled {
	opacity: 0;
  visibility: hidden;
  }

/*TEASER*/
div#teaser{position:relative; width:100%; height:100%; overflow:visible;
	div.teasertxt{z-index:2; position:absolute; top:70%; left:32%; transform:translateY(-50%) translateX(-50%);
		h2{font-size:22px; letter-spacing:1px;
			span{background:@ivory; opacity:0; padding:4px; width:0; max-width:fit-content!important; white-space:nowrap; display:block;
				em{color:@blue; opacity:0; white-space:nowrap; display:block; width:fit-content;}
			}
		}
		h2:first-child{margin:0 0 60%;}
	}
	div.teaserimg{position:relative; width:100%; height:100%; overflow:hidden; text-align: center;}
	div.teaserimg img{position:relative; width:100%; height:100vh; object-fit: cover; animation: focusIn 3s ease-in-out infinite alternate;

		@keyframes focusIn {
			0% {
			  filter: blur(0px);
			  opacity: 0.8;
			}
			100% {
			  filter: blur(1.2px);
			  opacity: 1;
			}
		  }
		}

	div.ticker{position:absolute; bottom:0; left:0;
		ul{animation:hscroll 50s linear infinite;}
	}
}
div#teaser.start{
	div.teasertxt{
		h2{
			span{animation:txtbg 0.5s ease-in-out 2.5s forwards;
				em{animation:txtin 0.5s ease-in-out 3.0s forwards;}
			}
		}
	}
}

/*全体のnoise*/
.bg-noise {
	min-height: 100vh;
	background:
	  url("../img/bg/noise.png"),
	  linear-gradient(182deg, #fffce0, @blueD;
	  );
	background-size:
		200px 200px, 100% 100%;
	background-repeat:
	  repeat,
	  no-repeat;
	background-blend-mode: overlay;
	-webkit-background-blend-mode: overlay;
  }

/*擬似要素で重ねたグラデーション*/
  .bg-noise {
	position: relative;
	min-height: 100vh;
	background: url("../img/bg/noisew.png") repeat;
	background-size:
	200px 200px, 100% 100%;
	z-index: 0;
  }

  .bg-noise::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: linear-gradient(182deg, #fffac8, #98bed3);
	opacity: 0.65;
	pointer-events: none;
	z-index: 0;
  }

/*MAIN*/
div.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
// main{position:relative; clear:both; display:block; overflow:hidden; height:auto;}

main {
    flex: 1;
}

.scroll {
	position: absolute;
	right: 2%;
	bottom: 12%;
	writing-mode: vertical-rl;
	color: @blueD;
  }

  .scroll span{
	letter-spacing: 2px;
  }

  .scroll::before {
    animation: scroll 2s infinite;
    background-color: #98bed3;
    bottom: -160px;
    content: "";
    height: 150px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    width: 1px;
    z-index: 2;
}
.scroll::after {
    background-color: #FFFCE0;
    bottom: -160px;
    content: "";
    height: 150px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    width: 1px;
}
  /* 線のアニメーション */
  @keyframes scroll {
	0% {
	  transform: scale(1, 0);
	  transform-origin: 0 0;
	}
	50% {
	  transform: scale(1, 1);
	  transform-origin: 0 0;
	}
	51% {
	  transform: scale(1, 1);
	  transform-origin: 0 100%;
	}
	100% {
	  transform: scale(1, 1);
	  transform-origin: 0 100%;
	}
  }

/*** TOP ***/
div.topbox{position:relative; overflow:hidden; border-bottom:2px solid @ivory;
	article{position:relative; z-index:2; width:fit-content; background:@blue; padding:86px 16px;
		h3{font-size:20px; margin:0 0 30px;}
		p{line-height:1.9; margin:0 0 30px;}
	}
}

div.topabout{
	position: relative;

	.toptitle{
		position: relative;
	}

	h3 {
		font-family: "Noto Serif Display", serif;
		line-height: 1.5;
		font-size: 1.675rem;
		letter-spacing: 0.15em;
		color: #98bed3;
		width: fit-content;
		margin: 30px auto 30px auto;
	}

	h3:before{
		content: "（";
	}

	h3:after{
		content: "）";
	}

	.fadeIn {
		transition: 1s;
		opacity: 0;
	  }

	  .fadeIn.animated {
		opacity: 1;
	  }

	  .tickerbox{
		padding: 60px 0 0 0;
	  }

	margin-bottom: 70px;
	article{background:@blue; margin:0 auto; border-left:2px solid @ivory; border-right:2px solid @ivory;
		h3{font-size:30px; .tac();}
		p{.tac();}
	}

	div.theta{position:absolute; width:30%; top:50%; transform:translateY(-50%); opacity:0.3;}
	div.t01{left:-5%;}
	div.t02{right:-5%;}
	.profile {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0px;
	}
	.photo-fade {
		width: 80%;
		aspect-ratio: 16 / 9;
		margin: 0 auto;
		position: relative;
	}
	.photo-fade::before {
		display: inline-block;
		content: "";
		width: 50px;
		height: 1px;
		border-radius: 2px;
		background-color: #98bed39c;
		top: -18px;
		left: -29px;
		position: absolute;
	}
	.photo-fade::after {
		display: inline-block;
		content: "";
		width: 50px;
		height: 1px;
		border-radius: 2px;
		background-color: #98bed39c;
		top: -3px;
		left: -44px;
		position: absolute;
		transform: rotate(-90deg);
	}
	.photo-fade-kasen{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.photo-fade-kasen::before {
		display: inline-block;
		content: "";
		width: 50px;
		height: 1px;
		border-radius: 2px;
		background-color: #98bed39c;
		top: 18px;
		right: -28px;
		position: absolute;
	}

	.photo-fade-kasen::after {
		display: inline-block;
		content: "";
		width: 50px;
		height: 1px;
		border-radius: 2px;
		background-color: #98bed39c;
		top: 3px;
		right: -44px;
		position: absolute;
		transform: rotate(-90deg);
	}

	.photo-fade img{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0;
		transition: opacity 2.5s ease;
		object-position: center center;
	}

	.photo-fade img.active{
		opacity: 1;
	}

	.photo-overlay{
		position: absolute;
		inset: 0;
		background:
		radial-gradient(
		  rgba(255,252,224,.35),
		  rgba(63,133,179,.25)
		);
		opacity: 0;
		pointer-events: none;
		transition: opacity .9s ease-in-out;
		z-index: 2;
		margin: 0;
	}

	.photo-fade.is-switching .photo-overlay{
		opacity: 1;
	}

	.artist-introduction{
		display: flex;
		flex-direction: column;
		width: 100%;
		gap: 40px;
		z-index: 5;
	}

	.artist-name {
		width: 50%;
		background-color: @blue;
		padding: 7px;
		text-align: center;
		display: flex;
		flex-direction: column;
		position: relative;
		transform: skewX(-15deg);
		margin-top: -2%;
		box-shadow: 3px 3px 0 @ivory;
	}

	.artist-name img {
		width: 100%;
		padding: 0px 17px;
		margin: 0 auto;
	}
	.artist-name-small {
		display: inline;
		background-color: @ivory;
		color: #356C90;
		padding: 2px 4px;
		max-width: 160px;
		margin: -5px 0 0px auto;
		position: absolute;
		bottom: -7px;
		right: -35px;
		transform: skewX(-10deg);
		font-size: 0.75rem;
		font-weight: 300;
	}

	.artist-text {
		margin: 0 20px;
		line-height: 1.8;
		letter-spacing: 1.5px;
		color: #366c90;
		font-weight: 500;
		background: #98bed3;
		background: url(../img/bg/textured-paper.png), linear-gradient(182deg, @blueD, #fff6c0);
		background-blend-mode: screen;
		-webkit-background-blend-mode: screen;
		margin-top: -16px;
		padding: 32px 16px;
		box-shadow: 2px 2px 4px #1d3a4e94;
		font-size: 12px;

		a:link{
			color: @blue;
		}
		a:visited{
			color: @blue;
		}
		a:hover{
			color: @blueD;
		}

	}

}
div.topnews{
	padding-bottom: 0;
	position: relative;

	h3 {
		font-family: "Noto Serif Display", serif;
		line-height: 1.5;
		font-size: 1.675rem;
		letter-spacing: 0.15em;
		color: #7a9eaf;
		width: fit-content;
		margin: 30px auto 30px auto;
		letter-spacing: 0.25em;
	}

	h3:before{
		content: "（";
	}

	h3:after{
		content: "）";
	}


	.news-content{
		color: @ivory;
		margin: 0px 20px;
		padding: 0px 0px 60px 0;

		.news-link {
			display: block;
			text-decoration: none;
			color: inherit;
		}

		.news-item {
			display: flex;
			align-items: flex-start;
			flex-direction: column;
			gap: 5px;
			margin: 30px 0px;
			padding: 20px;
			padding-bottom: 10px;
			transition:
			background 0.6s ease,
			color 0.6s ease,
			box-shadow 0.6s ease;
			position: relative;
			font-weight: 500;
			background: @ivory;
			box-shadow: 3px 3px 0px @blue;
			border: 2px solid @blue;
			color: @blue;
		}


		.live-title-date{
			margin-right: 0.2em;
			font-weight: 500;
		  }

		  .tag {
			width: fit-content;
			letter-spacing: 1px;
			text-align: center;
			font-size: 10px;
			font-weight: 600;
			color: @blue;
			margin-right: 5px;
			padding: 3px 6px;
			background-color: @ivory;
			border: 2px solid @blue;
			position: absolute;
			top: -7px;
			left: 10px;
		}

		  /* ホバー時 */
			.news-link:hover .news-item {
				background: linear-gradient(
				135deg,
				#356C90,
				#4A83A8
				);
				color: @ivory;
				box-shadow: 4px 4px 0px @blue;
			}

		.year{
			font-size: 10px;
			letter-spacing: 2px;
			margin-left: 2px;
			display: block;
		}

		  .news-title{
			font-size: 12px;
			letter-spacing: 1.5px;
			line-height: 1.5;
			margin-bottom: 5px;
		  }

		  .news-more {
			color: @blue;
			background-color: @ivory;
			max-width: 220px;
			margin: 40px auto;
			text-align: center;
			transform: skewX(-30deg);
			transition:
			box-shadow .45s cubic-bezier(.25,.46,.45,.94),
			transform .18s ease-out;
		}

		.news-more a {
			display: inline-block;
			width: 100%;
			color: @blue;
			font-size: 14px;
			letter-spacing: 3px;
			text-decoration: none;
			text-shadow: 1px 1px 2px rgba(153,166,169,0.4);
			display: inline-block;
			width: 100%;
			padding: 11px 10px 10px 10px;
			transform: skewX(30deg);
		}

		.yazirusi {
			display: inline-block;
			position: relative;
			width: 50px;   /* 矢印の長さ */
			height: 8px;
			transform: skewX(30deg);
			transition: transform .4s ease;
		  }

		  /* 横線 */
		  .line01 {
			position: absolute;
			left: 15px;
			top: 50%;
			width: 35px;
			height: 1px;
			background-color: @blue;
			transition: width .4s ease;
		  }

		  /* 先端の斜め線 */
		  .line02 {
			position: absolute;
			right: 0;
			top: 50%;
			width: 12px;
			height: 1px;
			background-color: @blue;
			transform-origin: right center;
			transform: rotate(45deg);
		  }

		  .btn-link:hover .yazirusi {
			transform: translateX(5px);
		  }

		  .news-link:hover .line01 {
			width: 100px;
		  }

		  .news-more:has(.btn-link:hover){
			box-shadow: 6px 6px 0 rgba(255,252,224,.9);
		}

	}

}

.topmovie {
    height: 100%;
    padding: 70px 0 60px 0;
    margin: 0 auto;
    background: linear-gradient(182deg,#98bed357, #fffac86c);
    position: relative;

	 h3 {
		font-size: 1.9rem;
		text-align: center;
		letter-spacing: 0.25em;
		position: absolute;
		top: -4.5%;
		left: 50%;
		transform: translate(-50%);
		overflow: hidden;
		color: @ivory;
		border-bottom: 1px solid @ivory;
		padding-bottom: 5px;
	}

	.frame_wrap {
		object-fit: cover;
		position: relative;
		max-width: 1280px;
		display: block;
		margin: 0 20px;
		overflow: hidden;
		aspect-ratio: 16 / 9;
	  }
	  .frame_wrap .arrow,
	  .frame_wrap .arrow::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 1;
		transform: translate(-50%,-50%);
	  }
	  .frame_wrap .arrow {
		width: 56px;
		height: 56px;
		border-radius: 100%;
		background-color: #fffce0c2;
		pointer-events: none;
	  }
	  .frame_wrap .arrow::before {
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 8px 0 8px 12px;
		border-color: transparent transparent transparent #98bed3ba;
	  }
	  .frame_wrap img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		filter: sepia(0.7);
	  }
	  .frame_wrap iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	  }

	  .frame_wrap .arrow,
	  .frame_wrap img {
		transition: .3s ease;
		}

	  .frame_wrap:hover .arrow {
		transform: translate(-50%,-50%) scale(1.1);
		border: 1px solid @blueD;
		transition: .3s ease;
	  }

	  .frame_wrap:hover img {
		filter: sepia(0);
		transition: .3s ease;
	  }
}

body.video-playing {
	cursor: auto !important;
  }

  body.video-playing .custom-cursor {
	display: none;
  }


div.tickerbox{position:relative; z-index: 10; padding: 60px 0;}
div.tickerbox::after {
    position: absolute;
    z-index: -1;
    content: "";
    width: 92vw;
    height: 40px;
    background-color: @blueD;
    top: 50px;
    left: 0;
    opacity: 0.6;
}
div.ticker{width:90vw; overflow:hidden; white-space:nowrap; padding:0; pointer-events:none; background-color: @blue; line-height: 1.5;
	ul{.inline(); animation:hscrollrev 75s linear infinite; padding: 0 5px;
		li{.inline(); font-size:1.25rem; color:@white; padding:10px 0 9px; letter-spacing: 2px; font-weight: 200; font-style: italic;}
	}
}

div.tickerbox-blue{position:relative; z-index: 10;}
div.tickerbox-blue::after {
    position: absolute;
    z-index: -1;
    content: "";
    width: 92vw;
    height: 40px;
    background-color: #7a9eaf;
    top: -11px;
    right: 0;
    opacity: 0.6;
}
div.ticker-ivory{width:90vw; overflow:hidden; white-space:nowrap; padding:0; pointer-events:none; background-color: @ivory;
	margin: 60px 0 0 auto;
ul{.inline(); animation:hscrollrev-r 75s linear infinite;
li{.inline(); font-size:1.25rem; color:@blue; padding:10px 0 9px; letter-spacing: 2px; font-weight: 200; font-style: italic;}
}
}
/*** BTN ***/
div.morebtn{width:200px; margin:0 auto; font-size:13px;
	a{position:relative; display:block; padding:12px 24px; border-radius:64px; border:1px solid @ivory; background:@blue;
		em{position:absolute; right:9%; top:6.5px; background:@ivory; color:@blue; border-radius:50%; width:24px; height:24px; line-height:24px; display:block; .trans(); .tac();}
	}
	a:link{color:@ivory; .tdn();}
	a:visited{color:@ivory; .tdn();}
	a:hover{color:@blue; background:@ivory; .tdn();
		em{background:@blue; color:@ivory; transform:rotate(360deg);}
	}
	a:active{color:@ivory; .tdn();}
}
div.morebtnR{
	a{border:1px solid @blue; background:@ivory;
		em{background:@blue; color:@ivory;}
	}
	a:link{color:@blue;}
	a:visited{color:@blue;}
	a:hover{color:@ivory; background:@blue;
		em{background:@ivory; color:@blue;}
	}
	a:active{color:@blue;}
}
/*** BN ***/
div.recbn{z-index:8; position:fixed; right:2%; bottom:2%; width:96px; .trans();
	a{z-index:9; position:relative; display:block;
		p{z-index:9!important; position:absolute; display:block; font-size:11px; .tac(); top:50%; left:50%; transform:translate(-50%,-50%); white-space:nowrap; color:@blue;}
	}
	div.bg{animation:rotation 15s linear infinite;
		img{opacity:1!important;}
	}
}
div.recbn:hover{opacity:0.7;}

/*** サブページ***/

// .subpage{
// 	background:
// 	  url("../img/bg/noise.png"),
// 	  linear-gradient(182deg, #bad0dd, @ivory);
// 	  background-size: 200px 200px, 100% 100%;
// 	background-repeat:
// 	  repeat,
// 	  no-repeat;
// 	background-blend-mode: overlay;
// 	-webkit-background-blend-mode: overlay;

/*擬似要素で重ねたグラデーション*/
.subpage {
	position: relative;
	min-height: 100vh;
	background: url("../img/bg/noisew.png") repeat;
	background-size:
	200px 200px, 100% 100%;
	z-index: 0;
  }

  .subpage::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: linear-gradient(182deg, #98bed3, #fffac8);
	opacity: 0.65;
	pointer-events: none;
	z-index: 0;
  }

.subpage{

	.pagetitle {
		color: @ivory;
		font-size: 2rem;
		letter-spacing: 5px;
		padding-top: 140px;
		display: flex;
		align-items: center;
		margin-left: 20px;
		position: relative;
		z-index: 1;

		.ja {
		  display: block;
		  font-size: 12px;
		  letter-spacing: 5px;
		  font-family: "Zen Kaku Gothic New";
		  font-weight: 400;
		}

		&::after {
		  content: "";
		  flex-grow: 1;
		  height: 1px;
		  background-color: @ivory;
		  margin-left: 20px;
		  margin-top: -16px;
		}
	  }

	/* ======================
	   一覧へ戻るボタン
	====================== */
	.pagenation-back {
	  color: @blue;
	  background-color: @blue;
	  max-width: 220px;
	  margin: 40px auto;
	  text-align: center;
	  transform: skewX(-30deg);
	  transition:
		box-shadow .45s cubic-bezier(.25,.46,.45,.94),
		transform .18s ease-out;

	  a {
		display: inline-block;
		width: 100%;
		color: @ivory;
		font-size: 12px;
		font-weight: 500;
		letter-spacing: 3px;
		text-decoration: none;
		padding: 10px;
		transform: skewX(30deg);
	  }

	  .yazirusi {
		display: inline-block;
		position: relative;
		width: 50px;
		height: 8px;
		transition: transform .4s ease;
	  }

	  .line01 {
		position: absolute;
		left: 15px;
		top: 50%;
		width: 35px;
		height: 1px;
		background-color: @ivory;
		transition: width .4s ease;
	  }

	  .line02 {
		position: absolute;
		right: 0;
		top: 50%;
		width: 12px;
		height: 1px;
		background-color: @ivory;
		transform-origin: right center;
		transform: rotate(45deg);
	  }

	  &:has(.btn-link:hover){
		box-shadow: 6px 6px 0 rgba(152,190,211,0.67);
	  }

	/* hoverで矢印を少し動かす */
		.btn-link:hover .yazirusi {
		transform: translateX(5px);
	  }

	}

/* ======================
   OLD / NEW ページネーション
====================== */
.pagenation{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 0 20px;
	font-size: 116%;

	a{
	  text-decoration: none;
	}

	/* 共通ボタンベース */
	.next,
	.prev{
	  font-weight: bold;
	  position: relative;
	  color: @blue;
	  border-bottom: 2px solid @blue;
	  transition: border-color .3s ease;

	  &:hover{
		border-bottom-color: #356c9087;
	  }

	  /* 矢印パーツ共通 */
	  .yazirusi {
		display: inline-block;
		position: absolute;
		top: 50%;
		width: 50px;
		height: 8px;
		transition: transform .35s ease; /* ← 動きはここ */
	  }

	  .line01 {
		position: absolute;
		left: 15px;
		top: 50%;
		width: 35px;
		height: 1px;
		background-color: @blue;
	  }

	  .line02 {
		position: absolute;
		width: 12px;
		height: 1px;
		background-color: @blue;
		top: 50%;
	  }
	}

	/* ======================
	   右ボタン（OLD）
	====================== */
	.next{
	  padding: 8px 60px 10px 0;

	  .yazirusi{
		right: 10px;
		transform: translateY(-50%) skewX(30deg);
	  }

	  .line02{
		right: 0;
		transform-origin: right center;
		transform: rotate(45deg); /* → 向き */
	  }

	  /* ★ hoverで“矢印ごと動く” */
	  &:hover .yazirusi{
		transform: translateY(-50%) skewX(30deg) translateX(6px);
	  }
	}

	/* ======================
	   左ボタン（NEW）
	====================== */
	.prev{
	  padding: 8px 0 10px 60px;

	  .yazirusi{
		left: 10px;
		transform: translateY(-50%) skewX(-30deg);
	  }

	  /* ★ ここで矢印を“逆向き”にする */
	  .line01{
		left: 0;
	  }

	  .line02{
		left: 0;
		transform-origin: left center;
		transform: rotate(-45deg);
	  }

	  /* ★ hoverで矢印ごと左へスライド */
	  &:hover .yazirusi{
		transform: translateY(-50%) skewX(-30deg) translateX(-6px);
	  }
	}
  }



	/*** サブページ NEWS一覧***/
	.news-item{
		display: flex;
		flex-direction: column;
		gap: 6px;

		.news-thumb {
			position: relative;
			width: 100%;
			padding-top: 56.25%; // 16:9 比率
			overflow: hidden;

			// 背景ブラー画像//
			.thumb-bg {
			  position: absolute;
			  top: 0;
			  left: 0;
			  width: 100%;
			  height: 100%;
			  background-size: cover;
			  background-position: center;
			  filter: blur(20px) brightness(0.9);
			  transform: scale(1.2);
			  z-index: 1;
			}

			.thumb-img {
			  position: absolute;
			  top: 50%;
			  left: 50%;
			  max-width: 100%;
			  max-height: 100%;
			  transform: translate(-50%, -50%);
			  object-fit: contain;
			  z-index: 2;
			}
		  }

			.news-title-wrapper{
				display: flex;
				flex-direction: column;
			}

			.news-date {
				width: fit-content;
				background-color: @blueD;
				color: #FFFCE0;
				padding: 4px 10px 4px 10px;
				letter-spacing: 2px;
				border-left: 4px solid #FFFCE0;
				font-weight: 200;
			}

			.news-title{
				font-weight: 500;
				font-size: 13px;
				color: #37485a;
				margin-top: 2px;
				margin-bottom: 0;
				padding-left: 0;
				line-height: 1.5;
			}

		}

		.news-link {
			display: block;
			text-decoration: none;
			color: inherit;
			}


		/*** サブページ NEWS投稿***/
		.newssingle{
			background-color: @ivory;
			padding: 20px;

			.news-title-wrapper{
				width: 100%;
				max-width: 920px;
				margin: 0 auto;

				.news-date{
					border-left: 4px solid @blueD;
					margin-bottom: 14px;
				}

				.news-title{
					border-bottom: 1px solid @blueD;
					padding-bottom: 14px;
				}
			}

			a:link{
				color: @blue;
			}
			a:visited{
				color: @blue;
			}
			a:hover{
				color: @blueD;
			}
		}
		.newssingle.news-item{
			gap: 0;
		}

		/*** サブページ SCHEDULE一覧***/
		.live-list-wrapper{
			width: 100%;
			text-align: left;
			color: @ivory;

			.live-item{
				display: flex;
				background: linear-gradient(180deg, @blueD, #356b8f7a;);
				padding: 10px;
				gap: 20px;
				align-items: center;
				box-shadow: 3px 3px 0px @ivory;

				.live-thumb{
					width: 50%;
					text-align: center;
					aspect-ratio: 16 / 9;
					object-fit: cover;
					overflow: hidden;
					position: relative;

					img:hover{
						opacity: 1;
					}

					img{
						aspect-ratio: 16 / 9;
						object-fit: contain;

					 }
						.thumb-bg {
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
							background-size: cover;
							background-position: center;
							filter: blur(20px) brightness(0.9);
							transform: scale(1.2);
							z-index: 1;
						}
						.thumb-img {
							position: absolute;
							top: 50%;
							left: 50%;
							max-width: 100%;
							max-height: 100%;
							transform: translate(-50%, -50%);
							object-fit: contain;
							z-index: 2;
						}
				}

				.live-title-wrapper{
					width: 50%;
				}

				.live-date{
					font-weight: 200;
					letter-spacing: 2px;
					font-size: 12px;
					border-bottom: 1px dotted #fffce045;
					padding: 10px 0;
				}

				.live-title{
					font-size: 13px;
					margin: 10px 0;
					letter-spacing: 1px;
					line-height: 1.25;
					word-wrap: break-word;
				}

				.live-venue{
					font-size: 12px;
					margin-bottom: 10px;
				}
			}

		}

		/*** サブページ SCHEDULE投稿 ***/
		.livesingle{
			background-color: @ivory;
			padding: 20px;

			::selection{background:@blueD; color:@ivory;}


			.live-title-wrapper{
				border-bottom: 1px solid @blue;
			}

			.live-date-wrpper{
				display: flex;
				gap: 10px;
				letter-spacing: 2px;
			}
			.live-title{
				margin: 14px 0;
				font-size: 14px;
				font-weight: 500;
				line-height: 1.5;
			}

			a:link{
				color: @blue;
			}

			a:hover{
				color: @blueD;
			}
		}

	}

	/*** サブページ ディスコグラフィー ***/
	.discography{
		.article_title{
			border-bottom: 1px solid @blue;
			border-top: 1px solid @blue;
			padding: 10px 0;
		}

		.discimg img{
			box-shadow:
			  6px 6px 1px @ivory;
			}

		a:link{
			color: @blue;
		}

		a:hover{
			color: @blueD;
		}
	}


	/*** サブページ プロフィール ***/
	.profile{
		.article_title{
			border-bottom: 1px solid @blue;
			border-top: 1px solid @blue;
			padding: 10px 0;
		}

		p{
			letter-spacing: 1.5px;
		}
		a:link{
			color: @blue;
		}
		a:visited{
			color: @blue;
		}
		a:hover{
			color: @blueD;
		}

		.postbody h3{
			margin-bottom: 0;
			margin-top: 5%;
		}

		.profslider {
			width: 100%;
			aspect-ratio: 9 / 16 ;
			margin: 15% auto 0 auto;
			position: relative;
			background: @ivory;
		}

		.profslider::before {
			content: "";
			top: -2.5%;
			left: 50%;
			transform: translateX(-50%);
			position: absolute;
			width: 50%;
			height: 6%;
			background: url("../img/bg/textured-paper.png"), #be7dcbeb;
			background-blend-mode: overlay;
			-webkit-background-blend-mode: overlay;
			background-size: 200px 200px, 100% 100%;
			transform: skewX(-20deg) translateX(-50%);
			z-index: 100;
		}

		.profslider::after {
			content: "";
			width: 12%;
			height: 9%;
			z-index: 1000000;
			position: absolute;
			bottom: 1%;
			right: 9%;
			background-image: url(../img/cat2.png);
			background-size: 100%;
			background-repeat: no-repeat;
			z-index: 100;
		}

		.profslider img{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			opacity: 0;
			transition: opacity 2.5s ease;
			object-position: center center;
			padding: 14px 10px 20%;
		}

		.profslider img.active{
			opacity: 1;
		}

		.photo-overlay{
			position: absolute;
			inset: 0;
			background:
			radial-gradient(rgb(255 242 123 / 25%), rgb(82 186 255 / 25%));
			opacity: 0;
			pointer-events: none;
			transition: opacity .9s ease-in-out;
			z-index: 2;
			margin: 14px 10px 20%;
		}

		.profslider.is-switching .photo-overlay{
			opacity: 1;
		}


	}

	/*** サブページ お問い合わせ ***/

	.contact{
		.contact-contaier{
			background-color: @ivory;
			padding: 20px;
		}
		table tr th {
			padding: 10px 0 0 0;
			width: 100%;
			display: block;
			font-weight: bold;
		}
		span.required {
			background: @blueD;
			color: @ivory;
			font-size: 85%;
			padding: 5px 10px;
			font-weight: bold;
		}

		.mailform{
			margin: 20px 0;
		}
	}




/*PAGE TTL*/
div.pagettl{position:relative; z-index:1; padding:45px 6%; margin:50px auto 6%; background:@ivory;
	h2{position:relative; z-index:2; color:@blue; font-size:200%;}
}

/*PAGE*/
div.pagebody{margin:40px auto; max-width: 1280px; padding: 0 20px;
	article{position:relative; margin:0 auto 9%;
		h3{font-size:20px; letter-spacing:2px; margin-bottom:6%;
		}
		div.postbody{/*padding:6%;*/ word-wrap:break-word; line-height:1.9; margin: 16px 0;
			h4{font-size:16px; line-height:1.5; padding:0 0 1%; margin-bottom:5%; border-bottom:1px solid @ivory;}
			img{margin-bottom:6%;}
			img.width50{max-width:50%; height:auto;}
			.aligncenter{margin:0 auto; display:block;}
			.size-thumbnail{width:160px; height:auto;}
			p{margin-bottom:6%;}
			p > img{margin-bottom:0;}
			p:last-child{margin-bottom:0;}
			div.morebtn{line-height:1!important; margin:0 0 6%;}
			ul.flow{
				li{margin:0 0 25px; padding:20px 16px; position:relative; background:@ivory;
					display:flex;
					flex-flow:row nowrap;
					justify-content:center;
					align-items:center;
					div.tag{background:@blue; border-radius:50%; font-size:9px; color:@white; width:56px; height:56px; padding:10px 0 0; .tac(); line-height:1!important;
						span{font-size:26px; display:block; color:@white; padding:3px 0 0; .fb();}
					}
					section{width:calc(~'100% - 63px'); margin-left:20px; line-height:1.7; position:relative;
						h4{color:@blue; font-size:16px; letter-spacing:1px; padding:0; margin:0 0 5px;}
						p{font-size:12px; color:@blue;}
					}
				}
				li:last-child{margin:0;}
				li:after{content:""; width:8px; background:@white; height:25px; position:absolute; bottom:-25px; left:calc(~'50% - 4px');}
				li:last-child:after{display:none;}
			}
		}
	}
}
div.pgentry{margin-top:-6%;}

/*TABLE*/
table{width:100%; margin-bottom:6%;
	tr{width:100%;
		th{border:1px solid @ivory; padding:10px; text-align:left; white-space:nowrap;
			p{margin-bottom:0;}
		}
		td{border:1px solid @ivory; padding:10px;
			p{margin-bottom:0;}
			span{display:block; font-size:11px;}
			em.attention{border-bottom:1px solid @ivory; color:@white;}
		}
	}
}

/*CONTACT*/
table.mailform{width:100%;
	tr{width:100%; margin-bottom: 10px;
		th{padding:12px 0; width:100%; display:block;}
		td{padding:0; width:100%; display:block; border:none; background:@ivory;}
	}
	textarea{width:100%; padding:12px; font-size:16px; margin:0!important; margin-bottom:-8px!important; resize:vertical; background:#d5e2dc; border:none; border-radius: 0;}
	input{width:100%; padding:12px; font-size:16px;  border:none; background:#d5e2dc; font-family: "Zen Kaku Gothic New"; border-radius: 0;}
}
input[type="radio"]{width:auto!important; vertical-align:baseline; .inline();}
input[type="checkbox"]{width:auto!important; vertical-align:baseline; .inline();}
input[type="submit"],button{-webkit-appearance:button; cursor:pointer; outline:none;}
input.soushin{position:relative; width:100%; font-size:13px; border:none; .inline(); .tac(); .tdn(); .trans(); padding:15px 0; font-weight: bold; letter-spacing: 5px;
border-radius:0px; background-color:none; color:@ivory; -webkit-transition:none; transition:none; cursor:pointer; background:url("../img/bg/textured-paper.png"), #71a5c2; background-blend-mode: overlay; -webkit-background-blend-mode: overlay;
box-shadow: 0 0 0 rgba(44,88,117,0); transition: box-shadow .35s ease,background-color .35s ease,color .35s ease;}
input.soushin:hover{background-color:@blueD; color:@blue; box-shadow: 4px 4px 0px @blueD;}
input.soushin:active{background-color:@ivory;}
img.ajax-loader{float:left; width:auto!important;}
.mwform-checkbox-field label, .mwform-radio-field label{
	display: flex;
	align-items: center;
}
.mwform-tel-field {
	display: flex;
	gap: 8px;
	justify-content: flex-start;
	align-items: center;
  }

  .mwform-tel-field input.tel {
	flex: 0 0 auto;
	padding: 8px;
	font-size: 16px;
	text-align: center;
  }

  .mwform-tel-field input.tel:first-child {
	width: 60px;
  }
  .mwform-tel-field input.tel:nth-child(2) {
	width: 60px;
  }
  .mwform-tel-field input.tel:last-child {
	width: 60px;
  }

/*FOOTER*/
footer{position:relative; z-index:10; padding:50px 6%; background:@blueD;
	ul.snsnav{max-width:440px; margin:0 auto 40px;
		display:flex;
		flex-flow:row nowrap;
		justify-content:space-between;
		align-items:center;
		li{margin-right:12px;
			a{font-size:11px; display:flex; align-items:center; .tdn();
				span{padding-left:4px;}
			}
			a:hover{
				img{filter:grayscale(1) brightness(0); opacity:1;}
			}
		}
		li:first-child{
			img{width:70px;}
		}
		li:nth-child(2){
			img{width:22px;}
		}
		li:nth-child(3){
			img{width:22px;}
		}
		li:nth-child(4){
			img{width:27px;}
		}
		li:last-child{margin:0;
			img{width:32px;}
		}
	}
	div.footbody{
		display:flex;
		flex-flow:row nowrap;
		justify-content:space-between;
		align-items:stretch;
		section{
			display:flex;
			justify-content:space-between;
			flex-direction:column;
		}
		div.icon{width:120px; margin:0 0 20px;}
		nav{
			ul:first-child{font-size:12px; .tar();
				li{margin:0 0 15px;}
				li:last-child{margin:0;}
			}
		}
	}
	small{position:relative; display:block; color:@ivory; font-size:9px;}
}


/*NOISE*/
div.noisewrap{z-index:1; position:absolute; display:block; overflow:hidden; top:0; left:0; width:100%; height:100%;}
div.noisebg{width:100%; height:100%; opacity:0.3;}
div.noisebg::before{content:''; position:absolute; display:block; top:-50%; left:-50%; width:200%; height:200%;
	background-image:url("../img/bg/noise.png"); will-change:transform; animation:noiseBGS 1s steps(4) infinite;}
div.whver::before{background-image:url("../img/bg/noisew.png");}

/****************************************************/
/************************ PC ************************/
/****************************************************/
@media(min-width:769px){
html,body{min-width:1180px; cursor: none;}
.sp{display:none!important;}

a, button{
	cursor: none;
  }

  input.soushin {
	cursor: none;
  }


.custom-cursor{
	position: fixed;
	width: 48px;
	height: 48px;
	border: 1.5px solid #7fa6c0;
	background: rgba(245,249,252,.55);
	border-radius: 52% 48% 55% 45% / 50% 55% 45% 50%;
	pointer-events: none;
	transform: translate(-50%, -50%);
	transition:
	  width .35s ease,
	  height .35s ease,
	  background .35s ease;
	z-index: 9999;
	animation: liquid 2.2s ease-in-out infinite;
	filter: drop-shadow(0 0 3px rgba(127,166,192,.25));

}

.custom-cursor.hover{
	width: 60px;
	height: 60px;
	border: 1.5px solid @ivory;
	background: rgba(127,166,192,.09);
  }

  .custom-cursor::after{
	content: "";
	background: #7aa1bb;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: all .25s ease;
  }
  .custom-cursor.hover::after{
	opacity: 1;
	transform: translate(-50%,-50%) scale(1);
  }

  .custom-cursor.view::after{
	content: "VIEW";
	background: none;
	width: auto;
	padding: 4px 8px;
	font-size: 12px;
	color: @ivory;
	font-weight: bold;
	border-radius: 999px;
  }

  .custom-cursor.is-text {
	width: 65px;
	height: 65px;
	background: #2a218a3f;
	background: rgba(127,166,192,.075);

  }


/*LOADING*/
div#splash{
	div.loading{
		img{width:240px;}
	}
}

/*HEADER*/

header{padding:0 2%; min-width:1120px;
	align-items:flex-start;
	background: #98bed3;
	transition: background-color .35s ease, backdrop-filter .35s ease;
	h1{width:90px; 	margin: 24px 2%;
		transition: .35s ease}
	.logo-sp {
			display: none;
	}
	.logo-pc{
		display: block;
	}
	section{padding:18px 0 18px;
		display:flex;
		justify-content:flex-end;
		align-items:flex-end;
		flex-direction:column;
	}
	nav{
		padding: 18px 18px 18px 0px;
		position: relative;
		ul{
			display:flex;
			flex-flow:row nowrap;
			justify-content:flex-end;
			align-items:flex-end;
			li{margin:0 0 0 2em;
				a{font-size:16px;}
				a:link{color:@ivory; .tdn();}
				a:visited{color:@ivory; .tdn();}
				a:hover{color:@black; .tdn();}
				a:active{color:@ivory; .tdn();}
			}
		}

	}
	.snsnav
	{max-width:440px; margin: 16px 0 0 auto;
		display:flex;
		flex-flow:row nowrap;
		justify-content:end;
		align-items:center;
		li{margin:0 20px 0 0px;
			a{font-size:11px; display:flex; align-items:center; .tdn();
				span{padding-left:4px;}
			}
			a:hover{
				img{filter:grayscale(1) brightness(0); opacity:1;}
			}
		}
		li:first-child{
			img{width:50px;}
		}
		li:nth-child(2){
			img{width:18px;}
		}
		li:nth-child(3){
			img{width:18px;}
		}
		li:nth-child(4){
			img{width:20px;}
		}
		li:last-child{margin:0;
			img{width:23px;}
		}
	}

}

.scroll {
	right: 5%;
	bottom: 10%;
  }


/*HEADERscrolle*/
header.scrolled {
	background: rgb(135 135 135 / 31%);
	backdrop-filter: blur(10px);
  }

  h1.scrolled {
	opacity: 1;
	visibility: visible;
  }

/*TEASER*/
div#teaser{min-width:1120px; /*height:calc(~'100vh - 80px'); /*margin-top:80px;*/
	div.teasertxt{
		h2{font-size:52px; letter-spacing:2px;
			span{padding:8px;}
		}
		h2:first-child{margin:0 0 15px;}
		.blend{
			mix-blend-mode: overlay;
		}

	}
	div.teaserimg{/*height:calc(~'100vh - 80px');*/ height: 100vh;}
	.teaserimg img{
		height: 100%;
		object-fit: cover;
	}

	.scroll {
		right: 5%;
		bottom: 12%;
	  }
	  .scroll::before {
		bottom: -260px;
		height: 240px;
	}
	.scroll::after {
		bottom: -260px;
		height: 240px;
	}
	.scroll span{
		letter-spacing: 2px;
	  }

}
/*** TOP ***/
div.topbox{
	article{padding:120px 180px;
		h3{font-size:36px; margin:0 0 45px;}
		p{font-size:16px; letter-spacing:1px; line-height:2.2; margin:0 0 45px;}
	}
}
div.topabout{
	margin-bottom: 140px; padding-top: 40px;
	div.theta{width:28%; opacity:0.4;}
	div.t01{left:2%;}
	div.t02{right:2%;}
	h3 {
    font-family: "Noto Serif Display", serif;
    line-height: 1.5;
    font-size: 4rem;
    color: #98bed3;
    width: fit-content;
    margin: 3% auto 3% auto;
    letter-spacing: 0.3em;
}
	.tickerbox{
		margin-bottom: 70px;
		margin-bottom: 0;
	}

	.profile {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 60px;
		margin: 0 8%;
	}
	.photo-fade {
		width: 60%;
	}
	.photo-fade::before {
		width: 80px;
		height: 1px;
		top: -28px;
		left: -47px;
	}
	.photo-fade::after {
		width: 80px;
		height: 1px;
		top: -3px;
		left: -70px;
	}
	.photo-fade img{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0;
		transition: opacity 1.5s ease;
	}

	.photo-fade-kasen::before {
		width: 80px;
		height: 1px;
		top: 32px;
		right: -47px;
	}

	.photo-fade-kasen::after {
		width: 80px;
		height: 1px;
		top: 3px;
		right: -70px;
	}

	.artist-introduction{
		display: flex;
		flex-direction: column;
		width: 40%;
		gap: 0px;
	}

	.artist-name {
		width: 50%;
	}

	.artist-name img {
		width: 100%;
		padding: 0px 17px;
	}
	.artist-name-small {
		font-size: 1rem;
	}

	.artist-text{
		font-size: 0.875rem;
		line-height: 1.85;
		padding: 48px 24px;
	}

}

div.topnews{
	padding-bottom: 70px;

	h3{
		font-size: 4rem;
		margin: 3% auto 3% auto;
	}

	.news-content{
		margin: 60px auto;
		max-width: 1280px;
		.news-more{
			margin:  24px 0 24px auto;
		}

		.news-item {
			flex-direction: column;
			align-items: flex-start;
			padding: 35px 40px 29px 40px;
			box-shadow: 4px 4px 0px @blue;
			position: relative;
		}


		  /* ホバー時 */
		  .news-link:hover .news-item {
			box-shadow: 5.5px 5.5px 0px @blue;
	}


		.live-title-date{
			margin-right: 0.6em;
		  }

		  .tag {
			text-align: center;
			font-size: 1.25rem;
			margin-right: 5px;
			padding: 4px 6px;
			border: 2px solid @blue;
			top: -10px;
			left: -20px;
		}

		  .year{
			font-size: 0.875rem;
			letter-spacing: 2px;
		  }

		.news-title{
			font-size: 1rem;
			margin-bottom: 0;
			letter-spacing: 2px;
		}

	}

}

.topmovie{
	padding: 130px 0 100px 0;

	h3 {
		font-size: 5rem;
		top: -4.5%;
		left: 50%;
		letter-spacing: 0.25em;
	}

	.frame_wrap {
		margin: 0 auto;
	  }
}

/*** TICKER ***/

div.tickerbox::after{
	width: 92vw;
	height: 80px;
}

div.tickerbox-blue::after {
    width: 92vw;
    height: 80px;
}

div.ticker{
	ul{
		li{font-size:40px; padding:20px 0 17px;}
	}
}
div.ticker-ivory{
	ul{
		li{font-size:40px; padding:20px 0 17px;}
	}
}
/*** BTN ***/
div.morebtn{width:260px; font-size:15px;
	a{padding:16px 24px;
		em{top:11.5px;}
	}
}
/*** BN ***/
div.recbn{width:152px;
	a{
		p{font-size:16px; letter-spacing:1px;}
	}
	div.bg{animation:rotation 18s linear infinite;}
}

/*** サブページ ***/

.subpage{
	.pagetitle {
		margin: 0 0 0 8%;
		font-size: 5rem;
		padding-top: 214px;

		&::after {
			margin-top: -14px;
		  }

		  .ja {
			font-size: 1rem;
		  }
	}

	main{
		max-width: 1280px;
		margin: 0 auto;
	  }

	/* ======================
	   一覧へ戻るボタン
	====================== */
	.pagenation-back {
		margin: 0px auto 90px auto;
		a {
		  font-size: 14px;
		}
	}

	/* ======================
   		OLD / NEW ページネーション
	====================== */
	.pagenation{
		padding: 0 0 60px;

	}

	/*** サブページ news ***/
	.news-link {
		display: block;
		text-decoration: none;
		color: inherit;
		transition: all 0.3s ease;

		&:hover {
		transform: translateY(-4px);

		.news-thumb {
			border: 1px solid @blueD;
		}
		}
	}

	  .newslist{
			display: flex;
			gap: 20px;
			align-items: flex-start;
			justify-content: center;

			.news-list-wrapper{
				flex: 0 0 calc((100% - 40px) / 3);

				.news-item{
					gap: 6px;
				}
				.news-date{
					padding: 6px 10px 6px 10px;
				}
				.news-title{
					font-size: 14px;
					margin-top: 3px;
				}

			}
		}


		/*** サブページ NEWS投稿***/
		.newssingle{
			background-color: @ivory;
			padding: 6%;

			::selection{background:@blueD; color:@ivory;}

			.news-title-wrapper{
				flex-direction: row;
				border-bottom: 1px solid @blueD;
				gap: 16px;
				align-items: center;
				justify-content: flex-start;
				margin-bottom: 3%;

				.news-date{
					border-left: 4px solid @blueD;
					font-size: 1rem;
					margin-bottom: 0;
				}

				.news-title{
					border-bottom: 0px;
					padding-bottom: 0px;
					margin: 11px 0 14px 0px;
					padding-left: 0px;
					font-size: 1.5rem;
				}
			}
		}
		.newssingle.news-item{
			gap: 0;
		}


		/*** サブページ SCHEDULE一覧***/
		.livelist{
			display: flex;
			gap: 40px;
		}

		.live-list-wrapper{
			color: @ivory;
			flex: 0 0 calc((100% - 40px) / 2);


			.live-item{
				flex-direction: column;
				padding: 10px;
				gap: 10px;
				align-items: center;
				padding-bottom: 10px;
				box-shadow: 6px 6px 0px @ivory;

				.live-thumb {
					width: 100%;
					text-align: center;
					transition: opacity 0.35s ease;
				}

				.live-title-wrapper{
					width: 100%;
					text-align: center;
				}

				.live-date{
					letter-spacing: 2px;
					font-size: 14px;
					padding: 0 0 10px 0;
				}

				.live-title{
					font-size: 14px;
					margin: 10px 0;
					letter-spacing: 2px;
					line-height: 1.25;
					word-wrap: break-word;
					padding-left: 0;
				}

				.live-venue{
					font-size: 12px;
					margin-bottom: 10px;
				}
			}

			.news-link {
				display: block;
				text-decoration: none;
				color: inherit;
				transition: transform 0.35s ease;

				.live-thumb {
				  position: relative;
				  overflow: hidden;

				  &::before {
					content: "";
					position: absolute;
					inset: 0;
					background: linear-gradient(
					  to top,
					  #fff9c243,
					  rgba(104, 181, 232, 0.221)
					);
					opacity: 0;
					transition: opacity 0.25s ease;
					z-index: 100;
					pointer-events: none;
				  }
				}

				&:hover {
				  transform: translateY(-4px);

				  .live-thumb {
					filter: brightness(0.95);   /* ほんのり暗く */

					&::before {
					  opacity: 1;               /* グラデを表示 */
					}
				  }
				}
			  }

		}

		/*** サブページ SCHEDULE投稿 ***/
		.livesingle{
			padding: 6%;

			.live-title-wrapper{
				border-bottom: 1px solid @blue;
				max-width: 920px;
				width: 100%;
				max-width: 920px;
				margin: 0 auto 3% auto;
				}

			.live-date-wrpper{
				display: flex;
				gap: 10px;
				letter-spacing: 2px;
			}
			.live-title{
				margin: 5px 0 14px 0;
				font-size: 24px;
				line-height: 1.5;
				padding-left: 0px;
			}

			.live-date{
				font-size: 16px;
			}

			.live-venue{
				font-size: 16px;
			}

			a:link{
				color: @blue;
			}

			a:visited{
				color: @blue;
			}

			a:hover{
				color: @blueD;
			}

		}

}

	/*** サブページ ディスコグラフィー ***/
	.discography{
		.article_title{
			padding: 20px 0;
		}

		a:link{
			color: @blue;
		}

		a:visited{
			color: @blue;
		}

		a:hover{
			color: @blueD;
		}

		.discorraphy-flex{
			display: flex;
			gap: 60px;
		}

		.discorraphy-flex div{
			width: 50%;
		}

		.discimg img{
			box-shadow:
			  10px 10px 1px @ivory;

			}
	}

		/*** サブページ プロフィール ***/
		.profile{

			.row{
				display: flex;
				gap: 60px;
			}

			.article_title{
				border-bottom: 1px solid @blue;
				border-top: 1px solid @blue;
				padding: 10px 0;
			}

			.postbody h3{
				margin-bottom: 0;
				margin-top: 5%;
				padding-left: 0;
			}

			.profslider::after {
				width: 14%;
				height: 10%;
				bottom: 6px;
				right: 11%;
			}

			.profslider::before {
				top: -3%;
			}

			.leftbox{
				position: relative;
				left: 0;
				width: 60%;
			}

		}

			/*** サブページ お問い合わせ ***/

	.contact{
		.contact-contaier{
			background-color: @ivory;
			padding: 6%;
		}

		.mailform{
			margin: 6% 0;
		}
	}

/*PAGE TTL*/
div.pagettl{padding:90px 6%; margin:80px auto 60px;
	h2{font-size:380%;}
}

/*PAGE*/
div.pagebody{
	article{margin:0 auto 90px;
		h3{font-size:30px; padding-left:40px;}
		div.postbody{ width:100%; max-width:920px; margin:0 auto 16px auto; line-height:2.1;
			h4{font-size:22px; letter-spacing:1px; padding:0 0 10px; margin-bottom:24px;}
			img{margin-bottom:24px;}
			img.alignleft + br{display:none;}
			img.alignright + br{display:none;}
			img.width50{max-width:50%; height:auto;}
			.size-thumbnail{width:320px; height:auto;}
			.size-medium{width:320px; height:auto;}
			.size-large{width:600px; height:auto;}
			.aligncenter{clear:both; display:block; overflow:hidden; margin: 0 auto 24px;}
			.alignleft{float:left; margin:0 24px 24px 0; .inline();}
			.alignright{float:right; margin:0 0 24px 24px; .inline();}
			p{font-size:16px; letter-spacing:1px; margin-bottom:24px;}
			p > img{margin-bottom:0;}
			ul.flow{
				li{padding:24px 36px;
					div.tag{font-size:13px; width:72px; height:72px; padding:12px 0 0;
						span{font-size:36px;}
					}
					section{width:calc(~'100% - 112px'); margin-left:40px; line-height:2;
						h4{font-size:20px; letter-spacing:1px;}
						p{font-size:14px;}
					}
				}
			}
		}
	}
}

/*TABLE*/
table{font-size:16px; margin-bottom:20px;
	tr{
		th{padding:16px; letter-spacing:1px; .tar();}
		td{padding:16px;
			span{font-size:12px;}
		}
	}
}

/*CONTACT*/
table.mailform{border:1px solid @ivory; border-top:none;
	tr{border-top:1px solid @ivory;
		th{padding:16px; width:auto; display:table-cell; border:none; vertical-align:middle; .tar(); text-align: left;}
		td{padding:16px; width:auto; display:table-cell; border:none; background:none; vertical-align:middle;}
	}
	textarea{padding:12px; margin-bottom:-8px!important;}
	input{padding:12px;}
}
input.soushin{width:60%; margin:0 auto; display:block; font-size:16px; padding:18px 0; }

/*FOOTER*/
footer{padding:75px 6%;
	div.footbody{
		div.icon{width:190px;}
		nav{
			ul{font-size:14px;
				li{margin:0 0 15px;}
			}
		}
	}
	small{font-size:14px;font-weight: 400;}
}

/*NOISE*/
div.noisebg{opacity:0.4;}

}
/************************ SP ************************/
@media (max-width:768px)
{
	.pc{display:none!important;}
	.spmb{margin-bottom:6%;}
}
/************************ ANIM ************************/
@keyframes blurIn{
	  0%{opacity:0; filter:blur(20px);}
	100%{opacity:1; filter:blur(0px);}
}
@keyframes splashOut{
	  0%{opacity:1; filter:blur(0px); top:0%;}
	 99%{opacity:0.1; filter:blur(10px); top:0%;}
	100%{opacity:0; filter:blur(10px); top:-200%;}
}
@keyframes txtbg{
	  0%{opacity:0; width:0%;}
	  1%{opacity:1; width:0%;}
	100%{opacity:1; width:100%;}
}
@keyframes txtin{
	  0%{opacity:0; filter:blur(5px);}
	100%{opacity:1; filter:blur(0px);}
}
@keyframes rotation{
	  0%{transform:rotate(360deg);}
	100%{transform:rotate(0);}
}
@keyframes noiseBGS{
	  0%{transform:translate(0);}
	 10%{transform:translate(-5%,-5%);}
	 20%{transform:translate(-10%,5%);}
	 30%{transform:translate(5%,-10%);}
	 40%{transform:translate(-5%,15%);}
	 50%{transform:translate(-10%,5%);}
	 60%{transform:translate(15%);}
	 70%{transform:translateY(10%);}
	 80%{transform:translate(-15%);}
	 90%{transform:translate(10%,5%);}
	100%{transform:translate(5%);}
}
@keyframes hscroll{
	to{transform:translateX(-50%);}
}
@keyframes hscrollrev{
	0%{transform:translateX(-100%);}
	100%{transform:translateX(1%);}
}

@keyframes hscrollrev-r{
	0%{transform:translateX(1%);}
	100%{transform:translateX(-100%);}
}

@keyframes liquid{
	0%{
	  border-radius: 52% 48% 55% 45% / 50% 55% 45% 50%;
	  transform: translate(-50%,-50%) scale(1);
	}
	30%{
	  border-radius: 60% 40% 58% 42% / 55% 45% 60% 40%;
	  transform: translate(-50%,-50%) scale(1.02);
	}
	60%{
	  border-radius: 42% 58% 45% 55% / 40% 60% 45% 55%;
	  transform: translate(-50%,-50%) scale(0.98);
	}
	100%{
	  border-radius: 52% 48% 55% 45% / 50% 55% 45% 50%;
	  transform: translate(-50%,-50%) scale(1);
	}
  }
/************************ LEFT ANIM ************************/
.slide-in {
	overflow:hidden;
	display:inline-block;
}
.slide-in_inner {
	display:inline-block;
}
.leftAnime,
.rightAnime{
	opacity:0;
}
.slideAnimeLeftRight {
	animation-name:slideText-100;
	animation-duration:0.5s;
	animation-delay:0.3s;
	animation-fill-mode:forwards;
	opacity:0;
}
@keyframes slideText-100 {
  from {
	transform: translateX(-100%);
        opacity: 0;
  }
  to {
	transform: translateX(0);
    opacity: 1;
  }
}

.slideAnimeRightLeft {
	animation-name: slideText100;
	animation-duration:0.5s;
	animation-delay:0.3s;
	animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes slideText100 {
  from {
	transform: translateX(100%);
    opacity: 0;
  }
  to {
	transform: translateX(0);
    opacity: 1;
  }
}
/************************ SP NAV ************************/
button.spmenu{z-index:9991; position:fixed; height:48px; width:48px; padding:0 10px; top:10px; right:3px; background:transparent; border:none; border-radius: 50%; cursor:pointer; outline:none; appearance:none; overflow: visible;
	transition: top .35s ease, background .35s ease,backdrop-filter .35s ease;
	  	div{z-index:9992; position:relative; height: 5px;
		span{z-index:9993; position:absolute; left:0; width:100%; height: 2px; border-radius: 2px; background:@blueD; .inline(); .trans();}
		span:nth-of-type(1){top:-8px;}
		span:nth-of-type(2){top:1px;}
		span:nth-of-type(3){bottom:-8px;}


	}
}
  /* ===== home.php以外 ===== */
  body:not(.home):not(.front-page) {
	button.spmenu div span {
	  background:#FFFCE0;
	}
  }

button.spmenu.scrolled {
	top: 5px;
	background: rgb(135 135 135 / 31%);
	backdrop-filter: blur(10px);
  }

  button.spmenu.scrolled span{
	background: rgba(255,252,224,0.85);
  }

button.spmenu.active{background:@blueD; box-shadow: none; top: 5px;
	div{
		span{background:@ivory;}
		span:nth-of-type(1){-webkit-transform:translateY(10px) rotate(45deg); transform:translateY(10px) rotate(45deg);}
		span:nth-of-type(2){  opacity: 0;}
		span:nth-of-type(3){-webkit-transform:translateY(-9px) rotate(-45deg); transform:translateY(-9px) rotate(-45deg);}

	}
}
div#spnav{z-index:-1; position:fixed; top:0; right:0; width:100%; height:100vh; opacity:0; visibility:hidden; background:rgba(255,252,224,0.85); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); .trans();
	overflow-y:auto; -webkit-overflow-scrolling:touch; padding:6%;
	nav{position:relative; z-index:9993;}
	ul{
		li{
			a{display:block;}
			a:link{color:@blueD; .tdn();}
			a:visited{color:@blueD; .tdn();}
			a:hover{color:@blueD; .tdn();}
			a:active{color:@blueD; .tdn();}
		}
	}
	ul.mainnav{padding:48px 0 36px;
		li{font-size:30px; text-align:right;
			a{padding:16px 0;}
		}
	}
	.snsnav{
		display:flex;
		flex-flow:row nowrap;
		justify-content:end;
		align-items:center;
		li{margin:0 24px 0 0px;
			a{font-size:11px; display:flex; align-items:center; .tdn();
				span{padding-left:4px;}
			}
		}
		li:first-child{
			img{width:50px;}
		}
		li:nth-child(2){
			img{width:18px;}
		}
		li:nth-child(3){
			img{width:18px;}
		}
		li:nth-child(4){
			img{width:20px;}
		}
		li:last-child{margin:0;
			img{width:23px;}
		}

	}
}
div#spnav.active{z-index:9990; opacity:1; -moz-transform:translateX(0); -webkit-transform:translateX(0); transform:translateX(0); visibility:visible;}
/************************ VIDEO ************************/
div.video_box{position:relative; overflow:hidden; padding-bottom:56.25%; padding-top:0; height:0;}
div.video_box iframe,div.video_box object,div.video_box embed{position:absolute; top:0; left:0; width:100%; height:100%}
/*-----------------------------------------------------
10px = 77%     11px = 85%     12px = 93%     13px = 100%
14px = 108%    15px = 116%    16px = 123.1%  17px = 131%
18px = 138.5%  19px = 146.5%  20px = 153.9%  21px = 161.6%
22px = 167%    23px = 174%    24px = 182%    25px = 189%
26px = 197%
------------------------------------------------------*/