:root {
    --main-color: #006ce3;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
}

/*■■■■■■■■■■■■■■■■■■■

    リセット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;
    background: transparent;
    font-size: 100%;
    vertical-align: baseline;
    border: 0;
    outline: 0;
}

ol,
ul {
    list-style: none;
}

img {
    font-size: 0;
    line-height: 0;
    vertical-align: top;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 100ms;
}

a:hover {
    opacity: .5;
    transition: all 100ms;
}

h1,
h2,
h3,
h4 {
    font-weight: 300;
}

p {
    color: #666;
}

h1 {
    font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", HGS明朝E, メイリオ, Meiryo, serif;
}

.pc {
    display: block;
}

.sp {
    display: none;
}

#header {
    display: none;
}

/*■■■■■■■■■■■■■■■■■■■

    ヘッダー・フッター

■■■■■■■■■■■■■■■■■■■*/


.top_image_box {

    max-width: 700px;

    width: 100%;

    margin: 1.5rem auto 0px;

}


.top_image_box img {

    width: 100%;

    height: auto;

}



.content-wrapper {
    display: flex;
}

.main-content {
    width: 100%;
    align-items: center;
    justify-content: center;
}

#mainvisual {
    position: relative;
    margin: auto;
}

.backimage1 img {
    width: 100%
}


.logo_1 {
    position: absolute;
    top: 30%;
    left: 52%;
    transform: translate(-50%, -50%);
    width: 26%;
    max-width: 483px;
}

.logo_2 {
    position: absolute;
    top: 30%;
    left: 94%;
    transform: translate(-50%, -50%);
    width: 12%;
    max-width: 223px;
}

.logo_1 img {
    width: 100%;
}

.logo_2 img {
    width: 100%;
}

.box__item:first-child .storeImages__main,
.box__item:first-child .storeImages__sub {
    filter: drop-shadow(10px 10px 0px #D8B9BA);
}

.box__item:nth-child(2) .storeImages__main,
.box__item:nth-child(2) .storeImages__sub {
    filter: drop-shadow(10px 10px 0px #DDCB9B);
}

.box__item:nth-child(3) .storeImages__main,
.box__item:nth-child(3) .storeImages__sub {
    filter: drop-shadow(10px 10px 0px #8DACBF);
}

.box__item:last-child .storeImages__main,
.box__item:last-child .storeImages__sub {
    filter: drop-shadow(10px 10px 0px #93AF89);
}

.article__contents {
    font-size: 14px;
    max-width: 700px;
    width: 100%;
    display: flex;
    margin: 1.5rem auto 0px;
    justify-content: space-around;

}

.article__contents p {
    writing-mode: vertical-rl;
    margin: 20px -9px 0px 0px;
}

#top_banner {
    text-align: center;
    margin: 50px 0px 30px;
}

#top_banner img {
    width: 560px;
}

/*■■■■■■■■■■■■■■■■■■■

　新着情報

■■■■■■■■■■■■■■■■■■■*/

.title_text {
    display: flex;
    margin-right: 1rem;
    width: 3rem;
}

.contentsTitle {
    writing-mode: vertical-rl;
    margin: 20px auto;
    font-size: 1.7rem;
    font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", HGS明朝E, メイリオ, Meiryo, serif;

}

.article__box {
    display: block;
    margin: 0 0 0 15px;
    width: 100%;
}

.article__item {
    padding: 10px 0;
    display: flex;
    padding: 20px 0;
    border-bottom: solid 2px #888;
}

.article__date {
    margin-right: 20px;
    color: var(--main-color);
}

#concept {
    display: flex;
    margin-top: 3rem;
}

.concept_sentence {
    background-color: #000;
    width: 100%;
    display: flex;
    align-items: center;
}

.concept_image {
    width: 90%;
}

.concept_image img {
    width: 100%;
}

.sentence h1 {
    color: #FFF;
    font-size: 1.8vw;
    margin: 0px 0px -0.5vw -0.4vw;
}

.sentence {
    margin-left: 5%;
}

.concept_sentence1 {
    font-size: 0.9vw;
}

.concept_sentence2 {
    font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", HGS明朝E, メイリオ, Meiryo, serif;
    line-height: 2.3vw;
    font-size: 1vw;
    margin-top: 10px;
    color: #FFF;
}

#slider {
    margin-top: 5rem;
    text-align: center;
}

