@charset "UTF-8";
/*
Theme Name : love2
*/
/***********all*****/

/*----------------------------------------
1.basic
2.home(header)
3.essay
4.photp
--------------------------*/
/**1.basic-----
-------*/
a{
	text-decoration:none;
}
li{
	list-style:none;
}
body{
	min-width:100vw;
	padding:0;
	margin:0;
	width:100vw;
	overflow:hidden;
}
h1,h2{
	display:flex;
	justify-content:center;
	align-items:center;
}
main{
	margin-top:calc((100vw - 320px) / 140 + 300px);
}
main h2{
	text-align: center;
	font-size:2.5vw;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
main h1{
	text-align: center;
	font-size:calc((100vw - 320px) / 140 + 30px);
	font-family: 'Papyrus',Tahoma, Geneva, Verdana, sans-serif;
}
/*category共通*/
	
.cat-section{
	text-align: center;
}
/*=========2.header  ******************************/
	
.header-sec{
	margin-top:0;
	padding:0;
	width:100%;
	align-items: center;
   position:fixed;
	top:0;
	z-index:9;
}

.header-sec h1{
	font-family: SignRiyathi,'Times New Roman', Times, serif;
	font-size:calc((100vw - 320px) / 140 + 50px);
	width:80vw;
	margin:4vw auto 0 auto;
	text-align: center;
}
nav li{
	font-family:'Times New Roman', Times, serif;
	font-size:calc((100vw - 320px) / 140 + 30px);
	text-align: center;
	padding:0;
	margin:0;
}
nav li:hover{
	border-bottom:5px solid black;
}
nav ul{
	margin:0 auto;
	width:100vw;
	justify-content:space-evenly;
	display:flex;
	padding:0;

}
nav ul a{
	color:black;
	font-weight: bold;
}

/*****4.photo ****************************************************************/
.photo-ul{
	width:100%;
	
}
.photo-li{
	display:flex;
	justify-content:center;	
}
.photo li{
	margin:10% 0;
}
#photo li img{
	width:50vw;
	height:40vw;	
}

.photo-li .li-img{
	width:60%;
	
}
 .photo-li .li-img img{
	background-size: cover;
	transform:translatey(30%);
	transition:opacity 1s,transform 2s;
	transition:2s;
	opacity:0;
	
}
.move .li-img img{
	opacity:1;
 transform:translatey(0);
}
.photo-li .li-text{
	width:30%;
	text-align: center;
	transform:translatex(30%);
	transition:opacity 1s,transform 2s;
	transition:2s;
	opacity:0;
	margin-top:10%;
	
}
.move .li-text{
	transform:translatex(0);
	opacity:1;
}

/*************5.footer***********/
footer{
	
	background-image:linear-gradient(135deg,rgb(240, 247, 240) 0%,rgb(63, 62, 60)100%);

	width:100%;
	height:auto;
	padding:0;	
	color:rgb(63, 62, 60);
	text-align: center;
	
	max-width: 100%;
	
	
}
footer a{
	color:rgb(63, 62, 60);
	margin:0 5%;
	
}
footer h3{
	font-family: 'Segoe print', Tahoma, Geneva, Verdana, sans-serif;
}
.footer-nav a{
	display:block;
}
.footer-nav{
	display:flex;
	justify-content: center;
	height:auto;
}

.footer-nav a{
	display:block;
}



/***********************3.essay****************/
.essay-section{
		width:100%;
	height:auto;
	position:relative;
	padding:10% auto;
}
.essay-section::after{
	content: "";
	background-image:url(img/wagara2.jpeg); 
	background-size: cover;
	opacity: 0.5;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	position: absolute;
	z-index: -1;
  }
  

.essay{
	margin-top:5%;
}
.essay li{
	transition:transform 2s ease-out;
	transform:skew(10deg,0deg );
	
	margin:1% 0;
}


.essay-li{
	display:flex;
	height:30vh;
	background-image:linear-gradient(135deg,rgb(63, 62, 60) 0%,rgb(240, 247, 240)100%);
	justify-content:space-between;
}
.essay-ul{
	width:80%;
	margin:10% auto ;
	padding:5% 0;
}

.essay-li img {
	height:100%;
	width:100%;
}

