@charset "utf-8";
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 62.5%;
  color: #00014B;
}
body {
  background: url("../img/utyu.png")no-repeat fixed center top;
  background-size: cover;
  background-color: #3300cc;
  text-align: center;
  font-size: 1.4rem;
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  line-height: 1;
}

h1 {
  color: #CC0099;
  letter-spacing: 1.5rem;
  margin: 7% 0 0;
  padding: 7% 0 0;
  font-size: 3rem;
}

.topimg {
  box-sizing: cover;
  width: 25%;
  margin: -9% auto 7%;
}

.proftop {
	width: 36%;
}

.topimg img {
	width: 100%;
}

/*ホームロゴのスタイル*/

.header { 
	display: none;
	height: 15%;
	width: 100%;
	background-color: rgba(30, 0, 204, 0.9);
	position: fixed;
	top: 0;
	/*z-index: 1000;*/
}

.home {
  width: 13%;
  height: 50px;
  position: fixed;
  top: 3%;
  left: 2%;
  z-index: 20;
}
.home img {
  width: 100%;
}
.home .moon {
  width: 30%;
  position: absolute;
  top: 0;
  left: 102%;
  transition: transform 0.4s;
  transition: -webkit-transform 0.4s;
}
.home .moon img {
  width: 100%;
}
.moon:hover {
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
}
/*メニュー三本線*/
.menu-icon {
  cursor: pointer;
  position: fixed;
  top: 2%;
  right: 2.5%;
  z-index: 1020;
  width: 3.6%;
}
.menu-icon-line {
  background-color: #fff;
  width: 100%;
  height: 3px;
  margin: 30% 0 0;
}
/*展開メニュー*/
.menu-box {
  position: fixed;
  width: 100%;
  /*background-color: #d3d3d3;*/
  top: 0;
  right: 0;
  z-index: 1010;
}
.menu {
  position: fixed;
  display: none;
  width: 18%;
  height: 160px;
  top: 15%;
  right: 0;
  background: rgba(255, 255, 255, 0.7)
}
.menu .menu-list {
  list-style-type: none;
  margin: 1.2% .8% 1.2%;
}
.menu .menu-list a {
  display: block;
  margin-left: 8%;
  text-align: left;
  padding-top: 10px;
  padding-bottom: 5px;
  color: #000;
  text-decoration: none;
  font-size: 2.4rem;
  border-bottom: 3px dashed transparent;
}
.menu .menu-list a:hover {
  border-bottom: 3px dashed #cc0099;
}
/*現在のページを示すメニュー*/
.now {
  background-color: rgba(0, 0, 0, 0.3);
}
.now a {
  cursor: default;
}
.menu .now a:hover {
  border-bottom: 3px dashed transparent;
}
/*****************************作品のスタイル****************************/
.works {
  width: 76%;
  margin: 0 auto 2%;
  overflow: hidden;
}
.works-bigbox {
  width: 30%;
  float: left;
  margin-left: 2.5%;
  margin-bottom: 2%;
  /*overflow: hidden;*/

}
.works-bigbox:nth-of-type(3n) {
  float: right;
  margin-left: 0;
  margin-right: 2.5%;
}
.works-image {
  display: block;
  width: 100%;

}
.works-boxtext {
  font-size: 1.8rem;
  padding: 6% 0;
  color: #fff;
  font-weight: normal;
}
/*ズームのスタイル*/
.works-box {
  width: 100%;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(255, 255, 255, 1);
}

.works-box:hover {
  box-shadow: -6px 0px 20px rgba(204, 0, 153, 0.9),
		         6px 0px 20px rgba(204, 0, 153, 0.9);
  transition: .7s;
}

.works-box img {
  transition: 1s all;

}
.works-box img:hover {
  transform: scale(1.1, 1.1);
  transition: 1s all;

}
/*********************************プロフィールのスタイル************************/
.profile {
  clear: both;
  width: 76%;
  margin: 0 auto ;
  overflow: hidden;
  padding:3% 0 3%;
  font-size: 1.8rem;
  background-color: rgba(255, 255, 255, 0.7);
}
.myname {
  font-size: 5rem;
  padding-left: 15%;
}
.imgbox {
  float: left;
  width: 50%;
  height: 100%;
  overflow: hidden;
/*  border: 1px solid #fff;*/
}
.imgbox p img {
  width: 60%;
  margin-left: 15%;
  margin-top: 10px;
}
.textbox {
  text-align: left;
  float: left;
  width: 50%;
  height: 100%;
/*  border: 1px solid #fff;*/
  padding-top: 80px;
  padding-left: 8%;
    overflow: hidden;
}

.textbox h3{
	font-size: 2.0rem;
	line-height: 1.8;
}

.textbox p {
  line-height: 1.5;
}

/*テキストズームのスタイル*/

.textzoom a {
	position: relative;
	color: #cc0099;
	font-size: 1.9rem;
}

.textzoom a:hover {
	font-weight: bold;
}

.textzoom .photos {
	display: none;
	text-decoration: none;
	font-size: 1.4rem;
	padding-left: 12px;
	color: #cc0099;
}

