@charset "UTF-8";

/* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

@font-face {
	font-family: 'codropsicons';
	src:url('../fonts/codropsicons/codropsicons.eot');
	src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
		url('../fonts/codropsicons/codropsicons.woff') format('woff'),
		url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
		url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
	font-weight: normal;
	font-style: normal;
}

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 1em; padding: 0; margin: 0;}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

body {
	font-family: 'ＭＳ Ｐゴシック', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro W3', sans-serif, arial, helvetica, clean;
	color: #333;
	background: #ffffff;
}

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

a:hover,
a:active {
	color: #333;
}

/* Header Style */
.container > header {
	margin: 0 auto;
	padding: 2em 0 0 0;
	text-align: center;
	background: rgba(0,0,0,0.01);
}

.container > header h1 {
	margin: 0;
	font-weight: 300;
}

.container > header h1 img {
	max-width: 100%;
	height: auto;
	border: none ;
}

.container > header span {
	display: block;
	font-size: 50%;
	opacity: 0.8;
	padding: 0 0 0.6em 0.1em;
}

/* To Navigation Style */
.codrops-top {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	text-transform: uppercase;
	width: 100%;
	font-size: 0.69em;
	line-height: 2.2;
}

.codrops-top a {
	padding: 0 1em;
	letter-spacing: 0.1em;
	color: #6b7381;
	display: inline-block;
}

.codrops-top a:hover {
	color: #424b5a;
	background: rgba(255,255,255,1);
}

.codrops-top span.right {
	float: right;
}

.codrops-top span.right a {
	float: left;
	display: block;
}

.codrops-icon:before {
	font-family: 'codropsicons';
	margin: 0 4px;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

.codrops-icon-drop:before {
	content: "\e001";
}

.codrops-icon-prev:before {
	content: "\e004";
}

/* Demo Buttons Style */
.codrops-demos {
	padding-top: 1em;
	font-size: 0.9em;
}

.codrops-demos a {
	display: inline-block;
	margin: 0.5em;
	padding: 0.7em 1.1em;
	border: 3px solid #6b7381;
	color: #6b7381;
	font-weight: 700;
}

.codrops-demos a:hover,
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover {
	opacity: 0.6;
}


/* Footer Style */




         
#footer {
         clear: both;
         margin: 0 0 0 0;
         padding: 5px 0 5px 0;
         background-color:#fff;
         position: fixed ;
         bottom: 0px;
         left:0px;
         width:100%;
         opacity:0.8;
         text-align:center;
         /*max-width: 1000px;*/ 
         }
         
#footer-top {
         clear: both;
         margin: 0 0 0 0;
         padding: 5px 0 5px 0;
         background-color:#fff;
         position: absolute ;
         bottom: 0px;
         left:0px;
         width:100%;
         opacity:0.8;
         text-align:center;
         z-index:100;
         /*max-width: 1000px;*/ 
         }



/*
.page-back {
 position: fixed;
 bottom: 30px;
 right: 10px;
}
*/

@media screen and (max-width: 25em) {

	.codrops-icon span {
		display: none;
	}

}
.grid {
	/*max-width: 69em;*/
    /*max-width: 100em;*/
    max-width:90%;
	list-style: none;
	padding: 0;
	/*margin-top: 0px;*/
    margin-top: 0.3em;
	margin-right: auto;
	margin-bottom: 30px;
	margin-left: auto;
}

.grid a:hover img {
  opacity: 0.6;
  filter: alpha(opacity=60);
  -ms-filter: "alpha(opacity=60)";
}

.grid li {
	display: block;
	float: left;
	/*padding: 7px;*/
    padding: 7px;
	/*width: 33%;*/
    width:25%;
	opacity: 1;
}

.grid li.shown,
.no-js .grid li,
.no-cssanimations .grid li {
	opacity: 1;
}

.grid li a,
.grid li img {
	outline: none;
	border: none;
	display: block;
	/*max-width: 100%;*/
    max-width: 100%;
    max-height: 450px;
    margin:0 auto 0 auto;
}