.essay .li-text{
		width:70%;
		padding:0;
		text-align: center;
	padding:0 2%;
}
.essay a{
		color:black;
}
.essay .li-text p{
	font-size:calc((100vw - 320px) / 140 + 16px);
	width:100%;
	word-break:break-all;
}
.essay .li-text h3{
	font-size:calc((100vw - 320px) / 140 + 18px);
}


.essay li:hover{
	transform:skew(10deg,0deg) translatex(50px);
}
/***************6.pagenation*************/

.pagenation{
	margin:0 auto;
	width:20%;
	text-align: center;
	border-radius: 1%;
	font-weight: 900;
	}
.post-nav{
	font-size:calc((100vw - 320px) / 140 + 14px);
}
.pagenation a{
	color:gold;
}
/**************single****/
#single-essay{
	margin-top:40vh;
}
.main-single{
	width:100%;
	padding:0;
	margin:0 auto;
	margin-top:20%;
}
#single-essay  .single-img{
	width:20%;
	aspect-ratio:4/3;
	margin:0 auto;
}
#single-essay  .single-img img{
	width:100%;
	height:100%;
}
#single-photo,#single-essay{
	text-align: center;
	max-width:100%;
}
#single-photo .single-img {
	width:100%;
	height:auto;

}

.single-title{
	width:20%;
	margin:0 auto;
	text-align: center;
}



#single-photo img{
	width:60%;
	margin:10% auto;
	height:auto;
}
.single-title{
	font-size:calc((100vw - 320px) / 140 + 20px);
}
.single-content{
	font-size:calc((100vw - 320px) / 140 + 16px);
	width:80%;
	margin:0 auto;
}
#single{
	margin-top:10%;
}
/***********post nav*******/
.nav-links{
display:flex;
justify-content:space-evenly;
width:80%;
margin:0 auto;
}
.navigation{
	width:100%;
}
.post-nav{
	
	display:flex;
	justify-content: space-between;
	margin:5% auto;
	
}
#single-essay{
	padding-bottom:10%;
}
/*******************sidebar***************/
#sidebar{
	width:80%;
	margin:0 auto;
	font-size:calc((100vw - 320px) / 140 + 14px);
	display:flex;
	max-width:100%;
	justify-content: space-around;
}
#sidebar a{
	color:black;
}
.mainside ul {
	width:30vw;
	padding-left: 0%;
}
.search-side{
	width:30vw;
	margin-top:10vw;
}
#sidebar a:hover{
	color:gold;
}

@media screen and (max-width: 800px){
	.mainside ul {
		width:40vw;
		display:flex;
	
	}
	#sidebar{
		display:block;
	}
    .search-side{
		width:50vw;
		margin:0 auto;
	}
	 
   }
/******************************************************
 * ***index*****************/


/*******************all**************************/

.container{
    position:relative;
    width:100vw;
	height:100vh;
    padding:0;
    min-width: 100vw;
    margin:0;
	min-height:100vh;
	overflow:hidden;
	
}
.container h2{
	font-family:'Times New Roman', Times, serif;
}
h1,h2{
	display:flex;
	justify-content:center;
	align-items:center;
}
#header-img{
	padding:0;
	margin:0;
	width:100vw;
	height:100vh;
	overflow:hidden;
}

#header-img img{
    position:absolute;
    width:100vw;
	height:100vh;
    opacity: 0;
   /* aspect-ratio: 2/1;*/
    object-fit: cover;
    top:0; 
    padding:0;
    margin:0;
	overflow:hidden;
animation:change-img-anim 30s ease-in-out infinite ;
}
#header-img img:nth-of-type(1){
    animation-delay: 0s;   
}
#header-img img:nth-of-type(2){
    animation-delay: 10s;
}
#header-img img:nth-of-type(3){
    animation-delay: 20s;
}      
@keyframes change-img-anim{
    0%{opacity: 0;}
    16%{opacity: 1;}
    33%{opacity: 1;}
    49%{opacity: 0;}
    100%{opacity: 0;}   
}  


/*header logo*/
#header-logo h2{
	font-family: SignRiyathi,'Times New Roman', Times, serif;
font-size:5.5vw;
}
#header-logo{
	position:absolute;
	top:30%;
	left:25%;
	
}
 
/***********************************************************************/
/************sankaku*********/

/************sankaku*********/

