body{ 
margin: 0;
padding:0;
font-family:"リュウミン L-KL","Ryumin Regular KL",'Hiragino Mincho ProN',"游明朝", 'Yu Mincho','Times New Roman', Times, FreeSerif, serif;
font-weight: 500;
font-size:16px;
letter-spacing:0.02em;
word-break: normal;
word-wrap: break-word;
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

img{
border:0px;
cursor : pointer;
}
a:link{ color:#222222;text-decoration: none;}
a:visited{ color: #222222; text-decoration: none;}
a:hover{ color: #ff3399; text-decoration: none; }
a:active{ color: #ff3399; text-decoration: none; }

p{
text-align: justify;
letter-spacing:0;
}

/*---------------main_all---------------*/
#all{
width:100%;
margin:0;
padding:0;
clear:both;
}

#wrap{
width:100%;
text-align:center;
}

* #all{
width:100%;
margin:0;
padding:0;
}

* #wrap{
width:100%;
text-align:center;
}

/*---------------head---------------*/

header{
width:100%;
margin:0;
padding:0;
color:#222;
letter-spacing:0.01em;
text-align:left;
}

h1{
margin:10px 0 20px 0;
padding:15px 0;
font-size:160%;
text-align:center;
letter-spacing:0.05em;
font-weight:normal;
clear:both;
}

h2{
margin:30px 0 20px 0;
padding:0;
font-size:130%;
letter-spacing:0.02em;
clear:both;
line-height:180%;
}

/*---------------top---------------*/
#top_logo{
margin:50px 0 10px 0;
padding:0;
width:100%;
text-align:center;
}

#top_logo img{
    margin: 10px 0 0 0;
    height: 150px;
backface-visibility: hidden;
}

#top img{
    margin: 10px 0 0 0;
    width:100%;
}

#top_head {
text-align:center;
}

#top_head img{
    margin: 5px 0 0 0;
	width:100%;
	-webkit-backface-visibility: hidden;
}

/*---------------contants---------------*/
article{
/*padding-top:60px;*/
font-size: 17px;
line-height:180%;
clear:both;
}

section{
clear:both;
padding:20px;
line-height:180%;
}

dt{
padding: 0 ;
width:100%;
text-align:left;
}

dd{
margin: 0 0 30px 0;
text-align:left;
}

.works ul{
list-style-type:none;
padding:0;
overflow: hidden;
width:100%;
}

.works li {
display: inline-block;
width:100%;
padding:0 0 3% 0;
text-align: left;
}

.works img{
border:none;
width:100%;
border-radius:50px;
/*
opacity: 0;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  */
}

.works li:hover img {
  opacity: .2;
}

.tgno{
display:none;
}

.small{
font-size:12px;
letter-spacing:0.1em;
margin-top:100px;
margin-left: auto;
margin-right: auto;
clear:both;
text-align:center;}

/*---------------footer---------------*/
footer{
padding:40px 0 0 0;
margin-top:20px;
margin-left: auto;
margin-right: auto;
clear:both;
text-align:center;
}

#copy{
padding:20px 0;
clear:both;
color:#666666;
font-size:12px;
}

/*---------------pagetop---------------*/
.pagetop {
	display: none;
	position: fixed;
	bottom: -20px;
	right: 0px;
}

.pagetop a {
	display: block;
	width: 50px;
	height: 50px;
	text-align: center;
	color: #ff0033;
	font-size: 60px;
	text-decoration: none;
	line-height: 60px;
	margin: 0 20px 20px 0;
	-webkit-transform: rotate( -90deg );
	transform: rotate( -90deg );
	font-weight: 900;
}

/*
.pl p{
font-size:115%;
line-height:190%;
margin:0 0 20px 0;
}

th{
text-align:right;
width:30%;
}

td{
width:60%;
}
*/

@media screen and (min-width:570px) { 
body{
font-size:15px;
}

p {
    letter-spacing: 0.02em;
}

#top img{
    margin: 5px 0 0 0;
	width:auto;
    height:50px;
}

#top_head img{
    margin: 5px 0 0 0;
	width:auto;
    height:50px;
}

/*---------------main_all---------------*/
header{
letter-spacing:0.1em;
}

/*---------------contants---------------*/
article{
font-size:15px;
line-height:190%;
clear:both;
}

.works li {
padding:0 3% 3% 0;
width:46%;
}

.works li:nth-child(2n) {
padding:0 0 3% 0;
}

dl{
margin:40px 0 0 0;
}

dt{
margin: 0 ;
width:15%;
float:left;
}

dd{
margin: 0 0 20px 0;
overflow:hidden;
}

dt{
margin: 0 ;
width:30%;
}
}

@media screen and (min-width:660px) {

.works li {
width:30%;
}
.works li:nth-child(2n) {
padding:0 3% 3% 0;
}
.works li:nth-child(4n) {
padding:0 3% 3% 0;
}
.works li:nth-child(3n) {
padding:0 0 3% 0;
}
}

@media screen and (min-width:768px)  {
section{
clear:both;
margin-left: auto;
margin-right: auto;
}

.works li {
width:21.5%;
}
.works li:nth-child(2n) {
padding:0 3% 3% 0;
}
.works li:nth-child(3n) {
padding:0 3% 3% 0;
}
.works li:nth-child(4n) {
padding:0 0 3% 0;
}

#about{
width:600px;
}
}

@media screen and (min-width:1024px) {

.pagetop a {
    margin: 0 100px 20px 0;
}

section{
width:1000px;
}
}

@media screen and (min-width:1200px) {
.pagetop a {
    margin: 0 150px 20px 0;
}
}

@media print{
body{
width:100%;
letter-spacing:0.02em;}

header{
position:static;
}

h1 {
font-size:130%;
    margin: 10px 0 0 0;
	font-weight:nomal;
	}

dl {
    margin: 0;
}

dt {
    margin: 0;
	width:20%;
}

p{
font-size: 12pt;
}

.pagetop{
display: none;
}
}