@charset "utf-8";


/*背景を#F0EBEAにする*/
body {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif, Verdana, "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
    background-color: #F0EBEA;
}

.header {
    background-image: url(../images/pc.top.jpg);
    background-size: cover;
    background-position: center;
    height: 650px;
    text-align: center;
}

.header-logo {
    padding-top: 150px;
}

.header-rogo h3 {
    font-family: 'Baloo Tammudu 2', cursive;
    color: #fff;
    padding-top: 20px;
}

.header-logo span {
    color: #fff;
}

.header-list {
    max-width: 1100px;
    margin: 0 auto;

}

.header-list li {
    float: left;
    padding: 33px 20px
}

/*フォントカラーを白、フォントサイズを40px、フォントの太さを太くし、内側余白を20pxにする*/
h1 {
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    padding: 20px;
    text-align: center;
}

header ul {
    color: #fff;
    display: flex;
    justify-content: center;

}

header ul li {
    margin-right: 20px;
    margin-bottom: 20px;
}

/* ナビゲーションメニュー */
nav {
    margin: 0 auto;
    text-align: center;
}

.header-list {
    display: flex;
    color: #fff;
    justify-content: center;
}

.header-list li {
    font-family: 'Dosis', sans-serif;
    text-decoration: underline;
    line-height: 1em;
    font-size: 42px;
}

.header-list li a {
    color: #fff;
}

/*フォントカラーを白、フォントサイズを65px、フォントの太さを太くし、上部内側余白を264pxにする*/
h2 {
    color: #fff;
    font-size: 65px;
    font-weight: bold;
    padding-top: 264px;
}

/*フォントカラーを#655046、フォントサイズを42px、フォントの太さを太くし、下部外側余白を11pxにする*/
h3 {
    color: #655046;
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 11px;
}

/*フォントカラーを#655046、フォントサイズを20px、下部外側余白を44pxにする*/
h4 {
    color: #655046;
    font-size: 20px;
    margin-bottom: 44px;
}

/*フォントカラーを#655046、フォントサイズを16px、
行間を1.8にする*/
p {
    color: #655046;
    font-size: 16px;
    line-height: 1.8;
}

/*上下の内側余白を95px、中のインライン要素をセンター寄せ*/
.about {
    padding: 120px 100px;
    text-align: center;
    background-color: #f0eae4;
}

.about-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.about-inner h3 {
    /* justify-content: center; */
    /* padding-bottom: 30px; */
    font-family: 'Dosis', sans-serif;
    position: relative;
    display: inline-block;
    letter-spacing: 0.2em;
    text-align: center;
}

/* h3のアンダーバーのための疑似要素を作ります */
.about-inner h3::before {
    content: '';
    position: absolute;
    bottom: -10px;
    display: inline-block;
    width: 50px;
    height: 2px;
    left: calc(50% - 25px);
    background: #655046;
}

/*LUCH*/
.lunch {
    padding: 120px 100px;
    text-align: center;
    background-color: #fff;
}

.lunch-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.lunch-inner h3 {
    /* justify-content: center; */
    /* padding-bottom: 30px; */
    font-family: 'Dosis', sans-serif;
    position: relative;
    display: inline-block;
    letter-spacing: 0.2em;
    text-align: center;
}

/* h3のアンダーバーのための疑似要素を作ります */
.lunch-inner h3::before {
    content: '';
    position: absolute;
    bottom: -10px;
    display: inline-block;
    width: 50px;
    height: 2px;
    left: calc(50% - 25px);
    background: #655046;
}


.lunch-overview p {
    justify-content: center;
    padding: 10px 100px;
}

.lunch-span {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 25px;
}

/*DRINK*/
.drink {
    padding: 120px 100px;
    text-align: center;
    background-color: #f2f9f9;
}

.drink-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.drink-inner h3 {
    /* justify-content: center; */
    /* padding-bottom: 30px; */
    font-family: 'Dosis', sans-serif;
    position: relative;
    display: inline-block;
    letter-spacing: 0.2em;
    text-align: center;
}

/* h3のアンダーバーのための疑似要素を作ります */
.drink-inner h3::before {
    content: '';
    position: absolute;
    bottom: -10px;
    display: inline-block;
    width: 50px;
    height: 2px;
    left: calc(50% - 25px);
    background: #655046;
}


