@charset "UTF-8";

html {
	font-size: 100%;
	height: 100%;
	scroll-behavior: smooth;
}

body {
	font-family: "a-otf-ud-reimin-pr6n","游明朝体" ,"游教科書体","ヒラギノ明朝 Pro","Yu Gothic", "Helvetica", "Arial",
	  "Meiryo", "メイリオ", "sans-serif";
  color: #494949;
	background-color: #f0ecec;
	margin: 0px;
	font-weight: lighter;
	letter-spacing: 0.1em;
	height: 100%;
}

a{
	text-decoration: none;
}

img{
	max-width: 100%;
}

.pc-only{
	display: none;
}

.sp-only{
	display: block;
}

/** -------- PC -------- **/
@media screen and (min-width: 1024px) {
.pc-only {
  display: block;
}

.sp-only {
  display: none;
}
}

/** -----------------------------------
    画像アニメーション
-------------------------------------**/
.animate1 {
animation-name: fadeIn1;/*名前の定義*/
animation-fill-mode:forwards;/*繰り返すか*/
animation-duration:2s;/*アニメーションの時間*/
animation-iteration-count:1;/*再生回数*/
animation-timing-function:ease;/*5で解説*/
animation-delay: 0.1s;/*遅延*/
animation-direction:normal;/*再生の向き*/
opacity: 0;
}

.animate2 {
animation-name: fadeIn2;/*名前の定義*/
animation-fill-mode:forwards;/*繰り返すか*/
animation-duration:2s;/*アニメーションの時間*/
animation-iteration-count:1;/*再生回数*/
animation-timing-function:ease;/*5で解説*/
animation-delay: 1s;/*遅延*/
animation-direction:normal;/*再生の向き*/
opacity: 0;
}

.animate3 {
animation-name: fadeIn3;/*名前の定義*/
animation-fill-mode:forwards;/*繰り返すか*/
animation-duration:2s;/*アニメーションの時間*/
animation-iteration-count:1;/*再生回数*/
animation-timing-function:ease;/*5で解説*/
animation-delay: 2s;/*遅延*/
animation-direction:normal;/*再生の向き*/
opacity: 0;
}

@keyframes fadeIn1{
	from{
    opacity: 0;
		transform: translateY(30px);
}
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn2{
	from{
    opacity: 0;
		transform: translateY(30px);
}
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn3{
	from{
    opacity: 0;
		transform: translateY(30px);
}
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeInUpTrigger{
	opacity:0;
}

/** -----------------------------------
    横スクロール
-------------------------------------**/

/** -------- PC-------- **/
@media screen and (min-width: 1024px) {
#main{
	display: flex;
	/*overflow: hidden;*/
	/*min-height: 100%;*/
}
}

/** -----------------------------------
    ヘッダー
-------------------------------------**/
#header {
  position: relative;
  height: 0;
  padding: 0;
}

#g-nav{
  position:fixed;
  z-index: 999;
	top:0;
  left: -120%;
	width:100%;
  height: 100vh;/*ナビの高さ*/
	background:#cdcdc3;
    /*動き*/
	transition:  1s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
  left: 0;
}

/*ナビゲーション*/
#g-nav ul {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

/*リストのレイアウト設定*/
#g-nav li{
	list-style: none;
  text-align: center;
}

#g-nav li a{
	padding: 20px;
	display: block;
	text-transform: uppercase;
	font-size: 15px;
	letter-spacing: 0.13em;
	color: #494949;
}

.gnav-text2 a{
	font-family: "a-otf-ud-reimin-pr6n";
}

.gnav-text a{
		font-family: "futura-pt";
		font-weight: 400;
}

#g-nav a:hover {
	color: #fff;
	transition-duration: 0.7s;
}
/*========= ボタンのためのCSS ===============*/
.openbtn{
	position:fixed;
  z-index: 9999;/*ボタンを最前面に*/
	top:10px;
	left: 10px;
	cursor: pointer;
  width: 60px;
  height: 50px;
}

