@charset "utf-8";
/*
Theme Name: sushi-toppin.
Description: sushi-toppin.
Version: 1.0
Author: Mediacloud Nomura
*/
/*-------------------
  reset css
-------------------*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
 vertical-align: baseline;
 background: transparent;
}
body {
 line-height: 1;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
 display: block;
}
ul, ol, li {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
 content: '';
 content: none;
}
a {
 margin: 0;
 padding: 0;
 font-size: 100%;
 vertical-align: baseline;
 background: transparent;
}
*, *::before, *::after {
 box-sizing: border-box;
}
/* change colours to suit your needs */
ins {
 background-color: #ff9;
 color: #000;
 text-decoration: none;
}
/* change colours to suit your needs */
mark {
 background-color: #ff9;
 color: #000;
 font-style: italic;
 font-weight: bold;
}
del {
 text-decoration: line-through;
}
abbr[title], dfn[title] {
 border-bottom: 1px dotted;
 cursor: help;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}
/* change border colour to suit your needs */
hr {
 display: block;
 height: 1px;
 border: 0;
 border-top: 1px solid #cccccc;
 margin: 1em 0;
 padding: 0;
}
input, select {
 vertical-align: middle;
}
/*-------------------
  共通CSS
-------------------*/
html, body {
 font-size: 22px;
 font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
 font-weight: 100;
 color: #333333;
}
p, td, th, li {
 line-height: 2;
}
*, *:before, *:after {
 -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 {
 width: 100%;
 height: auto;
 vertical-align: bottom;
}
.img-responsive {
 display: block;
 max-width: 100%;
 height: auto;
}
a {
 color: #232323;
 text-decoration: none;
}
/*a:hover {
 color: #ccc;
}
a:active {
 color: #ccc;
}*/
section {
 width: 100%;
}
.container {
 width: 100%;
}
.inner {
 max-width: 1024px;
 box-sizing: border-box;
 position: relative;
 margin: 0 auto;
}
.row {
 display: flex;
 flex-wrap: wrap;
}
/*----- Column -----*/
.Column2 {
 flex: 0 0 50%;
 padding: 0;
 max-width: 50%;
 position: relative;
}
.Column3 {
 flex: 0 0 calc(100% / 3);
 max-width: calc(100% / 3);
 padding: 0;
 position: relative;
}
.Column4_1 {
 flex: 0 0 15%;
 max-width: 15%;
 position: relative;
}
.Column4_3 {
 flex: 0 0 85%;
 max-width: 85%;
 position: relative;
}
/*----- text -----*/
/*h1 img {
 width: 45%;
}*/
h2 img {
	width: auto;
}
.section-title {
 text-align: center;
 margin: auto;
}
.section-title h2 {
 font-size: 36px;
 font-weight: 100;
 position: relative;
 margin-bottom: 120px;
}
.section-title h2:before {
 position: absolute;
 top: 100%;
 left: 50%;
 transform: translateX(-50%);
 height: 10px;
 width: 20px;
 content: "";
}
.section-title h2:after {
 position: absolute;
 top: 140%;
 left: 50%;
 transform: translateX(-50%);
 height: 75px;
 width: 1px;
 background-color: #707070;
 content: "";
}
.section-title p.sub-title {
 color: #707070;
 font-size: 26px;
 letter-spacing: 2px;
 margin-bottom: 140px;
}
.catch-copy {
 font-weight: 100;
 letter-spacing: .3em;
 line-height: 1.7;
 display: table-cell;
 writing-mode: vertical-rl;
 vertical-align: middle;
 position: absolute;
 right: 8%;
 top: 5%;
 z-index: 100;
 background: url("../img/bg-black.jpg");
 padding: 30px 20px;
 opacity: 0.9;
}
/*.en .catch-copy {
	letter-spacing: .3em;
}*/
/* phone */
.phone i {
 color: #A49256;
 padding-right: 10px;
 font-size: 17px;
}
/*----- header -----*/
/* header-nav */
.header-nav {
 padding: 16px 0;
 z-index: 9999!important;
}
.header-logo {
 width: 20%;
 margin:auto 0;
}
.nav-menu {
 text-align: center;
 margin: auto;
}
.nav-menu nav li {
 line-height: 0.5;
 text-align: center;
 padding: 0 20px;
}
.nav-menu nav li a {
 font-size: 16px;
 color: #fff;
 line-height: 1;
}
.nav-menu span {
 color: #aaa;
 font-size: 12px;
 letter-spacing: 1px;
}
.header-nav .phone {
 font-size: 24px;
 color: #A49256;
 padding: 0 0 0 30px;
 margin: auto;
}
.header-nav .phone i {
 font-size: 20px;
}
.active {
 opacity: 1;
 visibility: visible;
}
/*----- side-nav -----*/
.side-nav {
 text-align: center;
}
.side-nav h1 {
 width: 110px;
 margin: 40px auto;
}
.side-nav nav li a {
 margin: 40px auto;
}
.side-nav nav li a:hover, .side-nav nav li span:hover, .header-nav nav li a:hover, .header-nav nav li span:hover {
 background: none;

}
.side-nav nav li a:hover, .header-nav nav li a:hover, footer .nav-menu li a:hover{
 color: #A49256;
}
.side-nav nav li {
 line-height: 0.8;
 margin-bottom: 14%;
 letter-spacing: 1px;
}
.ja .side-nav nav li {
 font-weight: bold;
}
.ja .side-nav nav li:first-child {
 font-weight: normal;
}
.side-nav li span {
 color: #AEAEAE;
 font-size: 14px;
}
.side-nav p.phone {
 margin: 40px;
}
.side-nav p.phone i {
 color: #A49256;
 padding-right: 8px;
 font-size: 14px;
}
/* translation */
.translation-btn {
 margin: 0 auto;
 border: 1px solid #a49256;
 width: 180px;
 padding: 14px;
 font-size: 18px;
}
.translation-btn a {
 color: #a49256;
}
.translation-btn a:hover {
  opacity: 0.6;
 }
.fa-globe {
 font-size: 16px;
 padding-right: 5px;
}
/*-----  slider  -----*/
.slider {
 display: flex;
 height: 100vh;
 object-fit: cover; 
 background-repeat: no-repeat;
 background-position: center;
 background-size: cover; 
}
.main-img h2 {
 color: #fff;
 font-size: 24px;
}
/*----- language -----*/
.language {
  position: absolute;
  bottom: 50px;
  left: 35%;
  background: rgba(0,0,0,.4);
  padding: 15px 20px;
  text-align: center;
  border: 4px double #fff;
  z-index: 200;
  width: 340px;
}
.language ul li, .language ul li a {
  color: #fff;
  line-height: 1.2;
  letter-spacing: 1px;
  font-size: 18px;  
}
.language ul li span {
  color: #ccc;
  font-size: 14px;  
}

/*-----  Nav  -----*/
nav li a {
 text-align: center;
 font-size: 18px;
}
nav li a:hover {
 background: #C7B299;
 color: #fff;
}
nav .row {
align-items: center;
}
/*----- footer ------*/
footer {
 color: #fff;
 text-align: center;
}
footer .inner {
 padding: 60px 0;
}
footer img {
 width: 10%;
 margin-bottom: 60px;
}
footer .nav-menu {
 margin: 0 auto 60px;
}
footer .nav-menu nav ul {
 justify-content: center;
}
footer .nav-menu li {
 padding: 0 30px;
}
footer .nav-menu li a {
 color: #fff;
}
footer .nav-menu li a:hover {
 background: none;
}
footer p.phone {
 color: #A49256;
 font-size: 24px;
 margin-bottom: 40px;
}
address {
 text-align: center;
 font-size: 14px;
 padding: 20px 0;
 font-style: normal;
 background: #fff;
}
address, address a {
 color: #AEAEAE;
}
/*----- none -----*/
.pc-onry {
 display: block;
}
.sp-onry, .s-phone-onry {
 display: none;
}
.s-phone-none {
 display: block;
}
.ipad-onry {
 display: none;
}
/*----- bg -----*/
.bg-white {
 background: url("../img/bg-white.jpg");
}
/*.bg-white-gold {
 background: url("../img/bg-washi.jpg");
}*/
.bg-black {
 background: url("../img/bg-black.jpg");
}
.bg-gold {
 background: url("../img/bg-gold.jpg");
}
/*----- #ToTOP -----*/
#ToTOP {
 width: 80px;
 position: fixed;
 right: 0;
 bottom: 0;
 z-index: 100;
}
/*----- ornate -----*/
.ornate {
 position: relative;
 z-index: 90;
 left: 0;
 width: 23%;
}
/*------------------------------
  #MESSEAGE
------------------------------*/
#MESSAGE {
 padding: 140px 0 0;
 background: url("../img/bg-washi.jpg");
}
.message-img {
 padding: 0 10%;
}
#MESSAGE .ornate {
 bottom: 140px;
 left: 120px;
}
#MESSAGE .section-title {
 margin-top: -100px;
}
#MESSAGE p {
 padding: 0 90px;
}
.food-img {
 text-align: right;
/*  -webkit-clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 65%, 100% 100%, 0 100%);*/
}
.food-img img {
 width: 30%;
}
/*------------------------------
  #BELIFE
------------------------------*/
#BELIFE {
 background: url("../img/bg-white.jpg");
}
#BELIFE .catch-copy {
 top: -15%;
 right: 70%;
 font-size: 22px;
 letter-spacing: 13px;
 color: #fff;
