body{ 
margin: 0;
padding:0;
/*font-family: "Verdana","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Meiryo","メイリオ","Osaka","ＭＳ Ｐゴシック","MS PGothic",sans-serif;*/
font-family:"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-size:16px;
letter-spacing:0.01em;
word-break: normal;
word-wrap: break-word;
background-image: url('../top_img/glid.gif'); 
}

body {
    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;
max-width: 100%; 
}

a:link{ color:#FF600A;text-decoration: none;}
a:visited{ color: #FF600A; text-decoration: none;}
a:hover{ color: #FF600A; text-decoration: underline; }
a:active{ color: #cf574c; text-decoration: underline; }

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

article{
padding-top:50px;
}

#toppage_logo{
text-align:left;
padding:10px 0 0 20px ;
font-size:110%;
font-family: "リュウミン L-KL","Ryumin Regular KL",'Hiragino Mincho ProN',"游明朝", 'Yu Mincho','Times New Roman', Times, FreeSerif, serif;
}

#toppage_logo img{
width:80%;
margin:10px 0 0 0;
}

.more{
padding:15px 0 0 0;
text-align:right !important;
clear:both;
}
/*---------------main_all---------------*/
#all{
width:100%;
margin:0;
padding:0;
clear:both;
}

#wrap{
width:100%;
}

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

* #wrap{
width:100%;
}

/*---------------head---------------*/
header{
font-weight: 500;
width:100%;
margin:0;
padding:0;
color:#222;
letter-spacing:0.01em;
text-align:left;
position:fixed;
transform: translate3d(0, 0, 0);
z-index: 3;
}

h1{
margin:20px 0 0 0;
padding:15px 0;
font-size:130%;
text-align:center;
letter-spacing:0.1em;
border-top:solid 2px #cf574c;
border-bottom:solid 2px #cf574c;
clear:both;
}

h2{
color: #222;
margin:10px 0 5px 0;
padding:0;
font-size:200%;
text-align:center;
letter-spacing:0.02em;
clear:both;
line-height:180%;
}

.about h2{
color: #222;
margin:30px 0 5px 0;
padding:0;
font-size:120%;
text-align:left;
letter-spacing:0.02em;
clear:both;
line-height:180%;
}

h3{
color: #c02a4c;
margin:20px 0 20px 0;
padding:0;
font-size:100%;
clear:both;
}

.dn{
display:none;
}

/*---------------top---------------*/
#top_logo{
	font-family: "リュウミン L-KL","Ryumin Regular KL",'Hiragino Mincho ProN',"游明朝", 'Yu Mincho','Times New Roman', Times, FreeSerif, serif;
margin:10px 0 10px 20px;
padding:0;
text-align:left;
width:80%;
}

#top_logo img{
	width: 200px;
    margin: 10px 0 0 0;
}

#top_logo a:link{ color:#000;text-decoration: none;}
#top_logo a:visited{ color: #000; text-decoration: none;}
#top_logo a:hover{ color: #FF600A; text-decoration:  none;}
#top_logo a:active{ color: #FF600A; text-decoration:  none; }

.small{
font-size:85%;
letter-spacing:0;
}

.menu_g{
font-size:40px;
letter-spacing:0;
}

#top_fb{
margin:5px 10px 0 0;
padding:0;
width:10%;
float:right;
font-size:15px; 
text-align:right;
}

#top_fb img{
margin:1px 0 0 0;
height:30px;
/*display: none;*/
}

#top_menu{
width:100%;
display:none;
}
#top_menu a:link{ color:#000000;text-decoration: none;}
#top_menu a:visited{ color: #000000; text-decoration: none;}
#top_menu a:hover{ color: #FF600A; text-decoration: none; }
#top_menu a:active{ color: #FF600A; text-decoration: underline; }

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

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

.works{
text-align: center;
}

.works img{
display: inline;
width:100%;
}