/*×に変化*/
.openbtn span{
  display: inline-block;
  transition: all .4s;
  position: absolute;
  left: 14px;
  height: 2px;
	background-color: #fff;
  width: 45%;
}

.openbtn span:nth-of-type(1) {
	top:15px;
}

.openbtn span:nth-of-type(2) {
	top:24px;
}

.openbtn span:nth-of-type(3) {
	top:34px;
}

.openbtn.active span:nth-of-type(1) {
  top: 18px;
  left: 18px;
  transform: translateY(6px) rotate(-45deg);
  width: 50%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
  top: 30px;
  left: 18px;
  transform: translateY(-6px) rotate(45deg);
  width: 50%;
}

/** -------- タブレット -------- **/
@media screen and (min-width: 600px) {
}

/** -------- PC -------- **/
@media screen and (min-width: 1024px) {
#g-nav{
	width: 50vw;
}
}
/** -----------------------------------
    メインビジュアル
-------------------------------------**/
#mainvisual {
	position: relative;
  height: 100vh;/*高さを全画面にあわせる*/
	width: 100vw;
}

.video-area{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  -webkit-filter: saturate(0%);
  filter: saturate(0%);
  -webkit-transition: all 4s ease;
  -o-transition: all 4s ease;
  transition: all 4s ease;
}

.video-area video{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.riservatin-wrap{
	position: absolute;
	right: 6%;
	bottom: 6%;
	z-index: 9;
}

/** -----------------------------------
    concept
-------------------------------------**/
#concept {
	width: 100vw;
}

.concept-img{
	background-image: url("../images/concept.jpg");
	background-size: cover;
	background-position: center center;
	width: 100vw;
	height: 70vh;
	position: relative;
}

.concept-text{
	width: 50vw;
	left: 2%;
	bottom: 8%;
	position: absolute;
}

.concept-image{
	width: 17vw;
}

.concept{
	text-align: center;
	padding: 6vw 0 2vw 0;
}

.concept-text1{
	font-size: 13px;
	letter-spacing: 0.15em;
	color: #fff;
	text-align: left;
	padding-bottom: 5%;
}

.concept-text2 {
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.15em;
	color: #fff;
	text-align: left;
}

.comment{
	height: 30vh;
}

.small-j1{
	padding: 7vw 8vw 6vw 8vw;
	line-height: 2;
	font-size: 10px;
	letter-spacing: 0.1em;
}

.small-e1{
	font-size: 3.3vw;
	padding: 8vw 10vw 1vw 8vw;
	line-height: 1.5;
}

/** -------- タブレット -------- **/
@media screen and (min-width: 539px) {

.small-j1{
	font-size: 18px;
	padding: 3vw 10vw 3vw 8vw;
}
}

/** -------- PC-------- **/
@media screen and (min-width: 1024px) {
.concept-img{
	width: 60vw;
	height: 100vh;
}

.comment{
	height: 100vh;
	width: 40vw;
}

.small-concept{
	padding-top: 8vw;
	width: 100%;
	align-items: center;
}

.small-j1{
	padding: 3vw 5vw 6vw 5vw;
	font-size: 0.7vw;
	line-height: 3;
}

.small-e1{
	padding: 5vw 5vw 1vw 5vw;
	font-size: 1.2vw;
}
}

/** -----------------------------------
    クリエティビテ
-------------------------------------**/
#creativite{
	position: relative;
}

.layer1{
	position: relative;
	/*background-image: url("../images/creativite_new.jpg");*/
	background-size: cover;
	background-position: center center;
	width: 100vw;
	height: 70vh;
	overflow: hidden;
}

.layer1 div.sp {
	position: absolute;
	left: 0;
/*	top: 0;*/
	top: -300px;
	width: 100%;
	height: 700px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url("../images/creativite_new.jpg");
}

.layer1 img.pc {
	display: none;
}

