@import url(https://fonts.googleapis.com/css?family=Montserrat:700,400);
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url(https://fonts.googleapis.com/css?family=EB+Garamond);
@import url(https://fonts.googleapis.com/css?family=Great+Vibes);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
/*
@font-face {
	font-family: "basictitlefont";
	src: url('/assets/font/basictitlefont.ttf') format('ttf'),
		 url('/assets/font/basictitlefont.ttf') format('truetype'),
		 url('/assets/font/basictitlefont.svg#svgFontName') format('svg'),
		 url("/assets/font/basictitlefont.woff") format('woff');
}
*/
/*
@font-face {
	font-family: 'Forum-Regular';
	src: url('../font/Forum-Regular.ttf') format('ttf');
}

@font-face {
	font-family: 'medio';
	src: url('../font/medio.otf') format('opentype');
}

@font-face {
	font-family: 'penna';
	src: url('../font/penna.otf') format('opentype');
}
*/
body {
	background-color: #dddddd;
    /*font-family: 'EB Garamond', serif;*/
	font-family: 'Noto Sans Japanese', sans-serif;
    font-weight: 400;
    font-size: 16px;

    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;

	text-align: center;
	-webkit-tap-highlight-color: transparent;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	height: 100%;

	user-select:none;
	-moz-user-select:none;
	-webkit-user-select:none;
	-webkit-user-drag:none;
	-khtml-user-select:none;
	-khtml-user-drag:none;
}

/* Titles */
h1, h2, h3{
	font-family: 'basictitlefont';
    font-weight: 400;
    color: black;
	line-height: 150%;
}

h4 {
	font-family: 'Noto Sans Japanese', sans-serif;
	line-height: 40px;
	font-weight: 700;
	font-size: 13pt;
}


/* Paragraph & Typographic */
p {
    line-height: 28px;
    margin-bottom: 25px;
}

.centered {
    text-align: center;
}

/* Links */
a:hover,
a:focus {

    text-decoration: none;
    outline: 0;
}

 hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

input, textarea {
	font-size: 10pt;
	line-height: 1em;
	/*font-family: 'Source Sans Pro', sans-serif;
	font-weight: 300;*/
	font-family: 'Noto Sans Japanese', sans-serif;
	font-weight: 400;
	color: #777777;
	box-shadow: 2px 2px 4px #333 inset;
}

/* Button */

input[type="button"],
input[type="submit"],
input[type="reset"],
button,
.button {
	-webkit-appearance: none;
	display: inline-block;
	background-color: #222222;
	color: #ffffff;
	font-size: 13pt;
	font-family: 'Montserrat', sans-serif;
	border: 0;
	cursor: pointer;
	outline: 0;
	-moz-transition: background-color .25s ease-in-out;
	-webkit-transition: background-color .25s ease-in-out;
	-ms-transition: background-color .25s ease-in-out;
	transition: background-color .25s ease-in-out;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover,
.button:hover {
	background-color: #333333;
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active,
.button:active {
	background-color: #444444;
}

input[type="button"].alt,
input[type="submit"].alt,
input[type="reset"].alt,
button.alt,
.button.alt {
	background-color: #777777;
}

input[type="button"].alt:hover,
input[type="submit"].alt:hover,
input[type="reset"].alt:hover,
button.alt:hover,
.button.alt:hover {
	background-color: #888888;
}

input[type="button"].alt:active,
input[type="submit"].alt:active,
input[type="reset"].alt:active,
button.alt:active,
.button.alt:active {
	background-color: #999999;
}

/* Button */

input[type="button"],
input[type="submit"],
input[type="reset"],
button,
.button {
	padding: 0.7em 1.5em 0.7em 1.5em;
}

input[type="button"].small,
input[type="submit"].small,
input[type="reset"].small,
button.small,
.button.small {
	font-size: 0.75em;
}

input[type="button"].big,
input[type="submit"].big,
input[type="reset"].big,
button.big,
.button.big {
	font-size: 1.25em;
	padding: 0.5em 1.25em 0.5em 1.25em;
}

input[type="button"].huge,
input[type="submit"].huge,
input[type="reset"].huge,
button.huge,
.button.huge {
	font-size: 1.5em;
	padding: 0.5em 1.25em 0.5em 1.25em;
}


/* ==========================================================================
   Wrap Sections
   ========================================================================== */

#headerwrap {
	background: url(../img/main_1500x1130_kumo3.jpg) no-repeat center top;
	text-align:center;
	background-attachment: scroll;
	background-position: right top;
	width: 100%;
	top: 0;
	
    -webkit-background-size: 80%;
    -moz-background-size: 80%;
    -o-background-size: 80%;
    background-size: 80%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}



/* Footer Wrap */

#f {
	background: #dddddd;
}

#f h3 {
	color: #F50707;
	font-size: 35px;
	font-weight: 700;
	letter-spacing: 2px;
	/*margin-bottom: 30px;*/
}


#f i {
	font-size: 8px;
	color: #fff;
    padding: 3px;
}

#f p {
	font-size: 15px;
	color: #555;
}


