*{margin:0;box-sizing:border-box;}
body{
  font-family: "IBM Plex Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
}


/* -------- ローディング画面 -------- */
.hide{visibility:hidden !important;}
#loading {
  width: 100vw;
  height: 100vh;
  transition: all 0.25s ease;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 0;
  left: 0;
  z-index: 9999;
    background: linear-gradient(0deg, #76CBF6, #DE7879, #5B4FAD, #E89A9F, #76CBF6);
    background-size: 100% 800%;

    -webkit-animation: BackgroundAnimation 60s linear infinite;
    -moz-animation: BackgroundAnimation 60s linear infinite;
    animation: BackgroundAnimation 60s linear infinite;
}

@-webkit-keyframes BackgroundAnimation {
    0%{background-position:50% 0% }
    100%{background-position:50% 800% }
}
@-moz-keyframes BackgroundAnimation {
    0%{background-position:50% 0% }
    100%{background-position:50% 800% }
}
@keyframes BackgroundAnimation {
    0%{background-position:50% 0% }
    100%{background-position:50% 800% }
}
.loaded {
  opacity:0;
}


/* ローディングアニメーション */
#loading .load {
  position: relative;
  margin: 50px auto;
  width: 100px;
  height: 140px;
}

#loading .load .loader {
  width: 100px;
  aspect-ratio: 1;
  --c:no-repeat radial-gradient(farthest-side,#fff 92%,#0000);
  background: 
    var(--c) 50%  0, 
    var(--c) 50%  100%, 
    var(--c) 100% 50%, 
    var(--c) 0    50%;
  background-size: 10px 10px;
  animation: l18 1s infinite;
  position: relative;
}
#loading .load .loader::before {    
  content:"";
  position: absolute;
  inset:0;
  margin: 3px;
  background: repeating-conic-gradient(#0000 0 35deg,#fff 0 90deg);
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 3px),#000 0);
  border-radius: 50%;
}
@keyframes l18 { 
  100%{transform: rotate(.5turn)}
}
#loading .text {
  color: rgba(255,255,255,0.9);
  font-size: 18px;
  font-weight:bold;
  text-align: center;
} 
#loading .text1 {
  position: absolute;
  left: 50%;
  font-family: serif;
  width:200px;
  transform: translate(-50%, 0%);
  top: -30px;
} 
#loading .text2 {
  position: absolute;
  left: 50%;
  font-family: serif;
  width:200px;
  transform: translate(-50%, -50%);
  bottom: calc(50% - 150px);
} 
.blink {
  animation: blink 1s step-end infinite;
}
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
#loading #bar {
  width: 300px;
  height: 2px;
  border:1px solid #fff;
  left: 50%;
  transform: translate(-50%, 0%);
  padding: 1px;
  margin-top: 10px;
  position:relative;
  font-size: 1px;
  }
#loading #bar span {
  display: block;
  width: 0px;
  height: 2px;
  background: #fff;
  }
/* -------- /ローディング画面 -------- */

	@media screen and (max-width:767px){
		.noSP{display:none !important;}
		.onlySP{display:block !important;}
		.onlyPC{display:none !important;}
	}
	@media screen and (min-width:768px){
		.noPC{display:none !important;}
		.onlySP{display:none !important;}
		.onlyPC{display:block !important;}
	}
.center{text-align:center;}
.flex{display:flex;}

	@media screen and (max-width:767px){
		.flex.mb1col{flex-direction:column;max-width:95%;margin:0 auto;}
		.flex.mb1col > div:first-child{margin-bottom: 2em;}
	}

.text{max-width:700px;margin:0 auto;font-size:120%;}

	@media screen and (max-width:767px){
		.text{font-size:100%;}
	}

.text p{width:100%;margin:0 auto 1em;line-height:1.7;}
.light,.dark{max-width:1000px;max-width:calc(100vw - 40px);margin:0 auto;background:rgba(0,0,0,0.2);}
.dark p{text-align:left;}

#wrap {overflow:hidden;}

