@charset "UTF-8";
@import "./reset5.css";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700&display=swap');
@import url('https://use.typekit.net/mgq2wfz.css');

body { color:#8c8c8c; background: #fff; padding: 0; position: relative; min-height: 100%; }
html { min-height: 100%; }

* {word-wrap: break-word; }
img { -ms-interpolation-mode: bicubic; }
/* !font-size 15px default setting */
body { font-size: 14px; line-height: 1; letter-spacing: 0.08em; font-family: "Noto Sans JP", Helvetica, Arial, Sans-Serif }
p, th, td, dt, dd, input, select, textarea { line-height: 1.88em; font-feature-settings: "palt" 1 }
h2, h3, h4, h5 { font-family: "Noto Sans JP", Helvetica, Arial, Sans-Serif; letter-spacing: 0.12em; font-style: normal; line-height: 1.5em; font-weight: 700; font-feature-settings: "palt" 1 }

.serif { font-family: garamond-premier-pro-display, YuMincho, 'Yu Mincho', serif;}

/* !clearfix */
hr { display: none; }

.cfix { zoom:1; }
.cfix:after{
    content:"";
    clear:both;
    display:block;
    height:0;
}

/* スクロールバーの有無によるズレ対策 */
html {
	overflow-y: scroll;
}

img { vertical-align: bottom; }

.ts-larger { font-size: 1.12em !important }
.ts-smaller { font-size: 0.88em !important }

.fltR { float: right; }
.fltL { float: left; }

.txtR { text-align: right; }
.txtL { text-align: left; }
.txtC { text-align: center; }

.pc-none { display: none }
.sp-none { display: block }


/* !Links */
a { cursor: pointer !important }
a:link { color: #8c8c8c; text-decoration: none }
a:visited { color: #8c8c8c; text-decoration: none }
a:not(.no):hover { color: #8c8c8c; text-decoration: underline }
a:not(.no):active { color: #000; text-decoration: none }

i { font-style: italic !important }
.rd { color: crimson }
.pk { color: #cc1c7d }
.txtl { opacity: 0; display: inline-block }

html {  }
#loader { position: fixed; left: 50%; top: 50%; margin: -12px 0 0 -12px; z-index: 1000 }
.loader svg {
	fill: none;
	stroke: #676c72 ;
	stroke-width: 8;
	stroke-linecap: round;
	stroke-dasharray: 230 230;
	animation: loader 1.2s infinite cubic-bezier(.4,0,.3,1), loading 1.2s infinite linear;
	vertical-align: middle;
}
@keyframes loader {
	from { stroke-dashoffset: 230; }
	to { stroke-dashoffset: -230; }
}
@keyframes loading {
	from { transform: none; }
	to { transform: rotate(360deg); }
}
#wrapper { position: relative; width: 100%; text-align: left; min-height: 100%; overflow: hidden }

/* リストの高さ揃える  */
.list-flex { display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}

/* effects */
.fd { position: relative; opacity: 0; transform: translateY(4vw) scale(1.12); transition: opacity 1.2s linear, transform 1.2s cubic-bezier(0.19, 1, 0.22, 1); }
.fd.active { opacity: 1; transform: translateY(0) scale(1); }
.zm { transform: scale(1.24); }

#header { position: absolute; left: 0; top: 0; width: calc(100% - 8.8vw); padding: 36px 4.4vw; background: #fff; transition: transform 0.4s; z-index: 100 }
#header.fixed { position: fixed; left: 0; top: -100px; }
#header.fixed.active { transform: translateY(100px) }
#header.isfixed { position: fixed; left: 0; top: 0; }
#header .site-logo img { height: 28px }
#header .global-nav { position: absolute; left: 50%; top: 38px }
#header .global-nav ul { margin-left: -2em }
#header .global-nav li { position: relative; display: inline-block; font-weight: 400; line-height: 28px }
#header .global-nav li a { display: block; padding: 0 2em }
#header .global-nav li a span { position: relative; display: block;}
#header .global-nav li a span::after { content: ""; display: block; position: absolute; left: 0; top: -1px; width: 0; height: 1px; background: #8c8c8c; transition: all 0.2s }
#header .global-nav li.current a span::after { width: 100% }
#header .global-nav li ul.sub { position: absolute; left: 50%; top: 28px; width: auto; padding: 1em 0; margin: 0 0 0 -72px; background: #fafafa; border-radius: 8px; text-align: center; display: none }
#header .lang { position: absolute; right: 0; top: 0; width: 8.8vw; font-size: 14px; line-height: 28px; text-align: center }
#header .lang span { display: block; padding: 38px 0; font-weight: 600 }
#header .lang ul.sub { position: absolute; left: calc(4.4vw - 40px); top: 66px; width: 80px; padding: 1em 0; background: #fafafa; border-radius: 8px; display: none }
#header .lang li a { display: block }
#header .global-nav .lang-sp { display: none }
#btn-menu { display: none }

.contents { position: relative; min-height: calc(100vh - 324px); margin-top: 104px; opacity: 0; z-index: 0; }
#site-top.contents { margin-top: 0 }
.site-top { width: 100%; height: 100vh; }
.site-top .top-inner { width: 400px; margin: 0 auto; padding-top: calc(50vh - 58px); text-align: center }
.site-top .langs ul { margin: 1em -1em 0 }
.site-top .langs li { display: inline-block }
.site-top .langs li a, .site-top .langs li span { display: block; padding: 1em }
.site-top.idea h1 img { margin: 0 0 1.25em }
.site-top.idea .top-inner { position: fixed; left: 0; top: calc(50vh - 58px); width: 100%; padding-top: 0; text-align: center; transition: top 1s }
.site-top.idea .top-inner h1 { width: 400px; margin: 0 auto }
.site-top.idea .top-inner.repos { top: calc(50vh - 200px); }
.site-top.idea .top-inner .inner-block { margin: 0 -4.4vw; }
.site-top.idea .top-inner .inner-block h2 { font-size: 18px; font-weight: 400 }
.site-top.idea .top-inner .inner-block p.concept { margin-top: 4em; opacity: 0; transition: all 1s linear }
.site-top.idea .top-inner.repos .inner-block p.concept { top: calc(50vh - 200px); opacity: 1; transition-delay: 0.8s; }
.site-top.idea .scroll-sign { position: fixed; left: 0; bottom: 5vh; width: 100%; text-align: center; padding-top: calc(20vh - 2em); font-size: 12px; z-index: 0; transition: all 1s }
.site-top.idea .scroll-sign span { position: absolute; left: 50%; top: 0; display: block; width: 1px; height: 15vh; background: #c5c5c5 }
.site-top.idea .scroll-sign span.bg { background: #f5f5f5 }
.site-top.idea .scroll-sign.fo { opacity: 0; bottom: 0; }
.sec-idea { width: 100%; height: 100vh; }
.sec-idea .idea-inner { max-width: 640px; padding: calc(50vh - 300px) 8.8vw 0; margin: 0 auto; text-align: center }
.sec-idea .idea-inner .image { width: 100% }
.sec-idea .idea-inner .idea { width: 100%; text-align: left }
.sec-idea .idea-inner .idea .inner-block { display: block; }
.sec-idea .idea-inner .idea h2 { font-size: 18px; margin-bottom: 1em; width: 100%; font-weight: 400 }
.sec-idea .idea-inner .idea p { font-weight: 300 }

.sec { position: relative; z-index: 0; padding: 6.6vw 8.8vw }
.sec .sec-inner { max-width: 1080px; margin: 0 auto }
.sec h1 { font-size: 18px; margin: 0 0 2em -2.2vw }
.sec h2 { font-size: 16px; margin: 0 0 0.5em }

.outline table { margin: 0 -1em }
.outline table th { padding: 1em; font-weight: 300; vertical-align: top }
.outline table td { padding: 1em }
.table table th { padding: 1em 1.5em; font-weight: 300; vertical-align: top; font-size: 12px }
.table table td { padding: 0.5em 1.5em; border-bottom: solid 1px #c5c5c5; vertical-align: top; font-size: 13px }
ol.numbering { margin: 1em 0 0 2em }
ol.numbering li { list-style: decimal; line-height: 1.88em }
.ico-map { display: inline-block; margin-left: 0.5em }
.map { position: relative; margin: 4.4vw  -8.8vw 0 }
.map img { position: relative; z-index: 0 }
.map .area { position: absolute; display: block; width: 80px; height: 80px; border-radius: 40px; margin: -40px 0 0 -40px; z-index: 10 }
.map .area-1 { left: 61.08%; top: 24.36% }
.map .area-2 { left: 46.54%; top: 37.95% }
.map .area-3 { left: 34%; top: 63.46% }
#recruit .outline { margin-top: 2em }
#recruit .outline ul { margin: 0 }
#recruit .outline ul li { line-height: 1.88em; padding-left: 0.88em; text-indent: -0.88em }
#recruit .outline ul li::before { content: "・ " }

.contact-form { border-bottom: solid 1px #c5c5c5; }
.contact-form dl { position: relative; border: solid #c5c5c5; border-width: 1px 1px 0; padding: 0 1em }
.contact-form dl dt { position: absolute; left: 1em; top: 1em; font-weight: 500 }
.contact-form dl dt span { display: block; font-size: 10px }
.contact-form dl dd { margin-left: 14em }
.contact-form dl dd input { padding: 1em; border: none; width: 97%; line-height: 1.88em }
.btn-submit { text-align: center; margin-top: 1.88em }
.btn-submit input { width: 200px; padding: 1em; border: none; color: #fff; background: #8c8c8c; margin: 0 auto; cursor: pointer }
.selectbox {
    display: inline-flex;
    align-items: center;
    position: relative;
    margin: 0.5em 1em;
}

.selectbox::after {
    position: absolute;
    right: 15px;
    width: 8px;
    height: 6px;
    background-color: #8c8c8c;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
    pointer-events: none;
}

.selectbox select {
    appearance: none;
    min-width: 230px;
    height: 3em;
    padding: .4em calc(.8em + 30px) .4em .8em;
    border: 1px solid #ffffff;
    border-radius: 3px;
    background-color: #fff;
    font-size: 1em;
    color: #8c8c8c;
    cursor: pointer;
}
.contact-form dl dd textarea { padding: 1em; border: none; width: 97%; line-height: 1.88em }
.screen-reader-response p { margin-bottom: 2em }
.screen-reader-response ul { display: none }
.wpcf7-not-valid-tip { color: crimson }
.wpcf7-response-output { text-align: center; margin-top: 2em }

.filtering { position: absolute; left: 4.4vw; top: 0; z-index: 100 }
.filtering ul { margin-left: -1em;}
.filtering li { position: relative; display: inline-block; padding: 0 1em; line-height: 24px; border-right: solid 1px #e3e3e3; cursor: pointer }
.filtering li img { margin-bottom: 2px; }
.filtering li:last-child { border-right: none }
.filtering li img { opacity: 0.25; transition: all 0.2s }
.filtering li.active img { opacity: 1 }
.filtering li:not(.active):hover img { opacity: 1 }
.filtering li ul.sub { position: absolute; right: 0; top: 24px; width: 200px; padding: 1em 0; margin: 0; background: #fafafa; border-radius: 8px; display: none }
.filtering li ul.sub li { position: relative; display: inline-block; font-weight: 400; border-right: none; margin-bottom: 12px }
.filtering li ul.sub li a { display: block; padding: 0 1em }

.works-idx { position: relative; z-index: 0; padding: 0 8.8vw }
.works-idx h1.tag-title { font-size: 16px; padding: 6.6vw 0 0; margin-bottom: -4.4vw}
.works-idx h1.tag-title span { font-weight: 400 }
.works-idx ul { max-width: 1280px; margin: 0 auto }
.works-idx ul li { padding: 6.6vw 0 0 }
.project { position: relative; overflow: hidden; width: 100%; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:-moz-flex; display:flex; justify-content:flex-end; -webkit-box-lines:multiple; -moz-box-lines:multiple; -webkit-flex-wrap:wrap; -moz-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; }
.project .thumbnail { width: 50%; order: 1; }
.project .thumbnail img { transition: all 0.2s }
.project .title { width: 50%; display: flex; align-items: center; }
.project .title h2 { font-size: 14px; }
.project .title h2 .location { font-weight: 400; display: block }
.works-idx ul.grid { max-width: inherit; }
.works-idx ul.grid { padding: 4.4vw 0 0; margin: 0 -2.2vw; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:-moz-flex; display:flex; -webkit-box-lines:multiple; -moz-box-lines:multiple; -webkit-flex-wrap:wrap; -moz-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; }
.works-idx ul.grid li { width: calc(33.33% - 4.4vw); padding: 2.2vw }
.works-idx ul.grid li .project .thumbnail { width: 100%; display: block; order: inherit; }
.works-idx ul.grid li .project .title { width: 100%; display: block; padding: 2.2vw 0 0 }
.works-idx ul li a:hover { opacity: 0.85 }

.work-detail { min-height: 100vh; }
.work-detail .work-inner { padding: 5.86vw 8.8vw; text-align: left }
.work-detail .work-inner h1 { font-size: 22px; margin-bottom: 4.4vw }
.work-detail .work-inner .inner-block { margin: 4.4vw 0 0 }
.work-detail .work-inner .inner-block .data { width: 50% }
.work-detail .work-inner .inner-block .data dl { position: relative; padding: 0 4.4vw 1.88em 10em }
.work-detail .work-inner .inner-block .data dl dt { position: absolute; left: 0; top: 0; font-weight: 300 }
.work-detail .work-inner .inner-block .data dl dd { text-align: right }
.work-detail .work-inner .inner-block .description { width: 50% }
.work-detail .work-inner .inner-block .ex { max-width: 1000px; margin: 0 auto }
p.cap { font-size: 12px; margin-top: 1em }
.work-gallery { margin: 0 -14px }
.work-gallery li { width: 33.33% }
.work-gallery li a { display: block; padding: 14px; transition: all 0.2s }
.work-gallery li a:hover { opacity: 0.85 }
.grid-sizer, .grid-item { width: 20% }
.grid-sizer-3 { width: 33.33% }
.grid-sizer-4 { width: 25% }
.gw1 { width: 50%; }
.gw2 { width: 40%; }
.gw3_ { width: 30%; }
.gw3 { width: 33.33%; }
.gw4 { width: 25%; }
.gw0 { width: 100%; }

#footer { position: relative; padding: 60px 8.8vw }
#footer .copyright { font-size: 12px; margin-top: 80px }
#footer .copyright p { display: inline-block }

#lay { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); text-align: center; z-index: 10001; display: none }
#lay .photo {  }
#lay .next { position: absolute; right: 30px; top: 50%; margin-top: -30px }
#lay .prev { position: absolute; left: 30px; top: 50%; margin-top: -30px }
#lay .close { position: absolute; right: 30px; top: 30px; }
#lay .img-num { position: absolute; right: 2.2vw; bottom: 2.2vw; font-size: 14px; letter-spacing:0.12em; }
#lay .img-num span { font-size: 18px; font-weight: 500 }

.mt-0 { margin-top: 0 !important }
.mt-1 { margin-top: 1em }
.mt-2 { margin-top: 2em }
.mt-4 { margin-top: 4em }

@media screen and (max-width: 1000px) {
    #header .global-nav ul { margin-left: -1em }
    #header .global-nav li a { padding: 0 1em }
}

@media screen and (max-width: 780px) {
	
    body { font-size: 12px; line-height: 1.6; letter-spacing: 0.04em; -webkit-text-size-adjust: none; overflow: hidden }
    h2, h3, h4, h5 { letter-spacing: 0.08em; font-weight: 700; }
	
    a { text-decoration:none; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-touch-callout:none; }

    .pc-none { display: block }
    .sp-none { display: none }
    
    #header { width: calc(100% - 8.8vw); padding: 17px 4.4vw; }
    #header.fixed { position: fixed; left: 0; top: 0; }
    #header.fixed.active { transform: translateY(0) }
    #header .site-logo img { height: 16px }
    #header .global-nav { position: absolute; left: 0; top: 50px; width: 100%; height: calc(100vh - 50px); background: #fff; display: none }
    #header .global-nav ul { margin: 20vw 0 0 20vw }
    #header .global-nav li { position: relative; display: block; font-weight: 400; line-height: 32px; width: auto; margin-bottom: 32px }
    #header .global-nav li a { display: inline-block; padding: 0 2em }
    #header .global-nav li a span { position: relative; display: block;}
    #header .global-nav li a span::after { content: ""; display: block; position: absolute; left: 0; top: -1px; width: 0; height: 1px; background: #8c8c8c; transition: all 0.2s }
    #header .global-nav li.current a span::after { width: 100% }
    #header .global-nav li ul.sub { position: relative; left: inherit; top: inherit; width: auto; padding: 1em 0; margin: 0; background: #fafafa; text-align: left; display: none }
    #header .lang { position: absolute; right: 64px; top: 0; width: 64px; font-size: 12px; line-height: 50px; text-align: center; display: none }
    #header .lang span { display: block; padding: 0; font-weight: 600 }
    #header .lang ul.sub { position: absolute; left: calc(4.4vw - 40px); top: 66px; width: 80px; padding: 1em 0; background: #fafafa; text-align: left; display: none }
    #header .lang li a { display: block }
    #header .global-nav .lang-sp { display: block; margin: 13.2vw 0 0 20vw }
    #header .global-nav .lang-sp li { font-size: 12px; line-height: 24px; margin-bottom: 0.5em }
    #header .global-nav .lang-sp li.current { font-weight: bold }
    #btn-menu { position: absolute; right: 0; top: 0; width: 60px; height: 50px; z-index: 10000; cursor: pointer; display: block }
	#btn-menu span.ln1 { position: absolute; left: 50%; top: 50%; margin: -5px 0 0 -25%; width: 50%; height: 1px; background: #8c8c8c; transition: all 0.2s }
	#btn-menu span.ln2 { position: absolute; left: 50%; top: 50%; margin: 5px 0 0 -25%; width: 50%; height: 1px; background: #8c8c8c; transition: all 0.2s }
    #btn-menu.active span.ln1 { transform: rotate(-45deg); margin-top: 0 }
    #btn-menu.active span.ln2 { transform: rotate(45deg); margin-top: 0 }
    
    .contents { position: relative; min-height: calc(100vh - 164px); margin-top: 50px; opacity: 0; z-index: 0; }
    .site-top { width: 100%; height: 100vh; }
    .site-top .top-inner { width: 60%; margin: 0 auto; padding-top: calc(50vh - 58px); text-align: center }
    .site-top .langs ul { margin: 2em -1em 0 }
    .site-top .langs li { display: block; width: 100% }
    .site-top .langs li a { display: block; padding: 0.5em }
    .site-top.idea h1 img { margin: 0 0 1.25em }
    .site-top.idea .top-inner { left: 17.6vw; top: calc(50vh - 80px); width: 64.8%; }
    .site-top.idea .top-inner.vi { left: 8.8vw; top: calc(50vh - 80px); width: 81.6%; }
    .site-top.idea .top-inner h1 { width: 60vw; }
    .site-top.idea .top-inner.repos { top: calc(50vh - 240px); }
    .site-top.idea .top-inner .inner-block { margin: 0 -4.4vw }
    .site-top.idea .top-inner .inner-block h2 { font-size: 16px }
    .sec-idea .idea-inner { max-width: inherit; padding: calc(50vh - 61.8vw) 8.8vw 0; margin: 0 auto; text-align: center }
    .sec-idea .idea-inner .concept { margin-top: 55vw }
    .sec-idea .idea-inner .image { width: 100% }
    .sec-idea .idea-inner .idea { width: 100%; text-align: left; display: block; }
    .sec-idea .idea-inner .idea .inner-block { display: block; }
    .sec-idea .idea-inner .idea h2 { font-size: 16px; text-align: center }
    
    .sec { position: relative; z-index: 0; padding: 6.6vw 4.4vw }
    .sec .sec-inner { max-width: inherit; margin: 0 auto }
    .sec h1 { font-size: 16px; margin: 0 0 1.25em }
    
    .outline table th { padding: 0.5em; white-space: nowrap }
    .outline table td { padding: 0.5em }
    .table { overflow-x: scroll }
    .table table th { padding: 0.5em 1em; font-size: 10px }
    .table table td { padding: 0.5em 1em; border-bottom: solid 1px #c5c5c5; vertical-align: top; min-width: 50px; font-size: 11px }
    .ico-map img { width: 24px }
    .map { position: relative; margin: 4.4vw  -4.4vw 0 }

    .contact-form dl { position: relative; border: solid #c5c5c5; border-width: 1px 1px 0; padding: 0 1em }
    .contact-form dl dt { position: relative; left: inherit; top: inherit; padding: 1em 0 0 }
    .contact-form dl dt span { display: block; font-size: 10px }
    .contact-form dl dd { margin-left: 0 }
    .contact-form dl dd input { padding: 1em 0; border: none; width: 95%; line-height: 1.88em }
    .contact-form dl dd textarea { padding: 1em 0; border: none; width: 95%; line-height: 1.88em }
    
    .filtering { position: absolute; left: 4.4vw; top: 0; z-index: 100 }
    .filtering ul { margin-left: -1em;}
    .filtering li { display: none; }
    .filtering li:last-child { display: inline-block; border-right: none; font-size: 10px }
    .filtering li img {width: 20px }
    .filtering li ul.sub { position: absolute; right: inherit; left: 0; top: 24px; width: 160px; padding: 1em 0; margin: 0; background: #fafafa; border-radius: 8px; display: none }
    
    .works-idx { z-index: 0; padding: 0 4.4vw }
    .works-idx ul {}
    .works-idx ul li { padding: 8.8vw 0 0 }
    .project { position: relative; overflow: hidden; width: 100%; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:-moz-flex; display:flex; justify-content:flex-end; -webkit-box-lines:multiple; -moz-box-lines:multiple; -webkit-flex-wrap:wrap; -moz-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; }
    .project .thumbnail { width: 100%; order: 0; transition: all 0.2s }
    .project .title { width: 1000%; display: block; padding-top: 4.4vw }
    .project .title h2 { font-size: 12px; }
    .project .title h2 .location { font-weight: 400; display: block }
    .works-idx ul.grid { padding: 4.4vw 0 0; margin: 0 -2.2vw; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:-moz-flex; display:flex; -webkit-box-lines:multiple; -moz-box-lines:multiple; -webkit-flex-wrap:wrap; -moz-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; }
    .works-idx ul.grid li { width: calc(33.33% - 4.4vw); padding: 2.2vw }
    .works-idx ul.grid li .project .thumbnail { width: 100%; display: block; order: inherit; }
    .works-idx ul.grid li .project .title { width: 100%; display: block; padding: 2.2vw 0 0 }
    
    .work-detail .work-inner { padding: 5vw 5vw; text-align: left }
    .work-detail .work-inner h1 { font-size: 16px; margin-bottom: 4.4vw }
    .work-detail .work-inner .inner-block { margin: 5vw 0 0 }
    .work-detail .work-inner .inner-block .data { width: 100% }
    .work-detail .work-inner .inner-block .data dl { position: relative; padding: 0 0 1.88em 10em }
    .work-detail .work-inner .inner-block .data dl dt { position: absolute; left: 0; top: 0; font-weight: 300 }
    .work-detail .work-inner .inner-block .data dl dd { text-align: right }
    .work-detail .work-inner .inner-block .description { width: 100% }
    p.cap { font-size: 10px; }
    .work-gallery { margin: 0 -2.2vw }
    .work-gallery li { width: 50% }
    .work-gallery li a { display: block; padding: 2.2vw; transition: all 0.2s }
    .work-gallery li a:hover { opacity: 0.5 }
    .grid-sizer, .grid-item { width: 20% }
    .grid-sizer-3 { width: 50% }
    .grid-sizer-4 { width: 33.33% }
    .gw1 { width: 100%; }
    .gw2 { width: 100%; }
    .gw3_ { width: 50%; }
    .gw3 { width: 50%; }
    .gw4 { width: 33.33%; }
    .gw0 { width: 100%; }
    
    #lay { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); text-align: center; z-index: 10001; display: none }
    #lay .photo {  }
    #lay .next { position: absolute; right: 0; top: 88%; margin-top: -30px }
    #lay .prev { position: absolute; left: 0; top: 88%; margin-top: -30px }
    #lay .close { position: absolute; right: 0; top: 0; }
    #lay h3 { position: absolute; left: 20px; bottom: 20px; font-size: 14px; line-height: 1.2em; background: #f7f7f7; font-style: italic; font-weight: 500 }
    #lay .img-num { position: absolute; right: 20px; bottom: 20px; font-size: 18px; font-style: italic; letter-spacing:0.24em; }
    #lay .img-num span { font-size: 26px; font-weight: 500 }
    
    #footer { position: relative; padding: 30px 4.4vw }
    #footer .copyright { font-size: 10px; margin-top: 40px }


}




@media screen and (max-width: 320px) {

}