@charset "utf-8";


/* ---------------------------------------
	min-width: 1500px
--------------------------------------- */

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

body {
	font-size: 106.25%; /* 17px base */
}

.c-header-logo > a {
	width: 100%;
}

.c-header-nav > li {
	margin-left: 5%;
}


/* projects-article
--------------------------- */

.projects-header-title {
	width: 22%;
}

.projects-article {
	padding: 0 12% 0 20%;
}


}


/* ---------------------------------------
	max-width: 1280px
--------------------------------------- */

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

/* top-hero
--------------------------- */

.top-hero {
	max-height: 850px;
}

}

/* ---------------------------------------
	max-width: 1080px
--------------------------------------- */

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

/* top-hero
--------------------------- */

.top-hero {
	max-height: 700px;
}

}



/* ---------------------------------------
	max-width: 700px
--------------------------------------- */

/*@media screen and (max-width: 700px) {*/ /*SIAO*/
@media screen and (max-width: 1000px) {

/* =============================================================

	Base

* ============================================================= */

body {
	min-width: 320px;
}

.c-wrapper {
	min-width: 320px;
	padding-top: 0;
	overflow: hidden;
}

body.spnav-open > .c-wrapper {
	position: fixed;
}

.c-body {
	border: 15px solid #fff !important;
	padding-top: 50px;
}
.c-body.top {
	padding-top: 0;
	margin-top: 65px;
}


/* =============================================================

	Layouts

* ============================================================= */


/* c-container
--------------------------- */

.c-container,
.c-container.wide,
.c-container.narrow {
	margin: 50px auto;
	padding-left: 7%;
	padding-right: 7%;
}

.c-container.inner-space {
	margin: 0 auto;
	padding-top: 50px;
	padding-bottom: 50px;
}


/* grid
--------------------------- */

.c-grids {
	margin-left: 0;
	margin-right: 0;
}

.c-grids > * {
	float: none;
	padding-left: 0;
	padding-right: 0;
	width: auto;
}
.c-grids.inline > * {
	display: block;
}

.c-sp-grids {
	margin-left: -2%;
	margin-right: -2%;
}

.c-sp-grids > * {
	width: 50%;
	float: left;
	padding-left: 2%;
	padding-right: 2%;
}

.c-sp-grids.inline > * {
	float: none;
	display: inline-block;
	vertical-align: top;
}
.c-sp-grids.inline.medium > * {
	vertical-align: middle;
}


/* =============================================================

	Typography

* ============================================================= */

.c-sp-tal-left { text-align: left !important; }
.c-sp-tal-center { text-align: center !important; }


/* c-title-A
--------------------------- */

.c-title-A {
	font-size: 1.9375em; /* 31px */
	margin-bottom: 25px;
}

.c-title-A.small {
	font-size: 1.625em; /* 26px */
}

.c-title-A.xsmall {
	font-size: 1.3125em; /* 21px */
}

.c-title-A.c-zigzag {
	margin-bottom: 70px;
}


/* c-title-B
--------------------------- */

.c-title-B,
.c-title-B.large {
	font-size: 0.875em; /* 14px */
	padding: 13px 10px 11px;
	margin-left: -2%;
	margin-right: -2%;
}


/* c-subtitle-A
--------------------------- */

.c-title-A + .c-subtitle-A {
	margin-top: -15px;
	margin-bottom: 35px;
}


/* c-lead-A
--------------------------- */

.c-lead-A {
	line-height: 2;
	text-align: justify; /* for ff, webkit */
	text-justify: inter-ideograph; /* for IE */
}

.c-lead-A > br {
	display: none;
}


/* =============================================================

	Links

* ============================================================= */

/* c-button
--------------------------- */

a.c-button,
span.c-button,
.c-button > a,
.c-button-set > li > a {
	padding: 14px 30px 14px 15px;
	min-width: 240px;
}

a.c-button.small,
span.c-button.small,
.c-button.small > a,
.c-button-set.small > li > a {
	min-width: 240px;
}


/* c-link
--------------------------- */

.c-link {
	font-size: 0.875em; /* 14px */
}

.c-link:after {
	margin-left: 5px;
}

.c-link:before {
	height: 1px;
}

/* pagenation
--------------------------- */

.c-pagenation {
	margin-left: -5%;
	margin-right: -5%;
}

.c-pagenation a,
.c-pagenation strong {
	line-height: 32px;
	width: 28px;
	margin: 0 2px;
}
.c-pagenation strong {
	width: 32px;
	margin: 0 4px;
}

.c-pagenation i {
	margin: 0 1px;
}



/* =============================================================

	Forms

* ============================================================= */

/* c-submit
--------------------------- */

.c-submit > input {
	line-height: 51px;
	min-width: 240px;
}


/* =============================================================

	Common

* ============================================================= */

.mt-0 { margin-top: 0 !important; }
.mt-10 { margin-top: 8px !important; }
.mt-20 { margin-top: 16px !important; }
.mt-30 { margin-top: 24px !important; }
.mt-40 { margin-top: 32px !important; }
.mt-50 { margin-top: 40px !important; }
.mt-60 { margin-top: 48px !important; }
.mt-70 { margin-top: 56px !important; }
.mt-80 { margin-top: 64px !important; }
.mt-90 { margin-top: 72px !important; }
.mt-100 { margin-top: 80px !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-10 { margin-bottom: 8px !important; }
.mb-20 { margin-bottom: 16px !important; }
.mb-30 { margin-bottom: 24px !important; }
.mb-40 { margin-bottom: 32px !important; }
.mb-50 { margin-bottom: 40px !important; }
.mb-60 { margin-bottom: 48px !important; }
.mb-70 { margin-bottom: 56px !important; }
.mb-80 { margin-bottom: 64px !important; }
.mb-90 { margin-bottom: 72px !important; }
.mb-100 { margin-bottom: 80px !important; }

.pt-0 { padding-top: 0 !important; }
.pt-10 { padding-top: 8px !important; }
.pt-20 { padding-top: 16px !important; }
.pt-30 { padding-top: 24px !important; }
.pt-40 { padding-top: 32px !important; }
.pt-50 { padding-top: 40px !important; }
.pt-60 { padding-top: 48px !important; }
.pt-70 { padding-top: 56px !important; }
.pt-80 { padding-top: 64px !important; }
.pt-90 { padding-top: 72px !important; }
.pt-100 { padding-top: 80px !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-10 { padding-bottom: 8px !important; }
.pb-20 { padding-bottom: 16px !important; }
.pb-30 { padding-bottom: 24px !important; }
.pb-40 { padding-bottom: 32px !important; }
.pb-50 { padding-bottom: 40px !important; }
.pb-60 { padding-bottom: 48px !important; }
.pb-70 { padding-bottom: 56px !important; }
.pb-80 { padding-bottom: 64px !important; }
.pb-90 { padding-bottom: 72px !important; }
.pb-100 { padding-bottom: 80px !important; }


/* c-island
--------------------------- */

.c-island,
.c-island.small,
.c-island.narrow {
	padding: 30px 10%;
	margin: 0 -2%;
}


/* c-badge
--------------------------- */

.c-badge,
.c-badge.small {
	font-size: 0.6875em !important; /* 11px */
	line-height: 1.4 !important;
	width: 66px;
	height: 66px;
}

.c-badge.absolute,
.c-badge.small.absolute {
	top: -33px;
	margin-left: -33px;
}

.c-badge.double > span {
	margin-top: -1.3em;
}


/* c-card
--------------------------- */

.c-card-list {
	margin-bottom: -25px;
}

.c-card {
	padding-bottom: 20px;
	margin-bottom: 25px;
}

.c-card.badge {
	margin-top: 33px;
}

.c-card > *,
.c-card > div > * {
	margin: 5px 5% 0;
}
.c-card > div {
	margin: 0;
}

.c-card > figure {
	margin-bottom: 20px;
}


/* c-aside-nav
--------------------------- */

.c-aside-nav.c-container {
	padding-top: 60px;
	padding-bottom: 50px;
}

.c-aside-nav > .c-title-A {
	margin-bottom: 30px;
}

.c-aside-nav > h2:after {
	top: -35px;
}


/* c-article
--------------------------- */

.c-article > header {
	margin-bottom: 20px;
}

.c-article > figure {
	margin: 0 -2% 25px;
}


/* c-contactbox
--------------------------- */

.c-contactbox {
	padding: 50px 7% 30px;
}

.c-contactbox > .phone {
	letter-spacing: 1px;
}


/* c-pulldown

--------------------------- */

.c-pulldown .c-button {
	color: #515759;
	font-weight: 600;
	background-color: #dad8c8;
	-webkit-box-shadow: inset 0 0 0 #C8C5AF;
	        box-shadow: inset 0 0 0 #C8C5AF;
}
.c-pulldown .c-button:hover {
	-webkit-box-shadow: inset 260px 0 0 #C8C5AF;
	        box-shadow: inset 260px 0 0 #C8C5AF;
	background-color: #C8C5AF;
}
.c-pulldown:hover .c-button {
	background-color: #C8C5AF;
}

.c-pulldown .c-button:before,
.c-pulldown .c-button:after {
	background-position: -350px -200px;
}

.c-pulldown-item:after {
	background-position: -350px -200px;
}


/* =============================================================

	c-header

* ============================================================= */

.c-header {
	min-width: 0;
	height: auto;
	position: absolute;
	top: 0;
	padding-bottom: 0;
}


/* c-header-logo
--------------------------- */

.c-header-logo {
	float: left;
	width: 160px !important;
	height: 80px !important;
	position: absolute;
}

.c-header-logo > a > span {
	width: 174px !important;
	height: 53px !important;

	margin-left: -37px;
	top: 13px;
	-webkit-transition: none;
	transition: none;
	background-size:contain!important;
	background-repeat: no-repeat!important;
	background-image: url(../images/headerlogo.png)!important;
}

.c-header-logo > a > span:after {
	content: none;
}
.footer-bg {
	padding-left: 0;
}

/* c-header-spnav
--------------------------- */

.c-header-spnav {
	width: 0;
	height: 100%;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 500;
}
body.spnav-open .c-header-spnav {
	width: 280px;
}

.c-header-spnav-drawer {
	height: 100%;
	width: 280px;
	max-width: 350px;
	background: #fff;
	overflow-y: auto;
	position: absolute;
	right: 0;
	z-index: 2;
	-webkit-transform: translate(100%, 0);
	    -ms-transform: translate(100%, 0);
	        transform: translate(100%, 0);
	-webkit-transition: -webkit-transform .4s;
	transition: -webkit-transform .4s;
	transition: transform .4s;
	transition: transform .4s, -webkit-transform .4s;
	-webkit-overflow-scrolling: touch;
}

body.spnav-open .c-header-spnav-drawer {
	-webkit-transform: translate(0, 0);
	    -ms-transform: translate(0, 0);
	        transform: translate(0, 0);
}

.c-header-spnav-trigger {
	display: block;
	width: 60px;
	height: 60px;
	background-color: #fff;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 502;
	cursor: pointer;
}
.c-header-spnav-trigger > span,
.c-header-spnav-trigger > span:before,
.c-header-spnav-trigger > span:after {
	text-indent: -9999px;
	display: block;
	width: 50%;
	height: 3px;
	border-radius: 5px;
	background-color: #325E35;
	position: absolute;
	top: 50%;
	left: 25%;
	margin-top: -1px;
	-webkit-transition: background-color .3s .2s;
	transition: background-color .3s .2s;
}
.c-header-spnav-trigger > span:before,
.c-header-spnav-trigger> span:after {
	content: "";
	width: 100%;
	left: 0;
	margin-top: 8px;
	-webkit-transition: margin .3s .2s, width .3s, -webkit-transform .3s;
	transition: margin .3s .2s, width .3s, -webkit-transform .3s;
	transition: margin .3s .2s, width .3s, transform .3s;
	transition: margin .3s .2s, width .3s, transform .3s, -webkit-transform .3s;
}
.c-header-spnav-trigger > span:after {
	margin-top: -12px;
}

body.spnav-open .c-header-spnav-trigger > span {
	background-color: transparent;
	-webkit-transition: background-color .3s;
	transition: background-color .3s;
}
body.spnav-open .c-header-spnav-trigger > span:before,
body.spnav-open .c-header-spnav-trigger > span:after {
	margin: -1px 0 0 -1px;
	width: 120%;
	-webkit-transition: margin .3s, width .2s .3s, -webkit-transform .2s .3s;
	transition: margin .3s, width .2s .3s, -webkit-transform .2s .3s;
	transition: margin .3s, width .2s .3s, transform .2s .3s;
	transition: margin .3s, width .2s .3s, transform .2s .3s, -webkit-transform .2s .3s;
}
body.spnav-open .c-header-spnav-trigger > span:before {
	-webkit-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	        transform: rotate(-45deg);
}
body.spnav-open .c-header-spnav-trigger > span:after {
	-webkit-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
}


body.spnav-open .c-spnav-bcg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.5);
	z-index: 1;
}



.c-header-spnav-home {
	display: block;
	width: 102px;
	height: 72px;
	margin: 35px auto 0;
}

.c-header-spnav-home > a {
	text-indent: -9999px;
	display: block;
	width: 100%;
	height: 100%;
	background: url(../images/top_logo.png) no-repeat;
	background-size: contain;
}


/* c-header-nav
--------------------------- */

.c-header-nav {
	padding: 30px 7% 30px!important;
}

.c-header-nav > li {
	float: none;
	margin-left: 0;
}

.c-header-nav > li {
	border-top: 1px solid #ccc;
}

.c-header-nav > li > a {
	font-size: 0.9375em; /* 15px */
	text-align: center;
	padding: 23px 10px;
}
.c-header-nav > li > a.active {
	color: #78B97F;
}
.c-header-nav > li > a.active:after {
	content:  none;
}

.c-header-nav > li > a:after {
	content: none;
}


.c-header-nav-mega-outer {
	position: static;
	border-top: none !important;
	visibility: visible;
}

.c-header-nav-mega {
	width: auto;
	height: auto;
	padding: 0;
	-webkit-box-shadow: none !important;
	        box-shadow: none !important;
	border-bottom: none;
	opacity: 1;
	visibility: visible;
	margin: -10px 0 10px;
	-webkit-transform: rotateX(0deg);
	        transform: rotateX(0deg);
}

.c-header-nav-mega > ul {
	padding: 0 !important;
}

.c-header-nav-mega .pdo-nav-item {
	height: auto;
	margin-bottom: 0;
}

.c-header-nav-mega .pdo-nav-item > .c-button {
	color: #777C80;
	letter-spacing: .2em;
	text-align: center;
	width: auto;
	min-width: 0;
	padding: 10px;
	margin: 0;
	background-color: transparent!important;
	-webkit-box-shadow: none !important;
	        box-shadow: none !important;
}

.c-header-nav-mega .pdo-nav-item > .c-button:before,
.c-header-nav-mega .pdo-nav-item > .c-button:after {
	content: none;
}


/* c-header-subnav
--------------------------- */

.c-header-subnav {
	line-height: 1.6;
	width: auto;
	text-align: center;
	position: static;
	padding: 0 12% 35px;
}

.c-header-subnav > li {
	width: 100%;
}
.c-header-subnav > li:first-child {
	border: none;
}
.c-header-subnav > li + li {
	margin-top: 10px;
}

.c-header-subnav > li > a > span {
	font-size: 0.8125em; /* 13px */
	display: block;
	padding: 13px 20px;
	background-color: #78B97F;
	border-right: none !important;
}


/* =============================================================

	c-footer

* ============================================================= */

.c-footer {
	padding: 40px 5% 30px;
}

/* c-footer-info
--------------------------- */

.c-footer-info {
	margin: 0 0 30px;
	padding: 0 0 30px;
}

/* c-footer-name
--------------------------- */

.c-footer-name {
	text-align: center;
	margin-bottom: 20px;
}

.c-footer-name > a > span {
	display: block;
	margin: 0;
}


/* c-footer-address
--------------------------- */

.c-footer-address {
	margin-right: 0;
	padding-right: 0;
	float: none;
}

.c-footer-address dt {
	text-align: center;
	margin-bottom: 0;
}

.c-footer-address dd {
	text-align: center;
	margin-bottom: 20px;
}

.c-footer-address dd > span {
	display: inline-block;
}


/* c-footer-contact
--------------------------- */

.c-footer-contact {
	width: auto;
	float: none;
	margin-top: 10px;
	padding-top: 30px;
	border-top: 1px solid rgba(255,255,255,0.2);
}


/* c-footer-nav
--------------------------- */

.c-footer-nav {
	margin-bottom: 0;
	padding: 0 5%;
}

.c-footer-nav-item {
	margin: 0;
}

.c-footer-nav-item > li {
	width: 50%;
	float: left;
}

.c-footer-nav-item > li > a {
	font-size: 0.75em; /* 12px */
	letter-spacing: 1px;
	display: inline-block;
	padding: 5px;
	margin-bottom: 3px;
}


/* c-footer-fb
--------------------------- */

.c-footer-fb {
	position: static;
	margin: 20px auto;
}


/* c-footer-copy
--------------------------- */

.c-footer-copy {
	text-align: center;
}


/* =============================================================

	top

* ============================================================= */

/* top-hero
--------------------------- */

.top-hero {
	height: 70%;
	min-height: 0;
	margin-top: 0;
	padding-top: 0;
	padding-bottom: 80px;
}

.top-hero-img {
	height: 0;
	margin: 0;
	padding-top: 75%;
}

.top-hero-img > li {
	width: auto;
	height: auto;
	margin-left: -55%;
}

.top-hero-txt {
	text-align: center;
	position: relative;
	top: 0;
	left: 0;
	margin-top: -20px;
}

.top-hero-name {
	letter-spacing: 2px;
	margin-bottom: 0;
	display: inline-block;
	padding: 25px 10% 10px;
	background-color: #fff;
}

.top-hero-copy {
	font-size: 2em; /* 32px */
	margin-bottom: 20px;
}

.top-hero-copy > span {
	width: auto !important;
	display: inline-block;
	margin: 0 .3em;
	-webkit-transition: opacity .4s, -webkit-transform .6s !important;
	transition: opacity .4s, -webkit-transform .6s !important;
	transition: opacity .4s, transform .6s !important;
	transition: opacity .4s, transform .6s, -webkit-transform .6s !important;
	-webkit-transition-delay: 1s !important;
	        transition-delay: 1s !important;
}

.top-hero-btn {
	-webkit-transition-delay: 1.2s;
	        transition-delay: 1.2s;
}


/* top-updates
--------------------------- */

.top-updates.c-container {
	padding-bottom: 0;
}

.top-updates-item > .thum {
	margin-top: -40px;
}


/* top-about
--------------------------- */

.top-about {
	overflow: hidden;
}

.top-about-title {
	text-align: center;
	margin-top: 20px;
	margin-bottom: 100px;
}

.top-about-title > span {
	width: 233px;
	height: 67px;
	background-position: -100px -200px;
}

.top-about-title:after {
	position: static;
	display: inline-block;
	margin: 40px 0 0 0;
}

.top-about-img {
	width: 100%;
  left: 0;
}

.top-about > .c-lead-A > br {
	display: none;
}

.top-about > .c-button {
	margin-top: 40px;
}


/* top-works
--------------------------- */

.top-works-grids {
	padding-top: 0;
	position: static;
}

.top-works-grids > .grid {
	width: 100% !important;
	height: auto !important;
	position: relative;
}

.top-works-grids > .grid.imgset1,
.top-works-grids > .grid.imgset2 {
	padding-top: 80%;
}

.top-works-grids > .grid > div {
	position: relative;
	text-align: center;
	background-color: transparent;
}

.top-works-grids > .grid > div > a {
	position: relative;
	top: 0;
	left: 0;
	margin: 40px 0;
	border: none;
}

.top-works-grids > .grid > a > b {
	top: auto !important;
	left: 4%;
	bottom: 4%;
}


/* =============================================================

	pdo

* ============================================================= */


/* pdo-header
--------------------------- */

.pdo-header {
	overflow: hidden;
	padding-bottom: 0 !important;
}

.pdo-header-island {
	width: auto;
	margin-top: 50%;
}

.pdo-header-island > .c-subtitle-A {
	text-align: center;
}

.pdo-header-island > .c-title-A {
	text-align: center;
}

.pdo-header-img {
	width: 120%;
	height: auto;
}


/* pdo-nav
--------------------------- */

.pdo-nav-item {
	text-align: center;
	height: auto;
	background-color: transparent !important;
	margin-bottom: 15px;
}

.pdo-nav-item > img {
	display: none;
}

.pdo-nav-item > .c-button {
	position: relative;
	top: 0;
	left: 0;
	margin: 0 auto;
}


/* =============================================================

	pdo-design

* ============================================================= */


/* design-header
--------------------------- */

.design-header > .c-title-A {
	font-size: 1.9375em; /* 31px */
}

.design-article-item + .design-article-item {
	margin-top: 40px;
}

.design-article-item.c-grids > p {
	padding-left: 5% !important;
	padding-right: 5% !important;
	margin-top: 40px;
}

.design-article-cap {
	margin-top: 7%;
	margin-right: 5%;
}


/* =============================================================

	pdo-process

* ============================================================= */

.process-article:before {
	content: none;
}


/* process-timeline
--------------------------- */

.process-timeline {
	display: none;
}


/* process-title
--------------------------- */

.process-title {
	display: none;
}


/* process-step
--------------------------- */

.process-step {
	position: relative;
	padding-top: 0;
	margin: 70px 0 0;
}

/* process-step-header */

.process-step-header {
	position: relative;
	margin-bottom: 25px;
}


.process-step-header > h2,
.process-step-header > .during {
	text-align: center;
	width: auto;
	position: static;
	padding: 0;
	margin-top: -.2em;
}
.process-step-header > h2 {
	margin-top: 15px;
}


/* .process-step-list */

.process-step-list {
	margin-bottom: 40px;
}

.process-step-list > li {
	width: auto;
	margin: 0 -2% 20px !important;
	padding: 25px 10% 30px;
}

.process-step-list > li:before {
	content: none;
}

.process-step-list > li:after {
	width: 0;
	height: 0;
	border-radius: 0;
	border: 10px solid transparent;
	border-top: 14px solid #78B97F;
	background-color: transparent;
	top: auto !important;
	bottom: -18px;
	left: 50% !important;
	margin: 0 0 0 -10px !important;
}
.process-step:last-child .process-step-list > li:last-child:after {
	content: none;
}

.process-step-list > li > figure {
	width: auto;
	display: block;
}

.process-step-list > li > figure + p {
	width: auto;
	padding: 20px 7% 30px;
}

.process-step-list > li > p > b {
	text-align: center;
	font-size: 1.1333em !important; /* 17px */
	margin-bottom: 10px;
}


/* .process-step-pay */

.process-step-pay {
	line-height: 2;
	margin: 40px -2%;
}

.process-step-pay > dt {
	line-height: 50px;
	width: auto;
	position: static;
}

.process-step-pay > dt:after {
	content: none;
}

.process-step-pay > dd {
	font-size: 0.875em; /* 14px */
	line-height: 1.8;
	padding: 17px 5%;
}
.process-step-pay > dd > span {
	font-size: 1.1429em; /* 1px */
}



/* =============================================================

	pdo-points

* ============================================================= */


/* points-article
--------------------------- */

.points-article-item {
	padding-top: 0;
}


.points-article-item + .points-article-item {
	margin-top: 60px;
}

.points-article-item > .c-badge {
	font-size: 1.5em !important; /* 24px */
	position: relative;
	left: 0;
	margin: 0 auto 20px !important;
}
.points-article-item > .c-badge > span {
	margin-top: -.7em;
}

.points-article-item > div {
	margin-bottom: 40px;
}

.points-article-item .c-title-A {
	margin-bottom: 60px;
}

.points-article-item.c-grids > figure {
	padding: 0 !important;
}

.points-article-item.c-grids > figure > span {
	margin: 0;
}


/* =============================================================

	about

* ============================================================= */


/* about-studio
--------------------------- */

.about-studio > h1 {
	width: 303px;
	height: 87px;
	margin: 0 auto 30px;
}

.about-studio > h1 > span {
	height: 87px;
	background-position: 0 -300px;
}

body.load-end .about-studio > h1 > span {
	width: 303px;
	-webkit-transition: width .6s cubic-bezier(0.25, 0.46, 0.45, 0.94) .8s;
	transition: width .6s cubic-bezier(0.25, 0.46, 0.45, 0.94) .8s;
}

.about-studio > p {
	text-shadow: none;
}


/* about-drawing
--------------------------- */

.about-drawing {
	overflow: hidden;
	margin: -30px 0 -10px !important;
}

.about-drawing:before {
	content: "" !important;
	padding-top: 10% !important;
	opacity: 1 !important;
	background: -webkit-linear-gradient(top,  rgba(240,239,232,1) 0%,rgba(240,239,232,0) 100%) !important; /* Chrome10-25,Safari5.1-6 */
	background: -webkit-gradient(linear,  left top, left bottom,  from(rgba(240,239,232,1)),to(rgba(240,239,232,0))) !important;
	background: linear-gradient(to bottom,  rgba(240,239,232,1) 0%,rgba(240,239,232,0) 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.about-drawing:after {
	content: "" !important;
	padding-top: 110px;
	opacity: 1 !important;
	background: -webkit-linear-gradient(top,  rgba(240,239,232,0) 0%,rgba(240,239,232,1) 100%) !important; /* Chrome10-25,Safari5.1-6 */
	background: -webkit-gradient(linear,  left top, left bottom,  from(rgba(240,239,232,0)),to(rgba(240,239,232,1))) !important;
	background: linear-gradient(to bottom,  rgba(240,239,232,0) 0%,rgba(240,239,232,1) 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.about-drawing > figure {
	margin: -20px -140px -40px -120px;
}

.about-drawing-btn {
	margin-left: -120px;
	bottom: 0 !important;
}

.about-drawing-btn > a.close {
	display: none !important;
}
.about-drawing-btn > a.open {
	display: block !important;
}


.about-drawing-point {
	display: none;
}

.about-layer {
	display: none;
}


/* about-access
--------------------------- */

.about-access-map {
	height: 240px;
	margin: -30px -12% 30px;
}

.about-access-map > .canvas {
	margin: 15px 15px 0;
}


/* about-message
--------------------------- */

.about-message {
	overflow: hidden;
	padding-top: 34px;
	margin-top: -10px;
}
.about-message > .c-badge {
	top: 0;
}

.about-message-img {
	width: auto;
	height: auto;
	margin: 0 -200px -30px -60px;
}

.about-message-txt {
	margin: 0 10% !important;
}

.about-message-txt > .name:before {
	display: block;
	margin: 0 auto 5px;
}


/* about-member
--------------------------- */

.about-member-lead {
	color: #515759;
	font-size: 1em;
	width: auto;
	height: auto !important;
	padding: 0;
	background-color: transparent;
	position: static;
	margin: -10px 0 40px;
}

.about-member .about-member-list > li:first-child {
	margin-right: 0;
}


/* about-fellow
--------------------------- */

.about-fellow-img {
	margin-bottom: 40px;
}

.about-fellow-img > span {
	margin: 0;
}

.about-fellow-txt > .btn {
	margin-top: 40px;
	text-align: center;
}


/* about-profile
--------------------------- */

.about-profile-dlist {
	margin: 20px 0 -15px;
}

.about-profile-dlist > dt {
	color: #2E3233;
	text-align: center;
	width: auto;
	position: static;
	padding: 5px 0;
	background-color: #E2E0D3;
}

.about-profile-dlist > dd {
	text-align: center;
	padding: 15px 0;
	background-color: transparent !important;
}

.about-profile-address > dd > br {
	display: inline;
}

.about-profile-address > dd {
	text-align: center;
}

.about-profile-address > dd > .c-link {
	position: relative;
	top: 0;
	margin-top: 5px;
}

.about-profile-address > dd + dt {
	border-top: 1px solid #ccc;
	padding: 15px 0 0;
	margin: 15px 0 0;
}


/* =============================================================

	member

* ============================================================= */

/* member-header
--------------------------- */

.member-message-header > .c-badge {
	margin-bottom: 20px;
}

.member-message-header > .c-subtitle-A {
	font-size: 1em;
	margin-bottom: 30px;
}

.member-message-header > .c-subtitle-A > b {
	font-size: 1.6875em; /* 27px */
	display: block;
}


/* member-message
--------------------------- */

.member-message > figure {
	margin-bottom: 30px;
}


/* member-profile
--------------------------- */

.member-profile-list {
	padding-top: 0;
	margin-bottom: 0;
}

.member-profile-list:after {
	content: none;
}

.member-profile-list > dt {
	color: #2E3233;
	font-size: 0.9375em; /* 15px */
	font-weight: 600;
	text-align: left;
	width: auto;
	padding: 20px 0 5px;
	position: relative;
}

.member-profile-list > dt:before {
	content: "";
	display: inline-block;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	margin-right: 5px;
	background-color: #78B97F;
	z-index: 1;
}


.member-profile-list > dd {
	padding: 0;
}

.member-profile-list > dd:before,
.member-profile-list > dd:after {
	content: none;
}


/* =============================================================

	fellow

* ============================================================= */

/* fellow-header
--------------------------- */

.fellow-header {
	margin-bottom: -10px;
}

.fellow-header-txt {
	position: relative;
	padding-bottom: 60px !important;
}

.fellow-header-txt:before,
.fellow-header-txt:after {
	content: none;
}

/* fellow-member
--------------------------- */

.fellow-member-item + .fellow-member-item {
	margin-top: 50px;
}


.fellow-member-item > div > figure {
	max-width: 240px;
	margin: 0 auto;
}

.fellow-member-txt > .c-title-A {
	font-size: 1em; /* 16px */
	text-align: center;
	margin-top: 25px;
	margin-bottom: 20px;
}

.fellow-member-txt > .c-title-A > b {
	font-size: 1.4706em; /* 25px */
	display: block;
	margin-left: 0;
	margin-top: 3px;
}

.fellow-member-txt > .link {
	text-align: center;
	margin-top: 20px;
}


/* =============================================================

	projects

* ============================================================= */

/* projects-list
--------------------------- */

.projects-list-list > li {
	border-bottom: 1px solid transparent;
}

.projects-list-item {
	margin-top: 30px;
}

.projects-list-item > .thum {
	width: 80px;
	height: 80px;
	margin: 25px auto 20px;
}


/* projects-header
--------------------------- */

.projects-header {
	width: auto;
	min-width: 0;
	margin: 60px auto -15px;
    padding-left: 7%;
    padding-right: 7%;
    position: static;
}

.projects-header-title {
	text-align: center;
	width: auto;
	position: relative !important;
	top: 0 !important;
	left: 0 !important;
	margin-top: 0;
}

.projects-header-title > .c-card {
	text-align: center;
	padding-bottom: 0;
}

.projects-header-title > .c-card > .thum {
	width: 70px;
	height: 70px;
	margin-bottom: 0;
	display: inline-block;
	vertical-align: middle;
	margin-right: -70px;
}

.projects-header-title > .c-card > div {
	padding-left: 70px;
	display: inline-block;
	vertical-align: middle;
}

.projects-header-title > .c-card .title,
.projects-header-title > .c-card .subtitle {
	text-align: left;
	margin-right: 0;
	margin-left: 20px;
}

.projects-header-link {
	display: none;
}


/* projects-timeline
--------------------------- */

.projects-timeline {
	display: none;
}


/* projects-article
--------------------------- */

.projects-article {
	padding: 0;
}

.projects-article header:before {
	content: "";
	width: 100%;
	height: 1px;
	background-color: #ccc;
	position: absolute;
	top: 34px;
	left: 0;
}

.projects-article > .c-article {
	padding-top: 0;
	margin-top: 0;
}




/* =============================================================

	works

* ============================================================= */

/* works-filter
--------------------------- */

.works-filter {
	display: none;
}

.works-filter-sp {
	display: block;
	margin-top: 50px;
	width: 76%;
	margin: 50px auto -20px;
	position: relative;
	z-index: 1;
}


/* works-list
--------------------------- */

.c-aside-nav .works-list-list > li {
	position: relative;
}

.c-aside-nav .works-list-list > li + li:before {
	content: "";
	width: 100%;
	height: 0;
	border-top: 1px dotted #ccc;
	position: absolute;
	top: -25px;
}

.works-list-item.clear {
	text-align: left;
	height: 12em !important;
	padding: 0;
	margin-bottom: 50px;
}

.works-list-item.clear > figure {
	width: 40%;
	height: 100%;
	display: inline-block;
	vertical-align: middle;
}

.works-list-item.clear > .txt {
	width: 60%;
	padding: 0 10px;
	margin-top: -15px;
	display: inline-block;
	vertical-align: middle;
}



/* works-cnt
--------------------------- */

.works-cnt {
	margin-bottom: -10px;
}

.works-grids {
	margin-right: 0;
	margin-left: 0;
	padding-top: 0;
}

.works-grids > .grid {
	position: static;
	border: none;
	border-bottom: 10px solid transparent;
	width: auto !important;
	height: auto !important;
}

.works-cnt-title {
	width: auto;
	position: static;
	margin: 60px 0 20px;
	padding: 0 7%;
}

.works-cnt-title > .c-title-A {
	font-size: 1.9375em;
}

.works-cnt-title-img {
	max-width: 400px;
	position: static;
	padding: 0 7%;
	margin: 0 auto 30px;
}

.works-cnt-txt-outer:before {
	content: none;
}

.works-cnt-txt {
	width: auto;
	padding: 30px 7%;
	max-width: none;
}


/* works-sublink
--------------------------- */

.works-sublink {
	padding-bottom: 0;
}

.works-sublink-item {
	width: auto;
	padding-top: 45px;
	padding-bottom: 30px;
	margin-top: 20px !important;
}

.works-sublink-item > .thum {
	display: none;
}

.works-sublink-item > .subtitle,
.works-sublink-item > .title {
	text-align: center;
	padding-left: 0;
}

.works-sublink-item > .title {
	font-size: 1.0625em; /* 17px */
	line-height: 1.6;
}


/* =============================================================

	blog

* ============================================================= */

/* blog-menu
--------------------------- */

.blog-menu > .c-pulldown {
	display: block;
	position: relative;
	top: 0;
	right: 0;
	margin-top: 50px;
	width: 76%;
	margin: 50px auto -10px;
}


/* blog-article
--------------------------- */

.blog-article {
	padding-right: 0;
	padding-bottom: 15px;
}

.blog-article > .c-article {
	padding-right: 0;
}


/* blog-article-header
--------------------------- */

.blog-article-header > .date {
	letter-spacing: 1px;
	padding-top: 0;
}

.blog-article-header > .date:after {
	content: none;
}

.blog-article-header > .category {
	letter-spacing: 0;
	top: -3px;
	padding-top: 0;
}


/* blog-article-footer
--------------------------- */

.blog-article-footer {
	width: auto;
	position: static;
	margin-top: 30px;
	margin-left: -2%;
	margin-right: -2%;
}

.blog-article-footer > .c-card {
	text-align: left;
	max-width: none;
	min-width: 0;
	padding: 20px 0 20px 90px;
	position: relative;
	border: 1px solid #ccc;
	border-style: solid none;
}
.blog-article-footer > .c-card:hover {
	border-color: transparent;
}

.blog-article-footer > .c-card > .img {
	width: 70px;
	height: 70px;
	padding-bottom: 0;
	position: absolute;
	left: 15px;
	top: 50%;
	margin: -35px 0 0 !important;
}


.blog-article-footer > .c-card > .img + .subtitle {
	color: #777C80;
}

.blog-article-footer > .c-card .title {
	margin-top: 3px;
}

.blog-article-footer > .c-card .title > b {
	margin-right: .8em;
}
.blog-article-footer > .c-card .title > span {
	display: inline-block;
	margin-top: 3px;
}


/* =============================================================

	faq

* ============================================================= */

/* faq-header
--------------------------- */

.faq-header .c-contactbox {
	margin-top: 60px;
}


/* faq-list
--------------------------- */

.faq-list-dlist {
	margin: 0 -2% -15px;
}

.faq-list-dlist > dt {
	font-size: 0.9375em; /* 15px */
	padding: 15px 40px 15px 2%;
}

.faq-list-dlist > dt:before,
.faq-list-dlist > dt:after {
	right: 10px;
}

.faq-list-answer {
	padding: 5px 2% 25px;
}

.faq-list-img {
	margin-bottom: -10px;
}
.faq-list-img > * {
	margin-bottom: 15px;
}


/* =============================================================

	contact

* ============================================================= */

/* contact-header
--------------------------- */

.contact-header > .c-grids {
	padding-bottom: 100px;
}

.contact-header-txt {
	padding-bottom: 60px;
}

.confirm-header-txt {
	margin-top: 0;
}

.contact-header-btn {
	width: 100%;
	left: 0;
	margin: 0 0 -10px !important;
}

.contact-header-btn > li {
	width: 50%;
}

.contact-header-btn > li > a {
	min-width: 0 !important;
}

.contact-header-drawer {
	margin: 0 -2%;
}

.contact-header-drawer-item {
	width: 50% !important;
	float: left !important;
	padding: 40px 5% !important;
}


/* contact-form
--------------------------- */

.complete-message {
	margin-bottom: 60px !important;
}

.contact-form.confirm {
	margin-top: -10px;
}

.contact-form .c-title-B,
.complete-message > .c-title-B {
	margin-bottom: 25px;
}
.contact-form.confirm .c-title-B {
	margin-bottom: 20px;
}
.complete-message > .c-title-B {
	margin-top: -20px;
}

.contact-form.form .contact-form-dlist.horizontal {
	margin-top: 0;
}

.contact-form-dlist > dt {
	font-size: 0.9375em; /* 15px */
	margin: 20px 0 10px;
}

.contact-form-dlist.horizontal > dt {
	position: static;
	padding-top: 0;
}

.contact-form.confirm .contact-form-dlist.horizontal > dd + dt {
	border-top: 1px dotted #ccc;
}

.contact-form-dlist.horizontal > dd {
	padding: 0;
}
.contact-form.confirm .contact-form-dlist.horizontal > dd {
	padding: 0;
	border-top: none;
	min-height: 1.2em;
}

.contact-form-dlist .birthday {
	text-indent: 10px;
	text-align: left;
	margin: 0 -10px -10px;
}
.contact-form-dlist .birthday > input {
	margin: 0 5px 10px;
}

.contact-form-check > .mwform-checkbox-field {
	line-height: 1.6;
	padding: 5px 0 5px 35px;
}

.contact-form-check input[type="checkbox"]:before {
	top: .4em;
}
.contact-form-check input[type="checkbox"]:after {
	top: .6em;
}



/* =============================================================

	privacy

* ============================================================= */

/* privacy-article
--------------------------- */

.privacy-article > * + *  {
	margin-top: 20px;
}

.privacy-article > h2 {
	margin-top: 30px;
}


}




/* ---------------------------------------
	max-width: 640px
--------------------------------------- */

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


/* pagenation
--------------------------- */

.c-pagenation,
.c-prevnext-set {
	padding-top: 90px;
}

.c-prev,
.c-next {
	top: -5px !important;
}


/* top-about
--------------------------- */

.top-about-img {
	width: 140%;
  left: -20%;
}



}


/* ---------------------------------------
	max-width: 480px
--------------------------------------- */

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


/* c-grids
--------------------------- */
.c-sp-grids {
	margin-left: 0;
	margin-right: 0;
}

.c-sp-grids > * {
	float: none;
	padding-left: 0;
	padding-right: 0;
	width: auto;
}
.c-sp-grids.inline > * {
	display: block;
}

/* top-about
--------------------------- */

.top-about-img {
	width: 180%;
  left: -40%;
}


/* contact-header
--------------------------- */

.contact-header > .c-grids {
	padding-bottom: 120px;
}

/* about-member
--------------------------- */

.c-aside-nav .about-member-list > li {
	position: relative;
}

.c-aside-nav .about-member-list > li + li:before {
	content: "";
	width: 100%;
	height: 0;
	border-top: 1px dotted #ccc;
	position: absolute;
	top: -25px;
}

.about-member-item {
	text-align: left;
	height: 7em !important;
	padding: 0;
	margin-bottom: 20px;
}
.about-member-item.clear {
	margin-bottom: 50px;
}

.about-member-item > figure {
	width: 35%;
	height: 100%;
	display: inline-block;
	vertical-align: middle;
}

.about-member-item > .txt {
	width: 65%;
	padding: 0 10px;
	margin-top: -15px;
	display: inline-block;
	vertical-align: middle;
}

.about-member-item > .txt > .subtitle {
	font-size: 0.75em; /* 12px */
	line-height: 1.5;
	margin-top: 0;
}

.about-member-item > .txt > .title {
	margin-top: 3px;
}
.about-member-item > .txt > .title.single {
	margin-top: 7px;
}

.about-member-item > .txt > .title > span {
	font-size: 0.706em; /* 12px */
	line-height: 1.5;
	letter-spacing: 1px;
	margin-top: 3px;
}

.about-member-item > .txt > p {
	text-align: left;
}


/* works-list
--------------------------- */

.works-list-item.clear {
	height: 8em !important;
}

.works-list-item.clear > .txt > .title,
.works-list-item.clear > .txt > .subtitle {
	line-height: 1.5;
}



}


/* ---------------------------------------
	max-width: 400px
--------------------------------------- */

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

/* about-studio
--------------------------- */

.about-studio > h1 {
	width: 233px;
	height: 67px;
}

.about-studio > h1 > span {
	height: 67px;
	background-position: -100px -200px;
}

body.load-end .about-studio > h1 > span {
	width: 233px;
	-webkit-transition: width .5s cubic-bezier(0.25, 0.46, 0.45, 0.94) .8s;
	transition: width .5s cubic-bezier(0.25, 0.46, 0.45, 0.94) .8s;
}


}


/* ---------------------------------------
	max-width: 380px
--------------------------------------- */

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

body {
	font-size: 93.75%; /* 15px base */
}


/* c-title-A
--------------------------- */

.c-title-A {
	font-size: 2.133em; /* 32px */
}


/* c-title-B
--------------------------- */

.c-title-B > b,
.c-title-B[data-entitle]:before {
	font-size: 2.3em; /* 46px */
}


}