/* ナビゲーションメニュー */
#navbar {
  margin: 0;
  padding: 0;
  position: absolute;
  z-index: 999;
  top: 0;
  width: 100%;
  background-color: #141414;
}
	@media screen and (min-width:768px){
		#navbar {
		  	position: fixed;
		}
	}

#nav {
  margin: 0;
  padding: 0;
  list-style: none;
  padding: 0;
  float: left;
}
#nav li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
}
#nav li {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  margin: 0;
  position: relative;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  background-color: transparent;
}
#nav a {
  position: relative;
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  box-sizing: border-box;
  color: #ffffff;
}
#nav a:hover {
  border: 0px !important;
}
#nav a:hover .nav-label {
  border-bottom: 3px solid #f9d76d;
}

#nav-opener {
  display: none;
}

#nav-opener-check {
  display: none;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-device-width: 1080px), only screen and (min--moz-device-pixel-ratio: 1.5) and (max-device-width: 1080px), only screen and (-o-min-device-pixel-ratio: 1.5 / 1) and (max-device-width: 1080px), only screen and (min-resolution: 144dpi) and (max-device-width: 1080px), only screen and (min-resolution: 1.5dppx) and (max-device-width: 1080px) {

  /* ナビゲーションバー */
  #navbar {
    position: fixed;
    min-height: 45px;
    font-size: 1.8rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  }

  #nav {
    margin: 0;
    padding: 0;
    width: 86%;
  }
  #nav li {
    margin: 0;
    padding: 0;
    display: block;
  }
  #nav li a {
    padding: 0.8rem 0.6em;
  }
  #nav li a:active {
    background-color: #f9d76d;
  }

  #nav-opener {
    display: block;
    position: relative;
    float: right;
    margin: 0 10px 0 0;
    padding: 10px;
    color: #ffffff;
    line-height: 1;
  }

  #nav-opener-check + ul {
    overflow: hidden;
    transition: all 1s 0.5s;
    opacity: 0;
    max-height: 0;
  }
  #nav-opener-check:checked + ul {
    opacity: 1;
    max-height: 50rem;
  }
}
@media screen and (max-width: 580px) {

  /* ナビゲーションバー */
  #navbar {
    position: fixed;
    min-height: 45px;
    font-size: 1.8rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  }

  #nav {
    margin: 0;
    padding: 0;
    width: 86%;
  }
  #nav li {
    margin: 0;
    padding: 0;
    display: block;
  }
  #nav li a {
    padding: 0.8rem 0.6em;
  }
  #nav li a:active {
    background-color: #f9d76d;
  }

  #nav-opener {
    display: block;
    position: relative;
    float: right;
    margin: 0 10px 0 0;
    padding: 10px;
    color: #ffffff;
    line-height: 1;
  }

  #nav-opener-check + ul {
    overflow: hidden;
    transition: all 1s 0.5s;
    opacity: 0;
    max-height: 0;
  }
  #nav-opener-check:checked + ul {
    opacity: 1;
    max-height: 50rem;
  }
}
header{
	margin-top:38px;
	height:calc(100vw * 0.38);
	background:#4B2D04 url(./header_bg.jpg) no-repeat center;
	background-size:contain;
	display:grid;
	place-content:center;
	align-items: center;
}
	@media screen and (max-width:767px){
		header{height:calc(100vw * 0.8) !important;	background-size:cover;}
	}
header div#catch1{
	position:absolute;
	right:2em;
	top:2em;
	opacity:0;
	animation: 1s ease 0.5s normal forwards 1 show-catch;
}
header div#catch2{
	position:absolute;
	left:2em;
	bottom:2em;
	opacity:0;
	animation: 1s ease 1s normal forwards 1 show-catch;
}
	@media screen and (max-width:767px){
		header div#catch1,
		header div#catch2 {z-index:5;height:calc( 100vw * 0.3) !important;}
		header div#catch1 img,
		header div#catch2 img{height:100%;}
		header div#catch1{
			right:0.75em !important;bottom:1em !important; top: auto !important; left: auto !important;
		}
		header div#catch2{
			left:0.75em !important;bottom:0 !important; top: auto !important; right: auto !important;
		}
	}
