/*style.css written by Atsuya Kobayashi */
/* 2018-04-19 */

html {
	min-width: 100%;
	min-height: 100%;
	font-size: 16px;
}
@media screen and (min-width :1025px){
	html {
		overflow-x: hidden;
	}
}
@media screen and (max-width :768px){
	html {
		font-size: 12px;
	}
}
body {
	width: 100%;
	height: fit-content;
	background-color: white;
	background-image: url("../img/bg.png");
	background-size: cover;
	background-position: center;
	min-width: 1024px;
}
@media screen and (max-width :768px){
	body {
		min-width: 0;
	}
}
.text-area {
	background-color: white;
	box-sizing: border-box;
	padding: 30px;
}
.image-area{
	position: absolute;
	z-index: 0;
	overflow: hidden;
}
.image-area img{
	-webkit-transition: 0.5s ease-out;
	-moz-transition:	0.5s ease-out;
	-ms-transition:		0.5s ease-out;
	-o-transition:		0.5s ease-out;
	transition:			0.5s ease-out;
}

.image-area img.hover{
	width: 110%;
	height: auto;
}
.inner {
	display: block;
	max-width: 1200px;
	width: 95%;
	margin: 0 auto;
}
.wrap {
	width: auto;
	max-width: 1200px;
	height: auto;
	margin: 0 auto;
}
.comment{
	cursor: pointer;
	z-index: 4000;
}
.comment p,
.comment span{
	-webkit-transition: 0.5s ease-out;
	-moz-transition:	0.5s ease-out;
	-ms-transition:		0.5s ease-out;
	-o-transition:		0.5s ease-out;
	transition:			0.5s ease-out;
}

.comment.hover span{
	background: #a22b29;
}
.comment > span {
	height: 2px;
	background-color: black;
	width: 50%;
	display: block;
	-webkit-transition: 0.5s ease-out;
	-moz-transition:	0.5s ease-out;
	-ms-transition:		0.5s ease-out;
	-o-transition:		0.5s ease-out;
	transition:			0.5s ease-out;
}
.comment.hover > span{
	width: 100%;
}
.comment.hover a{
	color: #a22b29;
}
.comment a:hover{
	text-decoration: none;
}

.comment > p {
	text-align: center;
	color: black;
	margin: 10px 0;
}
.comment > p a{
	color: black;
}

h1,h2 {
	font-weight: 700;
}
img {
	width: 100%;
}
a {
	text-decoration: none;
	color: white;
}

/*============= top page | sections ===================*/

/*============= First View Style ===================*/
#fv {
}
header {
	width: 100%;
	height: 80px;
	position: fixed;
	background-color: black;
	color: white;
	padding: 20px 30px;
	z-index: 9999;
}
	.header-left {
		float: left;
		width: 180px;
		margin-top: 5px;
	}
	.header-right {
		float: right;
		padding-right: 50px;
	}
	.header-right ul{
		width: auto;
		display: inline-block;
	}
	.header-right li{
		display: inline-block;
		width: auto;
		padding: 10px 5px;
		font-size: 1rem;
	}
	.header-right .toggle-button {
		display: inline-block;
		width: 50px;
		margin-left: 20px;
	}
	.header-right .toggle-button span {
		background-color: gray;
		width: 100%;
		height: 2px;
		margin: 5px 0;
		display: block;
	} 
	.header-logo{
		position: absolute;
		width: 70px;
		top: calc(50% - 5px);
		right: 20px;
	}