.item2{
	height: 30vh;
	width: auto;
}

.button-wrap {
  position: absolute;
  right: 8%;
  bottom: 35%;
  z-index: 9;
}

.logo1{
	padding: 8vw 6vw;
	width: 80%;
}

.small-j2{
	font-size: 3.8vw;
	padding: 1vw 8vw 5vw 12vw;
	text-align: right;
	line-height: 1.5;
}

.small-e2{
	font-family:  "Helvetica","futura-pt", "sans-serif";
	font-size: 12px;
	padding: 0 8vw 5vw 12vw;
	line-height: 1.5;
	text-align: right;
}

/** -------- タブレット -------- **/
@media screen and (min-width: 539px) {
.layer1 div.sp {
/*	top: 0;*/
	top: -500px;
	height: 900px;
}

.small-j2{
	padding: 0 10vw 0 10vw;
}

.small-e2{
	font-size: 15px;
	padding: 3vw 10vw 3vw 10vw;
}
}
/** -------- PC-------- **/
@media screen and (min-width: 1024px) {
.col-2{
	display: flex;
}

.logo1{
	padding: 11vw 6vw 5vw 6vw;
	width: 90%;
	margin: auto;
}

.layer1{
	width: 60vw;
	height: 100vh;
	background-image: none;
}
.layer1 img.pc {
	display: inline;
	height: 100%;
	max-width: inherit;
	width: 120%;
	position: absolute;
	left: -57px;
}
.layer1 div.sp {
	display: none;
}

.button-wrap {
  right: 45%;
  bottom: 7%;
}

.item2 {
	height: 100vh;
	width: 40vw;
}

.small-j2{
	padding: 0 0 5vw 0;
	text-align: center;
	font-size: 1.3vw;
}

.small-e2{
	font-size: 1vw;
	line-height: 2;
	padding: 0 0 0 0;
	text-align: center;
}
}

/** -----------------------------------
    ボタン
-------------------------------------**/
/* riservatinタグ*/
.c-btn_arrow1{
  width: 120px;
  height: 23px;
  display: inline-block;
  border: solid 1px #fff;
	text-align: center;
  color: #fff;
  line-height: 1.2;
  font-size: 18px;
	letter-spacing: 0.03em;
  text-decoration: none;
  -webkit-transition: .4s;
  transition: .4s;
	font-family:  "futura-pt", "sans-serif";
	font-weight: 500;
	font-style: normal;
}

.c-btn_arrow1:hover{
	background:#494949;
	color:#fff;
}

/* moreタグ*/
.c-btn_arrow{
  width: 100px;
  height: 23px;
  display: inline-block;
  border: solid 1px #fff;
	text-align: center;
  color: #fff;
  line-height: 1;
  font-size: 18px;
	letter-spacing: 0.03em;
  text-decoration: none;
  -webkit-transition: .4s;
  transition: .4s;
	font-family: "futura-pt", "sans-serif";
	font-weight: 500;
	font-style: normal;
}

.c-btn_arrow:hover{
	background:#494949;
	color:#fff;
}

/** -------- タブレット -------- **/
@media screen and (min-width: 600px) {
.c-btn_arrow1{
	 width: 270px;
	 height: 50px;
	 line-height: 1.3;
	 font-size: 40px;
}

.c-btn_arrow{
	 width: 250px;
	 height: 50px;
	 line-height: 1;
	 font-size: 40px;
}
}
/** -------- PC -------- **/
@media screen and (min-width: 1024px) {
.c-btn_arrow1{
	 width: 180px;
	 height: 30px;
	 line-height: 1.1;
	 font-size: 25px;
}

.c-btn_arrow{
	 width: 160px;
	 height: 30px;
	 line-height: 1;
	 font-size: 25px;
}
}

/** -----------------------------------
    麺
-------------------------------------**/
#men{
	position: relative;
}