#f_profile, #f_schedule, #f_contact, #f_media {
	margin-top: 20px;
	margin-bottom: 40px;
}

#f_schedule{
	text-align: center;
	overflow: auto;
	-webkit-overflow-scrolling:touch;
}

#f_schedule object, iframe{
	border: none;
	/*display: block;*/
}

#f_schedule .ai1ec-calendar-toolbar {
	display: none;
}

#f_profile {
	/*background-color: #ffffff;*/

	color: black;
}

.cl-effect-9 a::before,
.cl-effect-9 a::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: #fff;
	content: '';
	opacity: 0.2;
	-webkit-transition: opacity 0.3s, height 0.3s;
	-moz-transition: opacity 0.3s, height 0.3s;
	transition: opacity 0.3s, height 0.3s;
}
/*
.cl-effect-9 a::after {
	top: 100%;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transform: translateY(-10px);
}
*/
.cl-effect-9 a span:first-child {
	z-index: 2;
	display: block;
	margin-top: 18px;
}

.cl-effect-9 a span:last-child {
	z-index: 1;
	display: block;
	/*padding: 1px 0 0 0;*/
	color: rgba(0,0,0,0.6);
	text-shadow: none;
	text-transform: none;
	font-size: 0.75em;
	text-align: center;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	transform: translateY(-100%);
	line-height: 8px;
	padding-bottom: 10px;
}

.cl-effect-9 a:hover::before,
.cl-effect-9 a:focus::before {
	height: 6px;
}

.cl-effect-9 a:hover::before,
.cl-effect-9 a:hover::after,
.cl-effect-9 a:focus::before,
.cl-effect-9 a:focus::after {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}

.cl-effect-9 a:hover span:last-child,
.cl-effect-9 a:focus span:last-child {
	opacity: 1;
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	transform: translateY(0%);
}



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

	#headerwrap {
		min-height: 700px;
	}

	#headerwrap h1 {
		margin-top: 325px;
		color: #ffffff;
		font-size: 70px;
		/*text-shadow: 1px 1px #fff;*/
		margin-right: 250px;
		/*-webkit-transform: scale(0.8, 1);
		-moz-transform: scale(0.8, 1);
		-ms-transform: scale(0.8, 1);
		-o-transform: scale(0.8, 1);
		transform: scale(0.8, 1);
		letter-spacing: 0.08em;*/
	}

	#headerwrap h3 {
		color: #F50707;
		font-size: 27px;
		font-weight: 500;
		font-family: 'Great Vibes', cursive;
		margin-right: 250px;
		padding-top: 5px;
	}

	#f {
		background: url(../img/pro_1500x1130_kumo_gray.jpg) no-repeat center top;
		opacity: 10;
		padding-top: 40px;
		height: 100%;
	}

	#f #f_profile img {
		text-align: center;
		position: relative;
		top: 30px;
		-webkit-transform: translateY(2%);
		-ms-transform: translateY(2%);
		-moz-transform: translate(2%);
		transform: translateY(2%);
	}

	#f_profile {
		background-color: #ffffff;
		display: block;
		height: 520px;
		overflow: auto;
		/*
		display: -webkit-box;
		display: -moz-box;
		display: flex;
		*/
		padding: 20px 20px 30px 30px;
		/* border-top: solid 5px black; */
		/* border-bottom: solid 5px black; */
		/*box-shadow: 2px 2px 4px #333 inset;*/
	}

	#col1 {
		width: 40%;
		float: left;
	}

	#col2 {
		width: 60%;
		padding-left: 10px;
		font-size: 9pt;
		text-align: left;
		line-height: 1.4em;
		float: left;
	}

	#colo2 p {
		font-weight: 400;
		font-size: 14px;
		color: #000;
	}

	#f_schedule {
		display: block;
		text-align: center;
		/*box-shadow: 2px 2px 4px #333 inset;*/
	}

	#f_schedule object, iframe{
		width: 100%;
		height: 400px;
	}

	#f_contact {
		width: 60%;
	}
}


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

	#headerwrap {
		background-color: #dddddd;
		min-height: 600px;
		position: relative;
		top:-20px;
		bottom: 20px;
	}

	#headerwrap h1 {
		margin-top: 325px;
		color: white;
		font-size: 70px;
		line-height: 1.3em;
	}

	#headerwrap h3 {
		color: #F50707;
		font-size: 23px;
		font-weight: 200;
		font-family: 'Great Vibes', cursive;
		line-height: 1.3em;
		margin-bottom: 20px;
	}

	#f {
		padding-top: 30px;
		/*height: 100%;*/
	}

	#f_profile {
		display: -webkit-box;
		display: -moz-box;
		padding: 0px 25px;
		-webkit-box-orient: vertical;
		-moz-box-orient: vertical;
		height: 100%;
	}

	#col1 {
		height: 40%;
		text-align: center;
	}

	#col2 {
		height: 60%;
		font-size: 9pt;
		line-height: 1.5em;
		text-align: left;
		max-height: 50%;
		margin-top: 20px;
	}

	#col1 img {
		width: 60%;
		height: auto;
		-o-object-fit: contain;
	}



	#f_schedule{
		text-align: center;
	}

	#f_schedule object, iframe{
		width: 90%;
		height: 440px;
	}

	#f_contact {
		width: 80%;
	}
}
/* Form */