.fv-main {
	background: #333333 url("http://archive.tc-truthconnect.com/wp-content/uploads/2019/11/top_kv.jpg") center top no-repeat;
	background-size: 130% auto;
	overflow: hidden;
}
.fv-main h1{
	font-size: 3.2rem;
	height: 20vh;
	text-align: center;
	margin: 45vh 0 35vh;
	vertical-align: middle;
	-webkit-transition: 1s ease-out;
	-moz-transition:	1s ease-out;
	-ms-transition:		1s ease-out;
	-o-transition:		1s ease-out;
	transition:			1s ease-out;
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
	filter: blur(20px);
	transform: scale(150%);
}
.fv-main h1.view{
	filter:alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;	
	filter: blur(0px);
	transform: scale(100%);
}
.fv-main h1 > p {
	font-size: 1rem;	
}
.image-wrap, .text-wrap{
	width: 50%;
	height: 100%;
	display: inline-block;
	position: relative;
	box-sizing: border-box;
}
.drawer-nav {
	z-index: 9999;
}
.drawer-nav h3{
	font-size: 1.5rem;
	text-align: center;
	margin: 30px auto;
}
.drawer-nav ul {
	display: block;
}
.drawer-nav li {
	display: block;
	margin: 0 auto;
	width: fit-content;
}
.drawer-nav p{
	text-align: center;
}
@media screen and (max-width :768px){
	header {
		padding: 20px;
	}
	.header-sp {
		width: 100%;
		height: 60px;
		background-color: rgba(0,0,0,0.6);
		color: white;
		padding: 20px 0;
		position: absolute;
		z-index: 3;
		letter-spacing: 1rem;
	}
	.header-sp ul{
		width: fit-content;
		margin: 0 auto;
	}
	.header-sp li{
		display: inline-block;
		padding: 0px 3px;
		font-size: 1.3rem;
	}
	.header-logo{
		position: absolute;
		width: 50px;
		top: inherit;
		bottom: 10px;
		right: 10px;
	}
	.header-sp-scroll{
		position: absolute;
		width: 30px;
		bottom: 0px;
		left: 10px;
	}
	.header-left {
		width: 30%;
	}
	.header-left {
		float: left;
		width: 150px;
		margin-top: 6px;
	}
	.header-right {
		float: right;
	}
	.header-right ul{
		width: auto;
		display: inline-block;
	}
	.header-right li{
		display: inline-block;
		width: auto;
		padding: 10px 5px;
		font-size: 1rem;
	}
	.header-right .toggle-button {
		display: inline-block;
		width: 60px;
		margin-right: 20px;
		margin-top: 0;
	}
	.header-right .toggle-button span {
		background-color: gray;
		width: 60%;
		/* margin: 0 auto; */
		height: 2px;
		margin: 5px 0;
		display: block;
	} 
		.fv-main {
			background-size: auto 130vh;
			height: 100vh;
			overflow: hidden;
			vertical-align: middle;
		}
		.fv-main h1{
			font-size: 2rem;
			text-align: center;
			margin: f;
			margin: 48vh 0 40vh;
			height: 12vh;
			/* position: absolute; */
			/* top: 0; */
			/* right: 0; */
			/* display: inline; */
			vertical-align: middle;
		}
		.image-wrap, .text-wrap{
			width: 100%;
			height: auto;
			display: inline-block;
			position: relative;
			box-sizing: border-box;
		}
	}

.message {
	background-color: white;
	padding: 100px 0;
	overflow: hidden;
}
.message h2 {
	text-align: center;
	font-size: 2rem;
	margin: 40px auto;
}
.message p {
	font-size: 1rem;
	line-height: 2rem;
	text-align: center;
	margin: 40px auto;
}
.top-img {
	width: 100%;
	height: 400px;
	background: url("../img/fv3.jpg") center top no-repeat;
	background-size: auto 130%;
}

/*============= section : restaurant Style ===================*/

#restaurant {
	color: black;
	width: 100%;
	height: inherit;
}
#restaurant article{
	width: 1024px;
	margin: 0 auto;
	overflow: visible;
}
#restaurant .container {
	position: relative;
	padding: 0;
	width: 100%;
}
#restaurant h1{
	font-size: 4.0rem;
	position: absolute;
	right: 5%;
	margin: 80px 0 0 0;
	line-height: 1;
	text-align: right;
	letter-spacing: 0;
}
#restaurant .container > p{
	font-size: .8rem;
	position: absolute;
	right: 5%;
	margin: 220px 0 0;
}
#restaurant .text-area{
	position: absolute;
	width: 450px;
	height: 400px;
	padding: 40px;
	right: 9%;
	margin-top: 260px;
}
#restaurant .text-area > p {
	font-size: .8rem;
	line-height: 1.6rem;
}
#restaurant #restaurant_catch{
	height: 680px;
}
#restaurant h2{
	font-size: 2.08rem;
	margin-bottom: 30px;
	text-align: left;
	letter-spacing: 0;
	/* position: absolute; */
}
#restaurant #restaurant_catch .image-area{
	width: 530px;
	height: 490px;
	right: -80px;
	margin-top: 190px;
}
#restaurant #restaurant_catch .comment {
	width: 200px;
	position: absolute;
	margin: 570px 0 0 -10px;
}
#restaurant #restaurant_catch .comment.hover span{
	margin-left: -50%;
}

#restaurant .example {
	position: relative;
}

