@charset "UTF-8";

/* [01] フレーム全体
-------------------------------------------------------------------------------------------------------- */
html {
	height:100%;
    min-height: 100%;
}
body {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
    background: #ffffff;
}
#wrapper {
    width: 100%;
	position:relative;
}
/*@keyframes rotation1{
	0%{ transform:rotate(0);}
	100%{ transform:rotate(360deg); }
}
.bg_circle{
	position:absolute;
	position: fixed;
	top:550px;
	right:-200px;
	width:500px;
	height:500px;
	background-image:url("../../img/bg_circle.png");
	animation:70s linear infinite rotation1;
	z-index: 0;
}
*/
#wrapper a {
    text-decoration: none;
    display: block;
    height: 100%;
}
#wrapper a:link,
#wrapper a:visited {
    text-decoration: none;
}
#wrapper a:hover {
  filter: opacity(70%);
}
/*@media screen and (max-width:767px){
	.bg_circle{
		display: none;
	}
}*/

/* [02] ヘッダー
-------------------------------------------------------------------------------------------------------- */
#header{
	position: relative;
	z-index: 4;
    width: 100%;
    /*border-bottom: 1px solid #040166;*/
	position: fixed;
	top: 0;
	left: 0;
	background-color: #fff;
	height: 60px;
}
#header .inner{
    width:960px;
    margin-bottom: 20px;
    margin:0px auto;
	clear: both;
}
#header .inner li{
    float: left;
    width: 16%;
    text-align: center;
}
#header .inner li a{
	height: 60px;
	display: block;
	padding:20px;
	font-weight: bold;
}

#header .inner li a:hover{
	color: #040166;
}


/* ハンバーガーメニュー */
/* input非表示 */
#check_input {
display: none;
}
/* ハンバーガーボタン */
#menu_btn {
position: fixed;
top: 15px;
right: 15px;
height: 50px;
width: 50px;
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
background-color: #F4F4FC;
cursor: pointer;
}
/* 三本線*/
#menu_btn span,
#menu_btn span::before,
#menu_btn span::after {
content: "";
display: block;
position: absolute;
height: 3px;
width: 25px;
border-radius: 3px;
background-color: #040166;
transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
#menu_btn span::before {
bottom: 8px;
}
#menu_btn span::after {
top: 8px;
}

/* クリックされたら三本線が×に変化する */
#check_input:checked ~ #menu_btn span {
background-color: transparent; 
}
#check_input:checked ~ #menu_btn span::before {
bottom: 0;
transform: rotate(45deg);
}
#check_input:checked ~ #menu_btn span::after {
top: 0;
transform: rotate(-45deg);
}
/* ドロワーメニュー */
#menu_cont {
position: fixed;
top: 0;
left: 100%;
width: 80%;
height: 100%;
background: #F4F4FC;
z-index: 90;
transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

/* ドロワーメニュー外の背景 */
#drawer_back {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 80;
}
/* メニューリストの装飾 */
#menu_cont ul {
padding: 10% 10% 0
}
#menu_cont ul li {
list-style: none;
}
#menu_cont ul li a {
display: block;
width: 100%;
padding: 10px;
margin: 5px;
color:#040166;
text-decoration: none;
}
#menu_cont ul li a:hover {
opacity: 0.7;
}
/* クリックされたらドロワーメニュー表示 */
#check_input:checked ~ #menu_cont {
left: 20%;
}
#check_input:checked ~ #drawer_back {
display: block;
}
@media screen and (max-width:767px){
	#menu_cont ul li a{
		font-size: 20px;
	}
}



/* [04] コンテンツエリア
-------------------------------------------------------------------------------------------------------- */
#contents {
    margin-bottom: 30px;
}
#main {
	position: relative;
    width: 960px;
    margin-right:auto;
    margin-left:auto;
	z-index: 1;
}
@media screen and (max-width:767px){
	#main {
    width: 100%;
}
	#profile,
	#skill,
	#works,
	#sns,
	#contact{
		width: 90%;
		margin-right:auto;
		margin-left:auto;
	}
}

/* [05] フッター
-------------------------------------------------------------------------------------------------------- */
#footer{
	background-color:#040166;
	width: 100%;
	height: 100px;
	position: relative;
	z-index: 4;
}
#footer .inner{
	color: #fff;
	text-align: center;
	padding-top:20px;
}



/* 下層ページサブナビ
-------------------------------------- */