.musiyaki {
    width: 100%;
    margin-right: 1.5rem;
}


.osusume_container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
    align-content: space-between;
}

.osusume {
    width: calc(100% / 2 - 0.6rem);
    margin-top: 1.3rem;
}


.midasi h1 {
    font-size: 1.7rem;
    margin-bottom: -6px;
}

.midasi {
    text-align: center;
}

.slider_image {
    width: 100%;
    max-width: 900px;
    margin: 2.5rem auto;
    display: flex;

}

.slider_image img {
    width: 100%;
}

.background_image {
    background: url("../img/back_image.jpg");
    padding: 5rem 0;
    margin-top: 5rem;
}

#shop {
    margin-top: 5rem;
    text-align: center;
}

.infomation_open {
    background: #FFCC00;
    display: inline-block;
    padding: 0px 10px;
    text-align: center;
}

.shop_infomation_container {
    width: 100%;
    max-width: 1000px;
    margin: auto;
    padding: 60px;
    margin-top: 2.5rem;
    background-color: #FFF;
}

.shop_infomation_content {
    display: flex;
}




.shop_image_slider {
    margin: -23px 30px 0px 0px;
    max-width: 341.8px;
}

.main-img {
    height: auto;
    width: 100%;
}

.main-img img {
    height: auto;
    width: 100%;
}

.sub-img {
    display: flex;
    margin-top: 10px;
}

.sub-img li {
    margin-right: 2%;
    width: calc(96% / 3);
}

.sub-img li:nth-child(3n) {
    margin-right: 0;
}

.sub-img li img {
    border: 2px solid transparent;
    transition: border .5s;
}

.sub-img img {
    cursor: pointer;
    width: 100%;
}

/* アクティブな画像の枠線を変更 */
.sub-img li.current img {
    transition: border .5s;
}






.shop_image {
    margin-right: 30px;
}

.shop_image img {
    width: 100%;
}

.infomation {
    width: 85%;
}

.infomation h1 {
    font-size: 1.7rem;
}

.infomation_sentence2 p {
    font-size: 1.3rem;
}

.opening_hour {
    margin-left: 5.6rem;
}

.infomation h3 {
    font-size: 1.3rem;
}

#shop_infomation {
    margin-top: 5rem;
}

.style1 {
    border-top: 2px dotted #8c8b8b;
}

.style2 {
    border-top: 2px #8c8b8b;
    margin: 14px auto;
}

.takeout {
    background-color: #9c1c2a;
    color: #FFF;
    font-size: 0.6rem;
    padding: 4px;
    border-radius: 4px;
}

.delivery {
    background-color: #120f41;
    color: #FFF;
    font-size: 0.6rem;
    padding: 4px;
    border-radius: 4px;
}

.infomation_sentence3 {
    text-align: center;
    margin-top: 25px;
    display: flex;
}

.infomation_sentence3 h3 {
    font-size: 2.1rem;
    font-weight: 900;
    white-space: nowrap;
}

.infomation_map {
    height: 60px;
    width: 100px;
    background-color: #eae2f9;
    margin-left: 1.5rem;
    display: flex;
    align-items: center;
}

.infomation_map span {
    margin: auto;
}

.infomation_map a {
    margin: auto;
}

.reserve p {
    color: #120f41;
    font-size: 0.8rem;
}

.reserve h3 {
    color: #120f41;
}

#tokuten img {
    margin-top: 60px;
    width: 100%;
}

.menu_btn {
    margin-top: 30px;
    display: flex;
    justify-content: space-around;
}

.menu1_btn {
    position: relative;
    border: 1px solid #120f41;
    width: 40%;
    height: 3.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #120f41;
}

.menu2_btn {
    position: relative;
    border: 1px solid #120f41;
    width: 40%;
    height: 3.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #120f41;
}