.drink-overview p {
    justify-content: center;
    padding: 10px 100px;
}

.drink-span1 {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 20px;
    padding-top: 10px;
}

.drink-box {
    display: flex;
    justify-content: center;
    padding: 5px;
    margin-top: 15px;
}

.drink-box li {
    text-align: left;
    list-style: disc;
}

.drink ul li {
    color: #655046;
    font-size: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-family: 'Zen Maru Gothic', sans-serif;

}

ul.drinkmenu {
    border: 1px solid #655046;
    padding: 2%;
    border-radius: 20px;
    box-sizing: content-box;
    margin: 15px;
    padding-left: 40px;
    background-color: #fff;
}

.img-box {
    margin-top: 20px;
    margin-bottom: 20px;
}

a {
    text-decoration: none;
}


/*DESSERT*/

.dessert-box img {
    margin-bottom: 18px;
    }

.dessert {
    padding: 100px 100px;
    text-align: center;
    background-color: #fff;
}

.dessert-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.dessert-inner h3 {
    /* justify-content: center; */
    /* padding-bottom: 30px; */
    font-family: 'Dosis', sans-serif;
    position: relative;
    display: inline-block;
    letter-spacing: 0.2em;
    text-align: center;
}

/* h3のアンダーバーのための疑似要素を作ります */
.dessert-inner h3::before {
    content: '';
    position: absolute;
    bottom: -10px;
    display: inline-block;
    width: 50px;
    height: 2px;
    left: calc(50% - 25px);
    background: #655046;
}


.dessert-overview p {
    justify-content: center;
    padding: 10px 100px;
}

.dessert-span1 {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 20px;
    padding-top: 10px;
}

.dessert-span2 {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 18px;
    padding-top: 20px;
    margin: 30px;
}

.dessert-box {
    display: flex;
    justify-content: center;
    padding: 5px;
}

.dessert-box li {
    text-align: left;
}

.dessert ul li {
    color: #655046;
    font-size: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-family: 'Zen Maru Gothic', sans-serif;

}

ul.dessertmenu {
    padding: 2%;
    border-radius: 20px;
    box-sizing: content-box;
    margin: 15px;
    background-color: #fff;
}

.img-box {
    margin-top: 20px;
    margin-bottom: 20px;
}

a {
    text-decoration: none;
}

/*RESRVE*/

.resrve {
    background-image: url(../images/resrve.back.jpg);
    background-size: cover;
    background-position: center;
    padding-bottom: 100px;
    padding-top: 100px;
    text-align: center;

}

/* コンテンツ幅 */
.resrve-inner {
    max-width: 1100px;
    margin: 0 auto;

}

