@charset "utf-8";


*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
} 



*:after {
display:block;
clear:both;
} 


html, body {
height: 100%;
scroll-padding-top:300px;
}

@media only screen and (max-width: 768px) { /*sp*/
html, body {
height: 100%;
scroll-padding-top:210px;
}
}

article{
}

.inner{
	max-width:1200px;
	margin:0 auto;
}



section{
	margin-bottom:4em;
	
}




body{
margin:0;
padding:0;
font-family: 'GFS Didot', serif, "メイリオ", "Meiryo","游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",  sans-serif;
/*font-family: 'Antic Didone', serif;*/
font-weight:300;
color: #000;
width:100%;
/*background:#fff;
background:#11254F;
background:#283651;
background:url(../img/bg.svg) #283651;*/
background:url(../img/bg.svg) rgba(34,46,68,1);
background-size:400px;
position:relative;
}

/*
#wrap{
position:relative;
overflow:hidden;
width:100%;

}*/


header{
position:fixed;
width:100%;
min-height:150px;
/*background-image:url(../img/resu1.png),url(../img/resu.png) ;
background-position:0 0, right -100px;
background-size:340px auto,100%;
background-repeat:no-repeat;
border:1px solid #C00;
z-index:999;*/
z-index:990;
scroll-padding-top:0;

}
header::before{
	content:"";
	width:100%;
	height:90px;
	position:absolute;
	top:0;
	left:0;
	background-image:url(../img/resu.png) ;
background-position:right 0;
background-size:auto 90px;
/*background-size: cover;*/
background-repeat:no-repeat;
z-index:990;
}

header::after{
	content:"";
	width:210px;
	height:200px;
	position:absolute;
	top:0;
	left:0;
	background-image:url(../img/resu1.png) ;
background-position:0 0;
background-size:210px auto;
/*background-size: cover;*/
background-repeat:no-repeat;
z-index:990;
}



@media screen and (min-width: 1200px) {
/*	
	header{
		height:180px;
}
	
	header::before{
	content:"";
	width:100%;
	height:180px;


}

	*/
	
}


h1{
	position:absolute;
	top:12px;
	left:15px;
z-index:999;
}
h1 img{
	width:120px;
	height:auto;
	/*transform: rotate(0deg);*/
	transform: rotateY(0deg);
	transition: .3s;
opacity:0.95;
}

h1 a{
	display:block;
	width:120px;

	text-decoration:none!important;
color:#333!important;
}

h1 img:hover{
/*transform: rotateY(-180deg);*/
opacity:1;
}

#gnavi{
	position:absolute;
	right:0px;
	top:0px;
	width:100%;
	height:100%;
	text-align:right;
	overflow-y: hidden;
	overflow: hidden;
}

#gnavi ul{
	margin-top:10px;
}
#gnavi li{
	text-align:left;
}


#gnavi label.tgLabel {
	position:fixed;
	right:10px;
	top:10px;
	padding: 0 ;
	display: block;
	cursor: pointer;
	z-index:999;
}

#gnavi label.tgLabel::before{
	content:url("../img/btn_menu_open.png");
	vertical-align:middle;
	/*transition: .5s;*/
}

#gnavi input {		
	display: none;
}


#gnavi input:checked + label.tgLabel::before{
	content:url("../img/btn_menu_close.png");
	vertical-align:middle;
}



#gnavi .gnavi_content {	
	position:fixed;
	overflow: hidden;
	opacity: 0;
	transition: .6s;
	top:0;
	left:100vw;
	width:100%;
	height:100%;
 padding-top:220px;
	background:rgba(255,255,255,0.9);
	padding-bottom:60px;
	z-index:900;
/*	background:url(../img/ayana_logo.png) center 12px no-repeat rgba(255,255,255,0.9);*/
	background-size: 50px 50px;
}


#gnavi input:checked + .tgLabel + .gnavi_content {
	height:100%;
	opacity: 1;
	z-index:900;
	left:0;
}