.menu1_btn a {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.menu2_btn a {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.menu1_btn,
.menu2_btn span {
    text-align: center;
}

#menu {

    width: 100%;
    max-width: 900px;
    margin: auto;
}

#menu h1 {
    margin-top: 60px;
}

#menu h1 {
    font-size: 1.7rem;
    width: 100%;
}

#menu2 {

    width: 100%;
    max-width: 900px;
    margin: auto;
}

#menu2 h1 {
    margin-top: 60px;
}

#menu2 h1 {
    font-size: 1.7rem;
    width: 100%;
}

#menu3 {

    width: 100%;
    max-width: 900px;
    margin: auto;
}

#menu3 h1 {
    margin-top: 60px;
}

#menu3 h1 {
    font-size: 1.7rem;
    width: 100%;
}

#menu4 {

    width: 100%;
    max-width: 900px;
    margin: auto;
}

#menu4 h1 {
    margin-top: 60px;
}

#menu4 h1 {
    font-size: 1.7rem;
    width: 100%;
}

#menu5 {

    width: 100%;
    max-width: 900px;
    margin: auto;
}

#menu5 h1 {
    margin-top: 60px;
}

#menu5 h1 {
    font-size: 1.7rem;
    width: 100%;
}

#menu6 {

    width: 100%;
    max-width: 900px;
    margin: auto;
}

#menu6 h1 {
    margin-top: 60px;
}

#menu6 h1 {
    font-size: 1.7rem;
    width: 100%;
}

#menu7 {

    width: 100%;
    max-width: 900px;
    margin: auto;
}

#menu7 h1 {
    margin-top: 60px;
}

#menu7 h1 {
    font-size: 1.7rem;
    width: 100%;
}

#menu8 {

    width: 100%;
    max-width: 900px;
    margin: auto;
}

#menu8 h1 {
    margin-top: 60px;
}

#menu8 h1 {
    font-size: 1.7rem;
    width: 100%;
}

#menu9 {

    width: 100%;
    max-width: 900px;
    margin: auto;
}

#menu9 h1 {
    margin-top: 60px;
}

#menu9 h1 {
    font-size: 1.7rem;
    width: 100%;
}

#shop_inside h1 {
    font-size: 1.1rem;
    margin-top: 0.5rem
}

.menu_image {
    margin-top: 20px;
}


.menu_image img {
    width: 100%;
}

.menu_takeout_image img {
    width: 100%;
}

.menu_takeout_image {

    margin-top: 20px;
}


.shop_inside_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.inside_kousi {
    width: calc(100% / 2 - 0.6rem);
    margin-top: 0.5rem;
}

.inside_kousi img {
    width: 100%;
}


#tell_yamaga {
    text-align: center;
}

#tell_yamaga h3 {
    font-size: 1.5rem;
    margin: 40px 0 10px;
    font-weight: 500;
}

#tell_yatusiro {
    text-align: center;
}

#tell_yatusiro h3 {
    font-size: 1.5rem;
    margin: 40px 0 10px;
    font-weight: 500;
}

#tell_kousi {
    text-align: center;
}

#tell_kousi h3 {
    font-size: 1.5rem;
    margin: 40px 0 10px;
    font-weight: 500;
}

#tell_amakusa {
    text-align: center;
}

#tell_amakusa h3 {
    font-size: 1.5rem;
    margin: 40px 0 10px;
    font-weight: 500;
}

#tell_arao {
    text-align: center;
}

#tell_arao h3 {
    font-size: 1.5rem;
    margin: 40px 0 10px;
    font-weight: 500;
}

#tell_fukuoka {
    text-align: center;
}

#tell_fukuoka h3 {
    font-size: 1.5rem;
    margin: 40px 0 10px;
    font-weight: 500;
}

#tell_kurashiki {
    text-align: center;
}

#tell_kurashiki h3 {
    font-size: 1.5rem;
    margin: 40px 0 10px;
    font-weight: 500;
}

#tell_kurokawa {
    text-align: center;
}

#tell_kurokawa h3 {
    font-size: 1.5rem;
    margin: 40px 0 10px;
    font-weight: 500;
}