#f_contact {
	display: inline-block;
	position: relative;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
	text-align: center;
}

#note {
	font-size: small;
	text-align: right;
}

form {
	margin-bottom: 20em;
}

form label {
	font-weight: 400;
	color: #363636;
	margin: 0 0 0 1em;
}

form input[type="text"],
form input[type="email"],
form input[type="password"],
form select,
form textarea {
	-webkit-appearance: none;
	border: 1px;
	background: #ffffff;
	padding: 0.75em;
	width: 100%;
	font-size: 15px;
	color: #333333;
	-moz-transition: background-color .25s ease-in-out;
	-webkit-transition: background-color .25s ease-in-out;
	-ms-transition: background-color .25s ease-in-out;
	transition: background-color .25s ease-in-out;
}

form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="password"]:focus,
form select:focus,
form textarea:focus {
	background: #f8f8f8;
}

form input[type="text"],
form input[type="email"],
form input[type="password"],
form select {
	line-height: 1.35em;
}

form ::-webkit-input-placeholder {
	color: #333333;
}

form :-moz-placeholder {
	color: #333333;
}

form ::-moz-placeholder {
	color: #333333;
}

form :-ms-input-placeholder {
	color: #333333;
}

form#mail_form div span{ /* 入力エラーメッセージがJavaScriptによって出現 */
	color : #cc0000;
	font-size: small;
	margin-bottom: 30px;
	display: block;
	text-align: left;
}

#footer {
	font-size: 9pt;
}


.header-section .menu-section:after {
	content: "";
	display: table;
	clear: both;
}

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

/*.lt-ie9 img{
    width:auto
}
*/
.menu-nav {
	/*font-family: 'Montserrat', sans-serif;*/
	font-family: 'Open Sans', sans-serif;
	/*font-family: 'Ubuntu', sans-serif;*/
	/*font-family: 'Asul', sans-serif;*/
	font-weight: 700;
}



@media only screen and (max-width: 800px) {
	.u-sp-none {
		display: none;
	}
}
/*
body {
	text-align: center;
	-webkit-tap-highlight-color: transparent;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	height: 100%;
}
*/
body, div, pre, p, blockquote, form, fieldset, input, textarea, select, option, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, embed, object {
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}

div, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, li, form, input, textarea, button, table, tr, th, td, article, aside, footer, header, hgroup, nav, section {
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

a {
	border: 0;
	color: #1c1c1c;
	cursor: pointer;
	outline: none;
	overflow: hidden;
	text-decoration: none;
}

a:hover, a:active, a:focus {
	outline: 0;
}

a {
	overflow: hidden;
}


.menu-nav {
	font-size: 32px;
	font-size: 3.2rem;
	display: inline-block;
	letter-spacing: .08em;
	margin-right: 13px;
}

@media only screen and (max-width: 800px) {
	.menu-nav {
		display: block;
		margin: 0 0 20px 0;
	}
}


.menu-section {
	/*width: 1250px;*/
	width: 92%;
	margin: 0 auto;
	/*text-align: left;*/
	position: relative;
	z-index: 1;
	line-height: 1.5;
}

.profile-canvas {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0
}




html, body {
	height: 100%;
}

#wrapper {
	height: 100%;
}

#menu-header {
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 10;
}

@media only screen and (max-width: 800px) {
	#menu-header {
		top: 0;
		background-color: transparent;
		height: 0;
	}
}

.page-thanks #menu-header {
	top: 0;
}