.men-image{
	/*background-image: url("../images/nishimuramen.jpg");*/
	background-size: cover;
	background-position: center center;
	width: 100vw;
	height: 70vh;
	overflow: hidden;
	position: relative;
}
.men-image div.sp {
	position: absolute;
	left: 0;
/*	top: 0;*/
	top: -500px;
	width: 100%;
	height: 700px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url("../images/nishimuramen.jpg");
}
.men-image img.pc {
	display: none;
}

.item2-2{
	display: flex;
	justify-content: space-around;
	height: 30vh;
}

.logo2 {
	padding: 9vw 0 0 12vw;
	width: 18%;
}

.men-text{
	padding: 14vw 7vw 0 0;
}

.small-j3{
	font-size: 3.8vw;
	padding: 0 0 5vw 8vw;
	line-height: 1.5;
	text-align: right;
}

.small-e3{
	font-family: "Helvetica", "futura-pt", "sans-serif";
	font-size: 10px;
	padding: 0 0 5vw 8vw;
	line-height: 1.5;
	text-align: right;
}

/** -------- タブレット -------- **/
@media screen and (min-width: 600px) {
.logo2 {
	padding: 5vw 0 0 12vw;
}

.logo2 img{
	width: 90%;
}

.small-j3{
	padding: 0 0 7vw 10vw;
}

.small-e3{
	font-size: 15px;
	padding: 0 0 7vw 10vw;
}

.men-image div.sp {
/*	top: 0;*/
	top: -700px;
	height: 900px;
}
}

/** -------- PC -------- **/
@media screen and (min-width: 1024px) {
.men-image{
	width: 60vw;
	height: 100vh;
	background-image: none;
	overflow: hidden;
}
.men-image img.pc {
	display: inline;
	height: 100%;
	width: 120%;
	max-width: inherit;
	position: absolute;
	left: -57px;
}
.men-image div.sp {
	display: none;
}

.item2-2{
	display: flex;
	height: 100vh;
	width: 40vw;
}

.logo2 {
	padding: 12vw 0 0 4vw;
}

.logo2 img{
	width: 100%;
}

.men-text{
	padding: 15vw 5vw 0 5vw;
}

.small-j3{
	font-size: 1.3vw;
	padding: 0 0 7vw 0;
}

.small-e3{
	font-size: 0.8vw;
	padding: 0 0 7vw 0;
}
}

/** -----------------------------------
    西村や
-------------------------------------**/
#nishimuraya{
	position: relative;
}

.nishimuraya-image{
	position: relative;
	/*background-image: url("../images/1_f.jpg");*/
	background-size: cover;
	background-position: center center;
	width: 100vw;
	height: 70vh;
	overflow: hidden;
	position: relative;
}
.nishimuraya-image div.sp {
	position: absolute;
	left: 0;
/*	top: 0;*/
	top: -700px;
	width: 100%;
	height: 700px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	/* background-image: url("../images/1_f.jpg"); */
	background-image: url("../images/nishimuraya-top.jpg");
}
.nishimuraya-image img.pc {
	display: none;
}

.nishimuraya .item2 {
	display: flex;
}

.logo3 {
	/* padding:5vw 0 0 10vw;
	width: 30%; */
	padding: 9vw 0 0 12vw;
	width: 18%;
}

.nishimurayalogo {
	width: 30px;
}

.nishimuraya .small-j3 {
	width: 230px;
	padding: 0 0 5vw 0;
}

.small-j4{
	font-size: 10px;
	padding: 0 8vw 7vw 12vw;
	line-height: 1.5;
}

.small-e4{
	font-family: "Helvetica", "futura-pt", "sans-serif";
	font-size: 14px;
	padding: 5vw 15vw 0 0;
	text-align: right;
	line-height: 1.5;
}