.sankaku12{
	position:absolute;
	width:100%;
	max-width:100%;
	/*aspect-ratio:2/1;*/
	padding:0;
	margin:0;
	overflow: hidden;
	animation: scale 30s ;
    top:0;
    left:0;
	height:100%;
	max-height:100vh;
}
.sankaku{
	animation: left 30s ;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:-50%;
	padding:0;
	margin:0;
	  transform:skew(45deg,0deg) ;
	
	 background-image:url(img/wagara2.jpeg); 
	
}
.sankaku2{
	position:absolute;
	top:0;
	left:50%;
	padding:0;
	margin:0;
	width:100%;
	height:100%;
	 transform:skew(45deg,0deg);
	animation: right 30s ;
	 background-color: black;
}
/************************************************
 * topz*****************************/
.topz{
	position:absolute;
	top:30vh;
	left:0;
	width:100%;	
}
/*******************
**profile**/
.profile-hover img{
	width:10vw;
	aspect-ratio:1/1;
	border-radius:50%;
}
.profile{
    position:absolute;
	width:30vw;
	text-align: center;
	top:0;
	right:0;
	
}
.pro h2{
	width: 20vw;
	border:1px solid white;
	
	color:white;
	animation: opa 30s  ;
	opacity:1;
	position:absolute;
	font-size:3vw;
}
.profile-hover{
	color:white;
	opacity:0;
	width: 20vw;
	position:absolute;
	border-radius: 1%;
	transition:opacity 2s  ease-out;
}
.profile:hover  .profile-hover{
	opacity:1;
}
.profile:hover .pro h2 {
	opacity:0;
}
.skip h2{
	position:absolute;
	width:15vw;
	height:4vw;
	border-radius:1vw;
	background-image:linear-gradient(135deg,black 0%,gold 100%);
	top:50vh;
	right:5vw;
	font-size:3vw;
}
.skip a{
	color:black;
}
.skip h2:hover{
	background-color:black;
	border:1px solid white;
	color:white;
}
.skip h2:hover a{
	color:white;
}
/***********************************************************
**********logo**********/
.topz h2{
	font-size:3.5vw;
}
.logo h1{
	font-family: SignRiyathi,'Times New Roman', Times, serif;
	font-size:7vw;
	color:gold;
	width:80vw;
	text-align:center;
	margin:0 auto;
	animation:right 30s,opa 30s;
	animation:opa-slide 30s ease-in-out;

}
.logo h2{
	color:gold;
	width:50vw;
	font-family:'Times New Roman', Times, serif;
	text-align:center;
	margin:0 auto;
	animation:opa-slide 30s ease-in-out;;
}


.sankaku12 h2{
	font-family:'Times New Roman', Times, serif;
	font-size:40px;
	display:flex;
	justify-content: center;
}
.logo{
	transform:skew(-45deg,0deg) ;
}


/***************************************
***********navi**********/	


.top-navi{
	display:flex;
	justify-content:space-between;
	
}
.top-navi a{
	margin:10%;
}
.right-top{
	display:flex;
	justify-content:space-evenly;
	margin:0 auto;
	
}

.top-navi h2{
	border:1px solid gold;
	width:10vw;
	aspect-ratio:4/1;
	color:gold;
	animation: opa 30s  ;
	opacity:1;
	margin:0 auto;
	text-align:center;
}
.top-navi h2:hover{
	background-color:gold;
	color:black;
}







/***************************************************/
@keyframes left {
    from {
      transform: translatex(-100%) skew(45deg,0deg);
      opacity:0;
    }
    to {
      transform: translatex(0) skew(45deg,0deg) ;
      opacity:1;
    }
  }
  @keyframes right {
    from {
      transform: translatex(100%) skew(45deg,0deg);
     opacity:0;
    }
    to {
      transform: translatex(0) skew(45deg,0deg) ;
      opacity:1;
    }
  }
  @keyframes scale {
    from {
      transform: scale(3,1);
     opacity:0;
    }
    to {
      transform:scale(1,1) ;
      opacity:1;
    }
  }
  @keyframes opa {
    from {
     opacity:0;
    }
   
	to{
		opacity:0;
	}
  }
@keyframes opa-slide {
    from {
     transform:translatex(50%);
      opacity:0;
    }
    to {
      transform:translatex(0);
      opacity:1;
    }
  }