@charset "utf-8";

/*リセットCSS*/
* { margin: 0; padding: 0; }
a{text-decoration: none;}

body {
    font-family:  "Yu Gothic", メイリオ, Meiryo, sans-serif;
}

/*Loading*/
.loading p{color: #808080;
text-align: center;}
.loading {
  position: fixed;
  z-index: 1000;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  background: #fdfdfd;
}
.loading.hide {
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms;
}
.loading .circle {
  display: block;
  position: relative;
  top: calc( 50% - 20px );
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border: 8px solid #e0e0e0;
  border-top: 7px solid #808080;
  border-radius: 50px;
  animation: loading 700ms linear 0ms infinite normal both;
}
@keyframes loading {
  0% { transform: rotate( 0deg ); }
  100% { transform: rotate( 360deg ); }
}


/*ヒーロー*/
.heroimg img{width: 100%;}


/*スクロール*/
/*スクロールダウン全体の場所*/
.scrolldown{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	left:20%;
	top:40%;
    /*全体の高さ*/
	height:50px;
}

/*Scrollテキストの描写*/
.scrolldown span{
    /*描画位置*/
	position: absolute;
	left:-15px;
	top: -15px;
    /*テキストの形状*/
	color: #FFFFFF;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
}

/* 線の描写 */
.scrolldown::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top: 0;
    /*線の形状*/
	width: 1px;
	height: 30px;
	background: #eee;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:30px;
		opacity: 1;
	}
	100%{
		height:0;
		top:50px;
		opacity: 0;
	}
}



