/*
Theme Name: LABO OISIER
Theme URI: https://polyphonic.me/
Author: Graph Paper Press
Author URI: https://polyphonic.me/
Description: Wall Street is a responsive WordPress business theme for savvy entrepreneurs and startups.
Version: 1.1.10
License: GNU General Public License, V2
License URI: license.txt
Text Domain: wallstreet
Domain Path: /languages/
Tags: black, white, light, dark, right-sidebar, fluid-layout, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Wall Street is based on Underscores http://underscores.me/, (C) 2012-2013 Automattic, Inc.

Resetting and rebuilding styles have been helped along thanks to the fine work of
Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
and Blueprint http://www.blueprintcss.org/
*/
	

/* =Reset
-------------------------------------------------------------- */
@import url("https://use.typekit.net/zfc2gcj.css");
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ultra&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap');

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
	color:#ddd;
}
html {
	font-size: 62.5%; /* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */
	overflow-y: scroll; /* Keeps page centered in all browsers regardless of content height */
	-webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */
	-ms-text-size-adjust: 100%; /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
}
body {
	background: rgba(210,210,210,1);
	/*background:#dddbcc;*/
}
body.home {
	border-top: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section {
	display: block;
}
ol, ul {
	list-style: none;
}
table {/* tables still need 'cellspacing="0"' in the markup */
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
	font-weight: normal;
	text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
a {
	color:#ddd;
}
a:focus {
	outline: thin dotted;
}
a:hover,
a:active {/* Improves readability when focused and also mouse hovered in all browsers people.opera.com/patrickl/experiments/keyboard/test */
	outline: 0;
}
a img {
	border: 0;
}


/* =Global
----------------------------------------------- */

body,
button,
input,
select,
textarea {
	font-family: Helvetica, "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
	font-size: 14px;
	line-height: 1.8;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
	clear: both;
}
h1 {
	font-size: 2em; /* 32px */
	margin-bottom: 0.5em; /* 24px */
	line-height: 1.5; /* 48px */
}
h2 {
	font-size: 1.5em; /* 24px */
	margin-bottom: 1em; /* 24px */
	line-height: 1; /* 24px */
}
h3 {
	font-size: 1.25em; /* 20px */
	margin-bottom: 1.2em; /* 24px */
	line-height: 1.2; /* 24px */
	margin-top: 1.5em;
}
h4 {
	font-size: 1.125em; /* 18px */
	margin-bottom: 1.333em; /* 24px */
	line-height: 1.333; /* 24px */
}

h5, h6 {
	font-size: 1em; /* 16px */
	margin-bottom: 1.5em; /* 24px */
	line-height: 1.5; /* 24px */
}
hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

/* Text elements */
p {
	margin-bottom: 1.5em;
}
ul, ol {
	margin: 0 0 1.5em 1.2em;
}
ul {
	list-style: square;
}
ol {
	list-style: decimal;
}
li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}
dt {
	font-weight: bold;
}
dd {
	margin: 0 1.5em 1.5em;
}
b, strong {
	font-weight: bold;
}
dfn, cite, em, i {
	font-style: italic;
}
blockquote {
	margin: 0;
	font-style: italic;
	font-size: 1.5em;
}
address {
	margin: 0 0 1.5em;
}
pre {
	font-family: "Courier 10 Pitch", Courier, monospace;
	font-size: 15px;
	font-size: 1.5rem;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}
code, kbd, tt, var {
	font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
abbr, acronym {
	cursor: help;
}
mark, ins {
	text-decoration: none;
}
sup,
sub {
	font-size: 75%;
	height: 0;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup {
	bottom: 1ex;
}
sub {
	top: .5ex;
}
small {
	font-size: 75%;
}
big {
	font-size: 125%;
}
figure {
	margin: 0;
}
table {
	margin: 0 0 1.5em;
	width: 100%;
}
th {
	font-weight: bold;
}
img {
	height: auto; /* Make sure images are scaled correctly. */
	max-width: 100%; /* Adhere to container width. */
}
button,
input,
select,
textarea {
	font-size: 100%; /* Corrects font size not being inherited in all browsers */
	margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
	vertical-align: baseline; /* Improves appearance and consistency in all browsers */
	*vertical-align: middle; /* Improves appearance and consistency in all browsers */
}
button,
input {
	line-height: normal; /* Addresses FF3/4 setting line-height using !important in the UA stylesheet */
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border-radius: 3px;
	cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */
	-webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 1;
	padding: .6em 1em .4em;
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
}
button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
}
input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box; /* Addresses box sizing set to content-box in IE8/9 */
	padding: 0; /* Addresses excess padding in IE8/9 */
}
input[type="search"] {
	-webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */
	-webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration {/* Corrects inner padding displayed oddly in S5, Chrome on OSX */
	-webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {/* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
	border: 0;
	padding: 0;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
	border-radius: 0;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
	color: #111;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"] {
	padding: 6px;
}
textarea {
	overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */
	padding-left: 3px;
	vertical-align: top; /* Improves readability and alignment in all browsers */
	width: 98%;
}

/* Links */
a {
	text-decoration: none;
	-webkit-transition: color 0.07s ease-in;
	-moz-transition: color 0.07s ease-in;
	-o-transition: color 0.07s ease-in;
	transition: color 0.07s ease-in;
}
a:visited {

}
a:hover,
a:focus,
a:active {
	-webkit-transition: color 0.07s ease-in;
	-moz-transition: color 0.07s ease-in;
	-o-transition: color 0.07s ease-in;
	transition: color 0.07s ease-in;
}

/* Alignment */
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}
.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}
.aligncenter {
	clear: both;
	display: block;
	margin: 0 auto;
}

/* Text meant only for screen readers */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
}

.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
	border-radius: 3px;
	clip: auto !important;
	display: block;
	font-size: 14px;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar */
}

/* Clearing */
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
	content: '';
	display: table;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
	clear: both;
}


/* =Title
----------------------------------------------- */
.home header {
	position:fixed;
	top:0;
	left:150px;
	z-index:999;
}

.home .site-branding,
.site-branding {
	position:absolute;
	top:0;
	left:0;
	-webkit-transition: 1s;
  	-o-transition: 1s;
	transition: 1s;
}

h1.site-title {
	margin: 45px 0 0 15%;
	font-family: 'Archivo Black', sans-serif;
	font-size: 5em;
	line-height:0.8;
	letter-spacing: -4px;
}
h1.site-title {
	color:#222;
}
h1.site-title a {
	color:#222;
}

h1.site-title a:hover span {
	opacity:0.8;
}
h1.site-title img {
	max-height: 30px;
	float: left;
}
.site-description {
	font-size: 1.12em;
	line-height:1.2;
	display: block;
	font-family: 'Ultra', serif;
	margin: 1% 0 0 15%;
	letter-spacing: -0.8px;
	color:#222;
}

.site-branding.smaller {
	transform:scale(3,3);
	transform-origin:left top;
}
.home .site-branding.smaller {
	top:-92px;
}

/* =Top Slider Responsive
----------------------------------------------- */
@media only screen and (max-width: 480px) {
	.site-branding.smaller {
		transform:scale(1,1);
		transform-origin:left top;
	}
	h1.site-title {
		margin: 10px 0 0 5%;
		font-size: 3.2em;
		line-height:0.8;
		letter-spacing: -2px;
	}
	.site-description {
		font-size: 1.12em;
		margin: 1% 0 0 5%;
	}
	.site-branding.smaller {
		transform:none;
		transform-origin:none;
	}
	.home .site-branding.smaller {
		top:38px;
	}
}




/* =Menu
----------------------------------------------- */

.main-navigation {
	clear: both;
	display: block;
	z-index:10;
	position:fixed;
	top:0;
	left:40px;
	width:60px;
	height:100%;
	background:rgba(0, 0, 0, 0);
	-webkit-transform: translate3d(0,0,0);
}
.main-navigation ul {
	list-style: none;
	margin: 3em 0 0;
	padding: 0;
	float: none;
}
.main-navigation li {
	float: none;
	position: relative;
	font-size: 1.2em;
	margin-bottom:1.2em;
}
.main-navigation a {
	display: block;
	text-decoration: none;
	padding:0 0;
	text-transform:uppercase;
	color:#fff;
}
.main-navigation a:hover {
}
.main-navigation ul ul {
	display: none;
	float: left;
	left: 0;
	position: absolute;
	top: 4em;
	z-index: 99999;
}
.main-navigation ul ul ul {
	left: 100%;
	top: 0;
}
.main-navigation ul ul a {
	width: 200px;
	padding: 0.5em 1em;
}
.main-navigation ul ul li {
	padding: 0;
	margin-left: 0;
	font-size: 0.9em;
}
.main-navigation li:hover > a {
}
.main-navigation ul ul :hover > a {
}
.main-navigation ul ul a:hover {
}
.main-navigation ul li:hover > ul {
	display: block;
}
.main-navigation li.current_page_item a,
.main-navigation li.current-menu-item a {
}

/* Small menu */
.menu-toggle {
	cursor: pointer;
	display: none;
	text-align:center;
	margin-top:0.5em;
}


.navigation {
	float: left;
	width: 100%;
	display:none;
}

#menu-wrap {
	float:none;
	width:60px;
	height:100%;
	padding:0;
	position: fixed;
	top: 0;
  	overflow: hidden;
  	margin:0;
	z-index:1000;
}

/* =Content
----------------------------------------------- */

.sticky {
}
.hentry {
	margin: 0 0 3.5em;
	padding-bottom:10em;
}
.byline,
.updated {
	display: none;
}
.single .byline,
.group-blog .byline {
	display: inline;
	font-style: italic;
}
.author, .vcard {
	font-style: normal;
}
.page-content,
.entry-content,
.entry-summary {
	margin: 0.5em 0 0;
}
.archive .entry-content {
	margin: 0.5em 0 0;
}
.team-page .entry-content {
	margin-top: 0.5em;
}
.page-links {
	clear: both;
	margin: 0 0 1.5em;
}


/* =Asides
----------------------------------------------- */

.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
	display: none;
}


/* =Media
----------------------------------------------- */

.page-content img.wp-smiley,
.entry-content img.wp-smiley,
.comment-content img.wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}
.wp-caption img[class*="wp-image-"] {
	display: block;
	margin: 1.2% auto 0;
	max-width: 100%;
}
.wp-caption-text {
	text-align: center;
}
.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
	font-family: Blair;
	font-size:0.8em;
	letter-spacing:3px;
}
.site-main .gallery {
	margin-bottom: 1.5em;
}
.gallery-caption {
}
.site-main .gallery a img {
	border: none;
	height: auto;
	max-width: 90%;
}
.site-main .gallery dd {
	margin: 0;
}
.site-main .gallery-columns-4 .gallery-item {
}
.site-main .gallery-columns-4 .gallery-item img {
}

/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
	max-width: 100%;
}


/* =Navigation
----------------------------------------------- */

.site-main [class*="navigation"] {
	margin: 2em 0 3em;
	overflow: hidden;
}
[class*="navigation"] .nav-previous {
	float: left;
	width: 50%;
}
[class*="navigation"] .nav-next {
	float: right;
	text-align: right;
	width: 50%;
}


/* =Top Slider
----------------------------------------------- */
.top-slider {
	margin-top:50vh;
	position: relative;
}
.top-slider2 {
	position: relative;
}
.scaleConts {
	width: 100%;
  	height: 80vh;
  	margin: 0 auto 100vh;
	text-align: center;
	position: sticky;
	top: 10vh;
	overflow:hidden;
}
.scaleConts:nth-of-type(2) {
	position: fixed;
}

.scaleConts.show {

}
.scaleConts img {
	width: auto;
  	height: 95%;
  	margin: 0 auto 0;
	-webkit-transition: 2s;
  	-o-transition: 2s;
	transition: 2s;
	opacity: 0;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
}
.scaleConts.show img {
	width: auto;
  	height: 95%;
	opacity: 1;
	margin: 0 auto 0;
}


.fadeConts {
	width: 100%;
  	height: 100vh;
  	margin: 0 auto 20vh;
	background:#ffee66;
	/*background:#f0ff00;*/
  	/*background-color: #d8cdad;*/
  	opacity: 0;
  	-webkit-transition: 1s;
  	-o-transition: 1s;
  	transition: 1s;
	text-align: center;
	position: sticky;
	top: 0;
}
.fadeConts.show {
  	opacity: 1;
}
.fadeConts img {
	width:auto;
	height:92Vh;
	max-height: 100%;
	margin: 4vh auto;
}

