@charset "utf-8";
/*------------------------------------------------------------------------------------onload.css*/
/*
onloadのタイミングで以下の処理を行うように定義する
・ページ下方の背景画像の先読み込み
・font-faceの後読み込み
・他
*/
/*========================================フォント*/
@font-face {
    font-family: 'Yomogi';
		font-display: swap;
    src: url('/assets/fonts/Yomogi/Yomogi-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Gabriela';
		font-display: swap;
    src: url('/assets/fonts/Gabriela/Gabriela-Regular.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
  font-family: "BravuraText";
	font-display: swap;
  src: url('/assets/fonts/BravuraText.woff') format('woff');
	unicode-range:U+E030,U+E050,U+E084,U+E1D2-E1D5,U+E1E7,U+E262;
}
.fontMusic {
  font-family: "BravuraText";
}
/*========================================背景*/
html:after {
	content:"";
	background-image:url('../images/rocked/lime0.png'),
url('../images/rocked/lime_cut.png'),
url('../images/rocked/orange0.png'),
url('../images/rocked/grapefruit0.png');
}

/*========================================他*/
/*
:root {
  --innerNavHeight:100px;
  --innerNavHeightTop:70px;
}
.innerNav a:link,
.innerNav a:visited,
.innerNav a:hover,
.innerNav a:active,
.innerNav a:not([href]):not([class]),
.innerNav a:not([href]):not([class]):hover {
  color:#333333;
}

.innerNav {
  position:fixed;
  z-index:9950;
  bottom:-1em;
  right:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
	width:160px;
  padding-bottom:2em;
	background:rgba(255,255,255,0.7);
	backdrop-filter: blur(6px);
  border-radius:2px 2px 0 0;
  max-height:100vh;
  overflow:auto;

  transform:translate(0,var(--innerNavHeight));
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
.innerNav a{
  position:relative;
  display:inline-flex;
  width:100%;
  padding:1em;
  overflow:hidden;

  color:#333333;
  font-size:.8rem;
  cursor: pointer;
}
.innerNav a:hover{
  background:rgba(255,255,255,1)
}

.innerNav button.toTop {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:32%;
  height:32px;
	padding-top:0.2em;
	background:none;
	border:0;
}
.innerNav button.toTop img{
  width:12px;
  height:12px;
  margin-right:1em;
  margin-left:.5em;
}
.innerNav button.toTop:hover {
  background:rgba(255,255,255,.95);
  transition:all 0.8s ease;
}

.innerNav button.toBottom {
  display:flex;
  align-items:center;
  justify-content:center;
  width:32%;
  height:32px;
	background:none;
	border:0;
	text-align:left;
}
.innerNav button.toBottom img{
  width:12px;
  height:12px;
	margin:0;
}
.innerNav button.toBottom:hover {
  background:rgba(255,255,255,.95);
  transition:all 0.8s ease;
}

.innerNav a.children {
  padding-top:.5em;
  padding-left:1.8em;
  padding-bottom:.5em;
}
.innerNav a.children::before {
  position:absolute;
  content:'├';
  bottom:50%;
  transform:translate(0,25%);
  left:.3em;
}

.appearUp {
  animation: animeAppearUp 0.4s ease forwards;
}
.disappearDown {
  animation: animeDisappearDown 0.4s ease forwards;
}
@keyframes animeAppearUp {
  0% {
transform:translate(0,var(--innerNavHeight));
  }
  96% {
transform:translate(0,-4px);
  }
  100% {
transform:translate(0,0);
  }
}
@keyframes animeDisappearDown {
  0% {
transform:translate(0,0);
  }
  96% {
transform:translate(0,var(--innerNavHeightTop));
  }
  100% {
transform:translate(0,var(--innerNavHeight));
  }
}

button.toggleButton{
  position: relative;
	z-index:9999;
  width: 48px;
  height:32px;
  padding-left:16px;
	background:none;
  background: var(--background_nav);
	border:0;
  margin-bottom:10px;
  cursor: pointer;
}
button.toggleButton span{
  position: absolute;
  right: 10px;
	width:18px;
  height: 2px;
  background-color: #555555;
	background:url(/assets/images/components/innerNav/menuList.svg) no-repeat;
	background-size:auto 100%;
	background-position:left center;
  transition: all .4s;
}
button.toggleButton span:nth-of-type(1),
button.toggleButton.disappearDown span:nth-of-type(1) {
  top:12px; 
	width:18px;
}
button.toggleButton span:nth-of-type(2),
button.toggleButton.disappearDown span:nth-of-type(2) {
  top:18px;
	width:18px;
}
.appearUp button.toggleButton span:nth-of-type(1) {
  top: 10px;
  right: 6px;
	width:16px;
	background-position:right center;
  transform: translateY(4px) rotate(-45deg);
}
.appearUp button.toggleButton span:nth-of-type(2) {
  top: 18px;
  right:6px;
	width:16px;
	background-position:right center;
  transform: translateY(-4px) rotate(45deg);
}

.innerNav .anchorLink {
  justify-content:flex-start;
}
.innerNav .anchorLink::after {
	position:absolute;
  z-index:9999;
  top:auto;
  right:8px;
  width:10px;
  background:url(../images/pages/anchorLink.svg) no-repeat center center;
  background-color:transparent;
  background-size:auto 60%;
  border-radius:0;
}
.innerNav .anchorLink:focus {
		background:none;
}
.innerNav .anchorLink:hover::after {
  opacity:1;
  transition:all .8s ease;
}
@media (max-width: 991px) {
	.innerNav {
		background:rgba(255,255,255,0.9);
	}
}
*/