/* Effect 1: opacity */

.grid.effect-1 li.animate {
	-webkit-animation: fadeIn 0.65s ease forwards;
	-moz-animation: fadeIn 0.65s ease forwards;
	animation: fadeIn 0.65s ease forwards;
}

@-webkit-keyframes fadeIn {
	to { opacity: 1; }
}

@-moz-keyframes fadeIn {
	to { opacity: 1; }
}

@keyframes fadeIn {
	to { opacity: 1; }
}




/* Effect 2: Move Up */
.grid.effect-2 li.animate {
	-webkit-transform: translateY(200px);
	-moz-transform: translateY(200px);
	transform: translateY(200px);
	-webkit-animation: moveUp 2.65s ease forwards;
	-moz-animation: moveUp 2.65s ease forwards;
	animation: moveUp 2.65s ease forwards;
}

@-webkit-keyframes moveUp {
	to { -webkit-transform: translateY(0); opacity: 1; }
}

@-moz-keyframes moveUp {
	to { -moz-transform: translateY(0); opacity: 1; }
}

@keyframes moveUp {
	to { transform: translateY(0); opacity: 1; }
}

/* Effect 3: Scale up */
.grid.effect-3 li.animate {
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
	-webkit-animation: scaleUp 0.65s ease-in-out forwards;
	-moz-animation: scaleUp 0.65s ease-in-out forwards;
	animation: scaleUp 0.65s ease-in-out forwards;
}

@-webkit-keyframes scaleUp {
	to { -webkit-transform: scale(1); opacity: 1; }
}

@-moz-keyframes scaleUp {
	to { -moz-transform: scale(1); opacity: 1; }
}

@keyframes scaleUp {
	to { transform: scale(1); opacity: 1; }
}

/* Effect 4: fall perspective */
.grid.effect-4 {
	-webkit-perspective: 1300px;
	-moz-perspective: 1300px;
	perspective: 1300px;
}

.grid.effect-4 li.animate {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: translateZ(400px) translateY(300px) rotateX(-90deg);
	-moz-transform: translateZ(400px) translateY(300px) rotateX(-90deg);
	transform: translateZ(400px) translateY(300px) rotateX(-90deg);
	-webkit-animation: fallPerspective .8s ease-in-out forwards;
	-moz-animation: fallPerspective .8s ease-in-out forwards;
	animation: fallPerspective .8s ease-in-out forwards;
}