.fadeConts h2.home-slide-title {
	position:absolute;
	top:80vh;
	right:5%;
	text-align:right;
	margin:0;
	font-family: 'Archivo Black', sans-serif;
	font-size: 5em;
	line-height:0.8;
	letter-spacing: -6px;
	color:#222;
}
.fadeConts p.slider-caption {
	position:absolute;
	top:88vh;
	right:5%;
	widtH:40%;
	text-align:right;
	font-family: 'Roboto', sans-serif;
	font-weight:700;
	line-height:1.2;
	color:#222;
}

.top-slider .fadeConts {
	margin-bottom:100vh;
}
.top-slider2 .fadeConts:last-of-type{
	margin-bottom:39.5vh;
}

.fadeBtn {
	position: absolute;
	top: 37vh;
	right:-120%;
	-webkit-transition: 1s;
  	-o-transition: 1s;
  	transition: 1s;
}
.fadeBtn.show {
	top: 37vh;
	right: 25%;
}
.scaleConts button {
	background:#fff;
	color:#222 !important;
	border:2px solid #222;
	border-radius:8px;
	width:220px;
	height:50px;
	font-size:1.2em;
	letter-spacing:0px;
	padding:0;
	margin: 0;
	cursor:pointer;
	transition:800ms ease all;
	outline:none;
	font-family: 'Ultra', serif;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
}
.scaleConts button:hover {
	background:#f0ff00;
	color:#222 !important;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
}



/* =Top Slider Responsive
----------------------------------------------- */
@media only screen and (max-width: 480px) {
	.scaleConts img {
		-webkit-transition: 1.2s;
  		-o-transition: 1.2s;
		transition: 1.2s;
		width: 90%;
		height:auto;
		margin-top:10vh;
	}
	.scaleConts.show img {
		width: 90%;
		height:auto;
		margin-top:10vh;
	}
	.fadeConts img {
		height:auto;
		width:100%;
		margin:0;
	}
	.fadeConts.show {
		padding-top:30vh;
	}
	.fadeConts h2.home-slide-title {
		top:75vh;
		font-size: 3.2em;
		letter-spacing: -3px;
	}
	.fadeConts p.slider-caption {
		top:82vh;
		right:5%;
		width:90%;
	}
	.top-slider2 .fadeConts:last-of-type{
		margin-bottom:50vh;
	}
	.fadeBtn {
		top: 30vh;
		right:-120%;
	}
	.fadeBtn.show {
		top: 30vh;
		right: 2%;
	}
}


/* =ABOUT
----------------------------------------------- */
.aboutCopy {
	position:fixed;
	top:45vh;
	left:140vh;
	opacity:0;
	-webkit-transition: 0.8s;
  	-o-transition: 0.8s;
	transition: 0.8s;
}
.aboutCopy.show {
	left:11%;
	opacity:1;
}
.aboutCopy p {
	font-size: 2.2em;
	line-height:1.2;
	display: block;
	font-family: 'Ultra', serif;
	margin: 0;
	letter-spacing: -0.8px;
	color:#222;
	white-space: nowrap;
	text-transform:capitalize;
}
.aboutCopy p span {
	font-family: 'Archivo Black', sans-serif;
	text-decoration:underline;
	color:#222;
}
.aboutCopy p span.sign {
	font-family: texas-hero, sans-serif;
	text-align:right;
	text-decoration:none;
	float:right;
	margin:2em 5em 0 0;
	color:#222;
}


/* =ABOUT Responsive
----------------------------------------------- */
@media only screen and (max-width: 480px) {
	.aboutCopy {
		top:32vh;
	}
	.aboutCopy.show {
		left: 6%;
	}
	.aboutCopy p {
		white-space: normal;
	}
}



/* =Content Image Slider
----------------------------------------------- */
#home-slider-wrap {
	width: 100%;
	height:100%;
	max-width: 100%;
	position: fixed;
	top: 0;
	z-index:0;
}
#home-slider .flex-direction-nav {
	display: none;
}
#home-slider {
	float: left;
	width: 100%;
	height:100%;
	max-height: 100%;
}
#home-slider .flex-caption .slider-caption {
	font-size: 0.8em;
	font-family: Blair;
}

#home-slider-wrap2 {
	width: 100%;
	height:100%;
	max-width: 100%;
	position: fixed;
	top: 0;
	z-index:0;
}
#home-slider2 .flex-direction-nav {
	display: none;
}
#home-slider2 {
	float: left;
	width: 100%;
	height:100%;
	max-height: 100%;
}
#home-slider2 .flex-caption .slider-caption {
	font-size: 0.8em;
	font-family: Blair;
}

.flex-caption {
	padding-bottom:2% !important;
}
.flex-caption .home-slide-title {
	font-size: 5em;
	text-transform: uppercase;
	margin-bottom: 0.8em;
}
.flex-caption .home-slide-title a {
	text-decoration: none;
}
.flex-caption .slider-caption {
	padding-left: 20%;
}
.flex-caption .home-slide-title {
}


/* =Content Image Slider
----------------------------------------------- */
#home-slider-wrap7 {
	width: 100%;
	height:100%;
	max-width: 100%;
	position: fixed;
	top: 0;
	z-index:0;
}
#home-slider7 .flex-direction-nav {
	display: none;
}
#home-slider7 {
	float: left;
	width: 100%;
	height:100%;
	max-height: 100%;
}
#home-slider7 .flex-caption .slider-caption {
	font-size: 0.8em;
	font-family: Blair;
}



#content {
	width:100%;
	margin:0;
}

#colophon {
	width: 100%;
	height:auto;
	padding: 0 0;
	float: left;
}
.site-info {
	font-size: 0.5em;
	padding: 0;
	font-family: 'Roboto Condensed', sans-serif;
	letter-spacing: 2px;
	color:#fff;
	position: fixed;
	right: 60px;
	bottom: 40px;
	z-index: 11;
	white-space: nowrap;
}
.home .site-info {
	color:#fff;
}
.site-info a {
}
.one div.widget {
	width: 100%;
	float: left;
}
.two div.widget {
	width: 49%;
	float: left;
	margin-right: 2%;
}

.three div.widget {
	width: 32%;
	float: left;
	margin-right: 2%;
}
.two div#widget-2, .three div#widget-3 {
	margin-right: 0;
}
#colophon h3.widget-title {
	text-transform: uppercase;
	font-size: 2em;
}


a.cp_btn {
	display: inline-block;
	width: auto;
	padding: 0.4em 1em;
	text-align: center;
	text-decoration: none;
	color: #222;
	border: 1px solid #222;
	border-radius: 3px;
	transition: .4s;
	font-family: 'Roboto', sans-serif;
	font-size: 0.7em;
}
a.cp_btn:hover {
	background: #222;
	color: #fff;
}


/* ------------------------ RAYOUT ------------------------ */
#page {
	width: 100%;
	padding: 0;
	overflow:visible;
	clear: both;
	display: block;
}
.single #page {
	margin: 10em auto 0 60px;
}
.archive #page {
	margin: 10em auto 0 60px;
}

h2.section-title, h1.archive-title {
	margin: 0 0 .5em;
	text-align: center;
	font-family: 'Roboto', Arial, Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; 
	font-weight: 700;
	font-size: 3.6em;
	letter-spacing: -3px;
}
h2.section-title a, h1.archive-title a {
}
h2.section-title a:hover, h1.archive-title a:hover {
}
.section-title-top {
	font-size: 0.5em;
	margin-bottom: 1em;
	display: inline-block;
	padding: 5px 0;
	text-transform: none;
	font-style: italic;
}
.section-title-top p {
	margin-bottom: 0;
	font-size: 0.5em;
	line-height: 1.5em;
}
.section-title-name {
	clear: left;
	display: block;
}


header.page-header {
	margin-bottom:5em;
}

h1.entry-title, h1.page-title {
	font-size: 3.6em;
	margin-bottom: 0;
	font-weight: 600;
	font-family: 'Roboto', Arial, Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; 
	text-align:center;
	letter-spacing:-1px;
}
.archive article, .search article, .grid-3 article {
}
.archive h1.entry-title, .search article h1.entry-title, .grid-3 article h1.entry-title, .grid-4 article h1.entry-title {
	margin-bottom: 0.2em;
	font-size: 1.2em;
	letter-spacing: 0;
	text-align:left;
}
.archive h1.entry-title a, .search h1.entry-title a, .grid-3 h1.entry-title a {
	color:#ddd;
}
.archive h1.entry-title a:hover, .search h1.entry-title a:hover, .grid-3 h1.entry-title a:hover {
}
.archive h1.page-title, .search h1.page-title, .grid-3 h1.page-title {
	margin: 0 0 1em 0;
	text-align: center;
	font-size: 3.6em;
	line-height: 1;
	letter-spacing:-1px;
}

footer.entry-meta {
	padding: 1em 0;
}
.footer-entry-wrap {
	float: left;
	padding-top: 0.5em;
}
.entry-meta a {
	font-style: normal;
	text-transform: uppercase;
}
.archive footer.entry-meta {
	display: none;
}


#primary {
	float: left;
	width: 75%;
}
.home #primary {
	width: 90vw;
}
.no-sidebar #primary {
	width: 70%;
	margin: 0 auto;
	float: none;
}

#secondary {
	float: left;
	width: 20%;
	margin-left: 5%;
}
#secondary .widget {
	margin-bottom: 3em;
}






.single .site-header .site-branding, .page .site-header .site-branding {
	position: absolute;
	top: 45px;
	left: 6%;
	z-index: 10;
}
.single .site-header .main-navigation, .page .site-header .main-navigation {
	clear: both;
	display: block;
	z-index:10;
	position:absolute;
	top:0;
	left:0;
}
.single .site-header h1.site-title, .page .site-header h1.site-title {
	font-size:3em;
	letter-spacing:-2px;
	margin:0;
}
.single .site-header h1.site-title span.lastname, .page .site-header h1.site-title span.lastname {
	display:inline;
}
.single .site-header .site-description, .page .site-header .site-description {
	font-size: 0.8em;
	line-height:2;
	display: block;
	letter-spacing:1px;
	margin:1em 0 0;
	text-indent:30px;
}

.archive .site-header .site-branding {
	position: absolute;
	top: 45px;
	left: 6%;
	z-index: 10;
}
.archive .site-header .main-navigation {
	clear: both;
	display: block;
	z-index:10;
	position:absolute;
	top:150px;
	left:6%;
}
.archive .site-header h1.site-title {
	font-size:3em;
	letter-spacing:-2px;
	margin:0;
}
.archive .site-header h1.site-title span.lastname {
	display:inline;
}
.single .site-header .site-description,
.page .site-header .site-description,
.archive .site-header .site-description {
	font-size: 0.8em;
	line-height:2;
	display: block;
	letter-spacing:1px;
	margin: 0 0;
	text-indent:0;
}


#secondary h1.widget-title {
	text-transform: uppercase;
	font-size: 1.5em;
}

.single-format-image .entry-image {
	float: left;
	width: 70%;
	margin-right: 3%;
	position: relative;
}
.entry-image.fullscreen {
	width: 100%;
}
.entry-image.fullscreen .featured-image-caption {
	display: none;
}
.entry-image.fullscreen img {
	max-height: 100%;
}
.image-fullscreen, .flex-full-screen {
	position: absolute;
	width: 100%;
	height: 100%;
	display: block;
	left: 0;
	top: 0;
	cursor: pointer;
}
.image-fullscreen:hover, .flex-full-screen:hover {
}
.entry-image.fullscreen .image-fullscreen:hover, .flexslider.flexslider-fullscreen .flex-full-screen:hover {
	background: transparent;
}
.featured-image-caption {
	font-style: italic;
	padding: 0.5em 3%;
	float: left;
	width: 94%;
	position: absolute;
	bottom: 0;
}
.image-entry-content {
	float: right;
	width: 27%;
}

.single-format-gallery .flexslider {
	margin-bottom: 2em;
}
.single-format-gallery .flexslider .slides {
	float: left;
	width: 70%;
	margin-right: 3%;
}
.flexslider.flexslider-fullscreen {
	margin: 0;
	height: 100% !important;
}
.flexslider.flexslider-fullscreen .flex-caption, .flexslider.flexslider-fullscreen .flexslider-grid {
	display: none;
}
.flexslider.flexslider-fullscreen .slides, .single-format-gallery .flexslider.flexslider-fullscreen .flex-direction-nav {
	width: auto;
}
.flexslider.flexslider-fullscreen .slides img {
	width: auto;
	max-height: 100%;
	margin: 0 auto;
}
.flexslider-fullscreen .slides:after {
	width: 100%;

 }