@keyframes move-chara1{ 0%{margin-left: 100px;opacity:0;} 33%{opacity:0;} 75%{opacity:1;} 100%{margin-left: 0px;opacity:1;} }
@keyframes move-chara2{ 0%{margin-left: -100px;opacity:0;} 33%{opacity:0;} 75%{opacity:1;} 100%{margin-left: 0px;opacity:1;} }
@keyframes move-logo{ 0%{opacity:0;} 100%{opacity:1;} }
@keyframes show-catch{ 0%{opacity:0;} 100%{opacity:0.8;} }
header div#chara1{
	content:"";
	width:calc(100% / 1502 * 1900 );height:calc(100% / 1502 * 1502 );
	margin:0 auto;
	position:absolute;
	display:block;
	transform: translateX( calc(100% / 1502 * -450 ));
	opacity:0;
	background:url(./header_chara1.webp) no-repeat center center;
	background-size:contain;
	animation: 1.5s ease 0.5s normal forwards 1 move-chara1;
}
header div#chara2{
	content:"";
	width:calc(100% / 1502 * 1900 );height:calc(100% / 1502 * 1502 );
	margin:0 auto;
	position:absolute;
	display:block;
	transform: translateX( calc(100% / 1502 * 100 ));
	display:block;
	opacity:0;
	background:url(./header_chara2.webp) no-repeat center center;
	background-size:contain;
	animation: 1.5s ease 0s normal forwards 1 move-chara2;
}
header h1{
	width:100%;
	height:100%;
	text-align:center;
	position:absolute;
		max-height:100%;
	opacity:0;
	animation: 1s ease 2s normal forwards 1 move-logo;
	}
header h1 img {
		max-height:100%;}
	@media screen and (max-width:767px){
		header h1{max-height:95%; !important;}
	}
div#main{
	overflow:hidden;
}
div#main-bg{
	background:url(./bg.webp) no-repeat center bottom;
	background-size:cover;
	overflow:hidden;
}
div#main-bg2{
	background:url(./bg2.webp) no-repeat center 100.1%;
	background-size:100%;
}
div#main-gr{
	background-image:linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 1100px);
	padding:0 20px;
}
div#main-bg3{
	background:#1E1C1B url(./bg3.webp) no-repeat center top;
	background-size:cover;overflow: hidden;
}
div#main-bg3 p{color:#fff;}

h2 {
    color: #164089;
    font-weight: 500;
    font-style: normal;
	font-size:180%;
	text-align:center;
    display:flex;
    background: url(./h2.svg) no-repeat;
    /*border-bottom: 6px double rgba(255,255,255,0.5);*/
    background-size:100%;
    height: calc( 95vw / 8);
    max-height:140px;
    align-items: center;
    justify-content: center;
    position: relative;
    max-width:calc( 95% - 56px);
    margin:3em auto 1em;
	text-shadow:  
		0px 0px 10px #E2F2FB ,
		0px 0px 10px #E2F2FB ,
		0px 0px 10px #E2F2FB ,
		0px 0px 10px #E2F2FB ,
		0px 1px 10px #E2F2FB ,
		0px 1px 10px #E2F2FB ,
		0px 1px 10px #E2F2FB ,
		0px 1px 10px #E2F2FB ;
}
#main-bg3 h2 {
	text-shadow:  
		0px 0px 10px #fff ;
}

	@media screen and (max-width:767px){
		h2 {
		margin:3em 0 1em -20px;
		max-width: 100%;
		justify-content: flex-start;
		padding: 10px 0 0 20px;
		height: calc(100vw / 5);
		background: url(./h2.svg) no-repeat right;
		background-size: 150% 100%;
		}
	}