#gnavi .tgLabel + .gnavi_content li a{
	display:block;
	padding:0.5em 1em 0.5em 3em;
	color:#D63C13;
	text-decoration:none;
	font-size:140%;
	font-weight:400;
		transition: .5s;
}

#gnavi .tgLabel + .gnavi_content li a:hover{
	letter-spacing:0.2em;
	padding-left:4em;
}



@media only screen and (min-width: 769px) { /*pc*/

header::before{
	content:"";
	width:100%;
	height:150px;
	position:absolute;
	top:0;
	left:0;
	background-image:url(../img/resu.png) ;
background-position: right 0;
background-size:auto 130px;
/*background-size: cover;*/
background-repeat:no-repeat;
z-index:990;

}

header::after{
	content:"";
	width:340px;
	height:300px;
	position:absolute;
	top:0;
	left:0;
	background-image:url(../img/resu1.png) ;
background-position:0 0;
background-size:340px auto;
/*background-size: cover;*/
background-repeat:no-repeat;
z-index:990;

}

h1 img{
	width:200px;
	height:auto;
}

h1 a{
	display:block;
	width:200px;
	height:190px;
}

	h1::before{
	content:url(/img/kome.png);
	width:100px;
	height:200px;
	position:absolute;
	top:18px;
	left:-100px;
	z-index:999;
	transform: rotate(-25deg);
	transition: .3s;
}

@media (any-hover:hover) {
	

h1:hover::before {
	left:-35px;
	transform: rotateY(0deg);
}

	
}


@media (any-hover:none) {/*hover使えないタブレット用*/

	h1::before{
	left:-35px;
	transform: rotateY(0deg);
	}
	
}



#gnavi .tgLabel + .gnavi_content li a{
	display:block;
	padding:1em 1em 1em 3em;
	color:#D63C13;
	text-decoration:none;
	font-size:140%;
	font-weight:400;
	letter-spacing:0.1em;
	transition: .5s;
}

#gnavi .gnavi_content {	
	position:fixed;
	overflow: hidden;
	opacity: 0;
	transition: .6s;
	top:0;
	left:100vw;
	width:50%;
	height:100%;
 padding-top:150px;
	background:rgba(255,255,255,0.9);
	padding-bottom:60px;
	z-index:900;
	font-family: 'Antic Didone', serif;

}

#gnavi input:checked + .tgLabel + .gnavi_content {
	height:100%;
	opacity: 1;
	z-index:900;
	left: calc(100vw - 50%);
}

#gnavi label.tgLabel {
	position:fixed;
	right:20px;
	top:20px;
	padding: 15px 15px 0 ;
	display: block;
	cursor: pointer;
	z-index:999;
}





}

#mv{
overflow:hidden;
}

#mv img{
	width:100%;
	height:auto;
	opacity:0;
}

@media only screen and (min-width: 769px) {

#mv{
width:100%;
height:700px;
background:url(../img/ori.jpg) no-repeat;
}




}

@media only screen and (max-width: 768px) {
	
#mv{
width:100%;
height:500px;
background:url(../img/ori_sp.jpg) no-repeat;
}
}

#mv{
background-position: center;
background-size: cover;
/*display: flex; 
flex-direction: column; 
justify-content: center; 
align-items: center;*/
margin-bottom:3em;

}

main h2,h3,h4,p,ul,dl{
	color:#F1F2F5;
}



/**/
.profile {
	text-align:center;
	padding-bottom:50px;

}

.profile h2{
	margin-bottom:1em;
/*	position:relative;*/
}

.profile h2 span{
	display:block;
	font-size:60%;
}


.profile h2::before{
	width:429px;
	height:15px;
	content: url(line.svg);
	display:block;
	margin:0 auto 25px;

	}
	

	.profile p a:hover{
		letter-spacing:0.1em;
	}


	