#restaurant #skybar{
	height: 355px;
}
#restaurant .skybar h2{
	position: absolute;
	right: 85px;
	z-index: 1;
	margin: 220px 0 0 0;
	text-shadow: 0px 0px 5px white;
}
#restaurant .skybar .image-area{
	width: 600px;
	height: 230px;
	position: absolute;
	left: -100px;
	margin: 124px 0 0 0;
}
#restaurant .skybar .comment{
	position: absolute;
	width: 200px;
	transform: rotate(90deg);
	text-align: center;
	bottom: inherit;
	margin-top: 40px;
	right: 0px;
}
#restaurant .skybar .comment span{
	margin-left: 50%;
	margin-bottom: 10px;
}
#restaurant #cmt{
	height: 330px;
}
#restaurant .cmt h2{
	position: absolute;
	z-index: 1;
	left: 80px;
	text-align: right;
	text-shadow: 0px 2px 15px white;
	margin-top: 160px;
}
#restaurant .cmt .image-area{
	width: 600px;
	height: 230px;
	position: absolute;
	right: -100px;
	margin: 100px 0 0 0;
}
#restaurant .cmt .comment{
	position: absolute;
	width: 200px;
	transform: rotate(90deg);
	text-align: center;
	bottom: inherit;
	margin-top: -30px;
	left: 0;
	right: inherit;
}
#restaurant .cmt .comment span{
	margin-top: 10px;
	margin-left: 50%;
}

@media screen and (max-width: 768px){
	#restaurant {
	color: black;
	width: 100%;
	height: inherit;
	}
	#restaurant article{
		width: auto;
	}
	#restaurant .container {
		padding: 0;
		width: 100%;
	}
	#restaurant h1{
		font-size: 3rem;
		margin: 5vh auto 0;
		text-align: right;
		z-index: 2;
		padding-right: 10px;
	}
	#restaurant .container > p{
		font-size: .8rem;
		text-align: right;
		padding-right: 10px;
		margin: 18vh 0 0;
	}
	#restaurant #restaurant_catch{
		height: 90vh;
	}
	#restaurant #restaurant_catch .text-area{
		position: absolute;
		width: 75%;
		height: auto;
		padding: 60px 20px 20px;
		left: auto;
		right: 0px;
		margin: 26vh 0 0 0;
	}
	#restaurant #restaurant_catch .text-area > p {
		font-size: .8rem;
		line-height: 2rem;
	}
	#restaurant h2{
		font-size: 1.7rem;
		margin-bottom: 40px;
		text-align: left;
		/* position: absolute; */
	}
	#restaurant #restaurant_catch .image-area{
		width: 80%;
		height: auto;
		text-align: center;
		position: absolute;
		top: auto;
		left: 0;
		margin: 0;
	}
	#restaurant #restaurant_catch .image-area{
		margin: 23vh 0 0;
	}
	#restaurant #restaurant_catch .comment{
		width: 32%;
		bottom: inherit;
		left: 16%;
		margin: 28vh 0 0 0;
	}
	#restaurant .comment p{
		text-align: right;
		margin: 0;
	}
	#restaurant .comment span{
		width: 100%;
		margin: 0;
	}
	#restaurant .example {
		height: 350px;
		margin-top: 50px;
	}
	#restaurant #skybar{
		height: 0;
	}
	#restaurant .skybar h2{
		z-index: 1;
		text-align: center;
		margin: 0px auto 30px;
		position: inherit;
	}
	#restaurant .skybar .comment{
		position: absolute;
		width: fit-content;
		top: -335px;
		right: 0;
		transform: rotate(90deg);
	}
	#restaurant .skybar .text-area{
		height: 100px;
	}
	#restaurant .skybar .image-area{
		width: 600px;
		height: auto;
		position: inherit;
		left: -100px;
		z-index: 0;
	}
	#restaurant #cmt{
		display: none;
	}
	#restaurant .cmt h2{
		position: inherit;
		z-index: 1;
		text-align: center;
		margin-bottom: 30px;
		margin-top: 0;
	}
	#restaurant .cmt .text-area{
		height: 100px;
	}
	#restaurant .cmt .image-area{
		width: 600px;
		height: auto;
		position: absolute;
		right: -100px;
	}
	.sp .skybar, .sp .cmt {
		background-color: white;
	}
	.sp .bg_sky {
		width: 100%;
		height: 200px;
		background-image: url("../img/bg_sky.jpg");
		background-repeat: no-repeat;
		background-size: cover;
	}
	.sp .bg_cmt {
		width: 100%;
		height: 200px;
		background-image: url("../img/bg_cmt.jpg");
		background-repeat: no-repeat;
		background-size: cover;
	}
	.sp .bg_ginza {
		width: 100%;
		height: 200px;
		background-image: url("http://archive.tc-truthconnect.com/wp-content/uploads/2019/11/top_ginza.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}
	.sp .bg_shibuya {
		width: 100%;
		height: 200px;
		background-image: url("http://archive.tc-truthconnect.com/wp-content/uploads/2019/11/top_shibuya.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}
	.sp-example {
		text-align: center;
		padding: 50px 0;
	}
	.sp-example h2 {
		margin: 0 auto;
	}
	.sp-example div {
		margin: 0 auto;
		background-color: black;
		color: white;
		width: fit-content;
		padding: 10px 20px;
	}
}

/*============= section : ad agency Style ===================*/

#ad {
	color: black;
	width: 100%;
	height: inherit;
	overflow: hidden;
}

#ad article{
	height: 700px;
	width: 1024px;
	margin: 0 auto;
}
#ad .container {
	position: relative;
	padding: 0;
	width: 100%;
}
#ad h1{
	font-size: 4.0rem;
	position: absolute;
	left: 5%;
	letter-spacing: 0;
	margin: 60px 0 0 0;
}
#ad .container > p{
	font-size: .8rem;
	position: absolute;
	margin: 150px 0 0 0;
	left: 5%;
}
#ad .text-wrap{
	float: left;
}
#ad .text-area{
	position: absolute;
	width: 450px;
	height: 400px;
	padding: 40px;
	left: 9%;
	margin: 190px 0 0 0;
}
#ad .text-area > p {
	font-size: .8rem;
	line-height: 1.6rem;
}
#ad h2{
	font-size: 2.3rem;
	margin-bottom: 30px;
	text-align: center;
	letter-spacing: 0;
	text-align: left;
}
#ad .image-wrap{
	float: right;
}
#ad .image-area{
	width: 530px;
	height: 490px;
	left: -80px;
	margin-top: 160px;
}
#ad .text-wrap .comment {
	width: 200px;
	position: absolute;
	display: inline-block;
	text-align: center;
	margin: 500px 0 0 320px;
}
#ad .text-wrap .comment span{
	margin-top: 10px;
	margin-left: 50%;
}