.flexslider-fullscreen, .flexslider-fullscreen .slides, .flexslider-fullscreen .slides li, .flexslider-fullscreen .slides li img {

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	-webkit-box-align: center;
	-moz-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;

	-webkit-box-pack: center;
	-moz-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
}
.flexslider-fullscreen .flex-direction-nav {
	position: static !important;
}
.single-format-gallery .flexslider .flexslider-grid {
	float: right;
	width: 27%;
	margin: 0;
	list-style: none;
	overflow-x: hidden;
	overflow-y: auto;
}
.single-format-gallery .flexslider .flexslider-grid li {
	margin-bottom: 8%;
	width: 25%;
	margin-right: 8%;
}
.single-format-gallery .flexslider .flexslider-grid li:hover {
	cursor: pointer;
	opacity: 0.8;
}
.single-format-gallery .flexslider .flexslider-grid li img {
	width: 100%;
	height: auto;
	float: left;
}
.single-format-gallery .flexslider .flex-direction-nav {
	width: 70%;
	position: absolute;
	top: 47%;
}

span.post-format-icon {
	position: absolute;
	left: 0;
	padding: 0.5em;
	top: 0;
	line-height: 1em;
	z-index: 2;
	display: none;
}
.blog-category span.post-format-icon, .portfolio-category span.post-format-icon, .blog-page span.post-format-icon {
	display: block;
}
.portfolio-category .entry-content {
	display: none;
}

.archive .portfolio-category article {
	margin-bottom: 2%;
}


/* Blog Section */
#blog-section article, #primary.blog-page-list article {
	float: left;
	width: 100%;
	margin: 0;
	text-align: left;
}
#primary.blog-page-list article {
	margin-bottom: 3em;
}
#blog-section .entry-image, #primary.blog-page-list .entry-image {
	float: left;
	width: 45%;
	margin-right: 5%;
	position: relative;
}

#blog-section .entry-image img, #primary.blog-page-list .entry-image img {
	width: 100%;
	height: auto;
}
#blog-section .entry-content, #primary.blog-page-list .entry-content {
	float: left;
	width: 50%;
	margin: 0;
	position:relative;
}

#blog-section .entry-title, #primary.blog-page-list .entry-title {
	text-transform: uppercase;
	font-size: 2.5em;
	margin: 0 0 0.5em 0;
}
#blog-section .entry-title a {
}
#blog-section .entry-title a:hover {
}
#blog-section .entry-meta, #primary.blog-page-list .entry-meta {
	margin-bottom: 1em;
}
/*******************************
COLUMN
*******************************/
#work-section article {
	margin: 0 2% 2% 0;
}
#services-section article {
	width: 24%;
	padding: 4%;
	margin-bottom: 2%;
}
#services-section article:hover {
}
#services-section article .entry-image img {
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	filter: grayscale(100%);
}
#services-section article:hover .entry-image img {
	-webkit-filter: grayscale(0);
	-moz-filter: grayscale(0);
	filter: grayscale(0);
}
#services-section article:hover .entry-title a {
}
#services-section article p {
	margin-bottom: 0;
}
#work-section article:nth-of-type(3n+3), #services-section article:nth-of-type(3n+3) {
	margin-right: 0;
}

.fullwidth .article {
	display: inline-block;
	width: 100% !important;
	margin-left: 0 !important;
}
/* grid4 col */
.grid-4 article {
	float:left;
	width: 23.5%; /* 256px / 1024px */
	margin: 0 2% 2% 0;
}
.grid-4 article:nth-of-type(4n) {
	margin:0 0 2% 0;
}
/* grid3 col */
.grid-3 .col {
	display: inline-block;
	width: 33.333333333333333%; /* 341.3333333px / 1024px */
}
/* grid2 col */
.grid-2 .col {
	display: inline-block;
	width: 50%; /* 512px / 1024px */
}
/* clear col */
.grid-4 article:nth-of-type(4n+1),
.grid-3 article:nth-of-type(3n+1),
.grid-2 article:nth-of-type(2n+1) {
}

.grid-3 .col, .grid-3 article {
	vertical-align: top;
	float: left;
	margin: 0 2% 5% 0;
	padding: 0;
	width: 32%;
	position: relative;
}

.grid-3 .col:nth-of-type(3n+3), .grid-3 article:nth-of-type(3n+3) {
	margin-right: 0;
}
.grid-3 .col:nth-of-type(3n+1), .grid-3 article:nth-of-type(3n+1) {
	clear: left;
}


/* Preloader */
#preloader {
	position: fixed;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background:#ffee66;
	/*background: #d8cdad;*/
	z-index: 999;
}

#spinner {
	position: relative;
	height: 35px;
	width: 35px;
	top: 50%;
	margin-bottom: -12px;
	margin: 0 auto;
	border: 3px solid rgba(226, 226, 226, 0.75);
	border-radius: 100%;
	-webkit-animation: rotation .6s infinite linear;
	-moz-animation: rotation .6s infinite linear;
	-o-animation: rotation .6s infinite linear;
	animation: rotation .6s infinite linear;
}
#spinner:before {
	content: "";
	display: block;
	position: absolute;
	left: -3px;
	top: -3px;
	height: 100%;
	width: 100%;
	border-top: 3px solid rgba(0,0,0,1);
	border-left: 3px solid transparent;
	border-bottom: 3px solid transparent;
	border-right: 3px solid transparent;
	border-radius: 100%;
}
@-webkit-keyframes rotation {
   from {-webkit-transform: rotate(0deg);}
   to {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
   from {-moz-transform: rotate(0deg);}
   to {-moz-transform: rotate(359deg);}
}
@-o-keyframes rotation {
   from {-o-transform: rotate(0deg);}
   to {-o-transform: rotate(359deg);}
}
@keyframes rotation {
   from {transform: rotate(0deg);}
   to {transform: rotate(359deg);}
}

/* =Responsiveness: Readers
----------------------------------------------- */

@media screen and (max-width: 1500px) {
	.home #menu-wrap:before {
		width: 180%;
		height: 120%;
		margin: 0% 0 0;
	}

}


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

/* iPads （縦と横向き ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
	.home #menu-wrap:before {
		width: 200%;
		height: 120%;
	}
}


/* =Responsiveness: Tablet (Portrait)
================================================== */

/* Note: Design for a width of 768px */

@media only screen and (min-width: 768px) and (max-width: 959px) {

}


/* =Responsiveness: Mobile (Portrait)
================================================== */


/* =Responsiveness: Mobile (Landscape)
================================================== */

/* Note: Design for a width of 480px */

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

	body {
		font-size: 13px;
	}
	.main-navigation {
		width:40px;
	}

	#page {
		width: 100% ;
		margin:0;
	}
	.home #menu-wrap, .archive #menu-wrap, .single #menu-wrap, .page #menu-wrap {
		width:40px;
	}
	.archive h1.page-title, .search h1.page-title, .grid-3 h1.page-title, h2.section-title, h1.archive-title {
		font-size:1.5em;
	}

	.grid-3 .col, .grid-3 article  {
		width: 100%;
		margin-right:0;
	}

	#footer-widgets .widget {
		width:100%;
		margin-right:0;
	}
	.main-navigation a {
		padding:0;
	}
	.slide-button a {
		font-size:0.9em;
	}

	#testimonials-section article .entry-image, #testimonials-section article:nth-child(even) .entry-image, #testimonials-section article .post-meta, #testimonials-section article:nth-child(even) .post-meta {
		width:48%;
		font-size:0.8em;
		margin:0;
		margin-bottom:1em;
	}
	#testimonials-section article .testimonial-text, #testimonials-section article:nth-child(even) .testimonial-text  {
		margin:0;
		width:100%;
		padding:0;
		background:transparent !important;
	}
	.home.has-home-slideshow h1.site-title img {
		max-height:50px;
	}
	#testimonials-section article .testimonial-bubble, #testimonials-section article .testimonial-small-bubble {
		display:none;
	}
	#testimonials-section article .post-meta {
		margin-top:2em;
	}

	#blog-section .entry-image, #primary.blog-page-list .entry-image, #blog-section .entry-content, #primary.blog-page-list .entry-content {
		width:100%;
		margin:0 0 1em 0;
	}

	#services-section article {
		width:92%;
		margin:0;
	}

	#homewidgets .widget-title {
		font-size:2.5em;
	}

	.image-entry-content, .single-format-image .entry-image, .single-format-gallery .flexslider .flexslider-grid, .single-format-gallery .flexslider .slides {
		margin:0;
		width:100%;
		margin-bottom:1em;
	}
	.single-format-gallery .flexslider .flex-direction-nav {
		width:100%;
	}
	#services-section article {
		margin-bottom:1em;
	}

	#respond input[type=text], #respond textarea {
		width:96%;
	}
	h1.entry-title, h1.page-title {
		font-size:2.5em;
	}
	.main-navigation ul ul {
		position:relative;
		display:block;
		box-shadow:none !important;
		-webkit-box-shadow:none !important;
		-moz-box-shadow:none !important;
		top:0;
		border:0 !important;
	}

	.main-navigation ul ul ul {
		left:auto;
	}
	.main-navigation ul ul a {
		width:auto;
	}
	.main-navigation ul ul li {
		padding:0;
		margin-left:0;
	}
	.main-navigation ul ul {
		width:100%;
	}
	.menu-toggle,
	.main-navigation.toggled .nav-menu {
		width:100%;
	}
	.single.has-sidebar #content #primary, .archive.has-sidebar #content #primary, .single.has-sidebar #content #secondary, .archive.has-sidebar #content #secondary, .page.has-sidebar #content #primary, .page.has-sidebar #content #secondary {
		width: 100%;
		margin: 0;
	}
	h2.section-title {
		margin: 0.5em 0;
		letter-spacing:-1px;
	}
	.main-navigation ul {
		clear:both;
		float:none;
	}
	#map-section {
		width: calc( 100% - 40px ) ;
		margin:0 0 0 40px;
	}
	.contact-left {
		width:100%;
		margin:0 0 0 0;
		clear:left;
	}
	.contact-right {
		width:100%;
		margin:0 0 0 0;
		clear:left;
	}
	.contact-content textarea {
		margin-bottom:35px;
	}
	.contact-content button, .about-content button, #works-section button {
		padding:0;
		width:100%;
	}
	.site-info {
		right: 30px; bottom: 22px;
	}
	#works-section article {
		width: 92%;
		padding: 4%;
		margin-bottom: 8%;
	}
	.grid-4 article {
		float:left;
		width: 48%; /* 256px / 1024px */
		margin:0 4% 0 0;
	}
	.grid-4 article:nth-of-type(2n) {
		margin:0 0 0 0;
	}
	.grid-4 article .entry-header {
		display:none;
	}
	.office-content p {
		text-align:left;
	}
	.adres-jp {
		letter-spacing:2px;
	}
	.profile-img {
		width:60%;
		margin:0 20% 0;
		clear:both;
	}
	.profile-content {
		width:100%;
		letter-spacing:2px;
		line-height:2.5;
	}
	.flexslider .slides img {
		height: 100vh !important;
    	width: auto !important;
		max-width: none !important;
    	margin-left: -60%;
	}
	.single.stories .flexslider .slides li {
		overflow:scroll;
	}
	body.single #masthead-wrap .flexslider .slides li {
		overflow:visible;
	}

}