@-webkit-keyframes fallPerspective {
	100% { -webkit-transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}

@-moz-keyframes fallPerspective {
	100% { -moz-transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}

@keyframes fallPerspective {
	100% { transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}

/* Effect 5: fly (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */
.grid.effect-5 {
	-webkit-perspective: 1300px;
	-moz-perspective: 1300px;
	perspective: 1300px;
}

.grid.effect-5 li.animate {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin: 50% 50% -300px;
	-moz-transform-origin: 50% 50% -300px;
	transform-origin: 50% 50% -300px;
	-webkit-transform: rotateX(-180deg);
	-moz-transform: rotateX(-180deg);
	transform: rotateX(-180deg);
	-webkit-animation: fly .8s ease-in-out forwards;
	-moz-animation: fly .8s ease-in-out forwards;
	animation: fly .8s ease-in-out forwards;
}

@-webkit-keyframes fly {
	100% { -webkit-transform: rotateX(0deg); opacity: 1; }
}

@-moz-keyframes fly {
	100% { -moz-transform: rotateX(0deg); opacity: 1; }
}

@keyframes fly {
	100% { transform: rotateX(0deg); opacity: 1; }
}

/* Effect 6: flip (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */
.grid.effect-6 {
	-webkit-perspective: 1300px;
	-moz-perspective: 1300px;
	perspective: 1300px;
}

.grid.effect-6 li.animate {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin: 0% 0%;
	-moz-transform-origin: 0% 0%;
	transform-origin: 0% 0%;
	-webkit-transform: rotateX(-80deg);
	-moz-transform: rotateX(-80deg);
	transform: rotateX(-80deg);
	-webkit-animation: flip .8s ease-in-out forwards;
	-moz-animation: flip .8s ease-in-out forwards;
	animation: flip .8s ease-in-out forwards;
}

@-webkit-keyframes flip {
	100% { -webkit-transform: rotateX(0deg); opacity: 1; }
}

@-moz-keyframes flip {
	100% { -moz-transform: rotateX(0deg); opacity: 1; }
}

@keyframes flip {
	100% { transform: rotateX(0deg); opacity: 1; }
}

/* Effect 7: helix (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */
.grid.effect-7 {
	-webkit-perspective: 1300px;
	-moz-perspective: 1300px;
	perspective: 1300px;
}

.grid.effect-7 li.animate {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
	-webkit-animation: helix .8s ease-in-out forwards;
	-moz-animation: helix .8s ease-in-out forwards;
	animation: helix .8s ease-in-out forwards;
}

@-webkit-keyframes helix {
	100% { -webkit-transform: rotateY(0deg); opacity: 1; }
}

@-moz-keyframes helix {
	100% { -moz-transform: rotateY(0deg); opacity: 1; }
}

@keyframes helix {
	100% { transform: rotateY(0deg); opacity: 1; }
}

/* Effect 8:  */
.grid.effect-8 {
	-webkit-perspective: 1300px;
	-moz-perspective: 1300px;
	perspective: 1300px;
}

.grid.effect-8 li.animate {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: scale(0.4);
	-moz-transform: scale(0.4);
	transform: scale(0.4);
	-webkit-animation: popUp .8s ease-in forwards;
	-moz-animation: popUp .8s ease-in forwards;
	animation: popUp .8s ease-in forwards;
}

@-webkit-keyframes popUp {
	70% { -webkit-transform: scale(1.1); opacity: .8; -webkit-animation-timing-function: ease-out; }
	100% { -webkit-transform: scale(1); opacity: 1; }
}

@-moz-keyframes popUp {
	70% { -moz-transform: scale(1.1); opacity: .8; -moz-animation-timing-function: ease-out; }
	100% { -moz-transform: scale(1); opacity: 1; }
}

@keyframes popUp {
	70% { transform: scale(1.1); opacity: .8; animation-timing-function: ease-out; }
	100% { transform: scale(1); opacity: 1; }
}



p {display:inline;}

/**/
/*styles.cssの上書き*/
/**/

img.lazy {
         max-width:100%;
         }

.codrops-demos {
         padding-top: 0.3em;
         font-size: 0.9em;
         }

.glid {
         max-width:90%;
         margin-top:5px;
      }

.glid li{padding:0px;}

.codrops-demos a {
         display: inline-block;
         margin: 0 0.5em;
         padding: 0 0.5em;
         border: 0px
         }


      
.codrops-demos-2 a:hover,
.codrops-demos-2 a.current-demo,
.codrops-demos-2 a.current-demo:hover {
	     opacity: 0.6;
         }         


/**/
/*全体で共用*/
/**/
.sz80 { font-size: .8em ; }

ul#breadcrumb {
        /*width: 90% ;
        margin: 0px auto 10px ;
        font-size: .7em ;
        height:10px;
        padding:5px;
        }*/
      
        max-width: 920px;
        margin: 0 auto 10px auto; 
        font-size: .7em ;
        height:10px;
        padding:0 0 10px 44px;        
        }        
        
ul#breadcrumb li {
        float: left ;
        list-style-type: none ;
        margin: 0px 5px 0px 0px ; }


/**/
/*projects*/
/**/

.box { 
       overflow: hidden;
       max-width: 1000px; 
       margin: 0 auto 40px auto;
       }

.pgcontents {
        margin: 10px auto ;
        text-align: center ;
        clear: left ;
        }

#cf_img_mainimg {
       margin: 0 auto;
       text-align: center ;
       }

#cf_img_mainimg img {
       max-width: 100% ;
       height: auto ;
       }

