@charset "utf-8";

html, body {height: 100%;}

body, text {
font-family: 'Noto Serif JP', serif;
word-break: break-all;
-webkit-text-size-adjust: 100%;
letter-spacing: 1px;
font-weight: 500;
font-size: 18px;
line-height: 1.6;
margin: 0;}

a:hover {color: #8b7456;}
a {text-decoration: none;}
a{outline: none;}
:focus {outline: none;}
::-moz-focus-inner {border: 0;}

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;}

img {vertical-align: bottom;}

h1, h2, h3, p {margin: 0; font-size: 100%;}
ul, li {list-style: none; margin: 0; padding: 0;}


/* First view -------------------------------------------------------- */
.first-contents {
border: 1px solid rgba(0,0,0,0);
min-height: 100vh;
background: url("image/fc-bg.png") center center / cover no-repeat;
position: relative;}

.main-logo {margin: auto; width: 400px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 120px;}
.main-logo img {display: block; width: 100%;}

/* under 800 -------------------------------------------------------- */
@media screen and (max-width : 800px) {
.main-logo {width: 260px; height: 180px;}
}


/* Headder area -----------------------------------------------------*/
#top-head {
position: fixed;
width: 100%;
height: 70px;
z-index: 9000;}


/* GlobalMenuSp ---------------------------------------------------*/
.globalMenuSp {
border-left: 1px solid #eaeaea;
box-shadow:0px 0px 10px rgba(0, 0, 0, .0);
z-index: 8100;
top: 0;
left: auto;
right: 0;
margin: auto;
position: fixed;
transform: translateX(100%);
transition: all .5s;
width: 300px;
text-align: center;
background-color: #fff;
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;}

.globalMenuSp ul {
width: 80%;
margin: 80px auto 30px;}

.globalMenuSp li {
list-style-type: none;
padding: 0;
width: 100%;
border-bottom: 1px solid #efefef;}

.globalMenuSp li a {
display: block;
padding: 20px 0;
letter-spacing: 3px;
color: #000;}

.globalMenuSp li a:hover {color: #897400;}

.globalMenuSp.active {transform: translateX(0px);}

.navToggle {
display: block;
position: fixed;
margin: auto;
top: 0px;
right: 0px;
width: 70px;
height: 70px;
cursor: pointer;
z-index: 8200;
background-color: #fff;
text-align: center;}

.navToggle span {
display: block;
position: absolute;
width: 30px;
border-bottom: solid 1px #000;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
transition: .5s ease-in-out;
left: 20px;}

.navToggle span:nth-child(1) {
top: 18px;}

.navToggle span:nth-child(2) {
top: 28px;}

.navToggle span:nth-child(3) {
top: 38px;}

.navToggle span:nth-child(4) {
border: none;
color: #eee;
font-size: 10px;
font-weight: bold;
top: 54px;
letter-spacing: 1px;}

.navToggle.active span:nth-child(1) {
top: 28px;
left: 20px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);}

.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
top: 28px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);}

.main-manu-en {display: block; font-size: 110%; line-height: 16px; font-family: 'Marcellus SC', serif; font-weight: bold;}
.main-manu-ja {display: block; font-size: 13px; line-height: 13px; margin-top: 8px;}

.side-tel {width: 180px; margin: 30px auto;}
.menu-text {margin-top: 37px; font-size: 55%; letter-spacing: 1; text-indent: 1px;}

/* under 800 -------------------------------------------------------- */
@media screen and (max-width : 800px) {
.globalMenuSp {width: 100%;}
.menu-text {font-size: 65%;}
.main-manu-en {font-size: 20px;}
}


/* Top page -------------------------------------------------------- */
/* MENU AREA */
.menu-list {overflow: hidden;}

.menu-list li {
position: relative;
float: left;
width: 33.333333333333%;
height: 23vw;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;}

.list-inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 80px;
margin: auto;}

.steak {background-image: url(image/steak-bg.png);}
.sukiyaki {background-image: url(image/sukiyaki-bg.png);}
.alacarte {background-image: url(image/alacarte-bg.png);}
.ippin {background-image: url(image/ippin-bg.png);}
.lunch {background-image: url(image/lunch-bg.png);}
.drink {background-image: url(image/drink-bg.png);}

