/*---------------------------------------------
メニュー
---------------------------------------------*/
#nav_btn  {
    background: #fe9422;
    /* display: inline-block; */
    float: left;
    width: 80px;
    height: 80px;
    /* padding: 5px 25px 50px; */
    margin: 20px;
    position: fixed;
    z-index: 888;
}
#nav-drawer {
  position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  /*width: 30px;
  height: 22px;*/
  vertical-align: middle;
}

#nav-open span{
	display:block;
	font-weight:bold;
	color:#fff;}

/*ハンバーガーアイコンをCSSだけで表現
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #fff;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}
*/
/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*最前面に*/
  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 330px;/*最大幅（調整してください）*/
  max-height: 280px;
  height: 100%;
  background: #fffeda;
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}


.nav_in li {
    border-bottom: #fe9422 3px dashed;
    padding: 20px;
    font-size: 18px;
    font-weight: bold;
    background: #fffeda;
}

.nav_in li:last-child{
	border-bottom:none;}
	
#nav-content::-webkit-scrollbar {
  display: none;
}	

.close {
    position: relative;
    display: inline-block;
    /* top: 0px; */
    /* left: 0px; */
    width: 30px;
    height: 30px;
    border: 0;
    background-color: black;
    border-radius: 32px;
    margin: 0;
    padding: 0;
    /* transform: scale(0.5); */
    cursor: pointer;
}
	.close:before{
    content: "";
    position: absolute;
    display: inline-block;
    top: 5px;
    left: 13px;
    width: 4px;
    height: 20px;
    border: 0;
    margin: 0;
    padding: 0;
    background-color: white;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
	.close:after{
    content: "";
    position: absolute;
    display: inline-block;
    top: 5px;
    left: 13px;
    width: 4px;
    height: 20px;
    border: 0;
    margin: 0;
    padding: 0;
    background-color: white;
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
	.close:hover{
		background-color:red;
	}
	
	.menu_btn{
    width: 20%;
    margin-top: 10px;
    border-radius: 5px;
}
@media screen and (max-width: 480px){	
	#nav_btn{
		margin:0;
		padding:9px;}
		
	#nav-content {	
	    width: 100%;
		opacity:0.9;
		max-width:none;
		max-height: 200px;}
		
	.nav_in li{
		padding:10px;
		font-size:16px;}	
		
}

/*---------------------------------------------
header
---------------------------------------------*/
header{
	text-align:center;}

.title{
	max-width:560px;
	width:100%;
	margin:0 auto;}
	
@media screen and (max-width: 768px){
	
	.title{
		width:60%;}
		
	#nav_btn{
		margin:0;
		padding:9px;
		width: 50px;
    height: 50px;}
	
	#nav-open span {
	font-size:9px;}
	
	.menu_btn {
    width: 20%;
    margin-top: 0px;
    border-radius: 5px;
}	
		
	}	
@media screen and (max-width: 480px){
.title {
    width: 60%;
    height: 50px;
    padding-top: 8px;
}

#nav_btn{
width: 40px;
    height: 40px;}
	
.menu_btn {
    width: 20%;
    margin-top: -5px;
    border-radius: 5px;
}



}
/*---------------------------------------------
mv
---------------------------------------------*/	

.MV{
	background:url(../img/mv_back.jpg) no-repeat;
	padding-top:42.0207253%;
	width:100%;
	position:relative;
	background-size: cover;
    background-position: bottom;}
	
.main  {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 31%;
}
.MV p img{
  animation: Flash1 3s infinite;
}
	/* アニメーション */
@keyframes Flash1{
  50%{
    opacity: 0;
  }
}
	
/*---------------------------------------------
ホバーで出てくる
---------------------------------------------*/	


.MV .Btn {
	position: absolute;
	height: 60px;
	cursor: pointer;
}

.MV .Btn:hover {
	opacity: 0.7;
}

.MV .Btn#B_beer {
	width: 8%;
    height: 16%;
    top: 10%;
    left: 56%;
   
}