#cf_img_mainimg2 {
       margin: 0 auto; text-align: center ;
       }
       
#cf_img_mainimg2 img {
        max-width: 100% ;
        height: auto ;
        }

#cf_img_mainimg3 {
       margin: 0 auto;
       text-align: center ;
       }

#cf_img_mainimg3 img {
       max-width: 100% ;
       height: auto ;
       }

#cf_img_mainimg4 {
       margin: 0 auto;
       text-align: center;
       }
#cf_img_mainimg4 img {
       max-width: 100% ;
       height: auto ;
       }


div.mainpic_box	{
        clear:both;
		overflow: hidden;
		position: relative;
		margin:20px 0 0 0;
		}
ul.mainpic_box1	{
		list-style-type: none;
		float: left;
		position:relative;
		left:50%;
		margin: 0;
		padding: 0;
		position: relative;
		}
ul.mainpic_box1 li{
		list-style-type: none;
		position: relative;
		left: -50%;
		margin:0px;
		float: left;
		}

.mainpic {float:left;}

.pic {
        max-width:100%;
        max-height:700px;
        margin:0 0 10px 0 ;
        }

div .pgtext-b {
         clear:both;
         /*float:left; */
         max-width: 100% ;
         margin: -20px 50px 20px 50px; 
         text-align: left ;
         /*line-height:1.5em;*/         
           }

.pgtext-b #title { 
         margin:0px; 
         font-size:1em; 
         font-weight:500;
         line-height:2em;
           }
        
.pgtext-b #asset-body {
         margin:0px;
         font-size: .8em;
         font-weight:400;
         line-height: 1em;
         display:inline;
          }
          
.pgtext-b #sizecomment { 
         margin: 0px ;
         font-size: .8em ;
         font-weight:400;
         line-height: 1.5em;
          }
          
.pgtext-b #prj_price {
         margin: 0px;
         font-size: .8em;
         font-weight:400;
         line-height: 1.5em;
           }
           
.pgtext-b #prj_sizechart {
         margin: 0px ;
         font-size: .8em ;
         font-weight:400;
         line-height: 1.5em;
           }

.pgtext-b  #itten {
         margin: 0px ;
         font-size: .8em ;  
         font-weight:400;
         display: inline;
           }            
           
.pgtext-b #soldout {
         margin: 0px ;
         font-size: .8em ;
         font-weight:400;
         display:inline;
           }
           
.pgtext-b #notforsale {
         margin: 0px ;
         font-size: .8em ;
         font-weight:400;
         display:inline;
           }

.style8 {
         font-size: .8em ;
           }    /*枚数サイズ*/

div .pgtext-bb {
          
          margin: 0 0 5px 0 ;
           }

div .pgtext-b-tate {
         clear:both;
         float:right; 
         width: 200px ;
         margin:50px 50px 0 50px;
         text-align: left ;
         line-height:1.5em;
            }

.pgtext-b-tate  #title {
         margin:0px; 
         font-size:1em; 
         font-weight:500; 
         line-height:2em;
           }
           
.pgtext-b-tate  #asset-body {
         margin:0px; 
         font-size:0.7em; 
         font-weight:400;
         line-height: 1.5em;
         display: inline;
           }
           
.pgtext-b-tate  #sizecomment {
         margin: 0px ;
         font-size: .8em ;  
         font-weight:400;
         line-height:1.5em;
           }
           
.pgtext-b-tate  #prj_price {
         margin: 0px ; 
         font-size: .8em ; 
         font-weight:400;
         line-height:1.5em;
           }
           
.pgtext-b-tate  #prj_sizechart {
         margin: 0px ; 
         font-size: .8em ;  
         font-weight:400;
         line-height:1.5em;
           }

.pgtext-b-tate  #itten {
         margin: 0px ;
         font-size: .8em ;  
         font-weight:400;
         line-height:1.5em;
           }           
           
.pgtext-b-tate  #soldout {
         margin: 0px ;
         font-size: .8em;
         font-weight:400;
         line-height:1.5em;
         }
         