@media screen and (max-width: 768px){
	#ad {
	color: black;
	width: 100%;
	height: 90vh;
	}
	#ad article{
		height: 80vh;
		width: auto;
	}
	#ad .container {
		position: relative;
		padding: 0;
		width: 100%;
	}
	#ad h1{
		font-size: 3rem;
		margin: 0;
		text-align: left;
		z-index: 2;
		padding-left: 10px;
		left: 0;
	}
	#ad .container > p{
		font-size: .8rem;
		width: 100%;
		text-align: left;
		top: 0;
		left: 0;
		padding-left: 10px;
		margin: 8vh 0 0 0;
	}
	#ad .text-area{
		position: absolute;
		width: 75%;
		height: auto;
		padding: 60px 20px 20px;
		left: 0;
		margin: 30vh 0 0 0;
	}
		#ad .text-area > p {
			font-size: .8rem;
			line-height: 2rem;
		}
		#ad h2{
			font-size: 2.3rem;
			margin-bottom: 40px;
			text-align: center;
			/* position: absolute; */
		}
	#ad .image-area{
		width: 80%;
		height: auto;
		text-align: center;
		position: absolute;
		margin: 18vh 0 0;
		top: 0;
		right: 0;
		left: auto;
	}
	#ad .text-wrap .comment {
		width: 32%;
		text-align: left;
		position: absolute;
		display: inline-block;
		right: 16%;
		margin: 30vh 0 0 0;
	}
	#ad .text-wrap .comment p{
		text-align: left;
	}
	#ad .text-wrap .comment span{
		margin-left: 0;
		width: 100%;
		margin-top: 0;
	}
}

/*============= section : information Style ===================*/

