@charset "utf-8";
/*========= レイアウトのためのCSS ===============*/
body{background: darkblue;}

#pagetop{position: fixed;top:5px;left:20px;z-index: 10;}
#pagetop p{font-weight: bold;letter-spacing: .1em;font-size:18px;color:darkblue;}

.return a{text-decoration: none;color:antiquewhite;}
.return p{font-size:20px;position: fixed;top:80px;right:23px;}
.return a:hover{color: yellow;}
.return p:hover{cursor: pointer;transform: scale(1.5,1.5);transition: all 0.9s ease 0s;}
/*========= タイプライター===============*/
.TextTyping {text-align: left;line-height: 1.5;}/*左揃えの場合*/
.TextTyping span {display: none;}
/*文字列後ろの線の設定*/
.TextTyping::after {
 	content: "|";
	animation: typinganime .8s ease infinite;
}

@keyframes typinganime{
	from{opacity:0}
	to{opacity:1}
}
h2{position: fixed;
  top:20%;left: 50%;
  transform: translateY(-50%) translateX(-50%);
	text-align: center;color:gold;
	margin: 20px 0;
	font-size: 1.5rem;
	letter-spacing: .5em;
  word-break : break-all;}
#container h3{color: tan;}
/*========= 「aria music」 ===============*/
main{display: flex;justify-content: space-between;}
.music_wrap{position: fixed;width:100%;height: 300px;
  top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%);}
p{text-align: center;color:#006600;
  	margin: 20px 0;
  	font-size: 1.4rem;
  	letter-spacing: .3em;
    word-break : break-all;}
main span{font-size: 0.8rem;color: gray;}/*=====制作年~=====*/
#list_A{margin-left: 20%;}
#list_B{margin-right: 20%;}

#list_A h4,#list_B h4{font-size: 0.8rem;color: gray;}
#list_A a,#list_B a{text-decoration: none;line-height: 2;
                    font-size: 1.2rem;padding:10px;}

#list_A a{color:#996666;}
#list_A a:hover{color:#CC3399;}
#list_B a{color:#336699;}
#list_B a:hover{color:#FF6666;}

/*========= 貧弱アイコン ===============*/
.kaiten{text-align: center;margin: 10px auto}
.maru{width: 150px;
  transform: translateY(-50%) translateX(-50%);}
/*========= 貧弱アイコンの回転 ===============*/
.maru{animation: rotation-s2 10s linear infinite;
  	 right: calc(50% - 5px);
      top: calc(50% - 5px);}

.frex_A,.frex_B{display: flex;justify-content:center;}
.frex_B{margin-top: 20px;}
.music_A,.music_B,.music_C,.music_D,.music_E{text-align: center;}
.music_A{margin-left: 100px;}
.music_C{margin-right: 100px;}
.m1usic_D{display: flex;justify-content:center;}
audio{width: 300px;margin: -5px 20px 0 20px;}
.frex_A h3,.frex_B h3{color: tan;font-size: 17px;margin-bottom: 10px;}

/*========= naviのリスト ===============*/
#g-nav-list a{font-size: 20px;}
#g-nav-list a:hover{color:darkred;transform: scale(1.5) ;transition-duration: 0.5s;}
/*========= 「aria music」 ===============*/
#header{width:100%;position: relative;}
#header:before{content: '';position:fixed;
	top:0;left:0;
	z-index:-1;width:100%;}
#container{position: relative;z-index:1;
  text-align: center;background:#eee;padding:60px 0;	}
#header,#header:before{height: 95vh;}

/*========= スクロールダウンのためのCSS ===============*/
/*スクロールダウン全体の場所*/
.scrolldown2{position:absolute;
	bottom:10px;left:50%;/*描画位置※位置は適宜調整*/}
/*Scrollテキストの描写*/
.scrolldown2 span{/*描画位置*/position: absolute;
	left:10px;bottom:10px;
	color: #eee;font-size: 0.7rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;}

/* 丸の描写 */
.scrolldown2:before {content: "";
/*描画位置*/
position: absolute;
bottom:0;left:-4px;
width:10px;height:10px;border-radius: 50%;
background:#eee;
/*丸の動き1.6秒かけて透過し、永遠にループ*/
animation:
circlemove 1.6s ease-in-out infinite,
cirlemovehide 1.6s ease-out infinite;}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{0%{bottom:45px;}100%{bottom:-5px;}}

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
0%{opacity:0}50%{opacity:1;}80%{opacity:0.9;}100%{opacity:0;}}