#tell_yufuin {
    text-align: center;
}

#tell_yufuin h3 {
    font-size: 1.5rem;
    margin: 40px 0 10px;
    font-weight: 500;
}

.tell_container {
    width: 80%;
    max-width: 700px;
    margin: auto;
    border: 1px solid #120f41;
    padding: 20px;
    color: #120f41;
}

.tell_reserve {
    font-size: 1.5rem;
}

.tell_number {
    font-size: 3rem;
    font-weight: 900;
}



footer {
    background: #EDEADA;
    width: 100%;
    text-align: center;
    padding: 70px 0px 30px;
}

.banner {
    display: flex;
    width: 100%;
    max-width: 900px;
    margin: auto;
    text-align: center;

}

.banner img {
    width: 95%;
}

.footer_nav {
    max-width: 500px;
    width: 100%;
    margin: auto;
    margin-top: 30px;
}

.footer_nav ul {
    display: flex;
    justify-content: space-around;
}

.logo {
    margin-top: 30px;
}

.copylight {
    margin-top: 30px;
}

/* ニュースページ */
#news_page {
    width: 900px;
    height: auto;
    justify-content: center;
    text-align: center;
    margin: 10rem auto;
}

.news_contents {}

.article_area {
    display: flex;
    margin-top: 4rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid #ccc;
    padding-bottom: 1rem;
}

.article_date {}

.article__title {
    font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", HGS明朝E, メイリオ, Meiryo, serif;
    font-size: 1.1rem;
}

.article_text {
    font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", HGS明朝E, メイリオ, Meiryo, serif;
    text-align: left;
    font-size: 0.9rem;

}

.article__image {
    margin: 2rem 0rem;
}

.article__image img {
    width: 90%;
    margin-bottom: 1rem;
}

.article_text h3 {
    font-size: 1.1rem;
}

.sns_content {
    margin-top: 80px;
}

.sns_content ul {
    display: flex;
    justify-content: space-around;
    max-width: 900px;
    margin: auto;
}

.sns_content ul li {
    text-align: center;
}

.sns_content ul li img {
    border: solid 1px #333;
}

/* ----------------------------------サイドバー---------------------------------- */

.side-bar-content {

    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    width: 70px;
    height: 100vh;
    color: #FFF;
    background-color: #131042;
}

.unaginobori {
    text-align: center;
    letter-spacing: 3px;
}

.unaginobori p {
    font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", HGS明朝E, メイリオ, Meiryo, serif;
    font-size: 1.3rem;
    color: #FFF;
    writing-mode: vertical-rl;
    display: inline-block;
}

.nav {
    margin-top: 30px;
}

.nav ul {
    text-align: center;
}

.nav ul li a {
    margin-top: 50px;
    font-size: 0.8rem;
    writing-mode: vertical-rl;
    display: inline-block;
}

.container-side {}

/* ダイアログアニメーション */

.modal-overlay {
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: opacity 200ms linear;
}

.modal.is-open .modal-overlay {
    opacity: 1;
    pointer-events: auto;
}

.modal-container {
    background-color: #000000;
    border-radius: 6px;
    min-width: 300px;
    max-height: 90vh;
    padding: 1.5rem;
    transform: translateY(24px);
    transition: transform 300ms ease-in-out;
    width: 25%;
}

.modal-content p {
    border-bottom: 1px solid #c0c0c0;
    margin: 3rem;
    color: #c0c0c0;
}


.modal.is-open .modal-container {
    transform: translateY(0);
}

.modal-title {
    font-size: 1.25rem;
    margin: 0 0 1.5rem 0;
    padding-bottom: 0.5rem;
    text-align: center;
    color: #c0c0c0;
}

.modal-footer {
    margin-top: 1.5rem;
    text-align: right;
}

.button {
    border: 0;
    border-radius: 6px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.12);
    color: #fff;
    cursor: pointer;
    line-height: 1;
    outline: 0;
    padding: 0.75rem 1rem;
}

@keyframes bugfix {
    from {
        padding: 0;
    }

    to {
        padding: 0;
    }
}