.header-section {
	margin: 0;
	border-bottom: 1px solid #5e5e5e;
}

@media only screen and (max-width: 800px) {
	.header-section {
		border-bottom: none;
		margin: 0;
		height: 0;
	}
}

.site-logo {
	float: left;
	line-height: 57px;
}

.site-logo img {
	vertical-align: middle;
}

@media only screen and (max-width: 800px) {
	.site-logo {
		display: none;
	}
}

.menu-nav {
	float: right;
}

.menu-nav li {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	margin-left: 45px;
}

/*
.menu-nav li.sp-menu{
    display:none
}
*/
.menu-nav li a {
	font-size: 13px;
	font-size: 1.3rem;
	/*line-height: 57px;*/
	transition: opacity 0.3s linear;
	letter-spacing: 0.15em;
}

.menu-nav li a:hover {
	color: #cc0000;
	opacity: 0.5;
	filter: alpha(opacity=50);
	-ms-filter: "alpha( opacity=50 )";
}

@media only screen and (max-width: 800px) {
	.menu-nav li a:hover {
		opacity: 1;
		filter: alpha(opacity=100);
		-ms-filter: "alpha( opacity=100 )";
	}
}

@media only screen and (max-width: 800px) {
	.menu-nav-section {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: rgba(255, 255, 255, 0.9);
		display: table;
		visibility: hidden;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
		transition: -webkit-transform 0.4s ease-in-out, visibility 0s 0.4s;
		transition: transform 0.4s ease-in-out, visibility 0s 0.4s;
	}

	.menu-nav-section.open {
		visibility: visible;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		transition: -webkit-transform 0.4s ease-in-out;
		transition: transform 0.4s ease-in-out;
	}

	.menu-nav-section ul {
		width: 100%;
		display: table-cell;
		vertical-align: middle;
	}

	.menu-nav-section li {
		display: table;
		text-align: center;
		margin-left: 0;
		border-bottom: 1px solid #a4a4a4;
		width: 100%;
		height: 20%;
	}

	.menu-nav-section li.pc-menu {
		display: table
	}

	.menu-nav-section li a {
		display: table-cell;
		vertical-align: middle;
		height: 100%;
		line-height: 100%
	}
}

.sp-menu, .sp-menu-label{
	display: none
}

@media only screen and (max-width: 800px) {
	.menu-section {
		text-align: right;
		height: 0;
	}
	.sp-menu,
	.sp-menu span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
	}
	.sp-menu{
		position: relative;
		width: 30px;
		height:12px;
		top:20px;
		margin-right: 20px;
	}
	.sp-menu span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: #000;
	}
	.sp-menu-label {
		display: block;
		position: relative;
		font-family: 'Open Sans', sans-serif;
		font-size: 8pt;
		font-weight: 700;
		top: 25px;
		margin-right: 19px;
		letter-spacing: -0.2pt;
	}
	.sp-menu span:nth-of-type(1) {
		top: 0;
	}
	.sp-menu span:nth-of-type(2) {
		top: 20px;
	}
	.sp-menu span:nth-of-type(3) {
		bottom: 0;
	}

	.sp-menu.open {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
	.sp-menu.open span:nth-of-type(1) {
		top: 10px;
		-webkit-transform:  rotate(-45deg);
		transform:  rotate(-45deg);
	}
	.sp-menu.open span:nth-of-type(2) {
		top: 10px;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.sp-menu.open span:nth-of-type(3) {
		opacity: 0;
	}
}

/* for media */

/* ==================================================
   Section Portfolio
================================================== */


.work-nav #filters {
	margin: 0;
	padding: 0;
	list-style: none;
}

.work-nav #filters li {
	margin: 0 0 30px 0;
	padding: 0;
}

.work-nav #filters li a {
	color: #363636;
	display: block;
}

.work-nav #filters li a:hover {
	color: #FFFFFF;
}

.work-nav #filters li a.selected {
	color: #d43f3a;
}

#thumbs {
	margin: 0;
	padding: 0;
}

#thumbs li {
	list-style-type: none;
}

.item-thumbs {
	position: relative;
	overflow: hidden;
	margin-bottom: 40px;
	cursor: pointer;
}