.MV .Btn#B_hair {
	width: 11%;
    height: 11%;
    top: 3%;
    left: 43%;
   
}

.MV .Btn#B_muscle {
	width: 10%;
    top: 53%;
    left: 44%;
    height: 14%;
   
}

.MV .Btn#B_heart {
	width: 5%;
    top: 41%;
    left: 49%;
   
}

.MV .Btn#B_inagi {
	width: 5.5%;
    height: 17%;
    top: 76%;
    left: 18.8%;
   
}




.MV .gr {
	position: absolute;
	width: 420px;
	height: 200px;
	cursor: pointer;
	display: none;
}

.MV .gr.pop_beer {
	top: 8%;
    left: 65%;
}

.MV .gr.pop_hair {
	top: 5%;
    left: 15%;
}

.MV .gr.pop_muscle {
	top: 63%;
    left: 17%;
}

.MV .gr.pop_heart {
	top: 35%;
    left: 55%;
}

.MV .gr.pop_inagi{
    top: 42%;
    left: 7%;
}



.MV .gr div {
	position: relative;
}

.MV .gr div i {
	position: absolute;
	top: -5px;
	right: -5px;
	font-size: 12px;
	font-style: normal;
	color: #FFF;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	display: block;
	background: rgba(0, 0, 0, 0.65);
	border-radius: 100px;
}






.A_img {
	width: 100%;
	max-width: 1000px;
	margin: 10px auto;

}
@media screen and (max-width: 480px){
.MV {
   
    padding-top: 108.020725%;
    
}
.main {
    
    width: 65%;
}}

/*---------------------------------------------
ふわふわ出てくる
---------------------------------------------*/	

#Wrap{
	
	position:relative;
	
}
#Wrap div{
	width:25%;
	position:absolute;
	line-height:120px;
	font-size:24px;
	color:#FFF;
	text-align:center;
	cursor:pointer;
	opacity:0;
	transition:all 0.5s;
}
#W1{
	
	top: 4%;
    left:58%;
	-moz-animation: fade 15s ease 0s infinite;
    -webkit-animation: fade 15s ease 0s infinite;
    -o-animation: fade 15s ease 0s infinite;
    -ms-animation: fade 15s ease 0s infinite;


}
#W2{
	
	top: 3%;
    left: 19%;
	-moz-animation: fade 15s ease 3s infinite;
    -webkit-animation: fade 15s ease 3s infinite;
    -o-animation: fade 15s ease 3s infinite;
    -ms-animation: fade 15s ease 3s infinite;


}
#W3{    
    top: 34%;
    left: 16%;
	-moz-animation: fade 15s ease 6s infinite;
    -webkit-animation: fade 15s ease 6s infinite;
    -o-animation: fade 15s ease 6s infinite;
    -ms-animation: fade 15s ease 6s infinite;


}

#W4{
	 top: 39%;
    left: 52%;
	-moz-animation: fade 15s ease 9s infinite;
    -webkit-animation: fade 15s ease 9s infinite;
    -o-animation: fade 15s ease 9s infinite;
    -ms-animation: fade 15s ease 9s infinite;


}
#W5{
	top: 65%;
    left: 9%;
	-moz-animation: fade 15s ease 12s infinite;
    -webkit-animation: fade 15s ease 12s infinite;
    -o-animation: fade 15s ease 12s infinite;
    -ms-animation: fade 15s ease 12s infinite;


}

#Wrap div.move{
	opacity:0;
	-moz-animation: fadeout 1s ease 0s infinite;
    -webkit-animation: fadeout 1s ease 0s infinite;
    -o-animation: fadeout 1s ease 0s infinite;
    -ms-animation: fadeout 1s ease 0s infinite;


}
#Wrap div.move:hover{
	opacity:1;
	-moz-animation: fadein 1s ease 0s infinite;
    -webkit-animation: fadein 1s ease 0s infinite;
    -o-animation: fadein 1s ease 0s infinite;
    -ms-animation: fadein 1s ease 0s infinite;

}