/** -------- タブレット -------- **/
@media screen and (min-width: 600px) {
.logo3 {
	width: 55%;
}

.nishimurayalogo {
	width: 42px;
}

.nishimuraya .small-e4{
	font-size: 4vw;
	padding: 0 15vw 0 0;
}

@media (min-width: 768px) and (max-width: 1023px) {
	.nishimuraya .small-j3 {
		width: 555px;
		padding: 0 0 7vw 0;
	}
}

.nishimuraya-image div.sp {
/*	top: 0;*/
	top: -800px;
	height: 900px;
}
}
/** -------- PC -------- **/
@media screen and (min-width: 1024px) {
.nishimuraya-image{
	width: 60vw;
	height: 100vh;
	background-image: none;
}
.nishimuraya-image img.pc {
	display: inline;
	height: 100%;
	width: 120%;
	max-width: inherit;
	position: absolute;
	left: -57px;
}
.nishimuraya-image div.sp {
	display: none;
}

.men-text {
	padding: 15vw 6vw 0 1vw;
}
@media (min-width: 1024px) and (max-width: 1199px) {
	.men-text {
		padding: 15vw 1.5vw 0 0vw;
	}
}

.logo3 {
	/* padding: 20% 0 0 0; */
	padding: 12vw 0 0 4vw !important;
	/* width: 50%; */
	width: inherit !important;
	/* margin: auto; */
	margin: inherit !important;
}

/* .nishimurayalogo {
	width: 20%;
} */

.small-j4{
	font-size: 2vw;
	line-height: 2;
}

.small-e4{
	font-size: 1.7vw;
	line-height: 2;
	padding: 5vw 0 0 3vw;
	text-align: center;
}
}

/** -----------------------------------
    f/1
-------------------------------------**/
#f1{
	position: relative;
}

.f1-image{
	position: relative;
	/*background-image: url("../images/1_f.jpg");*/
	background-size: cover;
	background-position: center center;
	width: 100vw;
	height: 70vh;
	overflow: hidden;
	position: relative;
}
.f1-image div.sp {
	position: absolute;
	left: 0;
/*	top: 0;*/
	top: -700px;
	width: 100%;
	height: 700px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url("../images/1_f.jpg");
}
.f1-image img.pc {
	display: none;
}

.logo3 {
	padding:5vw 0 0 10vw;
	width: 55%;
}

.small-j4{
	font-size: 10px;
	padding: 0 8vw 7vw 12vw;
	line-height: 1.5;
}

.small-e4{
	font-family: "Helvetica", "futura-pt", "sans-serif";
	font-size: 14px;
	padding: 5vw 15vw 0 0;
	text-align: right;
	line-height: 1.5;
}

/** -------- タブレット -------- **/
@media screen and (min-width: 600px) {
.logo3 {
	width: 55%;
}

.small-e4{
	font-size: 4vw;
	padding: 0 15vw 0 0;
}

.f1-image div.sp {
/*	top: 0;*/
	top: -800px;
	height: 900px;
}
}
/** -------- PC -------- **/
@media screen and (min-width: 1024px) {
.f1-image{
	width: 60vw;
	height: 100vh;
	background-image: none;
}
.f1-image img.pc {
	display: inline;
	height: 100%;
	width: 120%;
	max-width: inherit;
	position: absolute;
	left: -57px;
}
.f1-image div.sp {
	display: none;
}

.logo3 {
	padding: 20% 0 0 0;
	width: 50%;
	margin: auto;
}


.small-j4{
	font-size: 2vw;
	line-height: 2;
}

.small-e4{
	font-size: 1.7vw;
	line-height: 2;
	padding: 5vw 0 0 3vw;
	text-align: center;
}
}

/** -----------------------------------
    onlineshop
-------------------------------------**/
#onlineshop{
	position: relative;
}

.onlineshop-image{
	position: relative;
	/*background-image: url("../images/onlineshop.jpg");*/
	background-size: cover;
	background-position: center center;
	width: 100vw;
	height: 70vh;
	overflow: hidden;
	position: relative;
}
.onlineshop-image div.sp {
	position: absolute;
	left: 0;
/*	top: 0;*/
	top: -750px;
	width: 100%;
	height: 700px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url("../images/onlineshop.jpg");
}
.onlineshop-image img.pc {
	display: none;
}

