*{
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}

nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 6vh;
    background-color: #252627;
}
/* ナビゲーション　*/
.logo {
    color:white;
    font-size:30px;
    /*font-family: "Sawarabi Gothic";*/
}
.nav-links {
    display:flex;
    justify-content: space-around;
    /* ナビゲーションの表示幅　*/
    width:90%;
    transition:all 0.5s ease-in-out;
}
.nav-links li {
    list-style:none;
}
.nav-links a {
    /* 下線消し*/
    text-decoration:none;
    color:white;
    /*font-weight: bold ;*/
    font-size: 0.80rem;
}
 /* nave マウスポインター時の透明度　*/
 .nav-links  a:hover{
    color:yellow;
    font-size:14px;
	opacity: 1.5;
}

/* spサイズになっていないのでバーガーを消す　*/
.burger {
    display: none; 
    cursor: pointer;

}

.burger div {
    /* バーガーの線の長さと高さ　*/
    width:25px;
    height:3px;
    background-color: white;
    /* 線と線の幅　*/
    margin: 5px; 

}

.nav-active{
    transform: translateX(0%) !important;
}

@media  screen and (max-width: 1960){
  .nav-links {
    width:30%;
}
}

@media screen and (max-width:1010px){
   boby{
    overflow-x: hidden; 
   }
 .nav-links{
    z-index:50;
    position:absolute; 
    right:0;
    height: 85vh;
    top:15vh;
    background-color:#252627;
    /* 縦並び　*/
    flex-direction: column;
    align-items: center;
    width:20%;
    transform: translateX(100%);
  }  
 /* メニューの非表示　*/
   /*.nav-links li {
    background-color:crimson;
    opacity:0; 
   } */

 /* バーガー表示　*/
  .burger {
    z-index:50;
    display: block; 
   
  }
}


html{
	/* バックの色 */
	background-color:rgb(231, 217, 217);
	/*font-size: 100%; /* 16px */
     }

    body{
        /* 文字の色 */
        color:black;
        font-weight: 300;
        /*font-family: "Sawarabi Gothic";*/
    }

    a{	
        /* 下線消し　*/
        text-decoration: none;
        font-size: 0.8rem;
        color:purple;
     }

    p{
       margin-bottom:0px;
       /*max-width:1260px;*/
       margin:10px auto 10px auto ;
       font-size: 0.8rem;
       padding: 0 5%;
       max-width: 100%;
       color:black;
        /*text-align:center;*/
        /* バックグラウンド　カラー　*/
        /*background-color:gold;*/
         font-size: 1.0rem;
     }

    img{
        /* スマホサイズでも縮小される　*/
       max-width: 100%;
     }

    li{
        /* 箇条書きのプロポトの削除　*/
       list-style: none;
       font-size: 1.2rem;
     }

     .wrapper{
        max-width:1960px;
        margin:0 auto 100px auto ;
       /* font-size: 0.9rem;*/
        padding: 0 4%;
     }
       
    .site-title a {
        color:white;
 
    }
    .sec-title{
      font-size: 1.2rem;
      text-align:center;
      /*　タイトルの下の間隔　*/
      margin-bottom: 20px;
    }

 
 /* main */
 /* 写真と下 about のタイトルの間隔　*/
 #kasaneru  {
    /* background-color:chartreuse;*/
    margin-bottom:30px;
 }
 #kasaneru {
    /*width:100%;*/
    position: relative;
    text-align: center;
    }
 #kasaneru img.imagup{
     /*大乗寺*/
    /*background-color:gold;*/
    position: absolute;
    top:40%;
    left:50%;
    transform: translate(-50%,-50%);
    width:450px;
    height: 450px;
   
 }
 
 .mv{
    margin-bottom:50px;
   /* width:100%;
    height: 500px;
    position: relative;*/
 }
 .item{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height:100%;
    /*img-changeという名前のアニメーションを１５秒かけて実行して繰り返す*/
    animation: img-change 15s infinite;
    /*アニメーションの過程で下にある画像が透けて見える可能性があるため*/
    opacity: 0;
 } 

 .item:nth-child(1){
    animation-delay: 0s;
 }
 .item:nth-child(2){
    animation-delay: 5s;
 }
 .item:nth-child(3){
    animation-delay: 10s;
 }


 .item img{
    width:100%;
    height:100%;
    object-fit: cover;
 }
 @keyframes img-change{
    0%{
        opacity: 0;
    }
    10%{
        opacity: 1;
    }
    20%{
        opacity: 1;
    }
    30%{
        opacity: 1;
    }
    40%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
   
 }
  
/* about */
#youkoso ul{
    font-size:20px;
    margin-bottom:10px;
   
}
#youkoso ul li{
    font-size:20px;
    margin-bottom: 1px;
}
/*#youkoso ul li:first-child{
    margin-bottom: 5px;
}*/

/* daijyouji  */
#daijyouji a{
    font-size:20px;    
}
#daijyouji ul{
    font-size:14px;
    margin-bottom:0px;
    
}
#daijyouji ul li{
   
    font-size:20px;
    margin-bottom: 1px;
}
/*#daijyouji ul li:first-child{
    margin-bottom: 5px;
}*/


/* maruyama  */

#maruyama ul{
    font-size:20px;
    margin-bottom:0px;
    
}
#maruyama a{
    font-size:20px;    
}
#maruyama  ul{
     font-size:20px;
    margin-bottom: 1px;

    .flex {
        display: flex; /*横並び*/
      }
      .flex .image {
        width: 600px; /*画像サイズ指定*/
        margin: 0;
        padding: 0;
        overflow: hidden;
        position: relative;
      }
      .flex .text {
        font-size:14px;
        margin: 0 0 0 20px;
        padding: 0;
      }