@-moz-keyframes fade {
     0% { opacity:0; } 20% { opacity:1;} 60% { opacity:0;}
}
@-webkit-keyframes fade {
     0% { opacity:0; } 20% { opacity:1;} 60% { opacity:0;}
}
@-o-keyframes fade {
     0% { opacity:0; } 20% { opacity:1;} 60% { opacity:0;}
}
@-ms-keyframes fade {
     0% { opacity:0; } 20% { opacity:1;} 60% { opacity:0;}
}

@-moz-keyframes fadein {
     0% { opacity:1; } 100% { opacity:1;}
}
@-webkit-keyframes fadein {
     0% { opacity:1; } 100% { opacity:1;}
}
@-o-keyframes fadein {
     0% { opacity:1; } 100% { opacity:1;}
}
@-ms-keyframes fadein {
     0% { opacity:1; } 100% { opacity:1;}
}


@-moz-keyframes fadeout {
     0% { opacity:0; } 100% { opacity:0;}
}
@-webkit-keyframes fadeout {
     0% { opacity:0; } 100% { opacity:0;}
}
@-o-keyframes fadeout {
     0% { opacity:0; } 100% { opacity:0;}
}
@-ms-keyframes fadeout {
     0% { opacity:0; } 100% { opacity:0;}
}
	
	
/*---------------------------------------------
プロフィール
---------------------------------------------*/	
.prof_title {
background:url(../img/name_bk2.png) no-repeat;
background-position:top;
background-size:contain;
}


.prof {
background:url(../img/name_bk.png) no-repeat;
background-position:bottom;
background-size:contain;
position:relative;padding-top: 37%;}




.prof_bk {
background:url(../img/prof_bk.png);
background-size: contain;}


	
.prof_h {
	font-size:18px;
	margin-bottom:20px;}	
	
.prof_h span{
	font-weight:bold;
	font-size:24px;}	
	
.prof_fukidashi	{
	
	background:url(../img/fukidashi.png) no-repeat;
	background-size: contain;
	position:relative;
	padding-top:63.76190476%;
	}
	
.prof_fukidashi	p{
    position: absolute;
    top: 23%;
    width: 65%;
    line-height: 1.9em;
    right: 8%;
	text-align:left;
}

.main2 img {
	
	animation-name: album;
	-webkit-animation-name: album;
	animation-duration: 10s;
	-webkit-animation-duration: 10s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	opacity: 0;
}

	.main2 .img1 {
	display: block;
	margin: 0 auto;
	position: absolute;
	top: 0;
	left: 0;
}

.main2 .img2 {
	animation-delay:5s;
	-webkit-animation-delay:5s;
	position: absolute;
	top: 0;
	left: 0;
}


@keyframes album {
	0% {
		opacity: 0;
	}
	
	12.5% {
		opacity: 1;
	}

	37.5% {
		opacity: 1;
	}
	50% {
		opacity: 0.8;
	}
}

@-webkit-keyframes album {
	0% {
		opacity: 0;
	}
	
	12.5% {
		opacity: 1;
	}

	37.5% {
		opacity: 1;
	}
	50% {
		opacity: 0.8;
	}
}

.click{
    position: absolute;
   
    top: 11%;
    left: 16%;
	-webkit-animation: spin 3s ease-out infinite;
    -moz-animation: spin 3s ease-out infinite;
    -ms-animation: spin 3s ease-out infinite;
    -o-animation: spin 3s ease-out infinite;
    animation: spin 3s ease-out infinite;
	transform-origin: center;
	
}
	