.pgtext-b-tate  #notforsale {
         margin: 0px ;
         font-size: .8em;
         font-weight:400;
         line-height:1.5em;
         }
         
.style8 {
         font-size: .8em ;
         line-height:1.5em;
         }   /*枚数サイズ*/


/*back next*/

.pagination {
         text-align: right;
         margin: 10px auto;
         z-index:2;
         }

#nav_l { 
        position: fixed;
        bottom: 70px;
        left: 10px;
        z-index:1;
        }
        
#nav_r {
        position: fixed;
        bottom: 70px;
        right: 10px;
        z-index:1;
        }


/*link photos*/

#linktophotos div {
        width: 45px ;
        height: 45px ;
        overflow: hidden ;
        margin: 0px 3px 3px 0px;
        }

div.top-pthumbbox	{
		overflow: hidden;
		position: relative;
		margin:0 50px 0 50px;
		}
ul.top-pthumbbox1	{
		list-style-type: none;
		position:relative;
		padding: 0;
		position: relative;
		}
ul.top-pthumbbox1 li
		{
        float: left;
		list-style-type: none;
		position: relative;
		}


#linktophotos img {
        width: 75px;
        margin-left:-15px;
        }

#prj_sizechart {}

/**/
/*photo-index*/
/**/

#centering  {
		max-width: 2000px;
		min-width: 320px;
		padding: 20px 50px;
		margin: 0 auto;
		}

/*#mcontainer {
		margin: 0 0 0 0;
		overflow: hidden;
		}
        
#mcontainer { 
		max-width: 1500px;
		min-width: 320px;

		margin: 0 auto 0 auto;
		padding:0 20px 0 20px;
		overflow: hidden;
		} */
        
#mcontainer {         
        max-width: 920px;
        min-width: 320px;
        text-align:justify;
        margin: 0 auto 0 auto;
        padding:0 44px 0 44px;
        overflow: hidden;
		}
        
/*div.thumbox :first-child {         
        display:block;
        float:left;
        width:120px;
        height:170px;
		margin: 3px 4px 3px 4px;
		}*/
        
        
.thumbox  {
		/*float: left;*/
        display:inline-block;
		margin: 3px 4px 3px 4px;
		}


.mbox  {
		width: 56px;
		height: 55px;
		overflow:
		hidden;
		}


.mbox a:hover{
	    opacity: 0.6;
        }

.mbox-t { margin:5px 0 7px 0 ;
         font-size: .8em;
         font-weight: 400;
        }

.mimg  {
		width: 85px;
        margin-left: -10px;
		}

/**/
/*photoカテゴリ別ブログ記事リスト*/
/**/

.center {
        max-width: 1000px;
        min-width: 320px;
        padding: 20px 50px;
        margin: 20px auto 0 auto;
        overflow: hidden;
        }


ul#photothumb {
        list-style-type: none;
        max-width: 920px;
        margin:0 auto 0 auto ;
        }
        
ul.photothumbul {
        list-style-type: none;
        max-width: 920px;
        margin:0 auto 0 auto ;
        text-align:center;
        padding: 0 40px 0 40px;
        }

li.photothumbli {
        display:inline-block;
        width:209px;
        height:210px;
        overflow: hidden;
        padding: 8px 4px 8px 4px;
        }
        
div.photo_category_thum_box {
      /*width:225px;
        height:150px;
        float:left;
        margin:4px;*/
        overflow:hidden;
        }


div.photo_category_thum_box a:hover{
	    opacity: 0.6;
        }

img.photo_category_thum {
        /*max-width:300px;*/
        width:340px;
        margin-left:-70px;
        }



        
#photothumb_l {
		vertical-align: top ;
        }

        
div#phototmbtd_l {
        /*clear:both;
        text-align:justify;
        vertical-align:top;
        font-size: 0.9em;
        line-height: 150%;
        margin: 0px 47px 20px 47px;
        }  */      
        
        clear:both;
        max-width:920px;
        text-align:justify;
        vertical-align:top;
        font-size: 0.9em;
        line-height: 150%;
        margin:0 auto;
        padding: 20px 44px 20px 44px;
        }
                
