@charset "UTF-8";

body {
    font-family: "Helvetica Neue","Helvetica","YuGothic Medium","游ゴシック","YuGothic",
    "ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",sans-serif;
    color: #202124;
}

/* リンクの色
a { color: #ffa035;
}
a :visited { color: #ffa035;
} */

.container {
    max-width: 100%;
    width: 660px;
    margin: 0 auto;
}

@media screen and (min-width: 480px) { /*ウィンドウ幅が480px以上の場合に適用*/
    .menu {
        display: flex;
        flex-wrap: wrap;
        width: 660px;
        height: 330px;
        -ms-writing-mode: tb-rl; /* 縦書き */
        writing-mode: horizontal-tb;; /* 横書き */
        overflow-x:s hidden;
        overflow-y: scroll;
    }
    .menu a {
        font-family: "Helvetica Neue","Helvetica","YuGothic Medium",sans-serif;
        height: 18px;
        width: 600px;
        font-size: 0.74em;
        text-decoration: none;
        /* background: #fff; */
        border-style: solid;
        border-width: 0.5px;
        border-color: #DABC91;
        border-radius: 1px;
        padding: 7px;
        margin: 4px;
        color: #fff; 
        text-align: justify; /* ボタンリンクの文字 均等割り付け */
        background: /* 木目調背景 */
        linear-gradient(
          90deg,
          rgba(208, 147, 82, 0.6),
          rgba(192, 134, 70, 0.6) 60%,
          rgba(208, 147, 82, 0.6)
        ),
        repeating-radial-gradient(
          ellipse at 500% 60%,
          #DABC91,
          #DABC91 0.2%,
          #EFCD9A 0.6%,
          #EFCD9A 1%
        );
    }
    .menu a:hover {
        opacity: 0.8;
    }    
}

@media screen and (max-width: 660px) { /*ウィンドウ幅が480px以下の場合に適用*/
    .menu {
        /* display: flex; */
        flex-wrap: wrap;
        width: 330px;
        height: 300px;
        -ms-writing-mode: tb-rl; /* 縦書き */
        writing-mode: horizontal-tb; /* 横書き */
        overflow-x: hidden;
        overflow-y: scroll;
    }
    .menu a {
        font-family: "Helvetica Neue","Helvetica","YuGothic Medium",sans-serif;
        height: 28px;
        width: 330px;
        font-size: 0.74em;
        text-decoration: none;
        /* background: #fff; */
        border-style: solid;
        border-width: 0.5px;
        border-color: #DABC91;
        border-radius: 1px;
        padding: 7px;
        margin: 4px;
        color: #fff; 
        text-align: justify; /* ボタンリンクの文字 均等割り付け */
        background: /* 木目調背景 */
        linear-gradient(
          90deg,
          rgba(208, 147, 82, 0.6),
          rgba(192, 134, 70, 0.6) 60%,
          rgba(208, 147, 82, 0.6)
        ),
        repeating-radial-gradient(
          ellipse at 500% 60%,
          #DABC91,
          #DABC91 0.2%,
          #EFCD9A 0.6%,
          #EFCD9A 1%
        );
    }
    .menu a:hover {
        opacity: 0.8;
    }    
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: auto; /* ボタンリンクを上寄せ */
}

img {
    max-width: 100%;
    height: auto;
}

.sushi {
    margin: 20px 0px;
}

.price {
    display: flex;
}

.sara {
    margin-right: 5px;
}

.top_menu {
    margin: 40px 0;
}

.button a {
    text-decoration: none;
    display: block;
    text-align: center;
    font-size: 14px;
    background: #ffa035;
    border-radius: 4px;
    padding: 12px;
    color: #fff; 
}
.button a:hover {
    opacity: 0.8;
}

.omikuji a {
    text-decoration: none;
    display: block;
    text-align: center;
    font-size: 14px;
    background: #ffa035;
    border-radius: 4px;
    padding: 12px;
    margin: 20px 0;
    color: #fff; 
}
.omikuji a:hover {
    opacity: 0.8;
}