@-webkit-keyframes spin {
	0% {-webkit-transform: rotateY(0deg);}
	100% {-webkit-transform: rotateY(360deg);}
}
@-moz-keyframes spin {
	0% {-moz-transform: rotateY(0deg);}
	100% {-moz-transform: rotateY(360deg);}
}
@-ms-keyframes spin {
	0% {-ms-transform: rotateY(0deg);}
	100% {-ms-transform: rotateY(360deg);}
}
@-o-keyframes spin {
	0% {-o-transform: rotateY(0deg);}
	100% {-o-transform: rotateY(360deg);}
}
@keyframes spin {
	0% {transform: rotateY(0deg);}
	100% {transform: rotateY(360deg);}
}





/* -- ul#tab-menu -------------------------------------------------------------------------------------------- */

ul#tab-menu {
	width : 1000px;
	margin : 50px auto 0;
	list-style-type : none;
	display : flex;
}

ul#tab-menu li {
	
	padding : 15px 25px;
	position:absolute;
}

ul#tab-menu li:hover {
	cursor : pointer;
	opacity : 0.3;
}

/*ul#tab-menu li.active {
	background : #ffffff;
}*/

ul#tab-menu li.active:hover {
	cursor : default;
	opacity : 1.0;
}




/* -- tab-* -------------------------------------------------------------------------------------------- */

div.tab-1,
div.tab-2,
div.tab-3,
div.tab-4,
div.tab-5,
div.tab-6,
div.tab-7,
div.tab-8  {
    width: 40%;
    margin: 0 auto 50px;
    padding: 25px 20px;
   
	color:#fff;
    position: absolute;
    top: 10%;
    left: 40%;
	line-height: 1.7em;
}