/* Parallax effect for non touch sceen devices only */
	body.non-touch-screen #home-slider-wrap {
		position: fixed;
	}
	/* in view animations */
	body.non-touch-screen #testimonials-section article .entry-image {
		margin-right: -20%;
		opacity:0;
	}
	body.non-touch-screen #testimonials-section article.in-view .entry-image {
		opacity:1;
		margin-right:-3%;
		 transition: all 0.4s ease-in;
		-webkit-transition: all 0.4s ease-in;
		-moz-transition: all 0.4s ease-in;
		-o-transition: all 0.4s ease-in;
	 }

	body.non-touch-screen #testimonials-section article.in-view:nth-child(even) .entry-image {
		margin-left:-3%;
		opacity:1;
		transition: all 0.4s ease-in;
		-webkit-transition: all 0.4s ease-in;
		-moz-transition: all 0.4s ease-in;
		-o-transition: all 0.4s ease-in;
	 }

	body.non-touch-screen #testimonials-section article .post-meta {
		opacity:0;
	}
	body.non-touch-screen #testimonials-section article.in-view .post-meta {
		opacity:1;
		transition: all 0.4s ease-in;
		-webkit-transition: all 0.4s ease-in;
		-moz-transition: all 0.4s ease-in;
		-o-transition: all 0.4s ease-in;
	}
	body.non-touch-screen #blog-section .entry-image,
	body.non-touch-screen #primary.blog-page-list .entry-image {
		left:-100px;
	}
	body.non-touch-screen #blog-section .in-view .entry-image,
	body.non-touch-screen #primary.blog-page-list .in-view .entry-image {
		left:0;
		transition: left 0.3s ease-in;
		-webkit-transition: left 0.3s ease-in;
		-moz-transition: left 0.3s ease-in;
		-o-transition: left 0.3s ease-in;
	}
	body.non-touch-screen #blog-section .entry-content,
	body.non-touch-screen #primary.blog-page-list .entry-content {
		right:-150px;
	}
	body.non-touch-screen #blog-section .in-view .entry-content,
	body.non-touch-screen #primary.blog-page-list .in-view .entry-content {
		right:0;
		transition: right 0.2s ease-in;
		-webkit-transition: right 0.2s ease-in;
		-moz-transition: right 0.2s ease-in;
		-o-transition: right 0.2s ease-in;
	}

	body.non-touch-screen #testimonials-section article {
		opacity:0;
	}
	body.non-touch-screen #testimonials-section article.in-view {
		opacity:1;
		transition: all 0.3s ease-in;
		-webkit-transition: all 0.3s ease-in;
		-moz-transition: all 0.3s ease-in;
		-o-transition: all 0.3s ease-in;
	}

	body.non-touch-screen .in-view {
		transition: all 0.3s ease-in;
		-webkit-transition: all 0.3s ease-in;
		-moz-transition: all 0.3s ease-in;
		-o-transition: all 0.3s ease-in;
	}

	body.non-touch-screen.home article,
	body.non-touch-screen.archive article,
	body.non-touch-screen .blog-page article,
	body.non-touch-screen .action-button,
	body.non-touch-screen .team-page article {
		transition: all 0.3s ease-in;
		-webkit-transition: all 0.3s ease-in;
		-moz-transition: all 0.3s ease-in;
		-o-transition: all 0.3s ease-in;
		-moz-opacity: 0;
		opacity: 0;
		-moz-transform: scale(0.01);
		-webkit-transform: scale(0.01);
		-o-transform: scale(0.01);
		-ms-transform: scale(0.01);
		transform: scale(0.01);
	}
	body.non-touch-screen #primary.blog-page-list article,
	body.non-touch-screen #blog-section article {
		-moz-transform: scale(1);
		-webkit-transform: scale(1);
		-o-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
	}
	body.non-touch-screen article.in-view,
	body.non-touch-screen .action-button.in-view,
	body.non-touch-screen .team-page article.in-view {
		transition: all 0.3s ease-in;
		-webkit-transition: all 0.3s ease-in;
		-moz-transition: all 0.3s ease-in;
		-o-transition: all 0.3s ease-in;
		-moz-opacity: 1;
		opacity: 1;
		-moz-transform: scale(1);
		-webkit-transform: scale(1);
		-o-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
	}

/**
  * important: keep position fixed, you can however use top:0 instead of bottom:0
  * if you want to make it stick to the top of the browser
  */

/**
  * z-index ordering of the different layers, do this for your layers,
  * also assign absolute width (to prevent issues if the script gets executed before the images get loaded)
  */

#masthead-wrap {
	width:100%;
	height:100%;
	left:0px;
	position:absolute;
}
.flexslider {
	height:100%;
	overflow: visible !important;
}
.flexslider .slides > li {
	background-position:center center;
}
#masthead-wrap2 {
	width:100%;
	height:100%;
	left:130vw;
	top:0vw;
	position:absolute;
}
#masthead-wrap3 {
	width:100%;
	height:100%;
	left:260vw;
	top:0vw;
	position:absolute;
}
#masthead-wrap4 {
	width:100%;
	height:100%;
	left:390vw;
	top:0vw;
	position:absolute;
}


pre
{
    font-size: 14px;
    color: white;
    padding: 10px;
    background: #646464;
}

.front {
    z-index: 500;
    top: 0;
    width:600vw;
}
.page .front {
	width:400vw;
}

.second {
    z-index: 750;
	top: 0;
    width: 12000px;
	pointer-events: none;
}

.third {
    z-index: 1000;
	top: 0;
    width: 16000px;
	pointer-events: none;
}

.page-page
{
    top: 80px;
    width: 500px;
    background: white;
    padding: 10px 30px;
    border: 1px #eee solid;
    position: absolute;
}

.documentation {
    left: 95vw;
	top:50vh;
    width: 700px;
}

.options {
    width: 700px;
    left: 3800px;
}

.download {
    width: 500px;
    left: 550vw;
}

.license
{
    padding: 100px 30px 30px 30px;
}

#work-section {
	top:80px;
    width: 100vw;
	left:400vw;
    background: white;
    padding: 10px 30px;
    position: absolute;
	pointer-events: auto;
	transition: all 0.3s ease-in;
		-webkit-transition: all 0.3s ease-in;
		-moz-transition: all 0.3s ease-in;
		-o-transition: all 0.3s ease-in;
		-moz-opacity: 0;
		opacity: 0;
		-moz-transform: scale(0.01);
		-webkit-transform: scale(0.01);
		-o-transform: scale(0.01);
		-ms-transform: scale(0.01);
		transform: scale(0.01);
}
#work-section.smaller {
	top:80px;
	transition: all 0.3s ease-in;
		-webkit-transition: all 0.3s ease-in;
		-moz-transition: all 0.3s ease-in;
		-o-transition: all 0.3s ease-in;
		-moz-opacity: 1;
		opacity: 1;
		-moz-transform: scale(1);
		-webkit-transform: scale(1);
		-o-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
}

.page #work-section {
	left:150vw;
}
.page #work-section.smaller {
	left:150vw;
}

footer.site-footer {

}
.page footer.site-footer {

}

.footer-card {
	padding:20px 0 60px;
	background:#fff;
}

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

	.home #menu-wrap,
	.page #menu-wrap,
	.category #menu-wrap,
	.single #menu-wrap {
		width:100%;
		position:fixed;
		z-index:9999;
		height:45px;
	}
	.main-navigation {
		width:100%;
		height:38px;
		background:#dddbcc;
	}
	.main-navigation li {
		float: left;
		position: relative;
		font-size: 1.5em;
		text-align:center;
		margin-bottom:0;
		padding:0 0.7em 0;
	}
	.main-navigation ul {
		margin: 0;
	}
	.single .main-navigation a,
	.page .main-navigation a {
		color:#fff;
	}
	.home .site-branding,
	.page .site-branding,
	.category .site-branding,
	.single .site-branding {
		top:38px;
	}
	#content {
		width:100%;
		margin:30vh 0 0;
	}
	.no-sidebar #primary {
		width: 100%;
	}

	.archive #page,
	.single #page {
		margin: 0 auto 0;
	}
	
	#masthead-wrap {
		top:0px;
		left:0px;
		position:absolute;
	}
	#masthead-wrap2 {
		top:120vh;
		left:0px;
		position:absolute;
	}
	#masthead-wrap3 {
		top:240vh;
		left:0px;
		position:absolute;
	}
	
	body.non-touch-screen #home-slider-wrap,
	#home-slider-wrap,
	body.non-touch-screen #home-slider-wrap2,
	#home-slider-wrap2,
	body.non-touch-screen #home-slider-wrap3,
	#home-slider-wrap3{
		position:absolute;
	}
	
	.page-page {
    	width: 80%;
    	border: 1px #eee solid;
    	position: absolute;
	}
	.description {
   		top: 100vh;
		left:0;
	}

	.documentation {
		width:80%;
    	left: 5%;
	}

	.options {
    	width:80%;
    	left: 5%;
	}

	.download {
    	width:80%;
    	left: 5%;
	}
	
	#work-section {
		top: 360vh;
    	width: 80%;
		padding: 10px 10%;
		left:0;
    	position: absolute;
	}
	#work-section.smaller {
		top: 360vh;
		left:0;
	}
	
	header.page-header {
		margin-bottom:3em;
	}
	.archive h1.page-title.archive-title {
		font-size: 2.5em;
	}
	.grid-4 article {
		float:none;
		width: 100%; /* 256px / 1024px */
		margin:0 0 0 0;
	}
	article.hentry {
		margin: 0 0 3em;
		padding-bottom:5em;
	}
	
	/*.page #work-section {
		top:160vh;
		left:0;
	}
	.page #work-section.smaller {
		top:160vh;
		left:0;
	}*/
	
	.page article.hentry {
		width:90%;
		margin: 0 5% 3em;
		padding-bottom:5em;
	}
	.page #work-section,
	.single #work-section,
	.category #work-section {
		position:static;
		top:auto;
		left:0;
		display:inline-block;
		margin-bottom:5em;
	}
	.page #work-section.smaller,
	.single #work-section.smaller,
	.category #work-section.smaller {
		top:auto;
		left:0;
	}
	#work-section article.hentry {
		width:100%;
		margin: 0 0 3em;
		padding-bottom:3em;
	}	
	
	footer.site-footer {
		top: 500vh;
		width:80% !important;
		left:10%;
		position:absolute;
	}
	/*.page footer.site-footer {
		top: 300vh;
		left:10%;
	}*/
	.page footer.site-footer,
	.category footer.site-footer,
	.single footer.site-footer{
		position:static;
		top: auto;
		margin-left:10%;
	}
	.footer-card {
		border-bottom:15vh solid #CCF0F2;
	}
	#colophon {
		height:auto;
	}

}

body {
	background:#222;
}

/*img {
  pointer-events: none;
}*/
img {
-webkit-user-drag: none;
}

/* Google Fonts読み込み */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap");

/* 簡易リセットCSS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* スライダー全体 */
.vertical-slider {
  width: 100%;
  height: 100vh;
}

/* スライド */
.vertical-slider__slide {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10rem;
  font-family: "Open Sans", sans-serif;
  font-weight: bold;
  color: #fff;
}

/* 1枚目のスライド */
.vertical-slider__slide:nth-child(1) {
  background-color: none;
}

/* 2枚目のスライド */
.vertical-slider__slide:nth-child(2) {
  background-color: none;
}

/* 3枚目のスライド */
.vertical-slider__slide:nth-child(3) {
 background-color: none;
}

/* 4枚目のスライド */
.vertical-slider__slide:nth-child(4) {
  background-color: none;
}

/* 5枚目のスライド */
.vertical-slider__slide:nth-child(5) {
  background-color: none;
}

/* 6枚目のスライド */
.vertical-slider__slide:nth-child(6) {
  background-color: none;
}

/* 7枚目のスライド */
.vertical-slider__slide:nth-child(7) {
  background-color: none;
}

/* 8枚目のスライド */
.vertical-slider__slide:nth-child(8) {
  background-color: none;
}

/* SP時の文字サイズ調整 */
@media (max-width: 599px) {
  .vertical-slider__slide {
    font-size: 16vw;
  }
}

/*----------------------------
* ページネーションのスタイル
*----------------------------*/

.swiper-pagination-bullet {
	border-radius:0% !important;
	width: 80px !important;
	height: 40px !important;
	line-height: 40px !important;
	background:none !important;
	opacity:1 !important;
	text-align:left !important;
	color:#fff !important;
}

.swiper-pagination-bullet-active {
    background:none !important;
	color:#666 !important;
}
.swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-vertical>.swiper-pagination-progressbar {
	position:absolute !important;
	width:1px !important;
	height:90% !important;
	right:40px !important;
	left:auto !important;
}
.swiper-pagination {
	position:absolute;
	top:5% !important;
	transform:none !important;
	z-index:999;
}
.swiper-pagination-progressbar {
	background: rgba(0,0,0,0.0) !important;
	position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
	background: #fff !important;
	transform-origin: left top !important;
}

/*----------------------------
* NAVIGATION
*----------------------------*/

