@charset "utf-8";
@media only screen and (min-width:769px) {
.sp{
  display: none;
}
	
/*========= album ===============*/
#album ul{
	margin-bottom: 30px;
	padding: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
}


ul.album li:nth-child(2){
    padding-bottom: 100px;
}

ul.album li:nth-child(3){
	padding-bottom: 150px;
}

ul.album li img{
	width: 300px;
}

img.album03{
	width: 350px;
}	
}

@media only screen and (max-width:768px) {
body{
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
	
.pc{
	display: none;
}

#profile h2{
  position: absolute;
   top: -100px;
   left: 15%;
}

/*========= header ===============*/
#top_mv{
  background-image: url(../img/header01_sp.jpg);
}
	
/*========= lead ===============*/	
  .accordion .link{
	  padding: 10px;
}	

/*========= lifestory ===============*/
h2{
  font-size: 40px;
}

.white-bg{
  width: 300px;
}

.timeline-list-item .date {
    width: 40%;
    padding: 10px;
}

.timeline-list-item .content {
    width: 60%;
    padding: 10px;
}

	/*========= slide ===============*/
#slide p{
	display: block;
	width: 85%;
}

/*========= Works ===============*/

#photos{
  margin-bottom: 550px;
}

#photos img{
  width: 40%;
}

#contentsarea{
  width: 90%;
  position: absolute;
   bottom: -550px;
}

#seminararea section{
  padding: 10px;
}

.flex img{
  width: 45%;
}

.seminars li{
  width: 95%;
  max-width: 300px;
  min-width: 250px;
  height: auto;
  padding: 50px 10px 20px 10px;
}

/*========= album ===============*/
#album ul{
	margin: 30px 0;
	padding: 15px;
}
	
ul.album li:nth-child(2){
	text-align: right;	
}
ul.album li img{
	width: 300px;	
}
	
/*========= media ===============*/	
#media h4{
	font-size: 1.1rem;
}
.flexbox{
	padding: 0 20px;
	flex-wrap: wrap;
}
.media-list{
	width: 100%;
}
.main{
	width: 100%;
}
#main img{
	width: 70%;
	margin: 0 auto;
}
	
#graydisplay img{
	width: 90%;
	height: auto;
}
.single img{
	width: 90%;
}

/*========= sns ===============*/
#sns{
	padding-top: 40px;
}	
	
#copyright{
	letter-spacing: -0.0001em;
}

/*========= shrine ===============*/
	#lifestory{
	margin-top: 20px;
}
	#shrine{
		padding: 30px 10px 350px;
	}
	#shrine h3{
		font-size: 1.2em;
	}
	#shrine section img{
	width: 20%;
}
	#shrine ul{
		width: 100%;
	}
	#shrine ul li{
		width: 45%;
	}
	#top-shrine img,
	#top-shrine section{
		width: 100%;
	}
	#top-shrine{
		display: block;
		text-align: center;
	}
	#top-shrine section h3{
		letter-spacing: 0.1em;
	}
	#powerspots h2{
	position: absolute;
	  top: -50px;
	  left: 20%;
}
/*========= banner ===============*/
	#banner01{
		width: 90%;
	}
}

@media only screen and (min-width: 1280px){
  .sp1{
    display: none;
  }

  #work{
    height: 2200px;
    }

}

@media only screen and (max-width: 1279px){
.pc1{
  display: none;
}

h3{
  font-size: 1.5rem;
}

#lifestory section article,
#business section article{
  width: 100%;
}

#lifestory section img,
#business section img{
  width: 95%;
}

.white-bg{
  width: 400px;
}

#business section{
  text-align: center;
}

}


@media (min-width: 740px) and (max-width: 768px){
	#work{
		height: 2850px;
	}
}

@media (min-width: 660px) and (max-width: 739px){
	#work{
		height: 4000px;
	}
}

@media (min-width: 617px) and (max-width: 659px){
	#work{
		height: 4000px;
	}
}

@media (min-width: 480px) and (max-width: 616px){
	#work{
		height: 3800px;
	}
}

@media only screen and (max-width:480px){
	#work{
		height: 3700px;
	}
}


@media (min-width: 769px) and (max-width: 905px){
	ul.album li img{
	width: 250px;
}
}