.more{
padding:15px 0 0 0;
text-align:right;
clear:both;
}

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

dd{
margin: 0 0 10px 0;
}

.box{
overflow: hidden;
}

.photo{
margin:20px 0 50px 0;
font-size:80%;
color:#444;
line-height: 130%;
}

.photo img{
width:100%;
}

/*---------------footer---------------*/
footer{
padding:20px 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;
}
#copy a:link{ color:#000000;text-decoration: none;}
#copy a:visited{ color: #000000; text-decoration: none;}
#copy a:hover{ color: #ffffff; text-decoration: none; }
#copy a:active{ color: #cf574c; text-decoration: underline; }

/*---------------pagetop---------------*/
 .pagetop {
	display: none;
	position: fixed;
	width: 50px;
	height: 50px;
	bottom: -10px;
	right: 10px;
	text-align: center;
}

.pagetop a {
	display: block;
	color: #FF600A;
	font-size: 30px;
	text-decoration: none;
	-webkit-transform: rotate( -90deg );
	transform: rotate( -90deg );
	font-weight: 900;
}

/*---------------rmenu---------------*/
#top_fb ul{
margin:50px 0 0 0;
padding:0 5px;
text-align:left;
}

#top_fb li{
list-style:none;
line-height:250%;
font-weight:bold;
letter-spacing: 0.07em;
}
#top_fb a:link{ color:#000000;text-decoration: none;}
#top_fb a:visited{ color:#8AA8B4; text-decoration: none;}
#top_fb a:hover{ color: #FF600A; text-decoration: underline; }

#r-menu {
    background-color: #fff; 
	background-image: url('../top_img/glid_back2.gif'); 
    box-sizing: border-box;
    padding: 0px 40px 10px 20px; 
    position: fixed;
    right: -80%; /*メニュー横幅 width と合わせる*/
    top: 0;
    transition: transform 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
    width: 80%; /*メニュー横幅*/
    z-index: 1000;
	 box-shadow:5px 5px 10px #222222;;
}

#menu-icon {
    color: #000000;
    cursor: pointer;
    display: block;
    font-size: 13px; 
    height: 50px; 
    position: fixed;
    right: 20px;
    text-align: center;
    top: 8px;
    transition: all 0.3s linear 0s; 
    z-index: 2000;
}

#rm-cb {
    display: none; 
}

#rm-cb:checked ~ #r-menu,
#rm-cb:checked ~ #menu-icon {
    transform: translate(-80%); /*メニュー本体横幅 width と合わせる*/
}

#rm-cb:checked ~ #menu-background {
    opacity: 0.5;
    z-index: 999;
}

.mn{
display:inline;
}

ol{
list-style:none;
margin:0 0 0 10px ;
padding:0;
font-size:14px;
line-height:130%;
}

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

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

td{
width:60%;
}

.c_button {
    margin: 20px auto;
    width: 130px;
    font-size: 16px;
    text-align: center;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    display: block;
    background-color: #907514;
    color: #fff;
    padding: 5px;
    /*position: relative;*/
	letter-spacing:0.1em;
	border: none;
}

.mn{
display:none;
}

#works  { 
text-align: center;
	margin: auto;
	overflow: hidden;
}

#works ul { 
	list-style: none;
padding: 0;
}

#works li {
	float:left;
	border: none;
	padding:0;
	margin:10px 0;
	line-height: 0;
		position: relative;
	overflow: hidden;
		 box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.33);
		 display: inline;
}

div .w_cap {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 0;
	color:#fff;
	line-height:150%;
}

#works p {
	font-size:120%;
	font-weight:bold;
	margin: 0;
padding:0;
height: 100%;
display: table-cell;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}

#works  li :hover {
	opacity: 1;
}

#works  li :hover p {
	left: 30px;
}
#works  li :hover p {
	-webkit-transition-delay: .5s;
	transition-delay: .5s;
}

.mp{
margin:10px;
padding:10px;
}

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