/* 線の描写 */
.scrolldown2:after{content:"";/*描画位置*/
	position: absolute;bottom:0;left:0;
	width:2px;height: 50px;background:#eee;}
/*===========================================================*/
/*LINK jyuliyan.xyz enter*/
/*===========================================================*/
.link{text-align: center;margin-top: 50px;z-index: 1000}
.link h3{padding:30px 20px 0 20px;color: tan;}

.gradient4{/*ボタンの形状*/
display: inline-block;
padding: 10px 60px;
margin: 5px 0 0 0;
border-radius:30px;text-decoration: none;
border:1px solid tan;color: tan;
/*アニメーションの指定*/
transition: all 0.4s ease-out;}

.to_inst{/*INSTORUMENT ボタンの形状*/
display: inline-block;
padding: 5px 40px;
margin: 1px 0 20px 0;
border-radius:30px;text-decoration: none;
background: silver;color: white;}
.to_inst:hover{background: black;color:tan;}

.to_clock{/*CLOCK ボタンの形状*/
display: inline-block;
padding: 5px 40px;
margin: 1px 0 20px 0;
border-radius:30px;text-decoration: none;
background: silver;color: white;}
.to_clock:hover{background: darkorange;}

.to_modoru{/*戻る ボタンの形状*/
display: inline-block;
padding: 5px 40px;
margin: 1px 0 20px 0;
border-radius:30px;text-decoration: none;
background: darkgreen;color: white;}
.to_modoru:hover{background: yellow;color:darkgreen;}

.to_ttc{/*TTC21 ボタンの形状*/
display: inline-block;
padding: 5px 40px;
margin: 1px 0 20px 0;
border-radius:30px;text-decoration: none;
background: silver;color: white;}
.to_ttc:hover{background: darkblue;}

.to_aria_2{/*▲　aria_2 Topへ ボタンの形状*/
display: inline-block;
padding: 5px 40px;
margin: 1px 0 0 0;
border-radius:30px;text-decoration: none;
border:1px solid silver;color: silver;}
.to_aria_2:hover{background: darkorange;color:white}

#box3 .gradient4{color: #925410;border-color: #925410;}

/*hoverした際、グラデーションと影を付ける*/
.gradient4:hover,#box3 .gradient4:hover{/*ボタンの形状*/
border-color:transparent;color: #fff;
/*背景の色と形状*/
background: linear-gradient(270deg,#3bade3 0%, #9844b7 50%, #44ea76 100%);
background-size: 200% auto;
background-position: right center;
/*ボックスの影*/
box-shadow: 0 5px 10px rgb(250,108,159,0.4);}

#container h4{font-family: "Sawarabi Mincho";color:tan;padding-top: 10px;}

/*========= レスポンシブ========================================================*/
@media screen and (max-width:1108px)/*========= 1100px======================*/
{
body{background: darkred;}
#pagetop p{font-weight: bold;letter-spacing: .1em;
  font-size:18px;color:darkred;}
h2{color:pink;	font-size: 1.2rem;letter-spacing: .5em;}
audio{width: 270px;height: 50px}
.music_A{margin-left: 50px;}
.music_C{margin-right: 50px;}
}

@media screen and (max-width:950px)/*========= 950px======================*/
{
body{background: darkgreen;}
#pagetop p{writing-mode: vertical-rl;font-weight: bold;
  letter-spacing: .1em;font-size:15px;color:darkgreen;}
/*========= タイプライター===============*/
h2{top:5%;left: 50%;color:white;
font-size: 1.1rem;	letter-spacing: .5em;	letter-spacing: .3em;}
/*========= 「aria music」 ===============*/
main{flex-direction: column;}
#list_A{margin-left: 0%;}
#list_B{margin-right: 0%;}
/*========= 貧弱アイコン ===============*/
.kaiten{margin: 50px auto;}
.maru{width:70px;}
.music_wrap{width:100%;height: 300px;
  top: 35%;left: 50%;transform: translateY(-50%) translateX(-50%);}
.frex_A,.frex_B{display: flex;flex-direction: column;}
.frex_A{margin-top:20px;}
.frex_B{margin-top:0px;}
audio{width: 300px;}
.music_A,.music_B,.music_C,.music_D,.music_E{margin: 5px auto;}
.return p{z-index: 100;}
}

@media screen and (max-width:450px)/*========= 450px======================*/
{
body{background: #990066;}
#pagetop{top:5px;left:5px;z-index: 100;}
#pagetop p{writing-mode: vertical-rl;font-weight: bold;
  letter-spacing: .1em;font-size:12px;color:#990066;}
/*========= naviのリスト ===============*/
#g-nav-list a{font-size:12px;}
#g-nav-list{margin-top: -50px;}
.return p{font-size:15px;position: fixed;top:50px;right:12px;}
.frex_A h3,.frex_B h3{font-size: 13px;margin-bottom:8px;}
/*========= タイプライター===============*/
h2{top:5%;left: 48%;color:white;
font-size: 0.9rem;	letter-spacing: .5em;	letter-spacing: .3em;}
/*========= 「aria music」 ===============*/
.kaiten{margin: -5px auto 50px;}
.maru{width:50px;}
.music_wrap{width:100%;height: 300px;
  top: 45%;left: 50%;transform: translateY(-50%) translateX(-50%);}
.frex_A{margin-top:5px;}
.frex_B{margin-top:0px;}
.music_A,.music_B,.music_C,.music_D,.music_E{margin: 2px auto;}
audio{width: 250px;height: 40px;margin: 2px 20px 0 20px;}
p{margin: 30px 0;
  	font-size: 1.0rem;
  	letter-spacing: .3em;
    word-break : break-all;}
#list_A h4,#list_B h4{font-size: 0.5rem;}
#list_A a,#list_B a{font-size: 0.8rem;line-height: 2.8;}

.gradient5{/*▲　Page Top ボタンの形状*/
display: inline-block;
padding: 5px 10px;
margin: 1px 0 0 0;
border-radius:30px;text-decoration: none;
border:1px solid black;color: black;
/*アニメーションの指定*/
transition: all 0.4s ease-out;}
#header,#header:before{height: 80vh;}
/*スクロールダウン全体の場所*/
.scrolldown2{bottom:10px;left:50%;}
}

@media screen and (max-width:320px)/*========= 320px======================*/
{
audio{height: 30px;}
/*========= naviのリスト ===============*/
#g-nav-list a{font-size:11px;}
#g-nav-list{margin-top: -70px;}
#container h4{font-size: 12px;padding-top: 10px;}
.return p{font-size:12px;position: fixed;top:60px;right:14px;}

.frex_A h3,.frex_B h3{font-size: 10px;margin-bottom:8px;}
.music_wrap{width:100%;height: 300px;
  top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%);}
.maru{width: 40px;margin-top: 10px}
/*スクロールダウン全体の場所*/
.scrolldown2{bottom:30px;left:50%;}
#header,#header:before{height:80vh;}
}