h3{
    font-weight: 500;
    font-style: normal;
	font-size:150%;
    padding: 0px 40px;
    line-height:100%;
    display: inline-block;
    margin:1em auto 1em;
    position: relative;
    color:#fff;
	text-shadow:  
		0px 0px 10px #3C7FC7 ,
		0px 0px 10px #3C7FC7 ,
		0px 1px 10px #3C7FC7 ,
		0px 1px 10px #3C7FC7 ;
}
h3:before {
    content: "❖";
    font-weight: 400;
    position: absolute;
    font-size: 100%;
    left: 0;
    top: 0;
    color: #E2F2FB;
	text-shadow: none;
}
h3:after {
    content: "❖";
    font-weight: 400;
    position: absolute;
    font-size: 100%;
    right: 0;
    top: 0;
    color: #E2F2FB;
	text-shadow: none;
}
	@media screen and (max-width:767px){
		h3{padding: 0px 28px;}
	}

	@media screen and (min-width:768px){
		#disc {display:flex;flex-direction: row-reverse;}
	}
#main a {color:#456FED;}

#info {
	text-align:center;
	color:#fff;
    background-color: #141414;
    position: relative;
    top: -1px;
    padding:5px;
    margin:0 -20px;
}
#info a{
	color:#fff;
}


#disc {padding-top:3em;text-align:center;max-width:1080px;margin:0 auto;}
#disc > div {margin:0 auto;}
#disc > div > section > div > dl,
#disc > div > section > dl {display:flex;}
#disc > div > section > div > dl > dt,
#disc > div > section > dl > dt {border:1px solid #666;font-size:88%;width:7rem;text-align:center;display:flex;align-items: center;justify-content: center;}
#disc > div > section > dl > dt span {}
#disc > div > section dl dd{margin:0 0 0 1rem;}
#disc > div > section dl dl{margin:0 1rem 0 0;}
#disc #disc-image {max-width:480px;align-self:center;}
#disc #disc-image img{width:95%;}
#disc #disc-info {align-self:center;max-width:600px;}
#disc #disc-info #disc-title > dl > dt, 
#disc #disc-info #disc-spec > dl > dt {min-width:110px;margin:2px;}

#disc #disc-title dd{font-size:180%;padding:0.75rem 0;line-height:1.2em;}
#disc #disc-info {text-align:left;}
#disc #disc-info dd dl dt {font-size:120%;}
#disc #disc-info #disc-spec > dl > dd {padding: 5px 0;}

[data-ruby] {
    position: relative;
}
[data-ruby]::before {
    content: attr(data-ruby);
    position: absolute;
    top: -2.0em;
    left: 0.5em;
    right: 0;
    margin: auto;
    font-size: 0.4em;
}
rt {
    display: none;
}
#disc #disc-info dd dl dt {font-size:100%;}
	
#track{text-align:center;max-width:1100px;margin:0 auto;}
#track p.caution{
	color:#fff;
}

	@media screen and (max-width:767px){
		#disc {padding-top:0em;}
		#disc #disc-info {margin:1em auto;}
		#disc #disc-image img{width:100% !important;}
		#disc #disc-info #disc-title > dl > dt, 
		#disc #disc-info #disc-spec > dl > dt {font-size:75%;max-width:4rem;min-width:4rem;}
		#disc #disc-info #disc-title > dl > dd, 
		#disc #disc-info #disc-spec > dl > dd {padding:10px 0;}}
		#disc #disc-title dd{font-size:140%;padding:0.75rem 0;line-height:1.2em;}
		#disc #disc-info #disc-spec > dl > dd {font-size:95%;}
		#disc #disc-info #disc-spec > dl > dd dl dd {margin: 0;}
		#disc #disc-info #disc-spec > dl > dd dl dd span{display:block;margin-left:0.5rem;}
	}
	
#track #tracklist {
	margin:2em auto;
}

#track #tracklist audio{
	text-align: center;
}
#track #tracklist ol {
    display: block;
	background-color:rgba(255,255,255,0.8);
	backdrop-filter: blur(12px);
	counter-reset: listnum; /* カウンターをリセット */
	list-style: none; /* 標準のスタイルは消す */
	max-width:800px;
    margin: 0px auto;
    padding: 0px;
}
#track #tracklist ol li {
	text-align:left;
	position:relative;
	border-top:1px #607EB0 solid;
	padding-left: 2.5em;
	display: list-item;
	overflow: auto;
}
#track #tracklist ol li:last-child {
	border-bottom:1px #607EB0 solid;
}
#track #tracklist ol li::before{
	counter-increment: listnum; /* counter-resetと同じ文字列 */
	content: counter(listnum); /* カウントした数に応じて番号を表示 */
	display:block !important;
	position: absolute;
	color: #4F95DA;
	left:1.5em;
    top: 25%;
    transform: translate(-50%, 0%);
    transition: .5s;
}
#track #tracklist ol li:hover:before{
	opacity:0;
}
#track #tracklist ol li.nowplaying:before{
	opacity:0;
}