/* =============================================================

	high resolution

* ============================================================= */

@media only screen and (-webkit-min-device-pixel-ratio: 1.3),(-webkit-min-device-pixel-ratio: 1.3),(min-resolution: 1.3dppx) {


	.fellow-header-txt:before {
		background-image: url(../images/fellow-header_img01_x2.png);
		background-size: 280px 144px;
	}

	.fellow-header-txt:after {
		background-image: url(../images/fellow-header_img02_x2.png);
		background-size: 230px 173px;
	}


	.c-button:before,
	.c-button:after,
	.c-link:after,
	.c-prev:before,
	.c-next:before,
	.c-submit:before,
	.c-submit:after,
	.c-zigzag:after,
	a.c-card:after,
	a.c-card.badge > i:after,
	.c-pulldown-item:after,
	.c-header-logo > a > span,
	.c-header-logo > a > span:after,
	.c-header-nav > li > a.active:after,
	.c-header-subnav > li > a:after,
	.c-footer-fb,
	.top-about-title > span,
	.top-about-title:after,
	.about-studio > h1 > span,
	.about-drawing-point > li:before,
	.about-message-txt > .name:before,
	.blog-article-footer > .c-card > .link,
	.contact-form-check input[type="checkbox"] + i:after {
		background-image: url(../images/c-sprite01_x2.png);
		background-size: 850px 400px;
	}

}