*{
    margin: 0;
    padding: 0;
}
*, *::before, *::after {
  box-sizing: border-box;
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
  }
  ol,ul {
    list-style: none;
  }
  a {
    transition: color 0.3s;
  }
header{
    width: 100%;
   padding: 2em 6em 0em;
    margin: auto;
    box-sizing: border-box;
    display: flex;
    justify-content:space-between;
    align-items: center;
} 

.body{font-family: "Noto Sans JP", sans-serif;}

.logo{
  width:100%;
  display:flex;
  align-items: center;
}
.logo1 img{
 width:80%;
}
nav{
    width: 25%;
}
nav ul{
    display: flex;
    list-style-type: none;
    justify-content: space-around;
}
nav ul li {
    text-decoration: none;
    color: #999;
  transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  font-family: "Helvetica,Arial,sans-serif" ;

}
.moji::first-letter {
  color:black;
  font-size: 1.2rem;
}
.big{color:black;
font-size: 1.2rem}

.first-v{ width: 66%;
  margin:0 auto;
  margin-top: 2em;
  margin-bottom: 1em;
display: flex;
}
.sun{width:100%; height:100%;}
.micosan{
    width:30vh;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }
    img {
      filter: drop-shadow(5px 5px 5px white) 

}
article{width:80%;
margin: 0 auto;}
/* padding-bottom: 2em;} */