#information {
	width: 100%;
	height: auto;
}
#information .box{
	width: 80%;
	margin: 20px auto;
	padding: 30px 40px;
	height: fit-content;
	background: white;
}
#information h2 {
	font-size: 1.5rem;
	text-align: center;
	margin: 50px 0;
}
#information ul {
	width: 100%;
	/* margin: 0 auto; */
}
#information li {
	display: inline-block;
	width: 25%;
	padding: 5px;
	height: auto;
	box-sizing: border-box;
	padding: 5px;
}
#information .news-element {
	width: 100%;
}
#information .image-area {
	width: 100%;
	display: block;
	height: auto;
	position: inherit;
}
#information .text-area {
	width: 100%;
	height: 100%;
	display: block;
	background-color: #F2F2F2;
}
#information .box > p > a {
	margin: 20px 0;
	font-size: .8rem;
	color: black;
	display: block;
	font-weight: 700;
	text-align: center;
}
@media screen and (max-width: 768px){
	#information {
	width: 100%;
	height: auto;
	}
	#information .box{
		width: 90%;
		margin: 0 auto;
		padding: 30px 20px;
		height: fit-content;
		background: white;
	}
	#information h2 {
		font-size: 1.5rem;
		text-align: center;
		margin: 50px 0;
	}
	#information ul {
		width: 100%;
		/* margin: 0 auto; */
	}
	#information li {
		display: inline-block;
		width: 49%;
		padding: 5px;
		height: auto;
		box-sizing: border-box;
		padding: 5px;
	}
	#information .news-element {
		width: 100%;
	}
	#information .image-area {
		width: 100%;
		display: block;
		height: auto;
		position: initial;
	}
	#information .text-area {
		width: 100%;
		height: 100%;
		display: block;
		background-color: #F2F2F2;
	}
	#information .box > p > a {
		margin: 15px 0;
		font-size: .8rem;
		color: black;
		display: block;
		font-weight: 700;
		text-align: center;
	}
}

/*============= section : menu Style ===================*/

#menu {
	width: 100%;
	height: auto;
	padding: 80px 0;
}
#menu ul {width: 90%;margin: 0 auto;}
#menu li {
	width: calc(20% - 3px);
	margin: 1px;
	height: auto;
	box-sizing: border-box;
	display: inline-flex;
	position: relative;
	background: url(../img/menu_bg.jpg) center center no-repeat fixed;
	background-size: auto 100%;
}
#main li:hover{
	filter:alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
}
#menu li:before {
	padding-top: 100%;
	content: '';
	display: block;
}

#menu li > a {
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.4);
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
#menu li > a:hover{
	background-color: rgba(0,0,0,0.0);
}
#menu .ttl_en{
	position: absolute;
	top: 40%;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	margin: 0 auto;
	color: white;
	font-size: 1rem;
	text-align: center;
	font-weight: 700;
	font-style: italic;
}
#menu .ttl_jp{
	position: absolute;
	top: 55%;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	margin: 0 auto;
	color: white;
	font-size: .8rem;
	text-align: center;
	font-weight: 300;
}

@media screen and (max-width: 768px){
	#menu {
		width: 100%;
		height: auto;
		padding: 50px 0;
	}
	#menu ul {width: 80%;margin: 0 auto;}
	#menu li {
		width: 80vw;
		margin: 1px;
		height: 32vw;
		box-sizing: border-box;
		display: inline-block;
		position: relative;
		background-attachment: inherit;
		background-size: auto 100vh;
	}
	#menu li:nth-child(1){ background-position: 70% 0%; }
	#menu li:nth-child(2){ background-position: 70% 25%; }
	#menu li:nth-child(3){ background-position: 70% 50%; }
	#menu li:nth-child(4){ background-position: 70% 75%; }

	#menu li > a {
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.4);
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	#menu .ttl_en{
		position: absolute;
		top: 40%;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		margin: 0 auto;
		color: white;
		font-size: 1rem;
		text-align: center;
		font-weight: 700;
		font-style: italic;
	}
	#menu .ttl_jp{
		position: absolute;
		top: 50%;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		margin: 5px auto;
		color: white;
		font-size: .8rem;
		text-align: center;
		font-weight: 300;
	}
}

/*============= section : footer Style ===================*/

footer {
	background-color: black;
	width: 100%;
	height: auto;
	padding: 60px 10px;
}
footer .logo{
	margin: 50px auto;
	width: 70px;
	height: auto;
}
footer ul{
	background-color: transparent;
	margin: 80px auto;
	text-align: center;
}
footer li{
	display: inline-block;
	color: white;
	font-size: 1rem;
}
footer p{
	color: white;
	margin: 0 auto;
	text-align: center;
}