div.tab-1{ background: #14A8B4;}
div.tab-2{ background: #14b45b;}
div.tab-3{ background: #b685b7;}
div.tab-4{ background: #f79a4a;}
div.tab-5{ background: #9097ef;}

div.tab-1:before,
div.tab-2:before,
div.tab-3:before,
div.tab-4:before ,
div.tab-5:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -15px;
  border: 15px solid transparent;
  
}



div.tab-1:before{border-right: 15px solid #14A8B4;}
div.tab-2:before{border-right: 15px solid #14b45b;}
div.tab-3:before{border-right: 15px solid #b685b7;}
div.tab-4:before{border-right: 15px solid #f79a4a;}
div.tab-5:before{border-right: 15px solid #9097ef;}

/*div.tab-1,*/
div.tab-2,
div.tab-3,
div.tab-4,
div.tab-5,
div.tab-6,
div.tab-7,
div.tab-8 {
	display : none;
}

.tab_h{
	font-size:24px;
	font-weight:bold;
	margin-bottom:10px;}
	
.tab_h2{
	font-size:18px;
	font-weight:bold;
	margin-bottom: 10px;}
	
	
.main2 {
    position: absolute;
    top: 0%;
    width: 16.5%;
    left: 21%;
}



ul#tab-menu li.tab-1  {
    width: 8%;
    top: 78%;
    height: 22%;
    left: 24%;
    
}

ul#tab-menu li.tab-2  {
    width: 8%;
    top: 63%;
    height: 11%;
    left: 24%;
    
}


ul#tab-menu li.tab-3 {
    width: 14%;
    top: 46%;
    height: 13%;
    left: 21%;
   
}


ul#tab-menu li.tab-4 {
    width: 12%;
    top: 30%;
    height: 12%;
    left: 22%;
   
}

ul#tab-menu li.tab-5  {
    width: 10%;
    top: 0%;
    height: 26%;
    left: 23%;
    
}	

@media screen and (max-width: 1700px){
.prof {position:relative;padding-top: 40%;
}div.tab-1,
div.tab-2,
div.tab-3,
div.tab-4,
div.tab-5,
div.tab-6,
div.tab-7,
div.tab-8  {
   
    top: 0%;
	width: 50%;
    
}}



@media screen and (max-width: 1400px){
	.click {
    position: absolute;
    width: 9%;
    top: -5%;
    left: 12%;
}
div.tab-1,
div.tab-2,
div.tab-3,
div.tab-4,
div.tab-5  {
	width:50%;
	top: 0%;
	height:400px;
	overflow-y:scroll;
	}	
	


div.tab-1::-webkit-scrollbar,
div.tab-2::-webkit-scrollbar,
div.tab-3::-webkit-scrollbar,
div.tab-4::-webkit-scrollbar,
div.tab-5::-webkit-scrollbar{width:10px;}/*バーの太さ*/

div.tab-1::-webkit-scrollbar-track,
div.tab-2::-webkit-scrollbar-track,
div.tab-3::-webkit-scrollbar-track,
div.tab-4::-webkit-scrollbar-track,
div.tab-5::-webkit-scrollbar-track{background:none;}/*バーの背景色*/

div.tab-1::-webkit-scrollbar-thumb,
div.tab-2::-webkit-scrollbar-thumb,
div.tab-3::-webkit-scrollbar-thumb,
div.tab-4::-webkit-scrollbar-thumb,
div.tab-5::-webkit-scrollbar-thumb{background:#2cc2e4;}/*バーの色*/	
}	
	
@media screen and (max-width: 900px){
	
	div.tab-1,
div.tab-2,
div.tab-3,
div.tab-4,
div.tab-5  {
	
	height:300px;
	
	}	
}


	
	@media screen and (max-width: 768px){
		
		
.main2{
    position: absolute;
    top: -5%;
    width: 32%;
    left: 35%;
}	

.prof_title h2 img{
		width:50%;
	}
	.prof_h span {
    font-weight: bold;
    font-size: 16px;
}
	.prof_h {
    font-size: 14px;
    text-align: left;
	width:95%;
	margin:0 auto;}
	

	
	.prof {padding-top: 170%;}
	
	.prof {
    background: url(../img/name_bk.png) no-repeat;
    background-position: bottom;
    background-size: contain;
    position: relative;
    padding-top: 140%;
}

.click {
    position: absolute;
    width: 18%;
    top: -2%;
    left: 20%;
}
		
	div.tab-1,
div.tab-2,
div.tab-3,
div.tab-4,
div.tab-5,
div.tab-6,
div.tab-7,
div.tab-8    {
    width: 83%;
    margin: 0 auto 50px;
    padding: 25px 20px;
    
    color: #fff;
    position: absolute;
    top: 52%;
    font-size: 12px;
    left: 3%;
	height: 315px;
   overflow-y: scroll;
}






	
.tab_h {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
}	
	
	.tab_h2 {
    font-size: 14px;
    font-weight: bold;
}
	div.tab-1:before, div.tab-2:before, div.tab-3:before, div.tab-4:before, div.tab-5:before {
    
    border: none;
    border-right: none;
}	
	
	

ul#tab-menu li.tab-1  {
    width: 13%;
    top: 32%;
    height: 9%;
    left: 40%;
    
}

ul#tab-menu li.tab-2  {
  width: 14%;
    top: 25.5%;
    height: 4.5%;
    left: 40%;
    
}


ul#tab-menu li.tab-3 {
  width: 23%;
    top: 17.5%;
    height: 6%;
    left: 36%;
}


ul#tab-menu li.tab-4 {
   width: 24%;
    top: 9.5%;
    height: 5.5%;
    left: 35%;  
}

ul#tab-menu li.tab-5   {
    width: 18%;
    top: -4%;
    height: 11%;
	left: 39%;}


}
@media screen and (max-width: 480px){
	
	
	.prof {
    
    padding-top: 170%;
}

div.tab-1,
div.tab-2,
div.tab-3,
div.tab-4,
div.tab-5,
div.tab-6,
div.tab-7,
div.tab-8    {
	width:94%;
	margin:0 auto;
	padding:10px;
	top: 40%;
	box-sizing:border-box;
	height:350px;
    
}


	ul#tab-menu li.tab-1  {
    width: 8%;
    top: 31%;
    height: 5%;
    left: 40%;
    
}