.item-thumbs .hover-wrap {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;

	opacity: 0;
	filter: alpha(opacity=0);

	-webkit-transition: all 450ms ease-out 0s;
	-moz-transition: all 450ms ease-out 0s;
	-o-transition: all 450ms ease-out 0s;
	transition: all 450ms ease-out 0s;

	-webkit-transform: rotateY(180deg) scale(0.5,0.5);
	-moz-transform: rotateY(180deg) scale(0.5,0.5);
	-ms-transform: rotateY(180deg) scale(0.5,0.5);
	-o-transform: rotateY(180deg) scale(0.5,0.5);
	transform: rotateY(180deg) scale(0.5,0.5);
}
/*
.item-thumbs:hover .hover-wrap,
.item-thumbs.active .hover-wrap {
	opacity: 1;
	filter: alpha(opacity=100);

	-webkit-transform: rotateY(0deg) scale(1,1);
	-moz-transform: rotateY(0deg) scale(1,1);
	-ms-transform: rotateY(0deg) scale(1,1);
	-o-transform: rotateY(0deg) scale(1,1);
	transform: rotateY(0deg) scale(1,1);
}
*/
.item-thumbs .hover-wrap .overlay-img {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #DE5E60;

	opacity: 0.80;
	filter: alpha(opacity=80);
}

.item-thumbs .hover-wrap .overlay-img-thumb {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -16px 0 0 -16px;
	color: #FFFFFF;
	font-size: 32px;
	line-height: 1em;

	opacity: 1;
	filter: alpha(opacity=100);
}


.image-wrap img {
	width: 100%;
}

.image-wrap  .hover-wrap {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;

	opacity: 0;
	filter: alpha(opacity=0);

	-webkit-transition: all 450ms ease-out 0s;
	-moz-transition: all 450ms ease-out 0s;
	-o-transition: all 450ms ease-out 0s;
	transition: all 450ms ease-out 0s;

	-webkit-transform: rotateY(180deg) scale(0.5,0.5);
	-moz-transform: rotateY(180deg) scale(0.5,0.5);
	-ms-transform: rotateY(180deg) scale(0.5,0.5);
	-o-transform: rotateY(180deg) scale(0.5,0.5);
	transform: rotateY(180deg) scale(0.5,0.5);
}
/*
.image-wrap:hover .hover-wrap,
.image-wrap.active .hover-wrap {
	opacity: 1;
	filter: alpha(opacity=100);

	-webkit-transform: rotateY(0deg) scale(1,1);
	-moz-transform: rotateY(0deg) scale(1,1);
	-ms-transform: rotateY(0deg) scale(1,1);
	-o-transform: rotateY(0deg) scale(1,1);
	transform: rotateY(0deg) scale(1,1);
}
*/
.image-wrap .hover-wrap .overlay-img {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #DE5E60;

	opacity: 0.80;
	filter: alpha(opacity=80);
}

.image-wrap .hover-wrap .overlay-text-thumb {
	position: absolute;
	width: 100%;
	height: 32px;
	top: 50%;
	margin: -16px 0 0 0;
	color: #FFFFFF;
	font-size: 20px;
	font-weight: 300;
	line-height: 32px;
	text-transform: uppercase;
	text-align: center;

	opacity: 1;
	filter: alpha(opacity=100);
}


/* ==================================================
   Isotope Filtering
================================================== */

/**** Isotope Filtering ****/

.isotope-item {
	z-index: 2;
}

.isotope-hidden.isotope-item {
	pointer-events: none;
	z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
	-webkit-transition-duration: 0.8s;
	-moz-transition-duration: 0.8s;
	-ms-transition-duration: 0.8s;
	-o-transition-duration: 0.8s;
	transition-duration: 0.8s;
}

.isotope {
	-webkit-transition-property: height, width;
	-moz-transition-property: height, width;
	-ms-transition-property: height, width;
	-o-transition-property: height, width;
	transition-property: height, width;
}

.isotope .isotope-item {
	-webkit-transition-property: -webkit-transform, opacity;
	-moz-transition-property:    -moz-transform, opacity;
	-ms-transition-property:     -ms-transform, opacity;
	-o-transition-property:      -o-transform, opacity;
	transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
	-webkit-transition-duration: 0s;
	-moz-transition-duration: 0s;
	-ms-transition-duration: 0s;
	-o-transition-duration: 0s;
	transition-duration: 0s;
}

/* End: Recommended Isotope styles */



/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	-o-transition: none;
	transition: none;
}

/* ==================================================
Font-Face Icons
================================================== */
/*
@font-face {
	font-family: 'Icons';
	src:url('/assets/fonts/Icons.eot');
	src:url('/assets/fonts/Icons.eot?#iefix') format('embedded-opentype'),
	url('/assets/fonts/Icons.woff') format('woff'),
	url('/assets/fonts/Icons.ttf') format('truetype'),
	url('/assets/fonts/Icons.svg#Icons') format('svg');
	font-weight: normal;
	font-style: normal;
}
*/
/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
	font-family: 'Icons';
	content: attr(data-icon);
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

