﻿@charset "utf-8";

/*メディアクエリ設定（widthが787px以下の場合にCSSを適用する）*/
@media screen and (max-width:1024px){

#works .work_31box{
	width: 787px;
	margin: 0 auto;
	text-align: center;
	display: block;
	padding-bottom: 20px;
}
#works p.w2{
	font-size: 1.2em;
	margin: 80px 0 0 0;
}
#profile #inner{
	width: 787px;
	margin: 0 auto;
	padding-bottom: 90px;
}

	
}
@media screen and (max-width:787px){

/*==================
top
====================*/

#top ul{
	width: 480px;
	margin: 150px auto 200px;
	overflow: hidden;
	text-align: center;
}
#top li{
	display: block;
	float: left;
	margin-right: 82px;	
}
#top li#margin-no{
	margin-right: 0;
}
#top li a:hover{
	display: block;
	height: 85px;
	border-bottom: #ff6699 3px dotted;
}
/*==================
profile
====================*/
#profile #inner{
	width: 480px;
	margin: 0 auto;
	padding-bottom: 90px;
}
#profile #face{
	margin-left: 1em;
}
	
/*==================
works
====================*/
#works .work_31box{
	width: 480px;
	margin: 0 auto;
	text-align: center;
	display: block;
	padding-bottom: 20px;
}
#works .works_1{
	margin-right: 20px;
}
#works .works_1.no_margin{
	margin-right: 20px;
}


.fade-in {
  transition: opacity 1.5s;
  -moz-transition: opacity 1.5s;
  -webkit-transition: opacity 1.5s;
  -o-transition: opacity 1.5s;
}
#works p.w2{
	font-size: 1.2em;
	margin: 80px 0 0 0 ;
}
	
}


@media screen and (max-width:480px){

/*	＝＝＝＝＝
top
	＝＝＝＝＝*/

#top h1 img{
	width: 90%;
	max-width: 100%;
	margin: 5em 0 8em;
}
#top ul{
	width: 100%;
	display: block;
	margin: 2em auto;
}
#top li{
	float: none;
	margin: 0 auto 1em;
	display: block;
	width: 90%;
	border: #99cc33 0.1em solid;
	text-align: center;
}
#top li#margin-no{
	margin: 0 auto 5em;
}	
#top li a:hover{
	height: auto;
	border-bottom: none;
}
	
	
	
/*	＝＝＝＝＝
profile
	＝＝＝＝＝*/
	
#profile #inner{
	width: 90%;
	padding-bottom: 5em;
}
#profile h2 img{
	margin: 2em auto;
}
#profile #face{
	float: none;
	width: auto;
	margin-left: 0em;
	max-width: 100%;
}
#profile p{
	font-size: 1.2em;
	line-height: 1.5em;
}
#profile p#name{
	font-size: 1.7em;
	line-height: 1.2em;
	margin-top: 1em;
}
#profile p.margin_t{
	margin-top: 0.8em;
}	

/*	＝＝＝＝＝
works
	＝＝＝＝＝*/
#works{
	padding-bottom: 3em;
}
#works h2 img{
	margin: 2em auto;
}
#works .work_31box{
	width: 100%;
	padding-bottom: 0;
}
#works .works_1{
	float: none;
	margin-right: 0;
	margin-bottom: 2em;
}
#works .works_1.no_margin{
	float: none;
}
#works .works_1 .border{
	border: #ccc 0.1em solid;
}
#works p.w2{
	font-size: 1.2em;
	margin: 0px auto 0;
}
	
/*	＝＝＝＝＝
thank you
	＝＝＝＝＝*/
#thanks{
	width: 90%;
	padding-bottom: 5em;
}
#thanks h2 img{
	margin: 2em auto;
}
#thanks p{
	font-size: 1.3em;
}
	
}