/*#maruyama ul li:first-child{
    margin-bottom: 5px;
}*/
#maruyama ul {
	/* 写真の横並び　*/
	display: flex;
	/* 折り返し　*/
	flex-wrap: wrap;
	/* 写真と写真の間隔　*/
	justify-content: space-between;
	/* 写真とお知らせ　の間 */
	margin-bottom: 0px;
    text-align: center;
}
#maruyama ul li  img{
	width:31%;
	/* 写真　下スペース　*/
	margin-bottom: 10px;
}
/* 写真サイズ */
*#maruyama ul li img{
    width:100px;
    height:"auto"
   
      }
#maruyama ul li img{
   	cursor: pointer;
	/* 0.3秒かけて浮いてくる*/
	transition: all 0.3s;
   }
/* マウスが当たれば浮かせる 写真を大きく*/
/*#maruyama ul li img:hover{
	/* 写真が1.2倍に*/
/*	transform: scale(1.8,1.8);
    /*フォバーしたとき透ける　*/
    /*	opacity: 0.7;*/
}
/* リンク  */

#link ul{
  
    font-size:20px;
    margin-bottom:0px;
    
}
#link a{    
    font-size:20px;
    margin-bottom: 3px;
}
#link td{
    
    font-size:14px;
    margin-bottom: 3px;
}
/*#daijyouji ul li:first-child{
    margin-bottom: 5px;
}*/



/* akusesu */
#navi ul{
    margin-bottom:0px;
    
}
#navi ul li{
    font-size:20px;
    margin-bottom: 3px;
}
#navi ul li:first-child{
        margin-bottom: 5px;
}
#navi a{
    font-size:20px;
    
}

/* 写真サイズ */
#youkoso img{
    width:300px;
    height:"auto";
    text-align:center;
      }
#youkoso  img{
   	cursor: pointer;
	/* 0.3秒かけて浮いてくる*/
	transition: all 0.3s;
   }
/* マウスが当たれば浮かせる 写真を大きく*/
#youkoso  img:hover{
	/* 写真が1.2倍に*/
	transform: scale(1.8,1.8);
    /*フォバーしたとき透ける　*/
    /*	opacity: 0.7;*/
	
}
#youkoso a{    
    font-size:20px;   
}

 /* works 写真　*/
 
#works ul {
	/* 写真の横並び　*/
	display: flex;
	/* 折り返し　*/
	flex-wrap: wrap;
	/* 写真と写真の間隔　*/
	justify-content: space-between;
	/* 写真とお知らせ　の間 */
	/*margin-bottom: 0px;*/
    text-align: center;
}
#works ul li {
	width:31%;
	/* 写真　下スペース　*/
	margin-bottom:10px;
}
/* 写真サイズ */
*#works ul li img{
    width:300px;
    height:"auto"
   
      }
#works ul li img{
   	cursor: pointer;
	/* 0.3秒かけて浮いてくる*/
	transition: all 0.3s;
   }
/* マウスが当たれば浮かせる 写真を大きく*/
#works ul li img:hover{
	/* 写真が1.2倍に*/
	transform: scale(1.8,1.8);
    /*フォバーしたとき透ける　*/
    /*	opacity: 0.7;*/	
}
#works a{ 
    font-size:20px;  
}
/* お知らせ　*/
/* NEWS */
.news {
	text-decoration: none;
	list-style-position: inside;
	list-style-type: none;
	font-size: 20px;
	color: #4B233C;
	padding-left: 30px;
	padding-top: 0px;
	left: 30px;
    }
.news li {
	list-style-position: outside;
	list-style-image: url(/photo/newspict.gif);
	list-style-type: none;
	line-height: 10px;
	text-decoration: none;
	margin-top: 8px;
	padding-left: 20px;

}
/* news */
   #news dl{
    /* 横並び　*/
    display: flex;
    /*　折り返し　*/
    flex-wrap: wrap;
    /* 上横線　*/
    border-top: 1px solid #c8c8c8;
    /* お知らせの間隔　*/
    margin-bottom: 8px;
   }
   #news dt{
    font-size: 20px;
    width: 20%;
    border-bottom: 1px solid #c8c8c8;
    padding: 5px;
   
   }
   #news dd{
    font-size: 20px;
    width:80%;
    border-bottom: 1px solid #c8c8c8;
    padding: 5px;
   }
    #news a{
        font-size: 20px;
       
   }  
/*  SP */
@media screen and (max-width:1003px){
    /*大乗寺*/
    #kasaneru img.imagup{ 
    /*background-color:aquamarine;*/
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width:200px;
    height: 350px;
 
     }
    }
    
/*  SP */
@media screen and (max-width:600px){
    /*大乗寺*/
    #kasaneru img.imagup{ 
        /*background-color:aquamarine;*/
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        width:100px;
        height: 250px;
     
         }
       
         /* maruyama */
    #maruyama ul {
       
        flex-direction:column ;
   
}

    #maruyama ul li{
    width: 100%;

}
    /* works */
    #works ul {
        flex-direction:column ;
       
    }

    #works ul li{
        width: 100%;

    }
    /* news */
    #news di{
        flex-direction:column;
    }
    #news dt{
        width: 100%;
        border-bottom: none;
        padding-bottom: 0;
    }

    #news dd{
        width: 100%;
        padding-top: 0;

     } 

 /* footer */
    #footer {
       flex-direction: column;
       height: auto;
       line-height:40px ;
       margin-top: 20px;

    }
}
@keyframes navLinksFade {
   0%{
    opacity: 0;
    transform: translateX(50px);
   } 
   100%{
    opacity: 1;
    transform: translateX(0);
   }
}

.toggle .line1{
    transform:rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2{
    opacity: 0;
}
.toggle .line3{
    transform:rotate(45deg) translate(-5px, -6px);
};