.menu-ttl {color: #fff; font-weight: 700;}

.menu-more a {
font-size: 90%;
display: inline-block;
padding: 10px 30px 8px;
color: #c89c25;
background-color: #fff;
margin: 15px auto 0;
line-height: 18px;
font-family: 'Nunito', sans-serif;
border-radius: 3px;}

.menu-more a:hover {
color: #fff;
background-color: #c89c25;}

/* under 800 -------------------------------------------------------- */
@media screen and (max-width : 800px) {
.menu-ttl {color: #fff; font-size: 22px;}
.menu-list li {width: 100%; height: 60vw;}
.list-inner {height: 98px;}
.menu-more a {padding: 10px 40px 8px; font-size: 100%;}
}


/* INFO AREA */
.info-area-box {overflow: hidden;}

.info-area-box-left, .info-area-box-left2 {
position: relative;
float: left;
width: 50%;
height: 33vw;}

.info-area-box-right, .info-area-box-right2 {
position: relative;
float: right;
width: 50%;
height: 33vw;}

.info-area-box-left-text, .info-area-box-right-text {
width: 90%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
height: 270px;}

.bg1, .bg2, .bg3, .bg4 {
background-position: center 24%;
background-repeat: no-repeat;
background-size: 60%;}

.bg1 {background-image: url(image/bg1.png);}
.bg2 {background-image: url(image/bg2.png);}
.bg3 {background-image: url(image/bg3.png);}
.bg4 {background-image: url(image/bg4.png);}

/* under 1200 -------------------------------------------------------- */
@media screen and (max-width : 1200px) {
.info-area-box-left-text, .info-area-box-right-text {
font-size: 1.6vw;
width: 95%;
height: 230px;}

.info-area-box .font-size25 {font-size: 22px;}
}

/* under 800 -------------------------------------------------------- */
@media screen and (max-width : 800px) {
.info-area-box-left, .info-area-box-right2 {
float: none;
width: 100%;
height: 70vw;}

.info-area-box-right, .info-area-box-left2 {
float: none;
width: 100%;
height: 200px;
margin-top: 20px;}

.info-area-box-left-text, .info-area-box-right-text {
width: 100%;
margin: 0 auto;
font-size: 16px;
height: auto;}

.bg1, .bg2, .bg3 {background-position: center 20%;}

.flex-order {display: flex; flex-direction: column;}
.order1 {order: 2; width: 100%;}
.order2 {order: 1; width: 100%;}
}

/* under 500 -------------------------------------------------------- */
@media screen and (max-width : 500px) {
.info-area-box-left-text, .info-area-box-right-text {font-size: 3.5vw;}
}


/* CONTACT AREA */
.contact-area, .meet-contact-area {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
color: #fff;
padding: 100px 0;}

.contact-area {background-image: url(image/gaikan-phpto.png);}
.meet-contact-area {background-image: url(image/meet-gaikan-phpto.png);}

.tel {
font-family: 'PT Sans Caption', sans-serif;
font-size: 40px;
margin-bottom: 20px;}

/* under 800 -------------------------------------------------------- */
@media screen and (max-width : 800px) {
.tel {font-size: 30px;}
}


/* Loop slideshow AREA */
#roop {
width: 100%;
height: 250px;
background: url(image/slide.jpg) repeat-x;
background-position: 0 0;
background-size: cover;
-webkit-animation: bgroop 50s linear infinite;
animation: bgroop 50s linear infinite;}

@-webkit-keyframes bgroop {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -3200px 0;
    }
}
@keyframes bgroop {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -3200px 0;
    }
}

/* under 800 -------------------------------------------------------- */
@media screen and (max-width : 800px) {
#roop {
margin-bottom: 60px;
height: 160px;
-webkit-animation: bgroop 60s linear infinite;
animation: bgroop 60s linear infinite;}
}


/* BANNER AREA */
.baner-area {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 460px;
position: relative;}