@-webkit-keyframes bugfix {
    from {
        padding: 0;
    }

    to {
        padding: 0;
    }
}

.modal[aria-hidden="false"] .modal-overlay {
    animation: fadeIn 300ms ease-in-out forwards;
}

.modal[aria-hidden="false"] .modal-container {
    animation: slideIn 300ms ease-in-out forwards;
}

.modal[aria-hidden="true"] .modal-overlay {
    animation: fadeOut 300ms ease-in-out forwards;
}

.modal[aria-hidden="true"] .modal-container {
    animation: slideOut 300ms ease-in-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes slideIn {
    from {
        transform: translateY(24px);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes slideOut {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(24px);
    }
}

/* ダイアログアニメーションここまで */

/* ハンバーガーアニメーション */

#overlay-button {
    position: absolute;
    right: 0.2em;
    top: 0.2em;
    padding: 26px 11px;
    z-index: 5;
    cursor: pointer;
    user-select: none;
}

#overlay-button span {
    height: 4px;
    width: 35px;
    border-radius: 2px;
    background-color: white;
    position: relative;
    display: block;
    transition: all .2s ease-in-out;
}

#overlay-button span:before {
    top: -10px;
    visibility: visible;
}

#overlay-button span:after {
    top: 10px;
}

#overlay-button span:before,
#overlay-button span:after {
    height: 4px;
    width: 35px;
    border-radius: 2px;
    background-color: white;
    position: absolute;
    content: "";
    transition: all .2s ease-in-out;
}

#overlay-button:hover span,
#overlay-button:hover span:before,
#overlay-button:hover span:after {
    background: #fff;
}

input[type=checkbox] {
    display: none;

}

input[type=checkbox]:checked~#overlay {
    visibility: visible;
}

input[type=checkbox]:checked~#overlay-button:hover span,
input[type=checkbox]:checked~#overlay-button span {
    background: transparent;


}

input[type=checkbox]:checked~#overlay-button span:before {
    transform: rotate(45deg) translate(7px, 7px);

}

input[type=checkbox]:checked~#overlay-button span:after {
    transform: rotate(-45deg) translate(7px, -7px);


}

.hamburger {
    margin-bottom: 30px;
}

/* ハンバーガーアニメーションここまで */
/* ----------------------------------サイドバーここまで---------------------------------- */

/* ----------------------------------タグ--------------------------------- */
/*ベース*/
.tabs {
    margin-top: 50px;
    padding-bottom: 40px;
    width: 100%;
    max-width: 900px;
    margin: 2.5rem auto;
}

/*タブのスタイル*/
.tab_item {
    width: calc(100%/4);
    height: 50px;
    border-bottom: 3px solid #120f42;
    background-color: #d9d9d9;
    line-height: 50px;
    font-size: 16px;
    text-align: center;
    color: #565656;
    display: block;
    float: left;
    text-align: center;
    font-weight: bold;
    transition: all 0.2s ease;
}

