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

html {
	width: 100%;
	height: 100%;
	font-size: 16px;
}
@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;
}
.text-area {
	background-color: white;
	box-sizing: border-box;
	padding: 30px;
}
.image-area{
	position: absolute;
	z-index:  0;
}
.inner {
	display: block;
	max-width: 1200px;
	width: 95%;
	margin: 0 auto;
}
.wrap {
	width: auto;
	max-width: 1200px;
	height: auto;
	margin: 0 auto;
}

.comment > span {
	height: 1px;
	background-color: gray;
	width: 150px;
	display: block;
}
.comment > p {
	text-align: center;
	color: black;
	margin: 10px 0;
	font-weight: lighter;
}

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

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

/*============= First View Style ===================*/
#fv {
	background-size: cover;
}
header {
	width: 100%;
	height: 80px;
	position:  fixed;
	background-color: black;
	color: white;
	padding: 20px 30px;
	z-index: 9999;
}
	.header-left {
		float: left;
		width:  200px;
		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;
	} 

.fv-main {
	background-color: rgba(000,000,000,0.3);
/*
	background: #333333 url("../img/top_bg.jpg") right center / cover no-repeat;
	padding: 20% 40px;
*/
	overflow:  hidden;
}
.hello-world-fv {
	background: #333333 url("../img/top_bg.jpg") right center / cover no-repeat;
}
.fv-main h1{
	font-size: 2.5rem;
	height: 20vh;
	text-align: center;
	margin: 45vh 0 35vh;
	vertical-align: middle;
}
.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-sp-logo{
		position: absolute;
		width: 50px;
		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 {
			overflow:  hidden;
			vertical-align:  middle;
		}
		.fv-main h1{
			font-size: 2rem;
			text-align: center;
			height: 10vh;
			margin: 50vh 0 40vh;
			vertical-align: middle;
		}
		.image-wrap, .text-wrap{
			width: 100%;
			height: 360px;
			display: inline-block;
			position: relative;
			box-sizing: border-box;
		}
	}

.message {
	background-color: white;
	padding: 100px 0;
}
.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-image: url(../img/fv3.jpg);
	background-size: cover;
	background-repeat: no-repeat;
}

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

#restaurant {
	color: black;
	width:  100%;
	height: inherit;
}
#restaurant article{
	height: 500px;
	margin: 80px 50px;
}
#restaurant .container {
	position: relative;
	padding: 0;
	width: 100%;
}
#restaurant h1{
	font-size: 3.5rem;
	position: absolute;
	right: 5%;
	top: 0px;
	z-index:  2;
}
#restaurant .container > p{
	font-size: .8rem;
	position: absolute;
	right: 55px;
	top: 110px;
	margin: 15px 0;
}
#restaurant .text-area{
	position: absolute;
	width: 450px;
	height: 370px;
	padding: 40px;
	left: 25px;
	top: 175px;
}
#restaurant .text-area > p {
	font-size: .8rem;
	line-height: 1.6rem;
}
#restaurant h2{
	font-size: 1.5rem;
	margin-bottom: 30px;
	text-align:  center;
	/* position: absolute; */
}
#restaurant .image-area{
	width: 470px;
	height: auto;
	top: 55px;
	right: -50px;
}
#restaurant .comment {
	bottom: 25px;
	left: 0%;
	position: absolute;
}
#restaurant .example {
	height: 350px;
	margin-top: 50px;
}
#restaurant .skybar h2{
	position: absolute;
	right: 85px;
	top: 45px;
	z-index:  1;
}
#restaurant .skybar .image-area{
	width: 600px;
	height: auto;
	position: absolute;
	left: -100px;
	z-index:  0;
}
#restaurant .skybar .comment{
	position: absolute;
	width: fit-content;
	top: -340px;
	right: 10%!important;
	font-weight:  lighter;
	transform: rotate(90deg);
}
#restaurant .cmt h2{
	position: absolute;
	z-index:  1;
	left: 100px;
	top: 50px;
	text-align: right;
}
#restaurant .cmt .image-area{
	width: 600px;
	height: auto;
	position:  absolute;
	right: -100px;
}
#restaurant .cmt .comment{
	position: absolute;
	width:  fit-content;
	left: -248px;
	top: -350px;
	font-weight:  lighter;
	transform: rotate(90deg);
}