.link{
width:90%;
margin:auto;
padding-left: 6em;}
.icon{color:#999;}
.yuko img {width:2em;}

.top {height: 100vh;}

/*↓↓↓画面幅640px以下の記述↓↓↓*/
@media screen and (max-width:640px){
nav ul{flex-direction: column;}
.first-v { width: 80%;
  margin: auto;
flex-direction: column; }

.micosan{
  width:21vh;
  position: absolute;
  top:  80%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
/* .section-box1{margin-top: 300px;}  */
.photo1{width:25vh!important;} 
.photo2{width:30vh!important;} 
.photo3{width:11vh!important;}
.photo4{width:12vh !important;}

.jinjyaphotos{text-align: center;}

h2 {
  font-size: 3vw;
  font-family: Helvetica,Arial,sans-serif;
}
}

/*↑↑↑ここまで画面幅640px以下の記述↑↑↑*/
.header { 
  width:100%;
   display: flex; 
   justify-content: center; 
   align-items: center; 
}  
.gNav {
  right: 0; 
  top: 0;
  z-index: 1000;
  width: 100%;
}
.gNav ul {
  width: 80%;
  margin: 0 auto;
  display: flex;
  padding-bottom: 0%;
  justify-content: right;
}

Nav ul li{ 
background-color: #fff;
display: inline-block;
padding: 0 4em 0 3em ;
border-radius: 50%}

Nav {margin-top: 2vw}
Nav ul li:nth-child(1) 
{margin-right: 30px;
 margin-top: 20px;
}
Nav ul li:nth-child(2) 
{margin-top: 5px;
}

Nav ul li:nth-child(3) {margin-top: 16px;
  margin-right: 30px;
  }
Nav ul li:nth-child(4) {margin-top: 15px;
  margin-right: 30px;
  }
Nav ul li:nth-child(5) {margin-top: 7px;
  margin-right: 10px;
}
Nav ul li:last-child{margin-top:13px;
}
.link {padding-bottom: 20px;
}
.gNav a {
  display: block;
  text-decoration: none;
  color: #999;
}
.link a {
  text-decoration: none;
  color:black; ;
}

.gNav a:hover,.link a:hover {
  color:#e2afaf 
  
}

/*↓↓↓ナビの下線の記述↓↓↓*/
.gNav a::after{
  content: "";
  display: block;
  border-top: solid 2px #e2afaf;
  margin-top: 0.3em;
  transform: scaleX(0);
  transition: 0.3s;
  
  /* position: relative; */
  

}
.gNav a:hover::after{
  transform: scaleX(1.2);
  
}
/*↑↑↑ここまでナビの下線の記述↑↑↑*/
.section-box1{
height: 100vh;
width:100%;
margin: 0 auto;
box-sizing: border-box;
padding-top: 15em;
}
.text{width:80%;margin: 0 auto;
}

#festival{margin-bottom: 1em;}

h2{padding: 40px 70px; text-align: center;
}
.footer {
  text-align: center;
  
  background-color: #ececec;
}

/*↓↓↓トップに戻るボタン↓↓↓*/
.topBack a {
  display: block;
  padding-left: 0.2%; 
  width: 10vh;


  border-radius: 50%;
  background-color: #ececec;
  font-size: 2.6em;
  text-decoration: none;
  color: #999;
  margin: 0 auto;
  transform: translateY(-35px);
} 
.topBack a:hover {
  color: #fff;
}
/*↑↑↑トップに戻るボタン↑↑↑*/

/* SanMarinojinjya */

  
.jinjyaphotos{display:flex;
  /* justify-content: space-evenly; */
  justify-content: center;
  box-sizing: border-box;
  flex-wrap: wrap;}
.photo1{width:300px; margin:20px;}
.photo2{width:550px;}
.photo3{width:140px; rotate: -20deg ;
  translate: 50px -5px;}
.photo4{width:120px;margin-top:200px;rotate: 5deg ;
  translate: 50px 30px;
  scale: 1.3; }
.photo1,.photo2,.photo3,.photo4{
    color: #333333;
    background-color: #dddddd;
    font-size: 30px;
    border-radius: 2%;
    box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4); 
}


/* ↓↓↓画面幅640px以下の記述↓↓↓ */
@media screen and (max-width:640px) {
.photo4{width:20vh;translate:0px -70px;}  
.o_photos{text-align: center !important;
 }
 .gif{padding-bottom: 2px;}
 .ophotossecondg{margin-bottom: 30px;}
 .ophotob{padding-bottom:1px;}
 .ophotoa{padding-bottom:1px;}
.section-box2{margin-top: 100px;}
.section-box1{margin-top: 100px;}


}




/* Festival */
.section-box2{padding-top: 30em;
width:100%;}
.PhotoG1,.PhotoG2{display: flex;flex-wrap: wrap; justify-content: space-evenly}

.Fphoto1,.Fphoto2,.Fphoto3,.Fphoto4,.Fphoto5,.Fphoto6{width:290px; height:200px;object-fit:cover;border-radius: 2%;margin: 0.05em;
}
.yt{border-radius: 2%}
.video {
  width: 200px; height:100%;border-radius: 2%;;object-fit: cover;margin: 2em;
}
.photovideo{display: flex;justify-content: center;flex-wrap: wrap;padding-bottom: 2em;
}


/* Omikoshi */
.section-box3{padding-top: 15em;}
.ophotoa{width:260px;height:180px;  object-position: 35% 65%; object-fit:cover;border-radius: 2%;}
.ophotob{width:180px; height:180px; object-fit: cover;border-radius: 2%;object-position: 80% 20%;}
.ophotoc{width:450px; height:210px; object-fit: cover;border-radius: 2%;;}
.ophotod{width:430px; height:390px; object-position: 100% 0%;object-fit: cover;border-radius: 2%;}
.gif{width:150px;height: 300px; border-radius: 40%;margin-top: 150px;
 
}
.o_photos{display:flex;
  justify-content: space-evenly;
  position: relative;
margin-top: -30px;
flex-wrap: wrap;}
.ophotoe{width:320px; object-fit: contain;border-radius: 2%;
position: absolute;
top:75%;
top:25%;
left:51%;
z-index: 999;
transform: translate(-50%,-50%);}
@media screen and (max-width:640px) {
.
.ophotoe{top:42%;}
}

.ophotossecondg{padding: 3px;} 

.monogatari{display: flex;width:85%;margin: auto;
padding-top: 2em;}

.smap {
	float: right;
	margin: 2em;
	width: 10%;
}
/* Map */
.section-box4 {padding-top: 15em;}
.maps{display: flex;
  justify-content: space-evenly;
flex-wrap: wrap;
 text-align: center;
}

@media screen and (max-width:640px){
  .ophotosfirstg,.monogatari{flex-direction: column;justify-content: center;}
.smap{width:50%;margin: 0 auto;padding-top: 2em;}
.section-box4{
  width:90%;
  padding: 10vh;
} 
h2 {font-size: 3vh !important;
font-family: Helvetica !important,Arial, sans-serif}

.section-box5{margin-top: 0px;}

}







/* Instagram */
.section-box5{padding-top: 15em;margin-top: 150px;}
  .yt2{border-radius: 2% ;padding-bottom: 3px}
 
.insta{display: flex;justify-content: space-evenly;flex-wrap: wrap;}

.instaqr{width:150px;object-fit: contain;}

.mirai{padding-left: 5em;}


@media screen and (max-width:640px){.section-box5{margin-top: 70px;
width:90%}
}



.ml3 {
  font-weight: 900;
  font-size: 2em;
  letter-spacing: 0.2rem;
  font-family: Helvetica,Arial,sans-serif;
 
}

html { 
 overflow-y: scroll;
  /* scroll-behavior: smooth; */
}

.header{position: sticky;
  z-index: 9999;
top: 0;
width: 100%;}

.red {
  color:#ff007f;
}