.tab_item:hover {
    opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
    display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
    display: none;
    padding: 35px 35px 0;
    clear: both;
    overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
#yamaga:checked~#yamaga_content,
#yatusiro:checked~#yatusiro_content,
#kousi:checked~#kousi_content,
#amakusa:checked~#amakusa_content,
#arao:checked~#arao_content,
#fukuoka:checked~#fukuoka_content,
#kurashiki:checked~#kurashiki_content,
#kurokawa:checked~#kurokawa_content,
#yufuin:checked~#yufuin_content {
    display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked+.tab_item {
    background-color: #120f42;
    color: #fff;
}

/* ----------------------------------タグ--------------------------------- */


@media screen and (max-width:768px) {

    .pc {
        display: none;
    }

    .sp {
        display: block;
    }

    #header {
        display: block;
        height: 60px;
        position: fixed;
        z-index: 1;
        display: flex;
        width: 100%;
        background-color: #120f42;
    }

    .side-bar-content {
        display: none;
    }


    .header_logo_onlineshop {
        width: 83%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-left: 55px;
        color: #FFF;
    }

    .header_logo_onlineshop span {
        border: solid 1px;
        padding: 6px;
    }

    .header_logo {
        font-size: 1.4rem;

    }

    .header_onlineshop {
        font-size: 0.8rem;
    }

    #g-nav-list img {
        width: 35%;
        position: absolute;
        z-index: 999;
        top: 84%;
        left: 82%;
        transform: translate(-50%, -50%);
    }

    /*  メインビジュアル  */
    #mainvisual {
        height: 80vh;
        width: 100%;
        /* margin-top: 60px;*/
    }

    .logo_1 {
        top: 27%;
        width: 56%;
    }

    .logo_2 {
        top: 27%;
        left: 87%;
        width: 26%;
    }

    .article__contents {
        display: block;
        margin: 1.5rem auto 0px;
    }

    .article__contents p {
        writing-mode: horizontal-tb;
        text-align: center;
    }

    .article__contents p {
        margin: 0px;
    }

    .backimage1 img {
        width: 100%;
        height: 80vh;
        object-fit: cover;
    }

    #top_banner img {
        width: 90%;
    }

    /*  新着情報  */

    .contentsTitle {
        writing-mode: horizontal-tb;
        text-align: center;
        margin: 0px auto;
    }

    .title_text {
        display: block;
        margin-right: 1rem;
        width: 100%;
    }

    .article__box {
        padding: 0rem 1rem;
        width: auto;
        margin: 0px;
    }

    .sns_content ul {
        justify-content: space-evenly;
        flex-wrap: wrap;
    }

    .sns_content ul li {
        margin-top: 15px;
        width: 50%;
    }

    .sns_content ul li img {
        width: 90%;
    }

    .sns_content {
        margin-top: 50px;
    }

    /*  コンセプト  */
    #concept {
        display: block;
        background-color: #131042;
        margin-top: 4rem;
    }

    .concept_image {
        width: 90%;
        margin: auto;
        padding-top: 1.2rem;
    }

    .concept_sentence {
        padding: 1rem;
        background-color: #131042;
        width: 95%;
        margin: 15px auto;
    }

    .sentence {
        margin-left: 0%;
        width: 100%;
    }

    .sentence h1 {
        font-size: 1.5rem;
    }

    .concept_sentence1 {
        font-size: 1rem;
    }

    .concept_sentence2 {
        line-height: 1.4rem;
        font-size: 0.8rem;
        margin-top: 10px;
        font-feature-settings: "palt";
    }


    /*  季節のおすすめ  */
    #slider {
        margin-top: 4rem;
    }

    .slider_image {
        width: 100vw;
        flex-wrap: wrap;
    }

    .slider_image {
        display: flex;
        width: auto;
        flex-wrap: wrap;
        margin: 2.5rem 1rem;
        justify-content: center;
    }

    .slider_image img {}

    .musiyaki {
        width: 100%;
        margin: 0rem 0rem 0.5rem 0rem;
    }

    .osusume {
        width: calc(100% / 2 - 0.5rem);

    }

    .osusume:nth-child(2n+1) {
        margin-right: 0.5rem;
        margin-bottom: 0.5rem;
        margin-top: 0.5rem;
    }

    .osusume:nth-child(2n) {
        margin-left: 0.5rem;
        margin-bottom: 0.5rem;
        margin-top: 0.5rem;
    }

    /*  店舗情報  */
    .shop_image {
        margin-right: 0px;
    }

    .shop_image_slider {
        margin: 0px 0px 0px 0px;
        max-width: none;
    }

    .background_image {
        margin-top: 4rem;
    }

    .background_image {
        padding: 1rem 0;
    }

    #menu h1 {
        font-size: 1.1rem;
    }

    #menu2 h1 {
        font-size: 1.1rem;
    }

    #menu3 h1 {
        font-size: 1.1rem;
    }

    #menu4 h1 {
        font-size: 1.1rem;
    }

    #menu5 h1 {
        font-size: 1.1rem;
    }

    #menu6 h1 {
        font-size: 1.1rem;
    }

    #menu7 h1 {
        font-size: 1.1rem;
    }

    #menu8 h1 {
        font-size: 1.1rem;
    }

    #menu9 h1 {
        font-size: 1.1rem;
    }

    .shop_inside_container {
        display: block;
    }

    #shop_inside h1 {
        font-size: 1.1rem;
    }

    .inside_kousi {
        width: 100%;
        margin-top: 0.5rem;
    }

    .infomation {
        width: 100%;
        margin-top: 1rem;
    }

    .infomation_map {
        height: 60px;
        width: 100%;
        background-color: #eae2f9;
        margin-left: 0rem;
        margin-top: 0.8rem;
        display: flex;
        align-items: center;
    }

    .reserve {
        background-color: #EAE2F9;
        padding: 0.8rem;
    }

    .infomation p {
        font-size: 0.7rem;
    }

    .menu1_btn,
    .menu2_btn {
        font-size: 0.7rem;
        width: 45%;
        text-align: center;
    }

    .tell_container {
        width: 100%;

    }

    .tell_reserve {
        font-size: 1rem;
    }

    .tell_number {
        font-size: 2.5rem;
    }

    .tell_hours {
        font-size: 0.8rem;
    }

    .shop_infomation_container {
        padding: 10px;
    }

    .shop_infomation_content {
        display: block;
    }

    .infomation_sentence3 {
        display: block;
    }

    .tabs {
        padding-bottom: 0px;
    }

    /*  ヘッダーエリア  */
    #g-nav {
        /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
        position: fixed;
        z-index: 999;
        /*ナビのスタート位置と形状*/
        top: 0;
        left: -120%;
        width: 100%;
        height: 100vh;
        /*ナビの高さ*/
        background: #000;
        /*動き*/
        transition: all 0.6s;
    }

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


    /*ナビゲーションの縦スクロール*/
    #g-nav.panelactive #g-nav-list {
        /*ナビの数が増えた場合縦スクロール*/
        position: fixed;
        z-index: 999;
        width: 100%;
        height: 100vh;
        /*表示する高さ*/
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

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

    /*リストのレイアウト設定*/

    #g-nav li {
        list-style: none;
    }

    #g-nav li a {
        color: #FFF;
        text-decoration: none;
        padding: 10px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", HGS明朝E, メイリオ, Meiryo, serif;
    }

    /*========= ボタンのためのCSS ===============*/
    .openbtn1 {
        position: fixed;
        z-index: 9999;
        /*ボタンを最前面に*/
        top: 5px;
        left: 5px;
        cursor: pointer;
        width: 50px;
        height: 50px;
    }

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

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

    .openbtn1 span:nth-of-type(2) {
        top: 23px;
    }

    .openbtn1 span:nth-of-type(3) {
        top: 31px;
    }

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

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

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

    /*  フッターエリア  */
    footer {
        padding: 1rem;
        margin-bottom: 72px;
    }

    .banner {
        display: block;
        width: 100%;
    }

    .banner img {
        width: 100%;
    }

    .tokunagakita_banner {
        padding-bottom: 0.5rem;
    }

    .copylight {
        font-size: 0.8rem;
    }

    .footer_nav {
        font-size: 0.6rem;
    }

    .reserve__link {
        display: flex;
        position: fixed;
        top: auto;
        width: 100%;
        bottom: 0;
    }

    .reserve__link a {
        display: block;
        box-sizing: border-box;
        width: 100%;
        padding: 1em 1em 1em 1.1em;
        background: #000;
        font-size: 1em;
        line-height: 1.25;
        text-align: center;
        letter-spacing: .1em;
        color: #FFF;
    }

    .reserve__link a:last-child {
        background: rgba(0, 0, 0, 0.7);
    }

    /*  ニュース  */
    #news_page {
        width: 100%;
        margin: 5rem auto;
        padding: 1rem 2rem;
    }

    .article_area {
        display: block;
        text-align: left;
        font-feature-settings: 'palt';
    }

    .article__image img {
        width: 100%;
    }

    .opening_hour {
        margin-left: 3rem;
    }




}



/* ふわっとアニメーション
@keyframes anime {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  35% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    z-index: 9;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes anime {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  35% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    z-index: 9;
  }
  100% {
    opacity: 0;
  }
} */