article{
font-size: 150px;
}

#toppage_logo img{
width:328px;
margin:10px 0 0 0;
}

}

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

.photo img{
width:600px;
}

#toppage_logo{
text-align:center;
padding:10px 0 0 0 ;
width:100%;
}

.dn{
display:inline;
}

article{
font-size: 150px;
}

p {
    letter-spacing: 0.02em;
}


/*---------------main_all---------------*/
#top_fb img{
display:inline;
}

#wrap{
width:100%;
margin-left: auto;
margin-right: auto;
}

* #wrap{
width:100%;
/*margin-top:20px;*/
/*text-align:center;*/
}

#top_logo {
    text-align: center;
    margin: 10px 0 0 0;
    width: 100%;
	float:none;
}

#top_logo img {
width: 200px;
float:none;
}

#top_menu{
width:100%;
display:block;
clear:both;
}

#top_menu ul{
text-align:center;
padding:0;
}

#top_menu li{
display: inline;
list-style-type:none;
text-align:left;
padding:0 10px 0 0;
font-size:90%;
}

header{
letter-spacing:0.1em;
}

/*---------------contants---------------*/

article{
padding-top: 140px;
font-size:15px;
line-height:190%;
clear:both;
}

section{
clear:both;
padding:0 30px 30px 30px;
margin-left: auto;
margin-right: auto;
}


#menu-icon {
display:none;
}

#s_class li {
width:31%;
}
}

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

article{
padding-top:140px;
}

#r-menu{
box-shadow:none;
}

.wm{
text-align:center;
margin:10px 0 40px 0;
margin-left: auto;
margin-right: auto;
}

.works p{
display:inline;
}

#works li{
margin: 2.3%;
}

}

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

img{
border:0px;
}

}

@media screen and (min-width:768px)  {
#wrap{
margin-left: auto;
margin-right: auto;
}

* #wrap{
/*text-align:center;*/
}

article{
padding-top:140px;
}

section{
clear:both;
padding:0;
margin-left: auto;
margin-right: auto;
}

.about{
margin-left: auto;
margin-right: auto;
width:800px;
}

#top_menu li{
display: inline;
list-style-type:none;
text-align:left;
padding:0 20px 0 0;
margin:0;
font-size:110%;
}

#top_menu li:last-child{
	padding:0;
}

#menu-background {
    display: none; /*チェックボックス本体は消しておく*/
}

.works img{
display: inline;
width:70%;
}

.works dl{
width:700px;
margin-left:auto;
margin-right:auto;
}

.works dt{
width:50%;
text-align: right;
float:left;
}
.works dd{
text-align: left;
}
}

@media screen and (min-width:1024px) {
body{
background-position: 10% 150px;
}

article{
padding-top:140px;
}

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

.works{
text-align: center;
}

.works img{
    margin: 20px;
}

#works  { 
width:1023px;
}

#works li {
	margin:2%;
}


}

@media screen and (min-width:1200px) {
/*body{
background-position: 15% 150px;
}*/

article{
padding-top:140px;
}

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

#works  { 
width:950px;
}
}

@media screen and (min-width:1600px) {
#works  { 
width:1500px;
}
}


@media print{
body{
width:100%;
letter-spacing:0.02em;
background-image: url('../top_img/glid.gif'); 
}

article{
padding-top:50px;
}

header{
position:static;
}

#toppage_logo img{
width:30%;}

h1 {
font-size:130%;
    margin: 10px 0 0 0;
	}
	
#menu-icon{
display: none;
}

#r-menu{
box-shadow:none;
}

 img {
   margin:20px;
}

#works li {
    float: left;
    border: none;
    padding: 0;
    margin: 20px;
    line-height: 0;
    position: relative;
    overflow: hidden;
    box-shadow: none;
    display: inline;
}

dl {
    margin: 0;
}

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

p{
font-size: 12pt;
}

.pagetop{
display: none;
}
}