@charset "utf-8";




a:link      { color:rgba(0, 57, 107, 1); text-decoration:none; }
a:visited   { color:rgba(0, 57, 107, 1); text-decoration:none; }
a:hover     { color:rgba(0, 57, 107, 1); text-decoration:none; }
a:active    { text-decoration:none; }







/* min-width: 769px) ***********************************************/
@media screen and (min-width: 769px){
	body{
		background-color:#ffffff;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		height: 100%;
	}
	#particles{
		height: 95%;
		margin: 0;
	}
	section{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 240px;
	height: 258px;
	}
	section p#name{
		font-family:"Times New Roman", "游明朝", YuMincho,"ヒラギノ明朝 Pr6 W6","Hiragino Mincho Pro", "HGS明朝E","メイリオ", "ＭＳ Ｐ明朝","MS PMincho",Meiryo, serif;
		color:#000000;
		letter-spacing: 0.2em;
		font-size: 110%;
		margin: 5px 0 0 0;
		text-align: center;
	}
	section p#skill{
		font-family:"Times New Roman", "游明朝", YuMincho,"ヒラギノ明朝 Pr6 W6","Hiragino Mincho Pro", "HGS明朝E","メイリオ", "ＭＳ Ｐ明朝","MS PMincho",Meiryo, serif;
		color:#000000;
		letter-spacing: 0.2em;
		font-size: 130%;
		margin: 20px 0 0 0;
		text-align: center;
	}
	nav{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		width: 1000px;
		height: 680px;
	}
	nav ul{
		font-family: 'Bad Script', cursive;
		color: rgba(0, 57, 107, 1);
		position: relative;
		height: 500px;
		letter-spacing: 0.2em;
		font-size: 14px;
		
	}

	nav ul li {
	position: absolute;
	top: -10px;
	left: 18px;
	width: 180px;
	height: 180px;
	border-color: #fffacd;
	-moz-border-radius: 180px;
	-webkit-border-radius: 180px;
	-o-border-radius: 180px;
	-ms-border-radius: 180px;
	border-radius: 180px;
	}
	nav ul a{
		margin:0 auto;
	}
	nav ul li a:before,
	nav ul li a:after {
		position: absolute;
		z-index: -1;
		content: '';
		-webkit-transition: all .3s;
		transition: all .3s;
	}
	nav ul li a:hover {
		color: rgba(255, 255, 255, 1);
	}
	nav ul li a:after {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		-webkit-transform: scale(.5);
		transform: scale(.5);
	}
	nav ul li a:hover:after {
		background: rgba(0, 57, 107, 1);
		-webkit-transform: scale(1);
		transform: scale(1);
		border-radius: 100px;
	}

	nav ul li#nav01{
		position: absolute;
		list-style:none;
		top: 0px;
		left: 180px;
	}
	nav ul li#nav02{
		position: absolute;
		list-style:none;
		top: 190px;
		left: 0px;
	}
	nav ul li#nav03{
		position: absolute;
		list-style:none;
		top: 400px;
		left: 160px;
	}
	nav ul li#nav04{
		position: absolute;
		list-style:none;
		top: 20px;
		right: 0;
	}
	nav ul li#nav05{
		position: absolute;
		list-style:none;
		top: 200px;
		right: 0;
	}
	nav ul li#nav06{
		position: absolute;
		list-style:none;
		bottom: 80px;
		right: 50px;
	}
	.tagline {
		margin:0 auto;
	}
	
	.DSmenu{
		display: none;
	}
		.spmenu{
		display: none;
	}

	footer{
		color:#E5C5AB;
		position: absolute;
		left: 50%;
		bottom: 0;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		text-align: center;
		font-family: 'robotobold';
		font-size: 75%;
		letter-spacing: 0.1em;
	}
}