@media screen and (max-width: 768px){
	#restaurant {
	color: black;
	width:  100%;
	height: inherit;
	}
	#restaurant article{
		height: 650px;
		margin: 50px 0;
	}
	#restaurant .container {
		position: initial;
		padding: 0;
		width: 100%;
	}
	#restaurant h1{
		font-size: 3rem;
		margin: 30px auto;
		position: initial;
		text-align: right;
		z-index:  2;
		padding-right: 10px;
	}
	#restaurant .container > p{
		font-size: .8rem;
		position: initial;
		text-align: right;
		padding-right: 10px;
	}
	#restaurant .text-area{
		position: absolute;
		width: 75%;
		height: auto;
		padding: 60px 20px;
		left:  auto;
		right: 0px;
		top: -260px;
	}
	#restaurant .text-area > p {
		font-size: .8rem;
		line-height: 2rem;
	}
	#restaurant h2{
		font-size: 1.7rem;
		margin-bottom: 40px;
		text-align: left;
		/* position: absolute; */
	}
	#restaurant .image-area{
		width: 80%;
		height: auto;
		text-align:  center;
		position: absolute;
		margin: 0;
		top: auto;
		left: 0;
	}
	#restaurant .example {
		height: 350px;
		margin-top: 50px;
	}
	#restaurant .skybar h2{
		position: initial;
		z-index:  1;
		text-align:  center;
		margin: 0px auto 30px;
	}
	#restaurant .skybar .comment{
		position: absolute;
		width: fit-content;
		top: -335px;
		right: 0;
		font-weight:  lighter;
		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 h2{
		position: inherit;
		z-index:  1;
		text-align: center;
		margin-bottom: 30px;
	}
	#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-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;
}
#ad article{
  height: 600px;
}
#ad .container {
  position: relative;
  padding: 0;
  width: 100%;
}
#ad h1{
  font-size: 3.5rem;
  position: absolute;
  left: 8%;
  top: 0px;
  z-index:  2;
}
#ad .container > p{
  font-size: .8rem;
  position: absolute;
  font-weight:  lighter;
  margin: 10px 0;
  left: 8%;
  top: 110px;
}
#ad .text-area{
  position: absolute;
  width: 450px;
  height: 365px;
  padding: 40px;
  right: 25px;
  top: 175px;
  z-index:  1;
}
  #ad .text-area > p {
    font-size: .8rem;
    line-height: 1.6rem;
  }
  #ad h2{
    font-size: 2.3rem;
    margin-bottom: 30px;
    text-align:  center;
    /* position: absolute; */
  }
#ad .image-area{
  width: 470px;
  height: auto;
  top: 55px;
  left: -50px;
}
#ad .text-wrap .comment {
	position: absolute;
	display: inline-block;
	font-weight:  lighter;
	top: 180px;
	z-index:  4;
	right: 4%;
}

@media screen and (max-width: 768px){
	#ad {
  color: black;
  width:  100%;
  height: inherit;
	}
	#ad article{
	  height: 700px;
	}
	#ad .container {
	  position: relative;
	  padding: 0;
	  width: 100%;
	}
	#ad h1{
	  font-size: 3rem;
	  margin: 30px auto;
	  position: initial;
	  text-align: left;
	  z-index: 2;
	  padding-left: 10px;
	}
	#ad .container > p{
	  font-size: .8rem;
	  position: initial;
	  width: 100%;
	  text-align: left;
	  top: 0;
	  left:  0;
	  padding-left: 10px;
	}
	#ad .text-area{
	  position: absolute;
	  width: 75%;
	  height: auto;
	  padding: 60px 20px;
	  left: 0;
	  top: -250px;
	}
	  #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: 0;
	  top: 0;
	  right: 5px!important;
	  left:  auto;
	}
	#ad .text-wrap .comment {
		position: absolute;
		display: inline-block;
		font-weight:  lighter;
		top: -240px;
		z-index:  4;
		right: 4%;
	}
}

/*============= 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: initial;
}
#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: 1.2rem;padding: 0 5px;}
.lineup-content img{
	height: 80px;
	display: block;
	width: auto;
	margin: 25px auto;
}

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

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

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

.restaurant-detail h3 {
	position: relative;
	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;
	padding: 5px 1em;
	width:  fit-content;
	margin: 30px auto;
	border: 1px solid black;
	-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;
}
.restaurant-detail .link a{
	color:  white;
}
.restaurant-detail .link:hover{
	background: white;
}
.restaurant-detail .link a:hover{
	text-decoration: none;
	color: black;
}
.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.jpg");
	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: auto;
		width: 30%;
		display:  block;
		margin: 20px auto;
	}

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

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

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

	.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{
		position: initial;
		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: 73% center;
	}
	.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: 0 10px;
		margin: 0;
	}
	.company table {
		width: 100%;
	}
	.company tbody {
		margin: 0 auto;
		width:  100%;
	}
	.company tr {
	}
	.company td {
		padding: 10px;
		vertical-align:  middle;
		border: 2px solid white;
	}
	.company .col1 {
		white-space: nowrap;
		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.jpg");
		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;padding: 0 5px;}
	.lineup-content img{
		height: auto;
		width: 40%;
		display:  block;
		margin: 0px auto 10px;
	}
}

.anker{
	position: absolute;
	top: -100px;
	right: 0;
}