[class^="font-"]:before, [class*=" font-"]:before {
	font-family: 'Icons';
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
}

[class^="font-"],
[class*=" font-"]{
	display:inline-block;
	line-height:1em;
}

.font-icon-plus {
	font-family: 'Icons';
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

.font-icon-plus:before {
	content: "\e063";
}
/*
.font-icon-remove:before {
	content: "\e05a";
}
*/
@media only screen and (min-width: 801px) {
	#f_media {
		width: 800px;
		margin-left: auto;
		margin-right: auto;
	}

	.span3 .nav{
		float: none;
		width: 100%;
	}

	.span9 .span3 {
		width: 210px;
		float: none;
		min-height: 1px;
		margin-left: 30px;
	}

	.span9 {
		width: 700px;
		float: none;
	}
	.item-thumbs a + img {
		width: 100%;
	}


	.type-work {
		color: #FFFFFF;
		font-size: 20px;
		font-weight: 300;
		margin-bottom: 30px;
	}

	.work-nav {
		width: 100%;
		margin-bottom: 30px;
		float: none;
	}

	.work-nav #filters li:first-child {
		margin-left: 0;
	}

	.work-nav #filters,
	.work-nav #filters li {
		display: inline-block;
		vertical-align: text-bottom;
	}

	.work-nav #filters li {
		font-size: 15px;
		margin:0 20px 0 0;
	}

	.work-nav #filters li a {
		text-transform: uppercase;
	}

	#f_media {
		padding-right: 15px;
		padding-left: 15px;
		text-align: center;
	}
	.menu-nav .new::before {
		position: absolute;
		content: "OPEN!";
		color: red;
		font-size: 7px;
		margin: 0;
		top: 0.9em;
		letter-spacing: normal;
		margin-left: 1em;
	}

}

@media only screen and (max-width: 800px) {
	.span3 {
		float: none;
		width: 100%;
	}
	.span9 {
		display: block;
		float: none;
		width: 100%;
		margin-left: 0;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box
	}

	#f_media {
		padding-right: 15px;
		padding-left: 15px;
		text-align: center;
	}

	.item-thumbs a + img {
		width: 85%;
	}

	.work-nav {
		width: 100%;
		margin-bottom: 30px;
	}

	.work-nav #filters li:first-child {
		margin-left: 0;
	}

	.work-nav #filters,
	.work-nav #filters li {
		display: inline-block;
		vertical-align: text-bottom;
	}

	.work-nav #filters li {
		font-size: 16px;
		margin:0 10px 0 0;
	}

	.work-nav #filters li a {
		font-size: 13px;
		text-transform: uppercase;
	}

	.type-work {
		color: #363636;
		font-size: 16px;
	}
	.menu-nav .new::before {
		display: block;
		content: "OPEN!";
		color: red;
		font-size: 7px;
		margin: 0;
		top: 0.9em;
		letter-spacing: normal;
	}
}