ul#tab-menu li.tab-2  {
   width: 8%;
    top: 23.5%;
    height: 2.5%;
    left: 40%;
    
}


ul#tab-menu li.tab-3 {
   width: 8%;
    top: 15.5%;
    height: 3%;
    left: 40%;
   
}


ul#tab-menu li.tab-4 {
    width: 12%;
    top: 8%;
    height: 2.5%;
    left: 38%;   
}

ul#tab-menu li.tab-5  {
    width: 10%;
    top: -4%;
    height: 7%;
    left: 39%;
    
}

}


/*---------------------------------------------
年表
---------------------------------------------*/	
.chronology{
	background-color:#fceb00;
	background-repeat:no-repeat;
	background-position:top;
	background-size: contain;
	padding-bottom: 50px;}
	

.recommends {
	width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}
.recommends .carousel {	
list-style-type: none;

padding: 12px;
width: 100%;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
margin: 0;	}
  
  .recommends .carousel li {
 
 margin: 10px;
 text-align: center;
 display: inline-block;
 word-break: break-all;	}
 
 .recommends .recommend-entry {
display: block;
width: 230px;
font-size: 1rem;

position: relative;	    line-height: 1.5;	}


	 
.recommend-title {

padding: 0.5em 0.5em;
word-break: break-all;
width: 100%;
white-space: normal;
text-align: left;	}


/*---------------------------------------------
つながる
---------------------------------------------*/	
.link h2{
	padding-top:50px;
	margin-bottom:20px;}
	
.link_h	{
	text-align:center;
	font-weight:bold;
	font-size:24px;
	margin-bottom:30px;}

.link_bnr{
	position:relative;
	background:#fff;}

.link_bnr a:hover{
	filter: alpha(opacity=6);
    -moz-opacity:0.6;
    opacity:0.6;}

.link_bnr div.facebook,
.link_bnr div.insta,
.link_bnr div.twitter,
.link_bnr div.mail{
    width: 50%;
    background-size: cover;
    height: 477px;
    position: relative;
    float: left;
}


div.facebook{
	background:url(../img/link_fb_bk.jpg) no-repeat;
	}
	
div.insta{
	background:url(../img/link_insta_bk.jpg) no-repeat;
	}
div.twitter{
	background:url(../img/link_twi_bk.jpg) no-repeat;
	}
	
div.mail{
	background:url(../img/link_mail_bk.jpg) no-repeat;
	}			
		

.link_text{
    background-color: rgba(255,255,255,0.8);
    padding: 20px;
    position: absolute;
    
   width: 320px;
	height: 115px;
}
  
 .facebook .link_text,
  .twitter .link_text {
	 top: 50%;
    left: 35%;
    margin-right: -35%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);}
	