.text-box {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.text-box-b {
    border: 1px solid #655046;
    padding: 2%;
    border-radius: 20px;
    box-sizing: content-box;
}

.text-box p {
    color: #655046;
    text-align: left;
    margin: 30px;
}

.resrve-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.resrve-inner h3 {
    /* justify-content: center; */
    /* padding-bottom: 30px; */
    font-family: 'Dosis', sans-serif;
    position: relative;
    display: inline-block;
    letter-spacing: 0.2em;
    text-align: center;
}

/* h3のアンダーバーのための疑似要素を作ります */
.resrve-inner h3::before {
    content: '';
    position: absolute;
    bottom: -10px;
    display: inline-block;
    width: 50px;
    height: 2px;
    left: calc(50% - 25px);
    background: #655046;
}


.resrve-overview p {
    justify-content: center;
    padding: 10px 100px;
}

.resrve-span1 {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 20px;
    padding-top: 10px;
}

.resrve-box {
    display: flex;
    justify-content: center;
    padding: 5px;
    margin-top: 15px;
}

.resrve-box li {
    text-align: left;
    list-style: disc;
}

.resrve ul li {
    color: #655046;
    font-size: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-family: 'Zen Maru Gothic', sans-serif;

}

ul.resrvekmenu {
    border: 1px solid #655046;
    padding: 2%;
    border-radius: 20px;
    box-sizing: content-box;
    margin: 15px;
    padding-left: 40px;
    background-color: #fff;
}

.resrve a {
    text-decoration: none;
    color: #fff;
    background-color: #a5815f;
    padding: 30px 50px;
    border-radius: 15px;
    /* インラインをブロックにする */
    font-display: inline-block;
}

.img-box {
    margin-top: 20px;
    margin-bottom: 20px;
}

a {
    text-decoration: none;
}


/*キャンペーン*/

.campaign {
    background-image: url(../images/campain.back.jpg);
    background-size: cover;
    background-position: center;
    padding-bottom: 150px;
    padding-top: 150px;
    padding-left: 550px;
    text-align: left;

}

/* コンテンツ幅 */
.campaign-inner {
    max-width: 1100px;
    margin: 0 auto;

}

.text-box {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.text-box-b {
    border: 1px solid #655046;
    padding: 2%;
    border-radius: 20px;
    box-sizing: content-box;
}

.text-box p {
    color: #655046;
    text-align: left;
    margin: 30px;
}

.campaign-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.campaign-inner h3 {
    /* justify-content: center; */
    /* padding-bottom: 30px; */
    font-family: 'PT Serif', serif;
    font-size: 60px;
    position: relative;
    display: inline-block;
    letter-spacing: 0.2em;
    text-align: left;
    padding-left: 100px;
}

/* h3のアンダーバーのための疑似要素を作ります */
.campaign-inner h3::before {
    content: '';
    position: absolute;
    bottom: -30px;
    display: inline-block;
    width: 50px;
    height: 2px;
    left: calc(50% - 25px);
    background: #655046;
}


.campaign-overview p {
    justify-content: center;
    padding: 10px 100px;
}

.campaign-span1 {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 25px;
    padding-top: 10px;
}

.campaign-box {
    display: flex;
    justify-content: center;
    padding: 5px;
    margin-top: 15px;
}

.campaign-box li {
    text-align: left;
    list-style: disc;
}

.campaign ul li {
    color: #655046;
    font-size: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-family: 'Zen Maru Gothic', sans-serif;

}

ul.campaignmenu {
    border: 1px solid #655046;
    padding: 2%;
    border-radius: 20px;
    box-sizing: content-box;
    margin: 15px;
    padding-left: 40px;
    background-color: #fff;
}

.campaign a {
    text-decoration: none;
    color: #fff;
    background-color: #a5815f;
    padding: 30px 50px;
    border-radius: 15px;
    /* インラインをブロックにする */
    font-display: inline-block;
}

.img-box {
    margin-top: 20px;
    margin-bottom: 20px;
}

a {
    text-decoration: none;
}


/*背景をmenu-bg.pngに、背景サイズとポジションの設定をし、上部内側余白を85px、下部内側余白を95px、中のインライン要素をセンター寄せ*/

.menu {
    background-image: url(../images/menu-bg.png);
    background-size: cover;
    background-position: center;
    padding-bottom: 96px;
    padding-top: 85px;
    text-align: center;

}

/* コンテンツ幅 */
.menu-inner {
    max-width: 1100px;
    margin: 0 auto;

}

/*フォントカラーを白にする*/
.menu h3 {
    color: #fff;
}

/*フォントカラーを白にする*/
.menu h4 {
    color: #fff;
}

/*下部外側余白を57pxにする*/
.menu ul {
    margin-bottom: 75px;


}

/*フォントカラーを白、フォントサイズを16px、上下の内側余白を8pxにする*/
.menu ul li {
    color: #fff;
    font-size: 16px;
    padding-top: 8px;
    padding-bottom: 8px;

}

/*テキストの装飾を削除し、フォントカラーを白、背景色を#655046、内側余白を20px、角丸の深さ30pxのボタンにする*/
.menu a {
    text-decoration: none;
    color: #fff;
    background-color: #655046;
    padding: 20px;
    border-radius: 30px;
    /* インラインをブロックにする */
    font-display: inline-block;
}

.text-box {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.text-box-b {
    border: 1px solid #655046;
    padding: 2%;
    border-radius: 20px;
    box-sizing: content-box;
}

.text-box p {
    color: #655046;
    text-align: left;
    margin: 30px;
}

/*背景色を#668E68に、フォントカラーを白、フォントサイズを14px、上下内側余白を25pxにし、センター寄せ*/
footer {
    background-color: #668E68;
    color: #fff;
    font-size: 14px;
    padding: 25px 0;
    text-align: center;

}