.baner-area {background-image: url(image/yoshida-seinikuten.png);}

.baner-area-box {
position: absolute;
top: 0;
left: 15%;
bottom: 0;
margin: auto;
height: 70px;
color: #000;
font-size: 24px;
letter-spacing: 5px;
font-weight: 700}

.baner-area-box span {
padding: 0 30px;
display: block;
background-color: rgb(255,255,255, .7);
border-radius: 10px;
line-height: 3;}

.takeout-area-wrap {
padding: 100px 0;
background-image: url(image/takeout-bg.png);
background-position: top 48% center;
background-repeat: no-repeat;
background-size: 750px;}

.takeout-img {width: 280px; margin: 0 auto;}
.takeout-area {margin-top: 80px;}

.link {
width: 200px;
border-radius: 10px;
text-align: center;
margin: 0 auto;}

.link a {
display: block;
padding: 10px;
color: #000;
background-color: #ebebeb;
border: 1px solid #ebebeb;
border-radius: 10px;
letter-spacing: 3px;
text-indent: 3px;
font-weight: bold;}

.link a:hover {
background-color: #fff;
border: 1px solid #ccc;}

/* under 800 -------------------------------------------------------- */
@media screen and (max-width : 800px) {
.baner-area {height: 200px;}
.takeout-area-wrap {padding: 0 0 60px; background-position: top 28% center; background-size: 85%;}
.takeout-img {width: 240px;}
.takeout-area {margin-top: 30px;}
.link a {padding: 7px;}

.baner-area-box {
width: 240px;
left: 0;
right: 0;
height: 50px;
font-size: 18px;
letter-spacing: 3px;}

.baner-area-box span {text-align: center; padding: 0;}
}


/* FOOTER -------------------------------------------------------- */
footer {background-color: #000; padding: 20px 0; color: #fff;}
address {font-size: 13px; font-style: normal; text-align: center; letter-spacing: 2px;}
.map {margin: 5px 0 15px;}
.map a {color: #fff; font-size: 13px; text-decoration: underline;}
.copy {font-size: 13px; text-align: center; letter-spacing: 2px;}


/* MENU PAGE -------------------------------------------------------- */
.menu-block-inner {overflow: hidden; max-width: 1000px; width: 90%; margin: 50px auto 80px;}

.menu-block-inner li {padding: 30px 0; border-bottom: 1px dashed #9b9b9b; overflow: hidden;}
.menu-block-inner li:first-child {padding: 0 0 30px; border-bottom: 1px dashed #9b9b9b; overflow: hidden;}

.menu-left {
float: left;
width: 70%;}

.menu-right {
float: right;
width: 30%;
text-align: right;
font-size: 16px;}

.steak-menu,
.sukiyaki-menu,
.teppan-menu,
.ippin-menu,
.lunch-menu,
.drink-menu {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 300px;
position: relative;}

.steak-menu p,
.sukiyaki-menu p,
.teppan-menu p,
.ippin-menu p,
.lunch-menu p,
.drink-menu p {
font-size: 25px;
color: #fff;
text-align: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
height: 40px;}

.steak-menu {background-image: url(image/steak-menu-ttl-bg.png);}
.sukiyaki-menu {background-image: url(image/sukiyaki-menu-ttl-bg.png);}
.teppan-menu {background-image: url(image/teppan-menu-ttl-bg.png);}
.ippin-menu {background-image: url(image/ippin-menu-ttl-bg.png);}
.lunch-menu {background-image: url(image/lunch-menu-ttl-bg.png);}
.drink-menu {background-image: url(image/drink-menu-ttl-bg.png);}

.red {color: #c10000;}
.dashed {border-bottom: 1px dashed #fff;}
.font-small {font-size: 14px;}
.menu-block-ttl {font-weight: 900;}

/* under 800 -------------------------------------------------------- */
@media screen and (max-width : 800px) {
.menu-block-inner {margin: 30px auto 50px;}
.menu-block-inner li {padding: 15px 0;}
.menu-block-inner li:first-child {padding: 0 0 15px;}

.steak-menu,
.sukiyaki-menu,
.teppan-menu,
.ippin-menu,
.lunch-menu,
.drink-menu 
{height: 200px;}

.menu-block-ttl {font-size: 18px;}

.menu-left {
float: none;
width: 100%;}

.menu-right {
float: none;
width: 100%;
text-align: left;}
}


/* TAKEOUT PAGE -------------------------------------------------------- */
.takeout-title {font-size: 20px;}


/* Yoshidameet PAGE -------------------------------------------------------- */
.meet-photo {margin-bottom: 20px;}
.meet-text {margin-bottom: 40px;}


/* Opning -------------------------------------------------------- */
.opning {
background: #fff;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10000;}

.opning ul {
width: 350px;
margin: auto;
position: fixed;
top: 38%;
left: 0;
right: 0;
z-index: 10001;}

.opning li {
width: 100%;}

.opning ul, .opning-logo, .opning-chacha {display: none;}

.opning img {width: 100%;}

/* under 800 -------------------------------------------------------- */
@media (max-width : 800px) {
.opning ul {width: 300px; top: 30%;}
}


/* Scrollanime -------------------------------------------------------- */
.scrollanime {opacity: 0;}
.fadeInDown {
animation-name: fadeInDown;
animation-duration: 2s;
animation-fill-mode: forwards;}

@keyframes fadeInDown {
0% {opacity: 0;}
100% {
opacity: 1;
transform: translate(0);}
}
 
.updown {transform: translateY(-50px);}
.downup {transform: translateY(50px);}
 
.sect02 {overflow: hidden;}
.slide-right {transform: translateX(50px);}
.slide-left {transform: translateX(-50px);}


/* Scroll down -------------------------------------------------------- */
.hero__scroll {
position: absolute;
color: #fff;
text-align: center;
font-size: 80%;
letter-spacing: 3px;
text-indent: 3px;
font-family: 'Nunito', sans-serif;
margin: 10% auto 0;
display: block;
top: auto;
right: 0;
bottom: 30px;
left: 0;
margin-right: auto;
margin-left: auto;
text-transform: uppercase;}

.hero__scroll img  {width: 20px;}

.hero__scroll .chevron {
display: block;
-webkit-animation: pulse 2s infinite;
animation: pulse 2s infinite;}

@-webkit-keyframes pulse {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0); }
50% {
-webkit-transform: translate(0, 10px);
transform: translate(0, 10px); }
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0); }}

@keyframes pulse {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);}
50% {
-webkit-transform: translate(0, 10px);
transform: translate(0, 10px);}
  100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);}}