div#photothumb_l div { 
        float: left ; 
        list-style-type: none ; 
        margin: 0 8px 10px 0 ; 
        width: 65px ;
        height: 55px ; 
        overflow: hidden ; 
        }
         
div#photothumb_l img{ 
        width:85px;
        margin-left:-10px;
        }
        
/*photoサブカテゴリコメント*/

#photothumb_r {
        clear: both;
        float: right;
        max-width:400px;
        margin:10px 0 20px 0;
        vertical-align: top ;
        font-size: .7em ;
        line-height: 1.5em ;
        }

        
/*photoブログ記事*/
 
        
#mainpic_photo {
        margin: 10px auto ;
        text-align: center ;
        }
        
#mainpic_phot img {
        max-width: 100%;
        height: auto;
        }

.pgtext-b2 {
        width: 65%;
        text-align: center;
        margin: 10px auto ;
        }

.pgtext-b2_small {
        font-size: .8em ;
        width: 200px ;
        text-align: center ;
        margin: 0 auto ;
        }

.pgdiv {}

/*カテゴリナンバーアーカイブ

div #catnumarchv { 
        max-width: 1000px;
        text-align: center;
        margin: 0 auto;
        padding: 0 47px;
        line-height: 2em;
        clear: both;
        font-size: 1em;
        } */
        
div #catnumarchv {
        max-width:920px;
        text-align:justify;
        margin: 0 auto;
        padding: 0 44px 0 44px;
        line-height: 2em;
        clear: both;
        font-size: 1em;
        }
        
span.cat_num_photo { margin: 0px 5px ; }

/**/
/*contactページ用*/
/**/

.pgcontents_contact {
        max-width: 640px;
        margin: 20px auto;
        font-size: .9em;
        }
.contact-left {
        float: left;
        width: 320px;
        padding: 10px ;
        text-align:left;
        }

.contact-right {
        float: left;
        width: 320px;
        padding: 10px ;
        text-align:left;
        }

.readme {
        margin: 20px auto 50px auto;
        width: 90%;
        max-width: 640px;
        font-size: .9em;
        line-height: 2em;
        text-align: justify;
        }

/*.readme h2  {background:rgb(240,240,240);}*/



.lead {
        font-weight:600;
        font-size:1em;
        }

.readme h2  {
        font-weight:500;
        font-size:1.4em;
	    color:#4682b4;
        }

.readme h3  {
        font-weight:500;
	        font-size:1em;
		    color: #4682b4;
        }


/*
.pgcontents_contact table {
        margin: 0px auto;
        text-align: center;
        }
*/



@media screen and (max-width: 1600px) {
	.grid li {
		width: 33%;
          /*width: 33%;*/
         /*doucatty追加分*/
         
	}
    .grid li a,
    .grid li img {
          max-height: 320px;
   }
}

@media screen and (max-width: 800px) {
	.grid li {
		width: 50%;         
	}

    .grid li a,
    .grid li img {
	      max-width: 100%;
          max-height: 250px;
  }
}

@media screen and (max-width: 786px) {
	.grid li {
		width: 50%;         
	}

    .grid li a,
    .grid li img {
	      max-width: 100%;
          max-height: 250px;
  }
}

@media screen and (max-width:503px;) {
    li.photothumbli{
    width:50%;
    }


}

@media(max-width: 480px){
#footer {
         position: relative ;
         /*position: absolute ;bottom:0px;*/
         margin: 20px 0 0 0;
         }
        }

        
        




@media screen and (max-width: 400px) {
	.grid li {
		width: 100%;
         /* width: 50%;*/
          /*doucatty追加分*/
           
	}

    .grid li a,
    .grid li img {
	     max-width: 100%;
          max-height: 250px;
    }
    li.photothumbli{
    width:100%;
    }
}