/* max-width: 768px) ***********************************************/
@media screen and (max-width: 768px){


	body{
		background-color:#ffffff;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}
	#particles{
		margin: 0;
		height: 100%;
	}
	section{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		width: 50%;
		height: 90%;
	}
	section h1 img{
		width: 100%;
	}
	section p#name{
		font-family:"Times New Roman", "游明朝", YuMincho,"ヒラギノ明朝 Pr6 W6","Hiragino Mincho Pro", "HGS明朝E","メイリオ", "ＭＳ Ｐ明朝","MS PMincho",Meiryo, serif;
		color:#000000;
		letter-spacing: 0.2em;
		font-size: 14px;
		margin: 5px 0 0 0;
		text-align: center;
	}
	section p#skill{
		font-family:"Times New Roman", "游明朝", YuMincho,"ヒラギノ明朝 Pr6 W6","Hiragino Mincho Pro", "HGS明朝E","メイリオ", "ＭＳ Ｐ明朝","MS PMincho",Meiryo, serif;
		color:#000000;
		letter-spacing: 0.2em;
		font-size: 14px;
		margin: 20px 0 0 0;
		text-align: center;
	}

	.pc{
		display: none;
	}
	.spmenu{
		list-style:none;
	}
	.DSmenu {
		width:300px; 
		background:rgba(255, 255, 255, 1); 
		-webkit-transform:translateX(+300px);	
		transform:translateX(+300px);	
		-webkit-transition:ease .5s;
		transition:ease .5s;
		position:absolute; 
		position:fixed; 
		top:0; 
		right:0;
		z-index:9999;
		height: 100%;
	}
	.DSmenu.action {
		width:250px; 
		background:rgba(255, 255, 255, 0.9);
		-webkit-transform:translateX(0);
		transform:translateX(0);	
	}
	.DSmenu .DSbtn {
		position:absolute; top:0;
		left:-70px; 
		background:#E9CBB4; 
		width:70px; 
		height:70px; 
		-webkit-transition:ease .5s;
		transition:ease .5s;
		cursor:pointer;
	}
	.DSmenu .DSbtn2{
		display: none;
	}
	.DSmenu .DSbtn2.action2 {
		display: block;
		position:absolute; top:0;
		left:-70px; 
		background:rgba(255, 255, 255, 1); 
		width:70px; 
		height:70px; 
		-webkit-transition:ease .5s;
		transition:ease .5s;
		cursor:pointer;
	}
	.wrapper {
		-webkit-transition:ease .5s;
		transition:ease .5s;	
	}
	.wrapper.blur {
		opacity:0.5;
		transform:translateX(-100px);
/*		-webkit-filter: blur(5px);
		filter: blur(5px);*/
	}
	.DSmenu .DSbtn .DSbtn_txt1{
		text-align: center;
		padding: 20px 0 0 0;
		font-size: 14px;
		font-family: 'Bad Script', cursive;
	}
	.DSmenu .DSbtn .DSbtn_txt2{
		text-align: center;
		margin: 15px 0 0 0;
		font-size: 12px;
		font-family: 'Bad Script', cursive;
	}
	.DSmenu .DSbtn2 .DSbtn_txt1{
		text-align: center;
		padding: 30px 0 0 0;
		font-size: 12px;
		font-family: 'Bad Script', cursive;
		letter-spacing: 0.1em;
	}
	.DSmenu nav{
		font-family: 'Bad Script', cursive;
		font-size: 16px;
		letter-spacing: 0.1em;
		margin: 0 0 0 20px;
	}
	.DSmenu nav ul li{
		margin: 30px 0 0 0;
	}
    footer{
    	width: 100%;
		color:#E5C5AB;
        position: absolute;
        bottom: 3px;
		font-family: 'robotobold';
        font-size: 10px;
        letter-spacing: 0.1em;
        text-align: center;
    }
}

#box{
  width: 1000px;
  margin: 0px auto;
  color: #3F2F69;
  text-align: center;
}
.boxin{
  position: relative;
  float: left;
  width: 180px;
  height: 180px;
  margin: 0;
}

#box a{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 180px;
  height: 180px;
  padding: 0px;
  border-radius: 50%;
  border: solid 6px #fff;
  box-shadow: 0 0 0 1px #E5C5AB;
  color: #fff;
  font-size: 18px;
  line-height: 180px;
  text-align: center;
  text-decoration: none;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -o-transition: .5s;
  -ms-transition: .5s;
  transition: .5s;
  z-index: 1;
}
#box a:hover{
  top: -60px;
  left:-60px;
  width: 300px;
  height: 300px;
  font-size: 28px;
  line-height: 300px;
  z-index: 100;
}
#circle1{
  background: #E5C5AB;
   box-shadow:0px 0px 5px 3px rgba(0, 0, 0, 0.2)
                ,0px 0px 5px 3px rgba(0, 0, 0, 0.2) inset;
}
#circle2{
  background: #E5C5AB;
}
#circle3{
  background: #E5C5AB;
}
#circle4{
  background: #E5C5AB;
}
#circle5{
  background: #E5C5AB;
}
#circle6{
  background: #E5C5AB;
}
.boxinng1{
  position: absolute;
		top: 0px;
		left: 200px;
}
.boxinng2{
  position: absolute;
		top: 250px;
		left:0px;
}
.boxinng3{
  position: absolute;
		top: 500px;
		left: 200px;
}
.boxinng4{
  position: absolute;
		top: 0px;
		left: 620px;
}
.boxinng5{
  position: absolute;
		top: 250px;
		left: 820px;
}
.boxinng6{
  position: absolute;
		top: 500px;
		left: 620px;
}


.navigation_s {
  margin: 10px 0;
}
.navigation_s li {
  display: block;
}
.navigation_s li a {
  padding: 6px 2px;
  display: block;
  color:#E5C5AB;
  font-size: 14px;
}