@media screen and (max-width: 768px){
	footer {
	background-color: black;
	width: 100%;
	height: auto;
	padding: 40px 10px;
	}
	footer .logo{
		margin: 30px auto;
		width: 70px;
		height: 50px;
	}
	footer ul{
		background-color: transparent;
		margin: 80px auto;
		text-align: center;
	}
	footer li{
		display: inline-block;
		color: white;
		font-size: 1rem;
	}
	footer p{
		color: white;
		margin: 0 auto;
		text-align: center;
	}

}

/*============= single-page : Style ===================*/

/*style for singe pages*/
.single-page-fv {
	height: auto;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	overflow: hidden;
}
.single-page-fv .fv-main {
	padding: 0px;
	height: calc(100vh);
	position: relative;
	background-image: none;
	background-color: transparent;
}
.mask {
	width: 100vw;
	height: calc(100vh - 80px);
	position: absolute;
	background-color: rgba(0,0,0,0.4);
}
.contents {
	text-align: center;
	padding: 80px 30px 0px;
}
.contents h2 {
	font-size: 1.7rem;
	margin: 0 auto 40px;
}
.contents h3 {
	font-size: 1.3rem;
	margin: 40px auto;
}
.contents h4 {
	font-size: 1.3rem;
	margin-top: 30px;
	margin-bottom: 30px;
}
.box {
	background-color: white;
	padding: 80px 50px;
	border: 1px solid;
	border-color: white;
}
.contents p{
	font-size: 1rem;line-height: 2rem;
}
.v-line {
	display: block;
	margin: 0 auto;
	width: 1px;
	height: 50px;
	background-color: black;
}

/*============= page-agency : Style ===================*/

.agency-fv {
	width: 100%;
	height: fit-content;
	background-color: white;
	background-image: url("../img/fv2.jpg");
	background-position: center right;
}

.agency .lineup {
	padding: 50px 70px;
}
.agency .lineup ul{
	padding: 10px;
}
.agency .lineup li{
	width: 32%;
	display: inline-block;
	padding: 10px;
	height: auto;
	vertical-align: middle;
	margin: 0;
}
.lineup-box {
	height: 300px;
	border: 3px solid;
}
.lineup-content p{font-size: .8rem;line-height: 1rem;}
.lineup-content img{
	width: 40%;
	display: block;
	margin: 10px auto;
}

/*============= page-restaurant : Style ===================*/

.restaurant-content .box {
	margin-bottom: 50px;
}

.restaurant-fv {
	width: 100vw;
	height: 56vw;
	background-color: white;
	background-image: url("../img/fv1.jpg");
	background-position: center;
}

.restaurant-detail h3 {
	font-size: 1.7rem;
}
.restaurant-detail .skybar, .restaurant-detail .cmt {
	padding: 0px 25px;
	margin-top: 50px;
	margin-bottom: 80px;
}
.restaurant-detail	.textarea {
	text-align: left;
	display: inline-block;
	width: 40%;
	vertical-align: middle;
	padding: 20px 0;
	position: relative;
}
.restaurant-detail	.textarea h2{
	position: absolute;
	font-size: 3rem;
	width: 250%;
	text-shadow: 0px 2px 15px white;
}
.restaurant-detail	.title-ja {
	margin-top: 60px;
}
.restaurant-detail	.address {
	margin: 20px 0;
	font-size: 0.7rem;
}
.restaurant-detail	.biz {
	font-weight: bold;
	border-left: 10px solid;
	padding-left: 5px;
	margin: 20px 0;
}
.restaurant-detail	.link {
	background-color: black;
	color: white;
	padding: 5px;
	width: fit-content;
	margin: 30px 0;
}
.restaurant-detail	.imagearea {
	width: 59%;
	display: inline-block;
	padding: 20px 0;
}

/*============= page-recruit : Style ===================*/

.recruit-fv {
	width: 100%;
	height: fit-content;
	background-color: white;
	background-image: url("../img/fv4.jpg");
	background-position: center right;
}
.recruit .box {
	margin: 80px auto;
}
.recruit-info{
	text-align: left;
	padding: 80px;
}
.recruit-info h2 {

}
.recruit-info h4 {
	border-left: 4px solid black;
	padding-left: 10px; 
}
.recruit-info p {
	padding-left: 20px;
	font-size: 1.2rem;
}

/*============= page-company : Style ===================*/

.company-fv {
	width: 100%;
	height: fit-content;
	background-color: white;
	background-image: url("../img/fv3.jpg");
	background-position: center right;
}
.company .box {
	padding: 80px 90px;
	margin: 80px auto 0px;
}
.company table {
	width: 100%;
}
.company tbody {
	margin: 0 auto;
	width: 100%;
}
.company tr {
}
.company td {
	padding: 20px;
	vertical-align: middle;
	border: 2px solid white;
}
.company .col1 {
	background-color: black;
	color: white;
}
.company .col2 {
	background-color: rgba(0,0,0,0.1);
	padding: 20px 30px;
}
/*============= page-contact : Style ===================*/