/* ==================================================
hover effects
================================================== */
/*
.snip1384 {
	font-family: 'Raleway', Arial, sans-serif;
	position: relative;
	float: left;
	overflow: hidden;
	margin: 10px 1%;
	min-width: 230px;
	max-width: 315px;
	width: 100%;
	color: #ffffff;
	text-align: left;
	font-size: 12px;
	background-color: #000000;
}
*/
.snip1384 * {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.35s ease;
	transition: all 0.35s ease;
}
/*
.snip1384 img {
	max-width: 100%;
	backface-visibility: hidden;
	vertical-align: top;
}
*/
.snip1384:after,
.snip1384 .media_title {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.snip1384:after {
	content: '';
	background-color: rgba(0, 0, 0, 0.5);
	-webkit-transition: all 0.35s ease;
	transition: all 0.35s ease;
	opacity: 0;
}
.snip1384 span {
	z-index: 1;
	padding: 40px;
}
/*
.snip1384 h5,
.snip1384 h6,
.snip1384 .links {
	position: absolute;
	z-index: 10;
	width: 100%;
	margin: 5px 0;
	padding: 0;
}
.snip1384 h5 {
	color: #ffffff;
	line-height: 1.1em;
	font-size: 10pt;
	text-transform: uppercase;
	opacity: 0.5;
	top: 20%;
}
.snip1384 h6 {
	z-index: 10;
	color: #ffffff;
	font-size: 8pt;
	font-weight: 300;
	opacity: 0.5;
	top: 30%;
}
*/

/*
.snip1384 a {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
}
*/
/*
.snip1384:hover img,
.snip1384.hover img {
	zoom: 1;
	filter: alpha(opacity=50);
	-webkit-opacity: 0.5;
	opacity: 0.5;
}
*/
/*
.snip1384:hover h5,
.snip1384.hover h5,
.snip1384:hover h6,
.snip1384.hover h6,
.snip1384:hover span,
.snip1384.hover span {
	-webkit-transform: translate(0px, 0px);
	transform: translate(0px, 0px);
	opacity: 1;
}
*/
.snip1384:hover:after {
	content: '';
	background-color: rgba(0, 0, 0, 0.68);
	-webkit-transition: all 0.35s ease;
	transition: all 0.35s ease;
	opacity: 1;
}

.snip1384 .title,
.snip1384 .composition,
.snip1384 .concert,
.snip1384 .links {
	position: absolute;
	z-index: 10;
	width: 100%;
	margin: 5px 0;
	padding: 0;
}

.snip1384:hover .title,
.snip1384.hover .title,
.snip1384:hover .composition,
.snip1384.hover .composition,
.snip1384:hover .concert,
.snip1384.hover .concert,
.snip1384:hover span,
.snip1384.hover span {
	-webkit-transform: translate(0px, 0px);
	transform: translate(0px, 0px);
	opacity: 1;
}

@media only screen and (min-width: 801px) {
	.snip1384 .title {
		font-size: 14px;
		color: #ffffff;
		line-height: 1.1em;
		opacity: 0.5;
		top: 20%;
		font-weight: bold;
	}
	.snip1384 .composition{
		font-size: 12px;
		z-index: 10;
		color: #ffffff;
		font-weight: 300;
		opacity: 0.5;
		top: 30%;
	}
	.snip1384 .concert{
		font-size: 10px;
		z-index: 10;
		color: #ffffff;
		font-weight: 300;
		opacity: 0.5;
		top: 40%;
	}

	.snip1384 span {
		color: #ffffff;
		position: absolute;
		bottom: 0;
		right: 10px;
		padding: 8% 10%;
		font-size: 34px;
		opacity: 0.5;
		-webkit-transform: translateX(-10px);
		transform: translateX(-10px);
	}

	.snip1384:after {
		opacity: 1;
		position: absolute;
		top: 5%;
		bottom: 5%;
		left: 5%;
		right: 5%;
		width: 90%;
	}
}

@media only screen and (max-width: 800px) {
	.snip1384 .title {
		font-size: 18px;
		color: #ffffff;
		line-height: 1.1em;
		opacity: 0.5;
		top: 20%;
		font-weight: bold;
	}
	.snip1384 .composition{
		font-size: 15px;
		z-index: 10;
		color: #ffffff;
		font-weight: 300;
		opacity: 0.5;
		top: 30%;
	}
	.snip1384 .concert{
		font-size: 15px;
		z-index: 10;
		color: #ffffff;
		font-weight: 300;
		opacity: 0.5;
		top: 40%;
	}

	.snip1384 span {
		color: #ffffff;
		position: absolute;
		bottom: 0;
		right: 10%;
		padding: 8% 10%;
		font-size: 34px;
		opacity: 0.5;
		-webkit-transform: translateX(-10px);
		transform: translateX(-10px);
	}

	.snip1384:after,
	.snip1384:after {
		opacity: 1;
		position: absolute;
		top: 5%;
		bottom: 5%;
		left: 10%;
		right: 5%;
		width: 80%;
	}
}

@media only screen and (min-width: 801px) {
	.dialog__link {
		display: inline-block;
		position: absolute;
		top: 10%;
		right: 52%;
	}
	.dialog1__trigger, .dialog2__trigger, .dialog3__trigger, .dialog__action {
		margin-top: 2px;
		width: 180px;
		background: #DE5E60;
		/*position: absolute;*/
		color: #ffffff;
		padding: 15px 20px;
		font-size: 1.2rem;
		text-transform: uppercase;
		/*display: block;*/
		/*transition: all 150ms ease-out;
		transform: translateY(0px);*/
		/*box-shadow: 0 5px 10px rgba(0,0,0,0.4);*/
		box-shadow: 0 15px 10px -10px rgba(31, 31, 31, 0.5)
	}

	.dialog1__trigger:hover, .dialog2__trigger:hover, .dialog3__trigger:hover, .dialog__action:hover {
		background: #F50707;
	}

	.dialog1__trigger:active, .dialog2__trigger:active, .dialog3__trigger:active,  {
		transform: translateY(-3px);
	}

	.dialog2, .dialog1, .dialog3 {
		display: none;
		background: #ffffff;
		/*width: 65%;*/
		position: absolute;
		left: 50%;
		transform: translate(-50%, 0%);
		padding: 30px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
		border: 3px solid #363636;
		opacity: 0;
	}

	.dialog--active {
		top: 10%;
		display: block;
		opacity: 1;
		z-index: 20;
	}

	.dialog__close {
		font-size: 2rem;
		line-height: 2rem;
		position: absolute;
		right: 0px;
		top: -5px;
		cursor: pointer;
		padding: 10px;
	}

	.dialog__close:hover {
		color: #DE5E60;
	}

	.dialog__title {
		font-size: 2rem;
		font-family: 'Slabo 27px', serif;
		font-weight: 700;
		margin: 0;
		padding: 15px 0 15px 0;
		border-top: 1px solid #363636;
		border-bottom: 1px solid #363636;
	}

	.dialog__content {
		font-size: 1.1rem;
		line-height: 2rem;
	}

	.dialog__action {
		margin: 0;
		font-size: 1rem;
	}

	.dialog__info {
		display: block;
		padding: 0px 25px;
		height: 80%;
		overflow: auto;
	}

	.dialog__info .col1 {
		/*width: 50%;*/
		height: 60%;
		font-size: 9pt;
		line-height: 1.5em;
		text-align: left;
		max-height: 50%;
		margin-top: 20px;
		float: left;
	}

	.dialog__info .col2 {
		width: 40%;
		margin-top: 5%;
		margin-left: 10%;
		text-align: left;
		float: left;
	}

	.dialog__info .col2 img {
		height: auto;
	}
}


@media only screen and (max-width: 800px) {
	.dialog__link {
		display: inline-block;
		position: absolute;
		top: 1%;
		right: 59%;
	}
	.dialog1__trigger, .dialog2__trigger, .dialog3__trigger, .dialog__action {
		margin-top: 2px;
		width: 140px;
		cursor: pointer;
		background: #DE5E60;
		/*position: absolute;*/
		color: #ffffff;
		/*padding: 15px 20px;*/
		font-size: 1.0rem;
		text-transform: uppercase;
		/*display: block;*/
		/*transition: all 150ms ease-out;
		transform: translateY(0px);*/
		/*box-shadow: 0 5px 10px rgba(0,0,0,0.4);*/
		box-shadow: 0 15px 10px -10px rgba(31, 31, 31, 0.5)
	}

	.dialog1__trigger:hover, .dialog2__trigger:hover, .dialog3__trigger:hover, .dialog__action:hover {
		background: #F50707;
	}

	.dialog1__trigger:active, .dialog2__trigger:active, .dialog3__trigger:active,  {
		transform: translateY(-3px);
	}

	.dialog2, .dialog1, .dialog3 {
		display: none;
		background: #ffffff;
		width: 80%;
		position: absolute;
		left: 50%;
		transform: translate(-50%, 0%);
		padding: 10px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
		border: 3px solid #363636;
		opacity: 0;
	}

	.dialog--active {
		top: 10%;
		display: block;
		opacity: 1;
		z-index: 20;
	}

	.dialog__close {
		font-size: 2rem;
		line-height: 2rem;
		position: absolute;
		right: 0px;
		top: -5px;
		cursor: pointer;
		padding: 10px;
	}

	.dialog__close:hover {
		color: #DE5E60;
	}

	.dialog__title {
		font-size: 2rem;
		font-family: 'Slabo 27px', serif;
		font-weight: 700;
		margin-top: 20px;
		padding: 15px 0 15px 0;
		border-top: 1px solid #363636;
		border-bottom: 1px solid #363636;
	}

	.dialog__content {
		font-size: 1.1rem;
		line-height: 2rem;
	}

	.dialog__action {
		margin: 0;
		font-size: 1rem;
	}

	.dialog__info {
		display: block;
		padding: 0px 10px;
		height: 80%;
		overflow: auto;
	}

	.dialog__info .col1 {
		font-size: 9pt;
		line-height: 1.5em;
		text-align: left;
		max-height: 50%;
		margin-top: 20px;
	}

	.dialog__info .col2 {
		margin-top: 20px;
		text-align: center;
	}

	.dialog__info .col2 img {
		width: 80%;
		height: auto;
		-o-object-fit: contain;
	}
}

/* カレンダー用　*/
.ai1ec-calendar-toolbar {
	display: none;
}

/* お知らせ用 */
.btn-border {
	display: inline-block;
	max-width: 180px;
	text-align: left;
	border: 2px solid #DE5E60;
	font-size: 16px;
	color: #DE5E60;
	text-decoration: none;
	font-weight: bold;
	padding: 8px 16px;
	border-radius: 4px;
	transition: .4s;
}