.twitter a {
    text-decoration: none;
    display: block;
    text-align: center;
    font-size: 14px;
    background: #00acee;
    border-radius: 4px;
    padding: 12px;
    margin: 20px 0px;
    color: #fff; 
}
.twitter a:hover {
    opacity: 0.8;
}

.facebook a {
    text-decoration: none;
    display: block;
    text-align: center;
    font-size: 14px;
    background: #3b5998;
    border-radius: 4px;
    padding: 12px;
    margin: 20px 0;
    color: #fff; 
}
.facebook a:hover {
    opacity: 0.8;
}

.line a {
    text-decoration: none;
    display: block;
    text-align: center;
    font-size: 14px;
    background: #06c755;
    border-radius: 4px;
    padding: 12px;
    margin: 20px 0;
    color: #fff; 
}
.line a:hover {
    opacity: 0.8;
}

.whatsapp a {
    text-decoration: none;
    display: block;
    text-align: center;
    font-size: 14px;
    background: #4FCE5d;
    border-radius: 4px;
    padding: 12px;
    margin: 20px 0;
    color: #fff; 
}
.whatsapp a:hover {
    background: #4FCE5d;
    opacity: 0.8;
    color: #fff
}

table {
	font-size:0.90em;
	width: 100%;
    table-layout: fixed;
	}
th, td {
    padding: 4px 8px;
}
th.width50 {
    width: 50%;
}
th.width30 {
    width: 30%;
}
th.width20 {
    width: 20%;
}

h3 {
    margin: 50px 0 15px 0;
}

h3 img {
    vertical-align: -28%; /* h3の皿画像をh3のテキスト中央に */
    margin: 4px;
}

/* スクロールの幅の設定 */
::-webkit-scrollbar {
width: 10px;
height: 10px;
margin: 100px 0 0 0;
}
    
/* スクロールの背景の設定 */
::-webkit-scrollbar-track {
border-radius: 3px;
box-shadow: 0 0 4px #E4E1EC inset;
}
    
/* スクロールのつまみ部分の設定 */
::-webkit-scrollbar-thumb {
border-radius: 3px;
background: #D0C8AB;
}

.nemuro-hanamaru-omikuji {
    font-size: 20px;
    font-weight: bold;
}

.emoji_area {
    overflow: hidden;
    width: 100%;
}

.emoji {
    margin:0; padding-left:600px; display:inline-block; white-space:nowrap;
	animation-name:marquee; animation-timing-function:linear;
	animation-duration:10s; animation-iteration-count:infinite;
}
@keyframes marquee {
	from   { transform: translate(0%);} 
	99%,to { transform: translate(-100%);}
}

/* トップに戻るボタン */
.page_top {
    width: 40px;
    height: 40px;
    position: fixed;
    right: 10px;
    bottom: 10px;
    background: #2C313B;
    opacity: 0.6;
    border-radius: 50%;
}

/* トップに戻るボタン Font Awesome */
.page_top::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f106';
    font-size: 26px;
    color: #ffffff;
    position: absolute;
    width: 30px;
    height: 28px;
    top: -5px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
}

/* トップに戻るボタンの動きをスムーズに */
html {
    scroll-behavior: smooth;
}

h2 {
    /*線の種類（実線） 太さ 色*/
    border-bottom: solid 3px black;
    margin: 40px 0px 16px 0;
}

/* グローバルナビ */
.nav {
    background-color: #fff;
    overflow-x: auto;
}
.nav ul {
    display: flex;
    width: max-content;
    margin: 0 auto;
    padding-left: 0;
    font-weight: bold;
    list-style-type: none; /* ulの丸を消す */
}
.nav li a {
    display: inline-block;
    height: 72px;
    padding: 0 16px;
    /* margin: 24px 0; */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #545454;
    text-decoration: none;
}
.nav ul :hover {
    opacity: 0.6;
    transition: 0.4s;
}