.jp-en {
	position:fixed;
	z-index:9999;
	top:4%;
	right:80px;
	font-family: 'Source Code Pro', monospace;
	font-size:16px;
	color:#fff;
	background:url(https://labo-oisier.com/images/jp-en-bg.png) no-repeat center bottom;
	background-size:100%;
	width:100px;
	height:35px;
	text-align:center;
	display:none;
}
.jp-en-jp {
	color:#666;
	padding-right:20px;
}
.jp-en-sl {
	color:#fff;
}
.jp-en-en {
	color:#666;
	padding-left:20px;
}
.jp-en-jp a,
.jp-en-en a {
	color:#fff;
}
.main-navi {
	position:absolute;
	top:4%;
	left:40px;
	z-index:9999;
}
.main-navi ul li {
	list-style:none;
	font-family: 'Source Code Pro', monospace;
	font-size:16px;
	color:#fff;
	margin:0 0 0.5em 0;
	letter-spacing:0;
}
.main-navi ul li:hover {
	cursor:pointer;
}
.main-navi ul li.act1 {
	color:#666;
}
.main-navi ul li.bloglink {
	margin:3.2em 0 0 0;
	font-size:1.2em;
	letter-spacing:1px;
}
.main-navi ul li.bloglink a {
	color:#fff;
	border-bottom:1.5px solid #fff;
	padding-bottom:4px;
}
.main-navi ul li.reservation label {
	width:100px;
	height:115px;
	display:block;
	background:url(https://labo-oisier.com/images/reservation-btn.png) no-repeat;
	background-size:100%;
	text-indent:-9999px;
	margin-top:55px;
	cursor:pointer;
}


/*----------------------------
* TOP PAGE
*----------------------------*/
.top-bg {
	background:url(https://labo-oisier.com/images/bg-img-01.jpg) no-repeat center;
	background-size:cover;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	position: fixed;
	mix-blend-mode: multiply;
}
.top-bg2 {
	background:url(https://labo-oisier.com/images/bg-img-01x.jpg) no-repeat center;
	background-size:cover;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	position: fixed;
}
#bg-video{
	position: absolute;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
}

.header-title {
	position: relative;
    z-index: 2;
    display: flex;
    width: 50%;
    height: 100vh;
    align-items: center;
    text-align: center;
    margin: 0 auto;
}
h1.top-logo {
	width:420px; height:91px;
	background:url(https://labo-oisier.com/images/logo-wht.png) no-repeat;
	background-size:100%;
	text-indent:-9999px;
	margin:0 auto 0;
}

.top-shape {
	position: absolute;
	z-index: 2; /*必ず必要*/
	background:url(https://labo-oisier.com/images/top-shape.png) no-repeat;
	background-size:100%;
	width:450px;
	height:100px;
	bottom:80px;
	left:80px;
}

.top-message {
	position: absolute;
	z-index: 2;
	left:calc(50% - 230px);
	top:60%;
	width:460px;
}
.top-message p {
	text-align:center;
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", 'Noto Serif JP', serif;
	color:#fff;
	font-size:15px;
	line-height:2.1;
	font-weight:normal;
}

/*----------------------------
* CONCEPT
*----------------------------*/
.concept-bg {
	background:url(https://labo-oisier.com/images/bg-img-02.jpg) no-repeat center;
	background-size:cover;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	position: fixed;
}

.concept-txt {
	position: absolute;
	z-index: 2;
	left:60%;
	top:55%;
}
.concept-txt p {
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", 'Noto Serif JP', serif;
	color:#fff;
	font-size:16px;
	line-height:1.9;
	font-weight:normal;
	-moz-text-shadow: 0px 0px 6px rgba(0, 0, 0, 1);
	-webkit-text-shadow: 0px 0px 6px rgba(0, 0, 0, 1);
	-ms-text-shadow: 0px 0px 6px rgba(0, 0, 0, 1);
	text-shadow: 0px 0px 6px rgba(0, 0, 0, 1);
}

.cont-logo {
	position: absolute;
	z-index: 2;
	width: 254px;
	height: 55px;
	background: url(https://labo-oisier.com/images/logo-wht.png) no-repeat;
	background-size: 100%;
	text-indent: -9999px;
	bottom: 40px;
	left: 80px;
}
.cont-logo:hover {
	cursor: pointer;
}

/*----------------------------
* SPACE
*----------------------------*/
.space-bg {
	background:url(https://labo-oisier.com/images/bg-img-08.jpg) no-repeat center;
	background-size:cover;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	position: fixed;
}

.space-txt {
	position: absolute;
	z-index: 2;
	left:0%;
	top:0;
	width: 100%;
	height: 100vh;
	display:flex;
	align-items: center;
	justify-content: center;
}
.space-txt p {
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", 'Noto Serif JP', serif;
	color:#fff;
	font-size:17px;
	line-height:2.1;
	font-weight:normal;
}

/*----------------------------
* CUISINE
*----------------------------*/
.cuisine-bg {
	background:url(https://labo-oisier.com/images/bg-img-04.jpg) no-repeat center;
	background-size:cover;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	position: fixed;
}

.cuisine-txt {
	position: absolute;
	z-index: 2;
	left:0%;
	top:0;
	width: 100%;
	height: 100vh;
	display:flex;
	align-items: center;
	justify-content: center;
}
.cuisine-txt p {
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", 'Noto Serif JP', serif;
	color:#fff;
	font-size:17px;
	line-height:2.6;
	font-weight:normal;
	margin:0;
}


/*----------------------------
* UTSUWA
*----------------------------*/
.utsuwa-bg {
	background:url(https://labo-oisier.com/images/bg-img-05.jpg) no-repeat center;
	background-size:cover;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	position: fixed;
}

.utsuwa-txt {
	position: absolute;
	z-index: 2;
	left:35%;
	top:40%;
}
.utsuwa-txt p {
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", 'Noto Serif JP', serif;
	color:#fff;
	font-size:17px;
	line-height:2.1;
	font-weight:normal;
}

br.pc {
	display:none;
}

/*----------------------------
* PROFILE
*----------------------------*/
.profile-bg {
	background:url(https://labo-oisier.com/images/bg-img-06.jpg) no-repeat center;
	background-size:cover;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	position: fixed;
}
.profile-txt {
	position: absolute;
	z-index: 2;
	left:60%;
	top:25%;
	width:300px;
}
.profile-txt p {
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", 'Noto Serif JP', serif;
	color:#fff;
	font-size:17px;
	line-height:2.1;
	font-weight:normal;
	-moz-text-shadow: 0px 0px 6px rgba(0, 0, 0, 1);
	-webkit-text-shadow: 0px 0px 6px rgba(0, 0, 0, 1);
	-ms-text-shadow: 0px 0px 6px rgba(0, 0, 0, 1);
	text-shadow: 0px 0px 6px rgba(0, 0, 0, 1);
}

.profile-txt p.chef-bio {
	font-size:15px;
}

/*----------------------------
* MENU
*----------------------------*/

.menu-bg {
	background:url(https://labo-oisier.com/images/bg-img-07.jpg) no-repeat center;
	background-size:cover;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	position: fixed;
}

.menu-txt {
	position: absolute;
	z-index: 2;
	top:18%;
	width:440px;
	margin:0 auto 0 calc(50% - 220px);
	-moz-text-shadow: 0px 0px 6px rgba(0, 0, 0, 1);
	-webkit-text-shadow: 0px 0px 6px rgba(0, 0, 0, 1);
	-ms-text-shadow: 0px 0px 6px rgba(0, 0, 0, 1);
	text-shadow: 0px 0px 6px rgba(0, 0, 0, 1);
}
.menu-txt p {
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", 'Noto Serif JP', serif;
	color:#fff;
	font-size:17px;
	line-height:2.1;
	font-weight:normal;
}
.menu-txt p.menu-name {
	margin-bottom: 0.5em;
}
.menu-txt p.menu-cont {
	font-size:14px;
	border-top:1px solid #fff;
	padding-top:0.5em;
}
.menu-txt p.menu-caut {
	font-size:12px;
	line-height:1.8;
}

/*----------------------------
* ACCESS
*----------------------------*/
.access-bg {
	background:url(https://labo-oisier.com/images/bg-img-03.jpg) no-repeat center;
	background-size:cover;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	position: fixed;
}

.access-txt {
	position: absolute;
	z-index: 2;
	top:25%;
	width:540px;
	margin:0 auto 0 calc(50% - 270px);
}
.access-txt p {
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", 'Noto Serif JP', serif;
	color:#222;
	font-size:17px;
	line-height:2.1;
	font-weight:normal;
	margin:0;
	-moz-text-shadow: 0px 0px 6px rgba(255, 255, 255, 1);
	-webkit-text-shadow: 0px 0px 6px rgba(255, 255, 255, 1);
	-ms-text-shadow: 0px 0px 6px rgba(255, 255, 255, 1);
	text-shadow: 0px 0px 6px rgba(255, 255, 255, 1);
}
.access-txt p.address {
	margin-top: 4em;
	line-height:1.8;
}
.access-txt p a {
	color:#222;
	text-decoration:underline;
}
.access-txt p.map a {
	color:#222;
}
.access-txt p.map span {
	display: inline-block;
	transform: rotate( 90deg );
	color:#222;
}

/*----------------------------
* FADE
*----------------------------*/
.swiper-slide-prev .header-title,
.swiper-slide-next .header-title,
.swiper-slide-prev .top-message,
.swiper-slide-next .top-message,
.swiper-slide-prev .concept-txt,
.swiper-slide-next .concept-txt,
.swiper-slide-prev .space-txt,
.swiper-slide-next .space-txt,
.swiper-slide-prev .cuisine-txt,
.swiper-slide-next .cuisine-txt,
.swiper-slide-prev .utsuwa-txt,
.swiper-slide-next .utsuwa-txt,
.swiper-slide-prev .profile-txt,
.swiper-slide-next .profile-txt,
.swiper-slide-prev .menu-txt,
.swiper-slide-next .menu-txt,
.swiper-slide-prev .access-txt,
.swiper-slide-next .access-txt {
	transition: all 1s ease-in;
		-webkit-transition: all 1s ease-in;
		-moz-transition: all 1s ease-in;
		-o-transition: all 1s ease-in;
		-moz-opacity: 0;
		opacity: 0;
}
.swiper-slide-active .header-title,
.swiper-slide-active .top-message,
.swiper-slide-active .concept-txt,
.swiper-slide-active .space-txt,
.swiper-slide-active .cuisine-txt,
.swiper-slide-active .utsuwa-txt,
.swiper-slide-active .profile-txt,
.swiper-slide-active .menu-txt,
.swiper-slide-active .access-txt {
	transition: all 2s ease-in 0.4s;
		-webkit-transition: all 1s ease-in 0.4s;
		-moz-transition: all 1s ease-in 0.4s;
		-o-transition: all 1s ease-in 0.4s;
		-moz-opacity: 1;
		opacity: 1;
}

/*----------------------------
* CALENDER
*----------------------------*/
html,body{
	overflow: hidden
}
.popup_wrap input {
	display: none;
}
.popup_overlay {
	display: flex;
	justify-content: center;
	overflow: auto;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 100%;
	height: 100%;
	background: rgba(34,34,34,0.8);
	opacity: 0;
	transition: opacity 0.5s, transform 0s 0.5s;
	transform: scale(0);
	overflow: hidden;
}
.popup_trigger {
	position: absolute;
	width: 100%;
	height: 100%;
}
.popup_content {
	position: relative;
	align-self: center;
	width: 420px;
	max-width: 100%;
	box-sizing: border-box;
	background: #222;
	line-height: 1.4em;
	transition: 0.5s;
	border-radius: 12px;
	box-shadow: 0 0 5px rgba(94, 94, 94, 0.7);
}
.popup_content p{
    padding:20px 20px 5px 20px;
    text-align: center;
}
.close_btn {
	position: absolute;
	top: 14px;
	right: 16px;
	font-size: 30px;
	cursor: pointer;
	color:#fff;
	z-index:9999;
}
.popup_wrap input:checked ~ .popup_overlay {
	opacity: 1;
	transform: scale(1);
	transition: opacity 0.5s;
}
p.cal-mes {
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", 'Noto Serif JP', serif;
	color:#222;
	font-size:15px;
	line-height:1.8;
	font-weight:normal;
	margin:10px 0 10px;
	color:#fff;
}

.wpsbc-container .wpsbc-calendars-wrapper {
    margin: 0 30px 0;
}
.wpsbc-container[data-columns] .wpsbc-calendars .wpsbc-calendar {
	margin-left: 0;
	margin-right: 0;
}
.wpsbc-container .wpsbc-calendars .wpsbc-calendar .wpsbc-calendar-header {
	background:none;
}
.wpsbc-legend {
	border: none;
	background: none;
}
.wpsbc-container .wpsbc-calendars .wpsbc-calendar {
	border: none;
	background: none;
}
.wpsbc-container .wpsbc-calendars .wpsbc-calendar table tr td .wpsbc-date-inner .wpsbc-date-number {
	color:#222;
	font-size:13px;
}
.wpsbc-legend {
    margin: 0 0;
	padding: 0 4px 16px;
}




/*----------------------------
* BLOG
*----------------------------*/
body.archive,
body.single.blog {
	background:#f6f6f6;
}
body.archive .header-title,
body.single.blog .header-title {
	position: relative; /*必ず必要*/
	z-index: 2; /*必ず必要*/
	display: flex;
	width: 100%;
	height:240px;
	justify-content: center;
	align-items: center;
	text-align:center;
	margin: auto;
	background:#222;
}
body.archive header.page-header {
	background:#222;
}
body.archive h1.page-title,
body.single.blog h1.page-title {
	font-size: 3em;
	margin: 0 0 0;
	font-weight: 600;
	font-family: 'Roboto', Arial, Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; 
	text-align:center;
	letter-spacing:-1px;
	color:#222;
	padding-bottom:1em;
}
body.archive .header-title h1.page-title,
body.single.blog .header-title h1.page-title {
	padding-bottom:0;
	line-height:1;
}
body.archive h1.page-title .section-title-name {
	color:#fff;
}
body.archive h1.page-title span.section-title-name a.bloglink {
	font-size:0.5em;
	color:#fff;
}
body.single h1.entry-title {
	font-size: 2em;
	margin: 2em 0 0;
	font-weight: 600;
	font-family: 'Roboto', Arial, Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; 
	text-align:left;
	color:#222;
	padding-bottom:1em;
}

body.archive #primary {
	width: 100%;
	margin: 0 auto;
	float: none;
}

body.archive .blog-content {
	width: 70%;
	margin: 0 auto;
	display:flex;
	flex-direction: row;
	flex-wrap:wrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content:space-around;
}
body.archive .blog-content article {
 	border-radius: 8px;
 	background: #fff;
	padding: 0;
 	text-align: center;
	width: 30%;
	margin: 0 1.66% 4%;
	box-shadow: 0 0 30px rgba(49, 49, 49, .3);
}
body.archive .blog-content article img {
	border-radius: 8px 8px 0 0;
}
body.archive .blog-content article h1.entry-title {
	font-weight: 600;
	font-family: 'Roboto', Arial, Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; 
	text-align:left;
	font-size:1.2em;
	padding:1.2em;
}
body.archive .blog-content article h1.entry-title a {
	color:#222 !important;	
}
h5.cat-name {
	background:#222;
	color:#fff;
	text-align:center;
	width:100px;
	padding:2px 0;
	float:left;
	margin:1.4em 0 0 1.8em;
	border-radius: 6px;
	font-size:0.8em;
}
h5.cat-name a {
	color:#fff;
}
article.category-news h5.cat-name {
	background:#c00;
}
article.category-cuisine h5.cat-name {
	background:#c63;
}
article.category-ingredients h5.cat-name {
	background:#c93;
}
article.category-event h5.cat-name {
	background:#cc3;
}
article.category-others h5.cat-name {
	background:#9cf;
}

.entry-meta {
	font-family: 'Roboto', Arial, Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; 
	font-size: 0.8em;
	color:#222;
	float:right;
	margin:1.4em 3em 0 0;
}
.entry-meta a {
}
body.single.blog article .entry-meta {
	font-family: 'Roboto', Arial, Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; 
	font-size: 1.0em;
	color:#222;
	float:none;
	margin:0 0 2em;
	text-align:left;
}
body.single.blog article.hentry {

}
body.single.blog ul.cat-link {
	margin:0; padding:0;
}
body.single.blog ul.cat-link li {
	background:#222;
	color:#fff;
	text-align:center;
	width:100px;
	padding:2px 0;
	float:left;
	margin:4em 1em 1.5em 0;
	border-radius: 6px;
	font-size:0.8em;
	float:left;
	list-style:none;
}
body.single.blog ul.cat-link li a {
	color:#fff;
}
body.single.blog article.category-news ul.cat-link li.li-cat {
	background:#c00;
}
body.single.blog article.category-cuisine ul.cat-link li.li-cat {
	background:#c63;
}
body.single.blog article.category-ingredients ul.cat-link li.li-cat {
	background:#c93;
}
body.single.blog article.category-event ul.cat-link li.li-cat {
	background:#cc3;
}
body.single.blog article.category-others ul.cat-link li.li-cate {
	background:#9cf;
}
body.single.blog article.hentry .entry-content {
	border-radius: 8px;
 	background: #fff;
	padding: 0;
 	text-align: left;
	width: 100%;
	margin: 0 0 4%;
	box-shadow: 0 0 30px rgba(49, 49, 49, .3);
}
body.single.blog article.hentry .entry-content .blog-thmimg img{
	border-radius: 8px 8px 0 0;
}
body.single.blog article.hentry .entry-content p{
	width:80%;
	margin:2em auto 3em;
	color:#222;
}
body.single.blog article.hentry .entry-content p img {
	width:100%;
	margin:0 auto;
}

body.single #primary {
	width: 70%;
	margin: 0 auto;
	float: none;
}
body.single article .entry-meta {
	text-align: center;
	font-size:12px;
	margin:0 0 1em;
}
body.single article .entry-content p {
	font-size:16px;
	line-height:1.8;
}
#secondary {
	float:none;
	clear:both;
	width:70%;
	margin:0 auto;
}
#secondary h1.widget-title {
	font-size: 1.5em;
	text-align:center;
	color:#222;
}

.sub-blog-content {
	width: 70%;
	margin: 0 auto;
	display:flex;
	flex-direction: row;
	flex-wrap:wrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content:space-around;
}
body.single.blog .sub-blog-content article {
 	border-radius: 8px;
 	background: #fff;
	padding: 0;
 	text-align: center;
	width: 30%;
	margin: 0 1.66% 4%;
	box-shadow: 0 0 30px rgba(49, 49, 49, .3);
}
body.single.blog .sub-blog-content article img {
	border-radius: 8px 8px 0 0;
}
body.single.blog .sub-blog-content article h1.entry-title {
	font-weight: 600;
	font-family: 'Roboto', Arial, Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; 
	text-align:left;
	font-size:1.2em;
	padding:1.2em;
}
body.single.blog .sub-blog-content h5.cat-name {
	background:#222;
	color:#fff;
	text-align:center;
	width:100px;
	padding:2px 0;
	float:left;
	margin:1.4em 0 0 1.8em;
	border-radius: 6px;
	font-size:0.8em;
}
body.single.blog .rpwwt-widget ul li.category-news h5.cat-name {
	background:#c00;
}
body.single.blog .rpwwt-widget ul li.category-cuisine h5.cat-name {
	background:#c63;
}
body.single.blog .rpwwt-widget ul li.category-ingredients h5.cat-name {
	background:#c93;
}
body.single.blog .rpwwt-widget ul li.category-event h5.cat-name {
	background:#cc3;
}
body.single.blog .rpwwt-widget ul li.category-others h5.cat-name {
	background:#9cf;
}
body.single.blog .rpwwt-widget ul li .entry-meta {
	font-family: 'Roboto', Arial, Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; 
	font-size: 0.8em;
	color:#222;
	float:right;
	margin:1.4em 3em 0 0;
}



.rpwwt-widget ul {
	display:flex;
	flex-direction: row;
	flex-wrap:wrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content:space-around;
}
.rpwwt-widget ul li {
 	border-radius: 8px;
 	background: #fff;
	padding: 0;
	width: 30%;
	margin: 0 5% 4% 0 !important;
	box-shadow: 0 0 30px rgba(49, 49, 49, .3);
}
.rpwwt-widget ul li:nth-of-type(3n) {
	margin: 0 0 4% 0 !important;
}

#rpwwt-recent-posts-widget-with-thumbnails-3 img {
	max-width:100% !important;
	border-radius: 8px 8px 0 0;
	margin:0 !important;
}

.rpwwt-widget ul li .rpwwt-post-title {
	font-weight: 600;
	font-family: 'Roboto', Arial, Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; 
	text-align:left;
	font-size:1.2em;
	line-height:1.5;
	width:86%;
	display:inline-block;
	margin:1em 7%;
}
.rpwwt-widget ul li a .rpwwt-post-title {
	color:#222;
}



/*----------------------------
* RESPONSIVE
*----------------------------*/
@media only screen and (max-width: 767px) {
	br.sp {
		display:none;
	}
	br.pc {
		display:inline;
	}
	.jp-en {
		top: 10px;
		right: 35px;
	}
	h1.top-logo {
		width:210px; height:65px;
		margin-top:-5%;
	}
	.top-shape {
		width:180px;
		height:40px;
		bottom:100px;
		left:40px;
	}
	.top-message {
		top:55%;
		left:0;
		width:100%;
	}
	.cont-logo {
		width: 120px;
		height: 26px;
		bottom: 20px;
		left: 30px;
	}
	.concept-txt {
		width:70%;
		margin:0 auto;
		left:15%;
		top:25%;
	}
	.concept-txt p {
		line-height:2.1;
	}
	.space-txt {
	}
	.space-txt p {
		width:70%;
	}
	.cuisine-txt {
	}
	.cuisine-txt p {
		line-height:2.1;
		width:70%;
	}
	.utsuwa-txt {
		width:70%;
		margin:0 auto;
		left:15%;
		top:25%;
	}
	.utsuwa-txt p {
		text-align:center;
	}
	.profile-txt {
		width:70%;
		margin:0 auto;
		left:15%;
		top:25%;
	}
	.menu-bg {
		opacity:0.6;
	}
	.menu-txt {
		top:10%;
		width:70%;
		margin-left: 15%;
	}
	.access-txt {
		top:15%;
		width:70%;
		margin-left: 15%;
	}
	.access-txt p.address {
		margin-top: 2em;
	}
	body.archive h1.page-title img,
	body.single.blog h1.page-title img {
		width:70%;
	}
	body.archive .blog-content {
		width:90%;
	}
	body.archive .blog-content article {
		width: 100%;
		margin: 0 0 10%;
	}
	body.single #primary {
		width: 90%;
	}
	#secondary {
		width:90%;
	}
	.rpwwt-widget ul li {
		width: 100%; /* 256px / 1024px */
		margin: 0 0 5% 0 !important;
	}

}
@media only screen and (max-width: 380px) {
	.menu-txt p {
		font-size:15px;
		line-height:1.8;
	}
	.access-txt p {
		font-size:15px;
		line-height:1.8;
	}
}
@media only screen and (max-width: 320px) {
	.concept-txt,
	.cuisine-txt,
	.profile-txt {
		top:20%;
	}
	.space-txt,
	.cuisine-txt {
		top:0;
	}
	.concept-txt p,
	.cuisine-txt p,
	.profile-txt p.chef-bio {
		font-size:15px;
		line-height:1.8;
	}
	.space-txt p {
		font-size:15px;
	}
	.menu-txt {
		top:5%;
	}
	.menu-txt p {
		margin-bottom:1em;
	}
	.menu-txt p.menu-cont {
		font-size:13px;
		line-height:1.5;
	}
	.access-txt {
		top:12%;
	}
	.access-txt p {
		font-size:15px;
		line-height:1.6;
	}
	.access-txt p.address {
		font-size:14px;
		line-height:1.6;
	}
}

/*----------------------------
* TOP NAVIGATION
*----------------------------*/
.sp-navi {
	display:none;
}

@media only screen and (max-width: 767px) {
	.WideMenu {
		display:none;
	}
	.sp-navi {
  		display: inline-block;
  		position:absolute;
		top:0;
		left:0;
	}

	.HiddenCheckbox {
  		display: none;
	}
	.sp-navi ul {
		margin:60px 0 0;
	}
	.sp-navi ul li {
		list-style:none;
		font-family: 'Source Code Pro', monospace;
		font-size:18px;
		color:#ddd;
		margin:0 0 0.7em 0;
		letter-spacing:0;
		text-align:center;
	}
	.sp-navi ul li:hover {
		cursor:pointer;
	}
	.sp-navi ul li.bloglink {
		margin:2.2em 0 0 0;
		font-size:1.2em;
		letter-spacing:1px;
	}
	.sp-navi ul li.bloglink a {
		color:#ddd;
		border-bottom:1.5px solid #ddd;
		padding-bottom:4px;
	}
	.sp-navi ul li.reservation {
		margin:2.2em 0 0 0;
		font-size:1.2em;
		letter-spacing:1px;
	}
	.sp-navi ul li.reservation label {
		color:#ddd;
		border-bottom:1.5px solid #ddd;
		padding-bottom:4px;
		cursor:pointer;
	}
	.MenuIcon {
  		cursor: pointer;
  		display: block;
  		float: left;
  		height: 30px;
  		position: fixed;
  		width: 30px;
  		z-index: 3333;
  		top:20px;
  		left:20px;
	}
	.MenuIcon::before {
  		-webkit-box-shadow: #ddd 0 12px 0;
  		box-shadow: #ddd 0 12px 0;
  		height: 1px;
		-webkit-transform-origin: left top;
		-ms-transform-origin: left top;
		transform-origin: left top;
		width: 30px;
	}
	.MenuIcon::after {
		bottom: 4px;
		height: 1px;
		-webkit-transform-origin: left bottom;
		-ms-transform-origin: left bottom;
  	  	transform-origin: left bottom;
		width: 30px;
	}
	.MenuIcon::before,
	.MenuIcon::after {
  		background: #ddd;
  		display: block;
  		content: '';
  		position: absolute;
  		-webkit-transition: -webkit-box-shadow 0.2s linear, -webkit-transform 0.4s 0.2s;
  		transition: box-shadow 0.2s linear, transform 0.4s 0.2s;
	}
	.Menu {
		background: rgba(0, 0, 0, 0.8);
		bottom: 0;
		left: -30%;
		position: fixed;
		top: 0;
  	  	width: 30%;
  		-webkit-transition: left 0.4s;
		transition: left 0.4s;
		z-index:2222;
	}
	.HiddenCheckbox:checked ~ .MenuHeader {
  		opacity: 1;
 		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
	}
	.HiddenCheckbox:checked ~ .MenuIcon::before {
		-webkit-box-shadow: transparent 0 0 0;
		box-shadow: transparent 0 0 0;
		-webkit-transform: rotate(45deg) translate3d(6px, -3px, 0);
		transform: rotate(45deg) translate3d(6px, -3px, 0);
	}
	.HiddenCheckbox:checked ~ .MenuIcon::after {
		-webkit-transform: rotate(-45deg) translate3d(6px, 3px, 0);
		transform: rotate(-45deg) translate3d(6px, 3px, 0);
		}
	.HiddenCheckbox:checked ~ .Menu {
		left: 0;
	}
	.Menu-list {
		list-style-type: none;
		margin: 60px 0 0;
		padding: 0;
	}
	.menu-item {
		margin: 0;
  		list-style:none;
	}
	.Menu {
  		left: -100%;
  		width: 100%;
	}
	.main-navigation li {
		text-align:center;
	}
	.swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-vertical>.swiper-pagination-progressbar {
		right:20px !important;
	}
}

body.page-reservation h1.entry-title {
	font-size: 3em;
	margin: 2em 0 0;
	font-weight: 600;
	font-family: 'Roboto', Arial, Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; 
	text-align:center;
	letter-spacing:-1px;
	color:#ddd;
}

.page #primary {
	float: none;
	width: 80%;
	margin:0 auto;
}

#form-section {
	width:100%;
	padding:0 0 160px;
}
h2.stay-title {
	margin: 3em 0 1em;
	text-align: center;
	font-size: 1.8em;
    border-bottom:none;
    padding: 10px 0 15px 0;
	color:#fff;
}
h2.stay-title span.section-title-name {
	color:#fff;
	clear: none;
	display: inline;
}
.stay-box p {
	color:#fff;
	text-align:center;
}
h4.stay-h4 {
	font-family: 'Roboto', Arial, Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	color:#fff;
	text-align:center;
}
.stay-bottom h3.entry-title {
	text-align: center;
	padding-top:10px;
}
.stay-bottom h3.entry-title a {
	font-family: 'Roboto', Arial, Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	font-weight:300;
}

/* カレンダーヘッダー */
body.page .monthly-calendar caption {
	font-size: 24px;
	text-align: center;
	color:#ddd;
	border-bottom: solid 1px #ddd;
	padding:0 0 20px;
	margin-top:-40px;
}
body.page .monthly-calendar {
	font-family: 'Roboto', Arial, Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	border: solid 1px #ddd;
}
body.page .monthly-calendar table {
	width:100%;
	margin:0;
}
body.page .monthly-calendar .caption {
	font-family: 'Roboto', Arial, Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    color: #ddd;
    background: #ddd;
    position: relative;
    top: 0px;
    left: 0px;
}
body.page .monthly-calendar .monthly-prev-next {
	width:96%;
	margin: 30px auto 0;
	font-size:18px;
}
body.page .monthly-calendar .caption .now-month {
	font-size: 24px;
	font-weight: 300;
	text-align: center;
	line-height: 100%;
	padding: 38px 0px 35px;
	margin-bottom:0;
}
body.page .monthly-calendar .caption .next-month,
body.page .monthly-calendar .caption .prev-month {
	font-size: 18px;
	font-weight: 300;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
body.page .monthly-calendar .monthly-prev .no-link,
body.page .monthly-calendar .monthly-next .no-link,
body.page .monthly-calendar .monthly-prev a,
body.page .monthly-calendar .monthly-next a,
body.page .monthly-calendar .monthly-prev a:visited,
body.page .monthly-calendar .monthly-next a:visited {
	color: #ddd !important;
	text-decoration: underline;
	font-family: 'Roboto', Arial, Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
body.page .monthly-calendar .caption .next-month {
      right: 20px;
      padding-right: 0;
}
body.page .monthly-calendar .caption .prev-month {
      left: 20px;
      padding-left: 0;
}
body.page .monthly-calendar .caption .next-month span,
body.page .monthly-calendar .caption .prev-month span {
	font-family: 'Roboto', Arial, Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	font-weight:300;
}

/* カレンダー曜日 */
body.page .monthly-calendar .week-title {
	font-family: 'Roboto', Arial, Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	color: #ddd;
	font-size: 16px;
	font-weight: 300;
	line-height: 48px;
	text-transform: uppercase;
	text-align: center;
	background: none;
	border-right: solid 1px #ddd;
	border-bottom: solid 1px #ddd;
}
body.page .monthly-calendar .week-title:last-child {
	border-right: none;
}
body.page .day-box.sun .day-number,
body.page .day-box.sat .day-number {
	color: #ddd;
}

body.page .monthly-calendar .day-wrap > * {
	height: 128px;
}

/* カレンダー日付ボックス */
body.page .monthly-calendar .day-box {
    font-size: 24px;
	border-right: solid 1px #ddd;
    border-bottom: solid 1px #ddd;
}
body.page .monthly-calendar .day-box:last-child {
	border-right: none;
}
body.page .monthly-calendar tr:last-child .day-box {
	border-bottom: none;
}
body.page .monthly-calendar .day-wrap .day-box .day-number {
	font-family: 'Roboto', Arial, Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	padding-top: 20px;
	font-weight: 300;
}
body.page .monthly-calendar .day-wrap .day-box .calendar-mark {
      font-size: 16px;
}
body.page .monthly-calendar .day-wrap .day-box .booking-price {
	font-size: 16px;
 	padding-top: 0;
}
body.page .monthly-calendar .no-day,
body.page .monthly-calendar .already,
body.page .monthly-calendar .disable,
body.page .monthly-calendar .day-number {
    color: #ddd;
    background: none;
}
body.page .monthly-calendar .no-day:last-child, body.page .monthly-calendar .already:last-child {
	border-right: none;
}
body.page .monthly-calendar .day-box.no-day {
    color: #ddd;
    background: none;
}

/* カレンダー満室 */
body.page .monthly-calendar .day-wrap div.full {
    background: none;
}
body.page .monthly-calendar .disable .calendar-mark,
body.page .monthly-calendar .full .calendar-mark,
body.page .monthly-calendar .full .day-number {
    color: #ddd;
	font-weight: 300;
}

/* カレンダー空室 */
body.page .monthly-calendar .calendar-mark a {
	 color: #ddd;
}
body.page .monthly-calendar .vacant {
    color: #ddd;
    background: none;
}
body.page .monthly-calendar .sat.vacant .day-number,
body.page .monthly-calendar .sun.vacant .day-number {
    color: #ddd;
}
body.page .monthly-calendar .vacant .calendar-mark {
    color: #ddd;
}
body.page .monthly-calendar .vacant .calendar-mark {
    color: #ddd;
}
body.page .monthly-calendar .vacant .calendar-mark .booking-price a,
body.page .monthly-calendar .vacant .calendar-mark .booking-price a:visited {
    color: #ddd !important;
	font-family: 'Roboto', Arial, Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	text-decoration: none;
	font-weight: 300;
}
body.page .monthly-calendad .vacant:last-child {
	border-right: none;
}

body.page .monthly-calendar .table-body {
    display: table;
    width: 100%;
}
body.page .monthly-calendar .table-body > * {
	display: table-cell;
	width: 14.286%;
	position: relative;
	top: 0px;
	left: 0px;
}
body.page .monthly-calendar .table-body > * > * {
	width: 100%;
	text-align: center;
}
body.page .monthly-calendar .bdbn {
	border-bottom: none !important;
}

body.page .monthly-calendar .day-wrap .no-day:last-child, body.page .monthly-calendar .day-wrap .disable:last-child {
	border-right: none;
}
body.page .monthly-calendar .day-wrap .day-box:last-child {
	border-right: none;
}
body.page .monthly-calendar .day-wrap:last-child .day-box {
	border-bottom: none;
}
body.page .monthly-calendar p {
	font-family: 'Roboto', Arial, Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	margin-bottom:0;
}

/* 指定日予約状況表示 */
body.page .day-calendar {
	margin-bottom: 1.5rem;
}
body.page .day-calendar p {
	color:#ddd;
	text-align:center;
	font-family: Helvetica, "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
	font-size:24px;
}

body.page .day-calendar h3 {
	font-size: 20px;
	margin: 10px 0;
	color:#ddd;
	border-top:1px solid #ddd;
	padding:20px 0 10px;
	text-align:center;
}

body.page .day-calendar table {
	border: none;
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	margin:0 auto;
}

body.page .day-calendar table tr:nth-of-type(even) th,
body.page .day-calendar table tr:nth-of-type(even) td {
	background:#df9f4d;
}

body.page .day-calendar th,
body.page .day-calendar td {
	font-size: 1rem;
	text-align: center;
	padding:10px 0;
	margin:0;
	vertical-align: middle;
	width: 50%;
	color:#ddd;
}

body.page th.day-left {
	-moz-border-radius-topleft: 0;
	-moz-border-radius-bottomleft: 0;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border: 1px solid #dddddd;
	border-bottom:none;
	border-right:none;
	line-height: 2.5rem;
	color:#ddd;
	font-size:16px;
}

body.page th.day-right {
	-moz-border-radius-topright: 0;
	-moz-border-radius-bottomright: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border: 1px solid #dddddd;
	border-bottom:none;
	color:#ddd;
	font-size:16px;
}

body.page td.day-right {
	-moz-border-radius-topright: 0;
	-moz-border-radius-bottomright: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border: 1px solid #dddddd;
	border-bottom:none;
	font-size: 1.5rem;
	color:#ddd;
	font-size:16px;
}
body.page tr:last-of-type td,
body.page tr:last-of-type th {
	border-bottom: 1px solid #dddddd;
}

body.page a.booking-timelink {
	display: block;
	color:#ddd;
	font-size:24px;
}

/* 予約フォーム */
body.page .content-form fieldset {
	border: 1px solid #dddddd;
	padding: 10px 0 0 10px;
	margin: 0 auto 0;
	width: 70%;
	color:#ddd;
}

body.page .content-form legend {
	font-weight: bold;
	padding: 0 5px;
	font-size: 16px;
	color:#ddd;
}

body.page .content-form table {
	border: none;
	border-collapse: separate;
	border-spacing: 0;
	margin: 0;
	width: 100%;
}

body.page .content-form th {
	border-top: none;
	border-right: 1px solid #dddddd;
	border-bottom: 1px solid #dddddd;
	border-left: none;
	padding: 10px 0;
	vertical-align: middle;
	font-family: Helvetica, "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
}

body.page .content-form td {
	border-top: none;
	border-right: none;
	border-bottom: 1px solid #dddddd;
	border-left: none;
	padding: 10px 0 10px 10px;
	vertical-align: middle;
	font-family: Helvetica, "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
}

body.page .content-form th {
	font-size: 16px;
	line-height: 2.2rem;
	padding-right: 10px;
	text-align: right;
	vertical-align: top;
	width: 30%;
	color:#ddd;
}

body.page .content-form th label {
	color:#ddd;
}

body.page .content-form td {
	font-size: 16px;
	color:#ddd;
}

body.page .content-form tr:last-of-type td,
body.page .content-form tr:last-of-type th {
	border-bottom:none;
}

body.page .content-form input,
body.page .content-form textarea {
	padding: 10px;
	margin-bottom: 3px;
	font-size: 16px;
	border:none;
	font-family: Helvetica, "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
}

body.page .content-form button {
	padding: 8px 20px;
}

body.page .content-text.small {
	width: 3rem;
}

body.page .content-text.medium {
	width: 48%;
}

body.page .content-text.fat {
	width: 95%;
}

body.page .input-number {
	float: left;
	margin-right: 1rem;
	text-align: center;
}

body.page input.right {
	text-align: right;
}

body.page .content-form .error-message {
	clear: both;
	color: red;
}

body.page .content-form .required {
	color: red;
}

/* 予約フォーム オプション表示項目 */
.content-form input.booking-option-number {
	text-align: right;
	width: 3rem;
}

.content-form label.field-item {
	margin-right: 0.4rem;
}

.content-form label.field-item input {
	margin-right: 0.15rem;
}

.content-form select {
	font-size: 1rem;
	padding: 0.1rem 0.15rem;
}



/*******************************
parts
table-style 
form-parts-set
btn
*******************************/

body.page-booking-form h1.entry-title {
	font-size: 3em;
	margin: 2em 0 0;
	font-weight: 600;
	font-family: 'Roboto', Arial, Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; 
	text-align:center;
	letter-spacing:-1px;
	color:#ddd;
}
/* table-style */
.table-style table {
	width: 70%;
	margin:0 auto;
	border:1px solid #ddd;
}
.table-style table th, .table-style table td {
	padding: 19px 30px;
	font-family: 'Roboto', Arial, Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
.table-style table th {
	width: 224px;
	color: #ddd;
	font-weight: 300;
	font-size: 16px;
	text-align: left;
	background: #222;
	border-bottom: solid 1px #ddd;
	vertical-align: top;
}
.table-style table th p {
	font-family: 'Roboto', Arial, Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	font-weight:300;
	line-height: 32px;
	margin-bottom:0;
}
.table-style table td {
	color: #ddd;
	background: none;
	border-bottom: solid 1px #ddd;
}
.table-style table td p {
	font-family: 'Roboto', Arial, Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	font-weight:300;
	font-size: 16px;
	line-height: 32px;
	margin-top: 5px;
	margin-bottom:0;
	color: #ddd;
}
.table-style table td p:first-child {
	margin-top: 0;
}
.table-style table td p.attention {
	font-size: 16px;
}
.table-style table td .strong {
	font-weight: bold;
}
.table-style table ul {
	margin:0; padding:0;
}
.table-style table td .attention-list {
	font-size: 14px;
}
.table-style table td .attention-list li {
	padding-left: 1.3em;
	text-indent: -1.3em;
	line-height: 25px;
	margin-bottom: 0;
	list-style:none;
	font-family: 'Roboto', Arial, Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	font-weight:300;
}
.table-style table td .normal-list {
	font-size: 16px;
	margin: 0 0 0;
}
.table-style table td .normal-list li {
	padding-left: 1.3em;
	text-indent: -1.3em;
	line-height: 36px;
	list-style:none;
	font-family: 'Roboto', Arial, Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	font-weight:300;
}
.table-style table td .normal-list li .list-attention {
	font-size: 14px;
}
.table-style.color-thin-blue table {
	border: solid 1px #ddd;
}
.table-style.color-thin-blue table th {
	width: 300px;
	color: #ddd;
	background: #666;
	border-bottom: solid 1px #ddd;
	border-right: solid 1px #ddd;
}
.table-style table th label,
.table-style table td label {
	font-family: 'Roboto', Arial, Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	font-weight:300;
	color:#ddd;
}
.table-style.color-thin-blue table td {
	background: none
	color: #ddd;
	border-bottom: solid 1px #ddd;
}
.table-style.color-thin-blue table td .input-number {
	margin-left: 40px;
}
.table-style.color-thin-blue table td .input-number:first-child {
	margin-left: 0;
}
.table-style.color-thin-blue table td .input-number label {
	margin-right: 18px;
	line-height: 40px;
}
.table-style.color-thin-blue table td p.attention {
	color: #555555;
}
.table-style:not(:first-child) table {
	border-top: none;
}
.table-style table tr:last-child th, .table-style table tr:last-child td {
	border-bottom: none;
}

/* form-parts-set */
.content-form form .select-wrap {
	position: relative;
	top: 0px;
	left: 0px;
}
.content-form form .select-wrap select:focus, .booking-form form .select-wrap input[type="text"]:focus {
	outline-offset: 0;
	outline: none;
}
.content-form form .select-wrap select,
.content-form form td select {
	width: 60px !important;
	height: 40px;
	box-sizing: border-box;
	border: solid 1px #ddd;
	border-radius: 0;
	background-color: transparent;
	padding: 0px 10px 0px 20px;
	position: relative;
	top: 0;
	left: 0;
	z-index: 1;
	color:#ddd;
	font-size:16px;
}

.content-form form .select-attention {
	margin-left: 23px;
	position: relative;
	top: 12px;
	left: 0px;
}
.content-form form label.label-none {
	display: none;
}
form.form-parts-set input[type="text"], form.form-parts-set textarea {
	width: 100% !important;
	padding: 0;
	border: solid 1px #222;
}
form.form-parts-set input[type="text"]:focus, form.form-parts-set textarea:focus {
	outline-offset: 0;
	outline: none;
}
form.form-parts-set input[type="text"] {
	height: 40px;
}
form.form-parts-set textarea {
	height: 280px;
	resize: none;
}
form.form-parts-set .input-postcode {
	display: inline-block;
	position: relative;
	top: 0px;
	left: 0px;
}
form.form-parts-set .input-postcode .postcode-hyphen::before {
	content: "-";
	color: #82a4bc;
	line-height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
form.form-parts-set .input-postcode input {
	width: 130px;
	margin-left: 20px;
	float: left;
	position: relative;
	top: 0px;
	left: 0px;
}
form.form-parts-set .input-postcode input:first-child {
	margin-left: 0px;
}
form.form-parts-set .input-postcode input span {
	display: block;
	float: left;
}
form.form-parts-set input[type="radio"] {
	width: 25px;
	height: 25px;
	border-radius: 0;
	border: solid 1px #222;
	cursor: pointer;
	box-shadow: 0 0 0 3px #fff inset;
}
form.form-parts-set input[type="radio"]:checked {
	background: #222;
}
form.form-parts-set input[type="radio"]:focus {
	outline-offset: 0;
	outline: none;
}
form.form-parts-set button {
	font-size: 20px;
	border: none;
	background: none;
	vertical-align: middle;
	cursor: default;
}
form.form-parts-set button:focus {
	outline: none;
}
form.form-parts-set button:hover {
	opacity: 1;
}
form.form-parts-set button a {
	display: block;
}
form.form-parts-set button.btn-on {
	cursor: pointer;
}
form.form-parts-set button.btn-on:hover {
	opacity: 0.7;
}

/* btn */

.btn {
	box-sizing: border-box;
}
.btn > a, .btn button {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
}
.btn.btn-rectangle {
	text-align: center;
	font-size: 20px;
	padding: 20px 0px;
	background: #ddd;
	color:#222;
	margin-top:20px;
}
.btn.btn-rectangle > a, .btn.btn-rectangle button {
	color: #ddd;
	font-family: 'Roboto', Arial, Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	font-weight:300;
	font-size: 16px;
	border: solid 1px #ddd;
	color:#222 !important;
}
.btn.btn-rectangle a:visited {
	color:#222 !important;
}
.btn.color-white {
	border: solid 1px #ddd;
	background: #ddd;
}
.btn.color-white a, .btn.color-white a:visited {
	color: #222 !important;
}

/*******************************
parts
enclosed
reservation
*******************************/
/* enclosed */
.enclosed-wrap {
	margin:0 auto 40px;
}
.enclosed-box {
	border: solid 1px #222;
	font-size: 16px;
	line-height: 36px;
	padding: 20px 5%;	
	width:70%;
	margin:0 auto 40px;
	background:#ddd;
}
.enclosed-box p {
	font-family: 'Roboto', Arial, Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	font-weight:300;
	margin-bottom:0;
	color:#222;
}
.reservation table th p,
.reservation table td p {
	color:#ddd;
}

/* reservation */
.reservation .table-style table td, .reservation .table-style table th {
	padding: 14px 35px;
	color:#ddd;
}
.box-772 {
	width:40%;
	margin:40px auto 0;
}
.reservation .table-style table {
	width:70%;
	color:#ddd;
	margin:0 auto;
}
.reservation .check-box-wrap {
	margin-top: 20px;
	text-align: center;
	width: 390px;
	margin: 40px auto;
}
.reservation .check-box-wrap .check-box {
	display: inline-block;
	float: left;
}
.reservation .check-box-wrap .text {
	float: left;
	color: #222;
	margin-left: 10px;
	padding-top: 2px;
	font-size: 16px;
}
.reservation .check-box-wrap .text p {
	font-family: 'Roboto', Arial, Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	font-weight:300;
	color:#ddd;
}
.reservation .btn-wrap {
	text-align: center;
}
.reservation .op {
	opacity: 0.5;
}
.reservation .op:hover {
	opacity: 0.5;
}
.reservation .btn-on {
	opacity: 1;
}
.reservation .btn-box {
	display: inline-block;
}
.reservation .btn-box .btn {
	width: 334px;
	margin-left: 40px;
}
.reservation .btn-box .btn:first-child {
	margin-left: 0px;
}
.form-alert {
	font-family: 'Roboto', Arial, Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	font-weight:300;
	color:#222 !important;
	margin-left:10%;
}

input[type=text], input[type=email], input[type=date], input[type=time], input[type=url], input[type=number], input[type=tel],  input[type=search], textarea, button, button[type=submit], select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.reservation .btn-box button,
.reservation .btn-box input[type="submit"] {
	border:noe;
	background: none;
	box-shadow: none;
	text-shadow:none;
}
.reservation .btn-box button:hover,
.reservation .btn-box input[type="submit"]:hover {
	border:noe;
	box-shadow: none;
}
.reservation .btn-box button:focus,
.reservation .btn-box input[type="submit"]:focus,
.reservation .btn-box button:active,
.reservation .btn-box input[type="submit"]:active {
	border:none;
	box-shadow: none;
}

.float-box > * {
	float:left;
}

.booking-completed,
.error-message.error-box {
	text-align:center;
	font-size:18px;
}


/*タブ切り替え全体のスタイル*/
.tabs {
  padding-bottom: 40px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  margin: 0 auto;}

/*タブのスタイル*/
.tab_item {
  width: calc(100%/2);
  height: 50px;
  border-bottom: none;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 20px;
	font-weight: 600;
	font-family: 'Roboto', Arial, Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; 
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_item:hover {
  opacity: 0.75;
}
.lunch-tab {
  background-color: #558c92;
  color: #ddd;
}
.dinner-tab {
	background-color: #92555a;
	color: #ddd;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 40px 40px 0;
  clear: both;
  overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
#lunch-btn:checked ~ #lunch-cal,
#dinner-btn:checked ~ #dinner-cal {
  display: block;
}

/*選択されているタブのスタイルを変える
.tabs input:checked + .tab_item {
  background-color: #5ab4bd;
  color: #fff;
}*/

#lunch-cal {
	background-color: #558c92;
}
#dinner-cal {
	background-color: #92555a;
}


/* =Responsiveness: Mobile (Landscape)
================================================== */

/* Note: Design for a width of 480px */

@media only screen and (max-width: 767px) {
	.page #primary {
		width:90%;
	}
	.header-title {
		width: 70%;
		margin-top:0;
	}
	.page article.hentry {
		width: 100%;
		margin: 0 0 3em;
		padding-bottom:5em;
	}
	.tab_content {
  		padding: 10px 10px 0;
	}
	body.page .day-calendar th,
	body.page .day-calendar td  {
		display: block;
		width:100%;
	}
	body.page .day-calendar th.day-left {
		border-right:1px solid #ddd;
	}
	#form-section {
		width: 100%;
		margin: 0 0;
		padding: 0 0 20px;
	}
	body.page .monthly-calendar .week-wrap .week-title {
		font-size:12px;
	}
	body.page .monthly-calendar .day-wrap .day-box .day-number {
		font-size:16px;
	}
	body.page .monthly-calendar .day-wrap .day-box .booking-price {
		font-size:12px;
	}
	.table-style table {
		width:90%;
	}
	.reservation .table-style table {
		width:100%;
	}
	.table-style table th, .table-style table td,
	.reservation .table-style table th, .reservation .table-style table td {
		display:block;
		width:90%;
		clear:both;
		padding:5px 5%;
	}
	.box-772 {
		width:90%;
	}
	.enclosed-box {
		width:98%;
		padding:1%;
		font-size: 14px;
		line-height: 24px;
	}
	.reservation .table-style .float-box > * {
		float:none;
	}
	.table-style.color-thin-blue table td .input-number label {
		float:left;
	}
	.table-style.color-thin-blue table td .input-number {
		margin-left:0;
	}
	.reservation .table-style table td .input-number {
		text-align: left;
		width:100%;
		margin-bottom:10px;
	}
	.reservation .table-style table td select {
		float: left;
		margin-right:10px;
	}
	.reservation .table-style table td select[name="booking[client][adult]"],
	.reservation .table-style table td select[name="booking[client][child]"],
	.reservation .table-style table td select[name="booking[client][baby]"] {
		float: none;
		margin-right:0;
	}
	form.form-parts-set .select-wrap::before {
		display:none;
	}
	.reservation .table-style table th, .reservation .table-style table td p {
		font-size:14px;
		line-height:26px;
	}
	.reservation .check-box-wrap .text {
		font-size:14px;
	}
	form.form-parts-set input[type="radio"] {
		width: 20px;
		height: 20px;
	}
	.reservation .btn-box .btn {
		width: 100%;
		margin-left:0;
	}
	.form-alert {
		margin-left:0;
	}
	body.page .content-form fieldset {
		width:100%;
	}
	body.page .content-text.medium {
		width:95%;
	}
}