/*リンク色*/
.linkcolor{color: #808080;
transition: all 0.3s ease 0.1s;}
.linkcolor:hover{color: #F3E554;}
.menuline{transition: all 0.3s ease 0.1s;}
.menuline:hover{color: #A0A0A0;}
@media (min-width: 750px){.menuline:hover{color: #404040;}}



/*メニューSNSアイコン色切り替え*/
/*スマホ*/
.icon_white{display: block;}
.icon_gray{display: none;}
.snsicon_group{display: inline-flex;
}
/*PC*/
@media (min-width: 750px){
.icon_white{display: none;}
.icon_gray{display: block;}
.snsicon_group{display: flex;
position: absolute;
top: 15px;}
}
/*サイズ*/
.icon_white{width: 30px;}
.icon_gray{width: 30px;}
/*ホバーpc*/
.icon_gray{transition: all 0.3s ease 0.1s;}
.icon_gray:hover{filter: brightness(60%);}
/*ホバーsp*/
.icon_white{transition: all 0.3s ease 0.1s;}
.icon_white:hover{filter: brightness(60%);}


/*題字*/
.logomark h1 {color: #919191;
	display: inline;}
.logomark h1{transition: al 0.3s ease 0.1s;}
.logomark h1:hover{color: #303030;}
.left h1{color: #FFFFFF;
padding-left: 2em;
padding-top: 1em;}



/*フッター*/
footer{background: #303030;
color: #FFFFFF;
text-align: center;
padding: 20px;}
.footer-title{color: #ffffff;}
.footer-title{transition: all 0.3s ease 0.1s;}
.footer-title:hover{color: #A0A0A0;}
.snsicon{transition: all 0.3s ease 0.1s;}
.snsicon:hover{filter: brightness(60%);}



body{background:#838383;}
small{color: #808080;}


/*カード表示*/
.card{background: #FFFFFF;
	padding: 5%;
	margin: 5%;}
.card h1{color: #808080;
text-align: center;}
.card h2{color: #808080;}
.card h3{color: #808080;}
.card p{color: #808080;}
.inner_card{margin: 0.5em;}
.hr_card{background-color: #E0E0E0;
border: none;
height: 1px;}
.inner_card a{transition: all 0.3s ease 0.1s;}
.inner_card a:hover{filter: brightness(70%);}
.center-card{text-align: center;}

/*カードふわっと*/
.card{opacity: 0.3;
transition: all 1s;
transform: translateY(150px);}
.is-active{opacity: 1;
transform: translateY(0);}

/*動かないカード表示*/
.cardfixed{background: #FFFFFF;
	padding: 5%;
	margin: 5%;}
.cardfixed h1{color: #808080;
text-align: center;}
.cardfixed h2{color: #808080;}
.cardfixed h3{color: #808080;}
.cardfixed p{color: #808080;}
.inner_cardfixed{margin: 0.5em;}
.hr_cardfixed{background-color: #E0E0E0;
border: none;
height: 1px;}
.inner_cardfixed a{transition: all 0.3s ease 0.1s;}
.inner_cardfixed a:hover{filter: brightness(70%);}


/*フェードイン*/
.fadein{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}




.youtube_raito{width: 100%;
height: auto;
aspect-ratio: 16 / 9;}

/*CDジャケット*/
.jaket{width: 150px;}


@media (min-width: 750px){
	.leftright{display: flex;
	justify-content: space-around;
	}
	.left{flex: 1;}
	.right{flex: 2;}
	.jaket{width: 80%;
	max-width: 170px;}
}




/*moreボタン*/
.btn{border: 1px solid #808080;
    display: inline-block;
    width: 150px;
    padding: 10px;
    box-sizing: border-box;
	background-color: #FFFFFF;
    color: #808080;
    text-decoration: none;
    text-align: center;
	 transition-property: opacity;
　-webkit-transition-property: opacity;
  transition-duration: .5s;
  -webkit-transition-duration: .5s;
}
.btn-wrap{display: flex;
justify-content: center;}

.btn:hover {
	border: 1px solid #FFFFFF;
  background-color: #808080;
	color: #FFFFFF;
}


/*NEWS見出し*/
.midashi{color: #FFFFFF;
text-align: center;
margin-top: 40px;}

/*上部重なり*/
.space{background: #FFFFFF;
height: 65px;
width: 100%;}


/*メニュー色*/
.menuline{color: #FFFFFF;}
@media (min-width: 750px){
.menuline{color: #919191;}}

.snsicon{width: 30px;
margin-right: 5px;
margin-left: 5px;
margin-top: 9px;}


/*ハンバーガーメニュー*/
body{
	overflow-x: hidden;}
.nav{}
.header-area{
	width: 100%;
	background: rgba(255,255,255,0.90);
	display: flex;
	justify-content: space-between;
	height: 65px;
	padding: 0 20px;
	align-items: center;
	position: fixed;}
.hamburger{
	margin-right: 40px;
	width: 45px;
	height: 30px;
	position: relative;}
.hamburger span{
	position: absolute;
	width: 100%;
	height: 3px;
	background-color: #919191;
	transition: .5s;}
.hamburger span:first-of-type{
	top: 0;}
.hamburger span:nth-of-type(2){
	top:45%;}
.hamburger span:last-of-type{
	top: 90%;}
.slide-menu{
	background-color: rgba(70,70,70,0.90);
	position: fixed;
	top:65px;
	width: 100%;
	left: 0;
	transform: translateX(100%);
	transition: .5s;}
.slide-menu li{
	color: #D2B04D;
	line-height: 400%;
	text-align: center;}
ul{padding: 0;}


/*・消す*/
li{list-style: none;}
.hamburger.active span:first-of-type{
	top: 50%;
	transform: rotate(45deg);}
.hamburger.active span:nth-of-type(2){
	opacity: 0;}
.hamburger.active span:last-of-type{
	top: 50%;
	transform: rotate(-45deg);}
.slide-menu.active{
	transform: translateX(0);}


/*ヘッダー手前に固定*/
.header{position: sticky;
z-index: 999;}



/*子ページについて*/
/*HISTORY*/
.history_photo{width: 80%;}

.history{margin: 5%;}
@media (min-width: 750px){
	.history{display: flex;
		gap: 1em}
	.history_photo{max-width: 400px;}}

/*profile*/
/*SNS紹介*/
.sns_shokai{display: flex;}
.sns_shokai img{width: 70px;}
/*HISTOYY*/
summary{color: #808080;
font-size: 2em;
font-weight: bold;
transition: .3s;}
summary:hover {color: #303030;
}
/*news*/
.news_img{width: 80%;
	display: flex;
	margin: 0 auto;
	}
@media (min-width: 750px){
	.news_img{width: 50%;}
}

/*デスクトップ表示*/

@media (min-width: 750px){

/*メニュー*/
nav{
	display: flex;}
.header{
	width: 100%;
	display: flex;}
	
.slide-menu{
	background-color: rgba(255,255,255,0.10);
	margin: 0;
	position: static;
	transform: initial;
	padding:  0;
	display: flex;
	flex-wrap: wrap;
	gap:1em;
	justify-content: center;}
	
		
	
/*ヘッダ*/
.hamburger{display: none;}

/*ヒーロー*/
.heroimg img{width: 70%;
	height: 30%;
	object-fit: cover;
	object-position: 30% 30%;
	}
.heroimg{text-align: center;}
	
/**/
.leftright{display: flex;
	justify-content: space-around;
	width: 100%;}
.left{flex: 1;}
.right{flex: 2;}

}