.icon-play {
	display:block;
	position: absolute;
	left: 0;
    top: 50%;
    transform: translate(0%, -50%);
    transition: .5s;
	opacity:0;
}
.icon-play .appear {
  opacity: 0;
  left: 36.5%;
  transition: .5s;
}
.icon-play .bg-line {
  stroke: #fff;
  transition: all .8s ease-in-out;
}

.icon-play .hl-line {
  stroke: #ad2fed;
  stroke-dasharray: 40 480;
  stroke-dashoffset: 40;
  transition: all .6s ease-in-out;
}
.icon-play {
  cursor: pointer;
}
#track #tracklist ol li.nowplaying .icon-play {display:none;}

#track #tracklist ol li:hover {cursor:pointer;}
#track #tracklist ol li:hover .icon-play{
	opacity:1;
}
#track #tracklist ol li:hover .icon-play .bg-line {
    stroke: #4F95DA;
  }
#track #tracklist ol li:hover .icon-play .hl-line {
  stroke-dashoffset: -480;
  stroke: #1a1721;
  }

#track #tracklist ol li .icon-playing {display:none;}

#track #tracklist ol li.nowplaying {
  background: linear-gradient(-45deg, #e9f2eb, #f9f2d0, #ddfef5) fixed;
  background-size: 800% 800%;
  animation: nowplayingBg 9s ease infinite;
}
@keyframes nowplayingBg { 
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}


#track #tracklist ol li.nowplaying .icon-playing {
	display:block;
	position: absolute;
	left: 0.5em;
    top: 50%;
    transform: translate(0%, -50%);
}
#track #tracklist.pausing ol li .icon-playing {display:none;}
.icon-playing {
	font-size:8px;
    position: relative;
    width: 5em;
    height: 5em;
}
.icon-playing .animation {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #4F95DA;
}
.icon-playing .animation span {
    position: absolute;
	display:inline-block;
	width:0.2em;
    height: 1em;
    background: #4F95DA;
    animation: icon-playing 1s infinite ease-in-out;
}
 
.icon-playing .animation span:nth-child(1),
.icon-playing .animation span:nth-child(3),
.icon-playing .animation span:nth-child(5) {
    position: absolute;
    top: 0;
    content: '';
}
 
 
.icon-playing .animation span:nth-child(1) {left: -1.0em;	animation-delay: 0s;}
.icon-playing .animation span:nth-child(2) {left: -0.5em;	animation-delay: -0.192s;}
.icon-playing .animation span:nth-child(3) {left: 0em;	animation-delay: -0.384s;}
.icon-playing .animation span:nth-child(4) {left: 0.5em;	animation-delay: -0.576s;}
.icon-playing .animation span:nth-child(5) {left: 1.0em;	animation-delay: -0.768s;}
 
@keyframes icon-playing {
    0%,100% {box-shadow: 0 0;}
    50% {box-shadow: 0 -1em;}
}
#track #tracklist {margin-bottom:2em;}
#track #tracklist ol li a{text-decoration:none;color:#333;}
#track #tracklist ol li dl{margin:8px 0 8px 1em;}
#track #tracklist ol li dt{font-weight:400;}
#track #tracklist ol li dd{font-size:75%; opacity:0.7; margin:0 1rem 0 0.5rem;word-break: keep-all;word-wrap: break-word;overflow-wrap: break-word;font-weight:500;}

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  position:relative;
  z-index:5;
  margin-top:1rem;
}
.youtube:hover {cursor:pointer;opacity:0.9;}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.youtube_movie{
	position:relative;
	width:100%;
	padding-top:56.25%;
		}
.player {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
}