.logo4{
	padding: 10vw 0 5vw 10vw;
	width: 50%;
}

.small-j5{
	font-size: 3.8vw;
	padding: 5vw 8vw 4vw 12vw;
	line-height: 1.5;
	text-align: right;
}

.small-e5{
	font-family:  "Helvetica","futura-pt", "sans-serif";
	font-size: 10px;
	padding: 0 8vw 4vw 12vw;
	line-height: 1.5;
	text-align: right;
}

/** -------- タブレット -------- **/
@media screen and (min-width: 600px) {
.logo4{
	padding: 8% 0 5% 6%;
}

.logo4 img{
	width: 80%;
}

.small-j5{
	font-size: 3.4vw;
	padding: 0 10vw 3vw 10vw;
}

.small-e5{
	font-size: 15px;
	padding: 0 10vw 3vw 10vw;
}

.onlineshop-image div.sp {
/*	top: 0;*/
	top: -1000px;
	height: 900px;
}
}

/** -------- PC -------- **/
@media screen and (min-width: 1024px) {
.onlineshop-image{
	width: 60vw;
	height: 100vh;
	background-image: none;
}
.onlineshop-image img.pc {
	display: inline;
	height: 100%;
	width: 120%;
	max-width: inherit;
	position: absolute;
	left: -57px;
}
.onlineshop-image div.sp {
	display: none;
}

.logo4 img{
	width: 100%;
}

.logo4 {
	padding: 30% 0 0 0;
	width: 35%;
	margin: auto;
}

.small-j5{
	font-size: 1.2vw;
	line-height: 2;
	padding: 5vw 0 0 0;
	text-align: center;
}

.small-e5{
	font-size: 1vw;
	line-height: 2;
	padding: 3vw 0 0 0;
	text-align: center;
}
}
/** -----------------------------------
    access
-------------------------------------**/
.access-image{
	position: relative;
	background-image: url("../images/footer.png");
	background-size: cover;
	background-position: center center;
	width: 100vw;
	height: 100vh;
}

.asccess-text{
	text-align: center;
	top: 43%;
	position: absolute;
}

.asccess-btn{
	position: absolute;
  left: 0;
  right: 0;
  margin: auto;
	top: 63%;
}

.asccess-text p{
	padding-bottom: 10px;
	font-size: 13px;
}

.logo5{
	width: 30%;
	margin: auto;
}

.buttonmap{
	padding-bottom: 20px;
}

.riclute{
	padding-bottom: 20px;
}

.button-maps {
  display: block;
  width: 170px;
  height: 40px;
  color: #494949;
  font-size: 8px;
  letter-spacing: 0.06em;
  line-height: 40px;
  position: relative;
  z-index: 9;
  background-color: #fff;
  overflow: hidden;
	display: flex;
  justify-content: center;
  align-items: center;
	margin: 0 auto;
	-webkit-transition: .4s;
	transition: .4s;
	font-family: "Helvetica","futura-pt", "sans-serif";
}

.button-maps:hover {
	background-color: #494949;
  color: #faf6e9;
}


/** -------- タブレット -------- **/
@media screen and (min-width: 600px) {
.asccess-text{
	font-size: 3vw;
	top: 37%;
}

.logo5{
	width: 20%;
}

.asccess-btn{
	top: 50%;
}

.button-maps {
  width: 250px;
  height: 60px;
  font-size: 12px;
}
}

/** -------- PC -------- **/
@media screen and (min-width: 1024px) {
.asccess-text{
	font-size: 1vw;
	top: 30%;
}

.asccess-btn {
	top: 53%;
}

.logo5{
	width: 10%;
}

.asccess-text p{
	padding-bottom: 30px;
}

.button-maps {
	width: 150px;
	height: 40px;
	font-size: 0.5vw;
}
}