.contact-fv {
	width: 100%;
	height: fit-content;
	background-color: white;
	background-image: url("../img/menu3.png");
	background-position: center right;
}
.contact .box {
	margin: 30px auto;
}
.contact-info{
	text-align: left;
	padding: 30px 20px;
}
.contact-info h3 {
	text-align: center;
	width: fit-content;
	margin: 20px auto
}
.contact-info h4 {
	border-left: 4px solid black;
	padding-left: 10px; 
}
.contact-info p {
	padding-left: 20px;
	font-size: 1rem;
	padding-right: 20px;
}
.contact-info input {
	width: 100%;
	margin: 5px auto;
}
.wpcf7-text {
	background-color: whitesmoke;
}
.wpcf7-textarea {
	background-color: whitesmoke;
	width: 100%;
}
.wpcf7-submit {
	background-color: whitesmoke;
	padding: 10px;
	border: 2px solid red;
	border-radius: 30px;
	width: 40%!important;
	display: block;
	margin: 20px auto;
}
.wpcf7-select {
	border: 2px solid #ffc277;
	border-radius: 4px;
	padding: 0 11px;
}
.ajax-loader {
	visibility: hidden;
	display: block;
	background-image: url(../../images/ajax-loader.gif);
	background-size: cover;
	width: 40px;
	height: 40px;
	border: none;
	padding: 0;
	margin: 20px auto;
	vertical-align: middle;
}

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

	/*============= single-page : Style ===================*/
	/*style for singe pages*/
	.single-page-fv {
		height: auto;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		overflow: hidden;
	}
	.single-page-fv .fv-main {
		padding: 20px;
		height: calc(100vh - 80px)!important;
		position: relative;
		padding: 0;
		background-image: none;
		background-color: transparent;
	}
	.mask {
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: rgba(0,0,0,0.4);
	}
	.contents {
		text-align: center;
		padding: 30px 3% 0px;
	}
	.contents h2 {
		font-size: 1.7rem;
		margin: 0 auto 25px;
	}
	.contents h3 {
		font-size: 1.3rem;
		margin: 50px auto 20px;
	}
	.contents h4 {
		font-size: 1rem;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.box {
		background-color: white;
		padding: 50px 20px;
		border: 1px solid;
		border-color: white;
	}
	.contents p{
		font-size: 1rem;
		line-height: 2rem;
		text-align: left;
	}
	.v-line {
		display: block;
		margin: 0 auto;
		width: 1px;
		height: 35px;
		background-color: black;
	}

	/*============= page-agency : Style ===================*/

	.agency-fv {
		width: 100%;
		height: fit-content;
		background-color: white;
		background-image: url("../img/fv2.jpg");
		background-position: center right;
	}

	.agency .lineup {
		padding: 30px 10px;
	}
	.agency .lineup ul{
		padding: 10px;
	}
	.agency .lineup li{
		width: 49%;
		display: inline-block;
		padding: 10px;
		height: auto;
		vertical-align: middle;
		margin: 0;
	}
	.lineup-box {
		height: 200px;
		border: 3px solid;
	}
	.lineup-content p{font-size: .8rem;line-height: 1rem;text-align: center;}
	.lineup-content img{
		height: 25%;
		width: auto;
		display: block;
		margin: 15px auto;
	}

	/*============= page-restaurant : Style ===================*/

	.restaurant-content .box {
	margin-bottom: 0;
	}

	.restaurant-fv {
		width: 100%;
		height: fit-content;
		background-color: white;
		background-image: url("../img/fv1.jpg");
		background-position: center right;
	}

	.restaurant-detail h3 {
		font-size: 3.7rem;
		margin: 20px auto;
	}
	.restaurant-detail .skybar, .restaurant-detail .cmt {
		padding: 0;
		margin-top: 0px;
		margin-bottom: 0px;
	}
	.restaurant-detail	.textarea {
		text-align: left;
		display: inline-block;
		width: 100%;
		vertical-align: middle;
		padding: 20px 0;
		position: relative;
	}
	.restaurant-detail	.textarea h2{
		margin: 0;
		font-size: 2.4rem;
		width: fit-content;
		text-shadow: 0px 2px 15px white;
	}
	.restaurant-detail	.title-ja {
		margin-top: 10px;
	}
	.restaurant-detail	.address {
		margin: 5px 0;
		font-size: 0.7rem;
	}
	.restaurant-detail	.biz {
		font-weight: bold;
		border-left: 10px solid;
		padding-left: 5px;
		margin: 20px 0;
	}
	.restaurant-detail	.link {
		background-color: black;
		color: white;
		padding: 10px;
		width: fit-content;
		margin: 40px auto 10px;
	}
	.restaurant-detail	.imagearea {
		width: 100%;
		display: inline-block;
		padding: 0px;
	}

	/*============= page-recruit : Style ===================*/

	.recruit-fv {
		width: 100%;
		height: fit-content;
		background-color: white;
		background-image: url("../img/fv4.jpg");
		background-position: center right;
	}
	.recruit .box {
		margin: 30px auto;
	}
	.recruit-info{
		text-align: left;
		padding: 30px 20px;
	}
	.recruit-info h2 {

	}
	.recruit-info h4 {
		border-left: 4px solid black;
		padding-left: 10px; 
	}
	.recruit-info p {
		padding-left: 20px;
		font-size: 1rem;
	}

	/*============= page-company : Style ===================*/

	.company-fv {
		width: 100%;
		height: fit-content;
		background-color: white;
		background-image: url("../img/fv3.jpg");
		background-position: center right;
	}
	.company .box {
		padding: 40px 30px;
		margin: 80px auto 0px;
	}
	.company table {
		width: 100%;
	}
	.company tbody {
		margin: 0 auto;
		width: 100%;
	}
	.company tr {
	}
	.company td {
		padding: 10px 30px;
		vertical-align: middle;
		border: 2px solid white;
	}
	.company .col1 {
		background-color: black;
		color: white;
	}
	.company .col2 {
		background-color: rgba(0,0,0,0.1);
		padding: 10px 30px;
	}

	/*============= page-contact : Style ===================*/

	.contact-fv {
		width: 100%;
		height: fit-content;
		background-color: white;
		background-image: url("../img/menu3.png");
		background-position: center right;
	}
	.contact .box {
		margin: 30px auto;
	}
	.contact-info{
		text-align: left;
		padding: 30px 20px;
	}
	.contact-info h3 {
		text-align: center;
		width: fit-content;
		margin: 20px auto
	}
	.contact-info h4 {
		border-left: 4px solid black;
		padding-left: 10px; 
	}
	.contact-info p {
		padding-left: 10px;
		font-size: 1rem;
		padding-right: 20px;
		border-left: 4px solid #b7b7b7;
		margin: 20px auto;
	}
	.contact-info input {
		width: 100%;
		margin: 5px auto;
	}
	.wpcf7-text {
		background-color: whitesmoke;
	}
	.wpcf7-textarea {
		background-color: whitesmoke;
		width: 100%;
	}
	.wpcf7-submit {
		background-color: whitesmoke;
		padding: 10px;
		border: 2px solid red;
		border-radius: 30px;
		width: 40%!important;
		display: block;
		margin: 20px auto;
	}
}
@media only screen and (max-width: 415px){
	.agency .lineup {
		padding: 30px 10px;
	}
	.agency .lineup ul{
		padding: 10px;
	}
	.agency .lineup li{
		width: 80%;
		display: inline-block;
		padding: 10px;
		height: auto;
		vertical-align: middle;
		margin: 0;
	}
	.lineup-box {
		height: 200px;
		border: 3px solid;
	}
	.lineup-content p{font-size: .9rem;line-height: 1rem;text-align: center;}
	.lineup-content img{
		height: 40%;
		width: auto;
		display: block;
		margin: 15px auto;
	}
}

@media screen and (min-width :769px){
	.distortion,
	.distortion2{
		-webkit-transform: translate3d(0, 0, 500px);
		transform: translate3d(0px, 0px, 500px);
		z-index: 200 !important;
		-webkit-backface-visibility:hidden !important;
		backface-visibility:hidden !important;
	}
}

*[data-stellar-ratio="1.1"]{ z-index: 1100 !important; }
*[data-stellar-ratio="1.2"]{ z-index: 1200 !important; }
*[data-stellar-ratio="1.3"]{ z-index: 1300 !important; }
*[data-stellar-ratio="1.4"]{ z-index: 1400 !important; }
*[data-stellar-ratio="1.5"]{ z-index: 1500 !important; }