@charset "UTF-8";
/* CSS Document */

body
{background: rgba(234,234,234,1.00);
font-family: "Avenir Light"
}

#about
{position: relative;
 padding-bottom: 60px;
 box-sizing: border-box;
 min-height: 100vh;
}


header img
{position: fixed;
 width: 200px;
 padding: 20px;
 border: none
}


aside
{position: fixed;
 margin: 300px 20px;
 font-size: 16px;
 line-height: 40px;
 letter-spacing: 2px;
}


h1
{margin: 80px 0px 60px 0px;
 font-size: 23px;
}


p
{font-size: 14px;
 line-height: 25px;
 letter-spacing: 0.5px;
}

.contact
{margin: 35px 0px
	
}


#mail :hover 
{color:#FF5C00;
}


#twitter :hover 
{color:#0084FF;
}


#insta :hover 
{color:#9009A3;
}


ul
{margin: 0;
 padding: 0
}


.main-center
{width: 40%;
 margin: 0px auto;
 padding: 40px 0
 }


.menu a
{text-decoration: none;
 color: rgba(0,0,0,1.00);
}


.menu li
{list-style: none;
}


a:hover 
{color: dodgerblue
}

footer
{text-align: center;
 font-size: 16px;
 line-height: 40px;
 letter-spacing: 2px;
 margin-bottom: 50px ;
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 margin-left: auto;
 margin-right: auto;


}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }


.pcy{ display: block !important; }
.spy { display: none !important; }


.menu{ display: block !important; }
.hamburger-menu{ display: none !important; }



/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 900px) {
	
	
	.pc 
	{ display: none !important; }
    
	
	.sp 
	{ display: block !important;
	  left: 8px}
	
	
	.pcy 
	{ display: none !important; }
    
	
	.spy 
	{ display: block !important; 
	  }
	
	
	.menu{ display: none !important; }
    
	
	.hamburger-menu{ display: block !important; }
	
	
	header img 
	{position: fixed;
     width: 200px;
     padding: 10px;
	 border: none
	}
	
	
	.menu 
	{display: none !important; }
	
	
	.main
	{width: 70vw;
	 margin: 0px auto;
	}
	

	
	section
	{padding: 16px 0;
     margin: 0
	}

	
	.main-center
    {width: 70vw;
     margin: 0px auto;
     padding: 40px 0
	}
	
	
	.Photos-clearfix img
     {width:95vw;
	 vertical-align: bottom
	 }
	

    .Photos-clearfix li:nth-child(2n)
	{margin-right: 0
	}

	
    .clearfix:after
	{ content:"";
    display: block;
    clear:both
    }

	
	.normal img 
    {width:95vw;
     margin: 12px 0px;
     vertical-align: bottom
    } 

	
    .normal iframe
    {width:200;
     margin: 12px 0px;
     vertical-align: bottom
    } 
	
	
	header
	{position:fixed;
     top:0px;
	 left: 0px;
	 background: rgba(256,256,256,1.00);
	 width:  100%;
     height: 48px;
	 z-index: 90;
	}
	
	
	/*四角いボタン*/
	.menu-btn 
	{ position: fixed;
    top: 0px;
    right: 2px;
    display: flex;
    height: 48px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color:#FFFFFF
	}
	
	
	/*ハンバーガー線*/
   .menu-btn span,
   .menu-btn span:before,
   .menu-btn span:after 
	{content: '';
    display: block;
    height: 1.4px;
    width: 30px;
    background-color:#000000;
    position: absolute;
	}
	
	
    .menu-btn span:before 
	{bottom: 8px;
	}
	
    
	.menu-btn span:after 
	{top: 8px;
	}
	
	
	#menu-btn-check:checked ~ .menu-btn span 
	{background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
	}
    
	
	#menu-btn-check:checked ~ .menu-btn span::before 
	{bottom: 0;
     transform: rotate(45deg);
	}
    
	
	#menu-btn-check:checked ~ .menu-btn span::after 
	{top: 0;
     transform: rotate(-45deg);
	}
	
	
	#menu-btn-check 
	{display: none;
	}
	
	
	/*メニュー*/
	.menu-content 
	{width: 100%;
     height: 100%;
     position: fixed;
     top: 0;
     left: 0;
     z-index: 80;
     background-color:#FFFFFF;
	 text-align: center
	}

	
	.menu-content ul 
	{padding: 70px 10px 0;
	}
　　
	
	.menu-content ul li 
	{border-bottom: solid 1px #ffffff;
     list-style: none;
	}
	
	
　　.menu-content ul li a 
	{display: block;
     width: 100%;
     font-size: 30px;
     box-sizing: border-box;
     color:#ffffff;
     text-decoration: none;
     padding: 9px 15px 10px 0;
     position: relative;
	}
	
	
　　.menu-content ul li a::before 
	{content: "";
     width: 7px;
     height: 7px;
     border-top: solid 2px #ffffff;
     border-right: solid 2px #ffffff;
     transform: rotate(45deg);
     position: absolute;
     right: 11px;
     top: 16px;
	}
	
	
	/*メニューベタ*/
	.menu-content 
	{width: 100%;
     height: 100%;
     position: fixed;
     top: 0;
     left: 100%;/*leftの値を変更してメニューを画面外へ*/
     z-index: 80;
     background-color:#D9D9D9;
     transition: all 0.5s;/*アニメーション設定*/
	 overflow: auto;
	}
	
	
	#menu-btn-check:checked ~ .menu-content 
	{left: 0;/*メニューを画面内へ*/
	}
	
	
	li
    {color: rgba(255,255,255,0.00);
	 margin: 60px 0px;
	}


    .menu-content a
	{text-decoration: none;
	 color: #000000;
	 font-size: 40px;
	 margin: 0px auto;
	 text-align: center
	}
	 
	
	a:hover 
	{color:#00AFFF
	}
	
	
	h1
	{font-size:21px;
	text-align: center;
	margin: 40px 0 12px 0;
	font-weight: normal;

	}
	

	p
    {font-size: 16px;
     line-height: 25px;
     letter-spacing: 0.5px;
	 text-align: left
     }

	
	
    .contact
    {margin: 35px 0px
	
}


}