.insta .link_text,
  .mail .link_text {
    top: 50%;
    left: 65%;
    margin-right: -65%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

 .twitter .link_text{
	 text-align:center;}
	
.link_bnr p{
	font-size:24px;
	font-weight:bold;
	margin-bottom:10px;
	text-align: center;}
	
		
 .link_bnr p img{
	 max-width:30px;
	 margin-right:10px;}
	 
 .link_bnr .facebook p	{
	color:#1877f2;}
	
.link_bnr .insta p	{
	color:#ac28aa;}
	
.link_bnr .twitter p	{
	color:#1da1f2;}

.link_bnr .mail p	{
	color:#f47e01;}			
	 
  
 
.rotation{
    animation: r1 10s linear infinite;
  
}
 
 
 .rota_wrap{ position:absolute;
	top: 50%;
  left: 50%;
  margin-right: -50%;
  -webkit-transform: translate(-50%, -50%); /* Safari用 */
  transform: translate(-50%, -50%);
    max-width: 680px;
    width: 50%;
	z-index: 100;
	 } 
.manabu{position:absolute;
	top: 50%;
  left: 50%;
  margin-right: -50%;
  -webkit-transform: translate(-50%, -50%); /* Safari用 */
  transform: translate(-50%, -50%);
      width: 20%;
  
  }
  
  
@keyframes r1 {
  0%   { transform: rotate(0deg) ;}
  100% { transform: rotate(360deg); }
}


@media screen and (max-width: 768px){
	.link h2{
	padding-top:30px;
	margin-bottom:20px;}
	
	.link h2 img{
		width:50%;
	}
	
	.link_h {
    font-size: 16px;
	width:95%;
	margin:0 auto 20px;
}

.rota_wrap {
  
    position: relative;
	top:inherit;
     top: inherit; 
     left:inherit; 
     margin-right: inherit;
     -webkit-transform: inherit;
    max-width: 680px;
    width: 100%;
    margin: 0 auto;
}

.link_bnr div.facebook,
.link_bnr div.insta,
.link_bnr div.twitter,
.link_bnr div.mail {
	float:none;
    width: 100%;
    background-size: cover;
    height: 250px;
    position: relative;
}
	
.facebook .link_text, .twitter .link_text,
.insta .link_text, .mail .link_text {
    top: 50%;
    left: 50%;
    margin-right: -50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}	

.link_text{
	font-size:12px;}	

	}

/*---------------------------------------------
フッター
---------------------------------------------*/	
footer{
	background:#757575;}
.foot_bnr{ 
 padding: 30px;}	

.foot_bnr ul li{
	margin:10px;}
	
.copy{
	background:#434343;
	color:#fff;
	text-align:center;
	padding:10px;}
	
	
@media screen and (max-width: 768px){
.copy {
	    margin-bottom: 40px;}}
/*---------------------------------------------
SNSフロートボタン
---------------------------------------------*/	

.sns_side{
	position:fixed;
	top:20%;
	right:0;}
	
.sns_side p{
    margin: 20px 0;
    max-width: 80px;
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3));}	
	

@media screen and (max-width: 768px){
	
	.sns_side{
	position:fixed;
	bottom:0;
	right:0;
	top:inherit;
	width:100%;}
	
.sns_side p{
    background: #6C5555;
    padding: 10px;
    margin: 0;
    width: 100%;
	max-width:none;
 font-weight:bold;
	text-align: center;
}	
	
.sns_side p:nth-child(1){	
 background: #85b9ef;
 color:#1877f2;}
 
 .sns_side p:nth-child(2){	
 background: #ddecff;
 color:#5bbaf5;}
 
 .sns_side p:nth-child(3){	
 background: #ebcbff;
 color:#ac28aa;}
	
.sns_side p img{
	max-width:20px;
	vertical-align: middle;
	margin-right:10px;}
	
	
}







/* page top btn Style ---------------------------------------------------------------- */
.Ptop {
    display: none;
    position: fixed;
    bottom: 50px;
    right: 30px;
}
.Ptop a {
    display: block;
	width:50px;
	height:50px;
	border-radius:100px;
	border:solid 2px #FFF;
	background:rgb(254, 149, 34);
	position:relative;
	box-shadow:0 0 5px rgba(0,0,0,0.45);
	transition:all 0.5s;
}
.Ptop a:hover {
	background:rgba(0,0,0,0.2);
}
.Ptop a::after {
	content:"";
	background-color:#ffffff;
	position:absolute;
	top:23px;
	left:13px;
	width:15px;
	height:2px;
	transform:rotate(-45deg);
}
.Ptop a::before {
	content:"";
	background-color:#ffffff;
	position:absolute;
	top:23px;
	right:13px;
	width:15px;
	height:2px;
	transform:rotate(45deg);
}


/* fade-up ---------------------------------------------------------------- */
.fade-up {
  transition: opacity 0.7s;
  -moz-transition: opacity 0.7s;
  -webkit-transition: opacity 0.7s;
  -o-transition: opacity 0.7s;
  transition: transform 0.7s;
  -moz-transition: transform 0.7s;
  -webkit-transition: transform 0.7s;
  -o-transition: transform 0.7s;
}