/* background: url("../img/bg-black.jpg");
 padding: 30px 20px;
 opacity: 0.9;*/
}
#BELIFE .Column2 {
 padding: 60px 140px 140px;
}
#BELIFE .Column2.belife-img {
 padding: 0 0 140px 140px;
}
.en #BELIFE .catch-copy, .tha #BELIFE .catch-copy {
 letter-spacing: .3em;
}
/*------------------------------
  #MENU
------------------------------*/
#MENU {
 padding: 160px 0 0;
 color: #fff;
 text-align: center;
}
#MENU .section-title h2, #MENU .section-title p.sub-title {
 color: #fff;
}
#MENU .container {
 padding-bottom: 180px;
 background-size: 24%;
 background-image: url("../img/menu-ornate-top.png"), url("../img/menu-ornate-bottom.png");
 background-repeat: no-repeat, no-repeat;
 background-position: 10% 20%, 95% 100%;
}
#MENU p {
 font-size: 20px;
 padding-top: 10px;
}
.menu-item .Column3 {
 padding: 20px;
}
/*------------------------------
  #ACCESS
------------------------------*/
#ACCESS {
 color: #fff;
 padding-top: 160px;
 background: linear-gradient(to top, rgba(100, 85, 70, 0.5) 0%, rgba(100, 85, 70, 0.5) 100%), url("../img/access-bg.png");
 background-size: cover;
 background-position: center; 
}
#ACCESS p {
 color: #fff;
}
#ACCESS .section-title h2:after {
 background-color: #fff;
}
#ACCESS table {
 margin: 0 auto 140px;
 font-size: 18px;
 line-height: 1.7;
}
#ACCESS th {
 width: 40%;
 font-weight: 100;
 text-align: left;
}
#ACCESS td{
 width: 60%;
 padding-bottom: 40px;
}
/*------------------------------
  #RESERVE
------------------------------*/
#RESERVE {
 padding: 160px 0;
}
/* ornate */
.ornate-box {
 position: absolute;
 top: 10%;
 right: 0;
 text-align: center;
}
.ornate-box .ornate {
 width: 40%;
 transform: rotate( 260deg );
}
#RESERVE .row .Column2 img:first-child {
 margin-bottom: 40px;
}
/* info */
#RESERVE .section-title h2 {
 margin-top: 40px;
}
#RESERVE .section-title p.sub-title {
 margin-bottom: 80px;
}
#RESERVE p {
 text-align: center;
}
p.shop-info {
 margin-bottom: 80px;
}
/* btn */
.btn-box {
 text-align: center;
 margin: 0 auto;
}
.btn,
a.btn,
button.btn {
 width: 340px;
 position: relative;
 display: inline-block;
 padding: 20px 0;
 cursor: pointer;
 user-select: none;
 transition: all 0.3s;
 text-align: center;
 vertical-align: middle;
 text-decoration: none;
}
.btn-box i {
 font-size: 18px;
}
.btn-box .fa-phone {
 position: absolute;
 top: calc(50% - 0.5em);
 left: 3.5em;
}
.btn-box .fa-angle-right {
 position: absolute;
 top: calc(50% - 0.5em);
 right: 1rem;
}
.btn-box a {
 color: #fff;
 font-size: 24px;
}
.btn-box a:hover {
 opacity: 0.8;
}
p.btn-info {
 font-size: 16px;
 line-height: 1.7;
 color: #4D4D4D;
 margin: 20px 0 80px;
}