#pagetop{
	position:fixed;
	bottom:20px;
	right:20px;
	width:80px;
	height:80px;
}

#pagetop a{
	display:block;
}

#pagetop img{
	width:100%;
	height:auto;
transition: .5s;
}


#pagetop:hover img{
	-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
	

	
	@media only screen and (max-width: 768px) { /*sp*/

.profile h2::before{
	width:350px;
	height:35px;
	content: url(line_sp.svg);
	display:block;
	margin:0 auto 25px;
	overflow:hidden;

	}
	
	#pagetop {
	position:fixed;
	bottom:10px;
	right:10px;
	width:50px;
	height:50px;
}


}

.profile h3{
font-size:200%;
margin-top:0.5em;

}


.profile figure{
	width:200px;
	height:200px;
	border-radius:100%;
	overflow:hidden;
	margin:0 auto;
}

.profile figure img{
	width:100%;
	height:auto;
}


.profile ul{
	margin-bottom:2em;
}

.profile li{
	display:inline-block;
	margin:20px;
}

.profile li a{
	display:block;
	transform: rotate(0);
    transition: .3s;
}

.profile li a:hover{
	transform: rotate(-20deg);
}

	

.btn{
	width:100%;
text-align:center;
margin:2em 0;

}

.btn a{
	width:80%;
	max-width:400px;
	display:block;
padding:1em 2em;
/*background: rgba(0,0,0,0.8);*/
background:url(/img/btn_ya.png) 95% center no-repeat #C30;
color:#fff;
text-align:center;
margin:1em auto;
text-decoration:none;
border-radius:5px;
transition:0.5s ease;

}

.btn a:hover{
background:url(/img/btn_ya.png) 95% center no-repeat #F60;
	/*letter-spacing:0.1em;*/
}





	




footer{
	width:100%;
background: rgba(0,0,0,0.8);
color:#fff;
text-align:center;
padding:1em;
}

footer small{
}



@media (any-hover:hover){/*hover有効*/
}

.fuwa{
  animation: fuwa 2.8s infinite ease-in-out .7s alternate;
  display: inline-block;
  transition: 1.5s ease-in-out;
		transform-origin:	center top ;
}

@keyframes fuwa{
  0% {
    transform:translate(0, -7) rotate(0deg);
  }
  100% {
     transform:translate(0, 0) rotate(-7deg);
 }
}


.fuwa2{
/*animation: fuwa2 7s infinite ease-in-out .7s alternate; */
animation: fuwa2 7s infinite ease-in-out .7s alternate-reverse; 
  transition: 1.5s ease-in-out;
		transform-origin:	center top ;
}

@keyframes fuwa2{
   0% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(-0.1deg); }

			
}


.fuwa3{
  animation: fuwa3 2.5s infinite ease-in-out .7s alternate;
  display: inline-block;
  transition: 1.5s ease-in-out;
		transform-origin:	center top ;
}

@keyframes fuwa3{
	  0% {
  transform:translate(0, -7) rotate(0deg);
  }
  100% {
  transform:translate(0, 0) rotate(-7deg);
 }
}




/*navi*/

.naviwork{
text-align: center;
padding:2em;
margin:1em;
}

.naviwork ul{
display: flex;
align-items:flex-end;
column-gap: 1em;
width:100%;
}
.naviwork li{
padding:0.8em;
flex:1 1 50%;
border-bottom:1px solid rgba(255,255,255,0.3);
position:relative;
}


.naviwork li.icright::after{
  content: '';
  width: 20px;
  height: 20px;
  border: 0px;
		border:none;
  border-top: solid 2px rgba(255,255,255,0.3);
  border-right: solid 2px rgba(255,255,255,0.3);
  -ms-transform:  translateX(-50%) rotate(45deg);
  -webkit-transform: translateX(-50%) rotate(45deg);
		transform: translateX(-50%) translateY(20px) rotate(45deg);
  position: absolute;
  bottom: 24px;
  right: 0px;

  /*background-color:#1F2A3F;*/
}