.thumb{
	max-width:100%;
	height:auto;
	position:absolute;
	top:0;
	left:0;
	z-index:1;
}
		
.youtube_movie iframe{
	position:absolute;
	top: 0;
	left: 0;
	width:100%;
	height:100% ;
}


#world{text-align:center;max-width:1100px;margin:0 auto;overflow: hidden;}

#world .text{color:#fff;
	text-shadow:  
		0px 0px 10px #3C7FC7 ,
		0px 0px 10px #3C7FC7 ,
		0px 1px 10px #3C7FC7 ,
		0px 1px 10px #3C7FC7 ;}
#world .light h3{margin-top:0em;}
#world .light {
	background:rgba(0,0,0,0.2);color:#fff;
	padding:3em 2em;
	margin-bottom:3em;
}
#world .dark {
	background:rgba(0,0,0,0.6) url(./world_teiki.webp) right no-repeat;background-size:contain;color:#fff;
	padding:3em 2em;
	margin:3em auto 4em;
	max-width:900px;
}
#world .dark h3{margin-top:0em;text-shadow: none;}
#world .dark p{max-width:500px;}

	@media screen and (max-width:767px){
	#world .dark {background-blend-mode:darken;}
	}

	@media screen and (max-width:767px){
		#world,#main-bg3 {padding:0 20px;}
	}
#store {text-align:center;max-width:1100px;margin:0 auto;color:#fff;}
#store .flex{justify-content: space-evenly;}
#store a{color:#C0E5FC;}
	@media screen and (max-width:767px){
		#store a img {max-width:100% !important; height: 60px; object-fit: cover; /* この一行を追加するだけ！ */}
	}

#bonus{text-align:center;max-width:1100px;margin:0 auto;}
	@media screen and (max-width:767px){
		#bonus a img {max-width:100% !important;}
	}


#staff{text-align:center;max-width:1100px;margin:0 auto;}
#staff > section {display:flex;flex-wrap: wrap;justify-content:center;}
#staff > h3+section {max-width:650px;margin:0 auto;}
#staff > section >figure{margin-bottom:1rem;}
#staff figure{margin:0 auto;}
#staff figure a{color:#DDE4FF;}
#staff figure span{font-size:88%;color:#EEE6AA;display:block;}
#staff figure .icons a[href*="twitter.com"],
#staff figure .icons a[href*="https://x.com"]{
	width:16px;	background:url("./icon_x.svg") no-repeat 0 4px;	background-size:contain;
}
#staff figure .icons a[href*="bsky.app"]{
	width:19px;	background:url("./icon_bluesky.svg") no-repeat 0 3px;	background-size:contain;
}
#staff figure .icons a[href*="nicovideo.jp/"]{
    width:18px;   background: url(./icon_niconico.png) no-repeat 0 3px;    background-size: contain;
}
#staff figure .icons a[href*="youtube.com"]{
	width:23px;    background: url(./icon_youtube.png) no-repeat 0 4px;    background-size: contain;
}
#staff figure .icons a[href*="pixiv"]{
	width:20px;	background:url("./icon_pixiv.png") no-repeat 0 2px;	background-size:contain;
}
#staff figure .icons a[href*="soundcloud.com"]{
	width:26px;	background:url("./icon_soundcloud.png") no-repeat 0 8px;	background-size:contain;
}
#staff figure .icons a[href*="booth.pm"]{
	width:18px;	background:url("./icon_cart.svg") no-repeat 0 2px;	background-size:contain;
}
#staff figure .icons a[href*="fanbox.cc"]{
	width:18px;	background:url("./icon_blog.svg") no-repeat 0 2px;	background-size:contain;
}
#staff figure .icons a[href*="coconala.com"]{
	width:20px;	background:url("./icon_skill.svg") no-repeat 0 2px;	background-size:contain;
}
#staff figure .icons a[href*="fori.io"]{
	width:20px;	background:url("./icon_file.svg") no-repeat 0 2px;	background-size:contain;
}