.textzoom a:hover .photos {
	display: inline-block;
	vertical-align: top;
	font-weight: normal;
}


/*.textzoom {
  display: inline-block;
  transition: all .2s ease 0s;
}
.textzoom a {
  color: #cc0099;
	font-size: 2rem;
	font-weight: bold;
text-decoration: none;
 text-shadow:0 0 6px rgba(204, 0, 153, 0.9);
}
.textzoom:hover {
  cursor: pointer;
  transform: scale(1.2);
}*/
/*略歴のスタイル*/
.bio {
  clear: both;
  overflow: hidden;
  width: 80%;
  margin: 0 auto;
}

.bio h3 {
	font-size: 2.2rem;
	margin-top: 4%;
}

.bio p {
   line-height: 2;
}
/*スキルのスタイル*/
.skill-bigbox {
  width: 90%;
  overflow: hidden;
  /*border: 1px solid #000;*/
  margin: 6% auto 0;
}
.skillborder {
  text-align: center;
  font-size: 3rem;
	padding-bottom: 2%;
  margin: 0 auto 60px;
  border-bottom: 2px dashed #00014B;
  width: 80%;
}

.skill-box {
  height: 400px;
 /* border: 1px solid #000;*/
overflow: auto;
}
.skill-box:nth-of-type(odd) {
  float: left;
  text-align: left;
  padding-left: 10%;
  width: 40%;
}


.skill-box li {
  list-style-type: none;
  /*padding-top: 8px;*/
  padding-left: 8%;
  line-height: 2.2;
  font-size: 2.2rem;
}

.skill-box:nth-of-type(even) {
  float: right;
  width: 60%;
}

.skill-box h3 {
	font-weight: bold;
	font-size: 2.2rem;
	padding-top: 4%;
	padding-bottom: 1%;
}

.skill-box p {
	line-height: 1.8;
}

/*フッターのスタイル*/
.footer {
  color: #fff;
  clear: both;
  height: 140px;
}
.copyright {
  text-align: center;
  font-size: 1.4rem;
  padding-top: 100px;
}
/*****************************横幅768pxの時のスタイル***********************************/
@media(max-width: 768px) {
  .fade {
    display: none;
  }
  /*横幅768pxのヘッダー*/
  .header {
		height: 8%;
		display: block;
	}
  h1 {
    margin-top: 22%;
    font-size: 1.8rem;
	letter-spacing: 0.5rem;
  }
	
	
.topimg {
	margin: -17% auto 10%;
	width: 44%;
	}
	
.proftop {
	width: 62%;
}
	
  .home {
    width: 26%;
    top: 10px;
    left: 4%;
  }
	
  /*	横幅768pxのメニュー*/
.menu-icon {
		width: 8%;
		top: 0.5%;
  }
  .menu-icon-line {
    height: 2px;
  }
  .menu-box .menu {
    display: none;
    width: 50%;
	height: 120px;
    background-color: rgba(255, 255, 255, 0.8);
    top: 8%;
  }
  .menu .menu-list {
    margin-left: 0;
    height: 30px;
  }
  .menu .menu-list a {
    font-size: 2rem;
    margin: 0 auto;
  }
	
  /********************横幅768pxの作品******************************/
  .works, .works-bigbox {
    width: 100%;
    margin: 0;
  }
  .works {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
  }
  .works-bigbox {
    width: 50%;
    height: 50%;
  }
  .works-bigbox:nth-of-type(3n) {
	float: left;
    margin-left: 0;
    margin-right: 0;
  }
  .works-bigbox:nth-of-type(odd) {
    float: left;
  }
	
	.works-box {
		box-shadow: none;
	}
	
  .works-boxtext {
    font-size: 1.0rem;
  }
  /************************横幅768pxのプロフィール************************/
  .profile {
    width: 90%;
  }
  .myname {
    font-size: 3rem;
    padding: 0;
  }
  .imgbox {
    width: 100%;
    height: 100%;
    clear: both;
    padding: 0;
  }
  .imgbox p img {
    width: 60%;
    margin: 0 20%;
  }
  .textbox {
    clear: both;
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 0;
  }
	
  .textbox h3 {
	font-size: 1.8rem;
  }
	
	  .textbox p {
	font-size: 1.6rem;
  }
	
	.bio {
		width: 90%;
	}
	
	.bio h3 {
		font-size: 1.8rem;
	}
	
  .bio p {
    font-size: 1.6rem;
    line-height: 2;
	text-align: left;
  }
  /*横幅768pxのスキル*/
  .skill-bigbox {
    width: 100%;
    margin: 0;
  }
	
  .skillborder {
    width: 90%;
    margin: 20px auto 20px;
	font-size: 2rem;
  }
  .skill-box:nth-of-type(odd) {
    width: 100%;
    height: 100%;
    clear: both;
    padding-left: 16%;
  }
  .skill-box:nth-of-type(even) {
    display: none;
  }
  .skill-box li {
	font-size: 1.8rem;
    padding: 0;
  }
  /*横幅768pxのフッター*/
  .footer {
    height: 50px;
  }
  .copyright {
    font-size: 1.2rem;
    padding-top: 20px;
  }
}