.naviwork li.icleft::after{
  content: '';
  width: 20px;
  height: 20px;
  border: 0px;
		border:none;
  border-top: solid 2px rgba(255,255,255,0.3);
  border-right: solid 2px rgba(255,255,255,0.3);
  -ms-transform:  translateX(-50%) rotate(-135deg);
  -webkit-transform: translateX(-50%) rotate(-135deg);
		transform: translateX(-50%) translateY(20px) rotate(-135deg);
  position: absolute;
  bottom: 24px;
  left: 15px;

  /*background-color:#1F2A3F;*/
}

.naviwork li:hover::after{
 /* -ms-transform:  translateX(-50%) rotate(45deg);
  -webkit-transform: translateX(-50%) rotate(45deg);
		transform: translateX(-50%) translateY(20px) rotate(45deg);/*-315*/
  position: absolute;
  bottom: 24px;
  right: 0%;
*/
}



.naviwork li.on::after{
  content: '';
  width: 22px;
  height: 22px;
  border: 0px;
  border:none;
  border-top: solid 2px rgba(255,255,255,0.3);
  border-right: solid 2px rgba(255,255,255,0.3);
  -ms-transform:  translateX(-50%) rotate(135deg);
  -webkit-transform: translateX(-50%) rotate(135deg);
		transform: translateX(-50%) translateY(20px) rotate(135deg);
  position: absolute;
  bottom: 10px;
  left: 50%;
background-color:#1F2A3F;
  
}


.naviwork li.on::before{
 content: '';
  width: 1px;
  height: 20px;
  border-left: 2px solid rgba(255,255,255,0.3);
 /* border-bottom: 2px solid rgba(255,255,255,0.3);*/
 /* transform: rotate(-45deg);*/
display:inline-block;
/*  position: absolute;
  bottom: 40px;
  left: 50%;*/
}

.naviwork li a{
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
transition: 0.6s;
display: block;
text-decoration: none;
letter-spacing:0.1em;
color:rgba(253,224,139,1.00);
position: relative;

}

.naviwork li a:hover{
letter-spacing:0.1em;
color:#D63C13;
}

@media only screen and (max-width: 799px) {/*sp*/
.naviwork{
padding:2em 0;
margin:5px;
font-size:80%;
line-height:120%;
z-index: 1;
}

.naviwork li.icright{
padding-right:20px;
}
.naviwork li.icleft{
padding-left:20px;

}

.naviwork li a{
letter-spacing: 0.05em;
z-index: 10;
}


}


/******/

a.ic{
position: relative;
display: inline-block;
padding-left:20px;
}

a.ic::before{
  content: '';
  width: 10px;
  height: 10px;
  border: 0px;
  border:none;
  border-top: solid 2px rgba(255,255,255,0.3);/*D63C13;*/
  border-right: solid 2px rgba(255,255,255,0.3);
  -ms-transform:  translateY(-50%) rotate(45deg);
  -webkit-transform: translateY(-50%) rotate(45deg);
		transform: translateX(0) translateY(-50%) rotate(45deg);
  position: absolute;
  top: 50%;
  left: 0;
/*background-color:#1F2A3F;*/
}


a.icyoutube{
position: relative;
display: inline-block;
padding-left:20px;
background:url("../img/YouTube-social-circle_red_48px.png") left center no-repeat;
background-size: 15px 15px;
}

a.ic:link,a.icyoutube:link{
text-decoration: underline;color:rgba(253, 224, 139, 1.00);
-moz-transition: 0.3s ease;
-webkit-transition:  0.5s ease;
-o-transition:  0.3s ease;
-ms-transition:  0.3s ease;
transition: 0.3s ease;}
a.ic:visited,a.icyoutube:visited  {text-decoration: underline;color:rgba(253, 224, 139, 1.00);}
a.ic:hover,a.icyoutube:hover { text-decoration: underline;color:#D63C13;}