#staff figure .icons a[href=""]{display:none!important;}
#staff figure .icons a:not([href*="twitter.com"]):not([href*="https://x.com"]):not([href*="bsky.app"]):not([href*="nicovideo.jp"]):not([href*="youtube.com"]):not([href*="pixiv"]):not([href*="soundcloud"]):not([href*="booth.pm"]):not([href*="fanbox.cc"]):not([href*="coconala.com"]):not([href*="fori.io"]){
	width:21px;	background:url("./icon_home.svg") no-repeat 0 0px;	background-size:contain;
}

#staff figure a{
	display:inline-block;
	margin:0 2px;
	opacity: 1;
	height:22px;
}
#staff figure .icons a{margin:0 10px;}
#staff figure a:hover{opacity: 0.6;}

#staff figure {
  position: relative;
  overflow: hidden;
  min-width: 230px;
  max-width: 315px;
  width: 100%;
  color: #fff;
  text-align: center;
  line-height: 1.4em;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  background-color: rgba(46, 75, 113, 0.5);
}
#staff figure * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
#staff figure .background {
  width: 100%;
  vertical-align: top;
  opacity: 0;
}
#staff figure figcaption {
  width: 100%;
  padding: 15px 25px;
  position: absolute;
  left: 0;
  top: 50%;
}
#staff figure .profile {
  border-radius: 50%;
  position: absolute;
  bottom: 50%;
  left: 50%;
  max-width: 100px;
  opacity: 1;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}
#staff figure h6 {
  margin: 0 0 5px;
  font-size:120%;
  font-weight: 400;
}
#staff figure h6 span {
  display: block;
  font-size: 70%;
  color: #EAF6FF;
  opacity: 0.75;
}
#staff figure i {
  padding: 10px 5px;
  display: inline-block;
  font-size: 32px;
  color: #ffffff;
  text-align: center;
  opacity: 0.65;
}
#staff figure a {
  text-decoration: none;
}
#link{text-align:center;max-width:1100px;margin:0 auto 5em;}
#link,
#link section{
	text-align:center;
}
#link .link-external-banner {margin-bottom:2em}
#link .link-external-banner a img {max-width:500px;height:auto;}
#link .link-external-text a {display:inline-block;padding:1em;background:rgba(255,255,255,0.7);margin:2px;}
#link .link-external-text a:before{
	content:"≫";
	display:inline-block;
	margin-right:0.2em;
}
	@media screen and (max-width:767px){
		#link img{max-width:100% !important;}
	}

footer {
	color:#fff;
	padding:1em 0;
    background-color: rgba(192,229,252,0.5);
	text-align:center;}
footer aside {display:flex; align-items: flex-end;justify-content: space-evenly;}
footer aside p{margin:10px;}
	@media screen and (max-width:767px){
		footer {margin:0 -20px 0;}
		footer aside {flex-direction:column;align-items: center;}
		footer img{max-width:100% !important;}
	}

/* -------- 桜花びら CSS -------- */
/* 桜を表示するコンテナのスタイル */
.cherry-blossom-container {
  position: relative;
  width:100%;
  height:calc(100vw * 0.38);
  overflow: hidden; 
}
	@media screen and (max-width:767px){
		.cherry-blossom-container {height:calc(100vw * 0.8) !important;}
	}

/* 桜の花びらのスタイル */
.petal {
  position: absolute;
  background-color: #ffffff; 
  border-radius: 150% 0 150% 0;
  animation: animate-petal 10s linear;
}
	@media screen and (max-width:767px){
		.petal {animation: animate-petalSP 10s linear;}
	}

.petal::after {
  content: "";
  position: absolute;
  top: -14%;
  left: -10%;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  border-radius: 150% 0 150% 0;
  transform: rotate(15deg);
}

/* 花びらが降るアニメーション */
@keyframes animate-petal {
  0% {
    top: 0;
    opacity: 0;
    transform: rotate(0deg);
  }
  10% {
    opacity: 0.5;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    top: calc(100vw * 0.383);
    transform: rotate(3000deg);
  }
}
@keyframes animate-petalSP {
  0% {
    top: 0;
    opacity: 0;
    transform: rotate(0deg);
  }
  10% {
    opacity: 0.5;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    top: calc(100vw * 0.8);
    transform: rotate(3000deg);
  }
}