/* Other -------------------------------------------------------- */
main {background-color: #fff; display: block;}
.section-inner {max-width: 1000px; width: 90%; margin: 0 auto; padding: 0 0 100px;}
.section-inner2 {max-width: 1000px; width: 90%; margin: 0 auto; padding: 100px 0;}

.center, .center2 {text-align: center;}
.font-size25 {font-size: 25px; letter-spacing: 5px; text-indent: 5px; margin-bottom: 20px;}
.bold700 {font-weight: 700;}
.bold900 {font-weight: 900;}
.line-height3 {line-height: 3;}
.block-ttl {margin: 40px auto 20px; font-size: 26px; letter-spacing: 5px; text-indent: 5px;}

.subpage-title-wrap {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 240px;}

.subpage-title-en {
line-height: 35px;
font-family: 'Marcellus SC', serif;
font-size: 50px;
letter-spacing: 5px;
text-indent: 5px;}

.subpage-title-ja {font-weight: normal;}

/* under 800 -------------------------------------------------------- */
@media (max-width : 800px) {
body, text {font-size: 16px; line-height: 2;}
.section-inner {padding: 0 0 60px;}
.section-inner2 {padding: 60px 0;}
.pc {display: none;}

.subpage-title-wrap {height: 100px;}
.subpage-title-en {font-size: 37px;}

.line-height3 {line-height: 2;}
.center2 {text-align: left;}
}

/* over 800 -------------------------------------------------------- */
@media (min-width : 801px) {
.spbr, .sp {display: none;}
}