@charset "utf-8";

html * {
	box-sizing: border-box;
  }

body {
  margin:0;
  padding: 0;
  background-color: #ffffff;
  color: #333333;
  font-family: "ヒラギノ角ゴ W3 JIS2004", "Hiragino Kaku Gothic W3 JIS2004";
  font-size: 15px;
  line-height: 1.75;
}

p,h1 {
  margin-top: 0;
}

img {
  vertical-align: bottom;
}

ul {
  margin: 0;
  padding: 0;
}

a {
  color: #999999;
  text-decoration: none;
}

/* ////////  メニューの現在表示　黒色 ////////  */
a.active{
	color: #000;
}



/* トップページのみ、ヘッダーとナビゲーションの部分を固定配置 */
header#top {
  max-width: 980px;
  height: 192px;
  margin: 0 auto;
  background-color: #ffffff;
  position: fixed;
  top: 0;
  z-index: 1;
  -webkit-transform: translate3d(0,0,0);
}

/* スクロールする部分は固定した要素よりも下に配置 */
.top-main-container {
  max-width: 980px;
  margin: 0 auto;
  padding-top: 192px;
  -webkit-transform: translate3d(0,0,0);
}



header {
  width: 100%;
  height: 192px;
  margin: 0 auto;
  background-color: #ffffff;
}

.logo {
  float: left;
  margin-top: 66px;
}

.logo img {
  width: 180px;
}

.menu {
  float: right;
  margin-top: 98px;
}

.menu li {
  float: left;
  margin-left:70px;
  font-size: 14.5px;
  list-style: none;
}

.menu li a:hover {
  color: #333333;
}

.header-nav-container {
  max-width: 980px;
  margin: 0 auto;
}

.main-container {
  max-width: 980px;
  margin: 0 auto;
}


/* 変更箇所 */
.works-list ul{
  float: left;
  list-style: none;
  margin: 0;
  width: 100%;
}

.works-list li{
  float: left;
  list-style: none;
  margin: 0;
  width: 25%;
}

.works-list li img {
  width: 100%;
  display: block;
}
/* 変更箇所 */


/* フロートの後にブロック指定 */
.clearfix:after {
  content: "";
  display: block;
  clear: both
}

.link li a img {
  transition: opacity 1s linear;
}

.link li a:hover img {
  opacity: 0.4;
}


/* フッターの指定 */
.footer-container {
  height: 150px;
  width: 100%;
  padding: 0 40px; /* //////// 余白のテスト ////////  */
}

footer p {
}


/* 作品詳細ページの指定 */
.header-container{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  padding: 0 40px; /* //////// 余白のテスト ////////  */
}

.container{
  position: absolute;
  left: 0;
  top: 192px;
  width: 100%;
  padding: 0 150px; /* //////// 余白のテスト ////////  */
}


section img {
  width: 100%;
}

section p {
  font-size: 12px;
  padding-top: 12px;
}

#photo-t{
  width: 60%;
}

#photo-sq{
  width: 80%;
}

/* プロフィールページの指定 */
section h1 {
  font-family: "ヒラギノ角ゴ W4 JIS2004", "Hiragino Kaku Gothic W4 JIS2004";
  font-size: 105%;
  line-height: 1;
  }

.profile-image {
  width: 120px;
  padding: 16px 0 21px 0;
}

.mark-image {
  width: 150px;
  padding: 21px 0 0 0;
}

span{
  display: inline-block;
  width: 0px;
}

p.indent-1 {      /* //////// 改行のテスト ////////  */
padding-left: 45px;
text-indent: -45px;
}

/* //////// 画面サイズが1024-768（ipad） ////////  */
@media screen and (min-width:768px) and (max-width:1024px){

	.header-nav-container {
	  padding: 0 50px;
	}
	
	.main-container{
	  padding: 0 50px;

	}
	
	.top-main-container {
	  padding: 0 50px;
	  padding-top: 192px;

	}
		
	.contents {
	  width: 100%;
	  margin: 0 auto;
	  clear: both;
	}

 	
	.works-list li{
	  float: left;
	  list-style: none;
	  margin: 0;
	  width: 33.33%;
	}
	
	.menu#top {
    margin-right: 100px;
    }
  
}

/* //////// 画面サイズが768以下（スマホ） ////////  */
@media screen and (max-width: 767px)  { 
	
	.logo {
		margin-top: 25px;
	}
	  
	.header-nav-container {
	  padding: 0 20px;
	}
	
	header#top {
		height: 120px;
		left: 20;
	}
			
	.main-container {
	  padding: 0 20px;

	}
	
	.top-main-container {
	  padding: 0 20px;
	  padding-top: 120px;

	}
		
	.works-list li{
	  float: left;
	  list-style: none;
	  margin: 0;
	  width: 50%;
	}
	
	header {
    height: 120px;
	}

}

/*スマホでの改行
	-------------------------------------- */
	
	@media only screen and (min-width: 480px){
	 br.sp{
	  display:none;
	 }	 
	}
		
	@media only screen and (max-width: 767px){
	 br.pc{
	  display:none;
	 }
	}