@charset "utf-8";
/* CSS Document */
.pcno { display:none;}
/*▼ 初期化 ▼*/
body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, ul, li, blockquote, th, td, tr, img { padding:0px; margin:0px; font-size:16px; line-height:1.5em; letter-spacing:1px; color:#000;-webkit-text-size-adjust:100%; font-weight:400;font-family:'futura-pt', 'Noto Sans JP', "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;}
table { border-collapse:collapse; }
ul, li { list-style:none; }
h1, h2, h3, h4, h5, h6{ padding:0px; margin:0px; font-size:100%; font-weight:normal; font-family:"Zen Maru Gothic", serif;}
a { overflow:hidden; outline:none; }
img { border:none; vertical-align:bottom;max-width:100%;}
table td { border:none; vertical-align:top; }
.text99 { text-indent:-9999px; }
a{-webkit-transition:0.5s; -moz-transition:0.5s; -ms-transition:0.5s; transition:0.5s; }
a:hover { text-decoration:none; }
a:hover { opacity:0.5; filter:alpha(opacity=50);-webkit-transition:0.5s; -moz-transition:0.5s; -ms-transition:0.5s; transition:0.5s; }
.kadomaru{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
/*▲ 初期化 ▲*/
.mb30{ margin-bottom:30px;}
.mb50{ margin-bottom:50px;}


/*▼エリア・背景設定▼*/
body{ min-width:480px;}
@media (max-width:550px) {
  body{ min-height:120vh;}  
}


html,body{
overflow-x:hidden;
}

h1{ text-indent:-9999px; height:0;}

/*▼ヘッダー▼*/

/* 横幅が1330px以下の場合に適用するスタイル */
@media (max-width:1330px) {
}



.kotei-sns{ position:fixed; left:50px; bottom:50px;}
.kotei-sns i{ font-size:50px; color:#000; margin-right:10px;}
.kotei-sns img{ width:55px;}


.title{margin-bottom:50px; text-align:center; margin-top:70px;}
.title .logo{ width:70px;}
.title p{font-family:'M PLUS 1 Code', sans-serif;font-size: 3.5rem;}



/*▼エリア・共通設定▼*/

.box{ max-width:1024px; margin:auto; padding:70px 10px;}


.mb0{margin-bottom:0px !important;}


.heder-name{position: fixed; top:30px; left:50px;}
.heder-name img{ width:700px;}
@media (max-width:780px) {
    
.heder-name{position: fixed; top:20px; left:20px;}
.heder-name img{ width:70vw;}
}

.bottom-name{ position: fixed; bottom:50px; right:50px;}
.bottom-name img{ width:18vw;}
@media (max-width:600px) {
.bottom-name img{ width:22vw;}
}

/*▼ホーム　home▼*/

#home #main {height: 100vh; padding:0 10px;}

#home #box-01{ position:relative;display:flex;align-items: center/* ←縦の中央揃え */;justify-content: center/* 横も中央 */;flex-direction: column; /* 追加すると縦並びになる */ height: calc(100vh - 50px);}
#home #box-01 .area-01{ text-align:center;}
#home #box-01 .area-01 p{ line-height:2em;}
#home #box-01 .area-01 img.logo{ width:100px; margin:auto; margin-bottom:30px; display:block;}

#home #box-01 .area-01 .text{ display:inline-block; text-align:left;}
#home #box-01 .area-01 .text .p-01{ font-size:130%; font-weight:bold; margin-bottom:20px;}


#home #box-01 .area-01 .text .p-02{ font-size:110%; font-weight:bold; }




/*▼contact▼*/
#contact #box-01{ max-width:1100px; margin:auto; padding-bottom:50px;}
#contact #box-01 .area-01 .area-mailform{ background:#fff; padding:0 10px; border-radius:20px;}
#contact #box-01 .area-01 .area-mailform table{ width:100%; margin-bottom:50px;}
#contact #box-01 .area-01 .area-mailform table tr{}
#contact #box-01 .area-01 .area-mailform table td{ padding:20px 8px; vertical-align:middle;}
#contact #box-01 .area-01 .area-mailform table td.td-01{ width:200px; font-weight:bold; padding-left:20px;}
#contact #box-01 .area-01 .area-mailform table tr:last-child td{ border-bottom:1px solid #ccc;}
#contact #box-01 .area-01 .area-mailform table ul li{ margin-bottom:7px;}
#contact #box-01 .area-01 .area-mailform table ul li:last-of-type{ margin-bottom:0px;}
#contact #box-01 .area-01 .area-mailform table ul.ul-01 li{ margin-bottom:0px;}
#contact #box-01 .area-01 .area-mailform table select{ padding:3px; font-size:15px;}
#contact #box-01 .area-01 .area-mailform table input{ padding:3px; font-size:15px;}
#contact #box-01 .area-01 .area-mailform table label img{ display:block; margin:0 auto 3px;}
#contact #box-01 .area-01 .area-mailform table button{}
#contact #box-01 .area-01 .area-mailform .chui{ font-weight:bold; color: #ff0000; font-size:13px; padding:0px 3px; margin-right:7px;}
#contact #box-01 .area-01 .area-mailform .chui-01{ float:left;}
#contact #box-01 .area-01 .area-mailform .p-01{ margin-top:5px;}
#contact #box-01 .area-01 .area-mailform .autotext{ margin-bottom:30px;}
#contact #box-01 .area-01 .area-mailform .p-02{ font-weight:bold;}
#contact #box-01 .area-01 .area-mailform .p-min{ font-size:13px; letter-spacing:normal; padding-top:5px;}
#contact #box-01 .area-01 .area-mailform .w01{width:99%;}
#contact #box-01 .area-01 .area-mailform .w02{width:40%;}

#contact #box-01 .area-01 .area-mailform .kakunin{overflow:hidden;margin-bottom:50px; text-align:center;}
#contact #box-01 .area-01 .area-mailform .tb-01{}
#contact #box-01 .area-01 .area-mailform .tb-03{ text-align:center; position:relative; left:-30px;}
#contact #box-01 .area-01 .area-mailform .tb-03 .chui{ float:none;}
#contact #box-01 .area-01 .area-mailform .tb-02{ text-align:center;}
#contact #box-01 .area-01 .area-mailform .tb-04{ height:200px;overflow-y:scroll;padding:20px; border:#999 solid 1px; background:#FFF; margin:auto; margin-bottom:50px; }
#contact #box-01 .area-01 .area-mailform .btn{ background:#000; font-size:16px; font-weight:500; color:#fff; padding:15px 0; border-radius:50px; display:block; text-decoration:none; text-decoration:none; display:block; -webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px; border:none; margin:auto; width:300px; font-size:16px; font-weight:bold;}
#contact #box-01 .area-01 .area-mailform .btn:hover{opacity: 0.5; filter: alpha(opacity=50);-webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s;cursor: pointer;}
#contact #box-01 .area-01 .area-mailform .p-03{ font-weight:bold; margin-bottom:10px;}
#contact #box-01 .area-01 .area-mailform .p-04{ font-weight:bold;}
#contact #box-01 .area-01 .area-mailform .p-05{margin-bottom:15px;}
#contact #box-01 .area-01 .area-mailform .p-06{margin-bottom:80px;}
#contact #box-01 .area-01 .area-mailform .ul-01{margin-bottom:15px;}

#contact #box-01 .area-01 .area-mailform .tb-04 p{}
#contact #box-01 .area-01 .area-mailform .f-24{ font-size:16px; font-weight:bold; margin-bottom:10px;}


@media (max-width:640px) {
    
#contact #box-01{padding-bottom:150px;}
#contact #box-01 .area-01 .area-mailform table td{display:block; padding:0;}
#contact #box-01 .area-01 .area-mailform table td.td-01{padding-top:15px; padding-left:0px; padding-bottom:5px;}
}


/*▼manu▼*/

/*▼manu▼*/

#manu #box-01{ height:90vh;}

#manu #box-01 .area-01{text-align:center; padding-top:100px;}
#manu #box-01 .area-01 ul{ display:inline-block;}
#manu #box-01 .area-01 ul li{ width:150PX; margin:50px 10px; display:inline-block; vertical-align: middle;}
#manu #box-01 .area-01 ul li:nth-of-type(2){ width:170px;}
#manu #box-01 .area-01 ul li:nth-of-type(3){ width:170px;}
#manu #box-01 .area-01 ul li:nth-of-type(4){ width:200px;}
#manu #box-01 .area-01 ul li a{ text-decoration:none; color:#000;}

@media (max-width:600px) {

#manu #box-01 .area-01 p{ margin:auto;margin-top:150px; width:60%; margin-right:50px;}
}
#manu #box-01 .bottom{ position:fixed; right:50px; bottom:50px;}
#manu #box-01 .bottom img{ width:10vw;}
@media (max-width:600px) {
    #manu #box-01 .bottom img{ width:23vw;}
}


@media (min-width:780px) {
    .res780{ display:none;}
}

@media (max-width:780px) {
#manu #box-01 .area-01 ul li{ width:150PX; margin:0px 10px; display:inline-block; vertical-align: middle;}
#manu #box-01 .area-01{text-align:center; padding-top:50px;}
}
    

/*▼drink▼*/

#drink #box-01{ background: url(../images/manu/ico-01.png) left top no-repeat , url(../images/manu/ico-02.png) right top no-repeat, url(../images/manu/ico-03.png) left bottom no-repeat, url(../images/manu/ico-04.png) right bottom no-repeat; background-size:15% , 12%,12%,15%; text-align:center;}

#drink .coffee-info {margin: 80px auto; padding: 0 20px; }
#drink .coffee-info .info-box { background: #fafafa; padding: 35px; margin-bottom: 40px; border-left: 5px solid #8b5e3c; }
#drink .coffee-info h3 { font-size: 24px; font-weight: bold; margin-bottom: 15px; color: #5a3a21; }
#drink .coffee-info p { font-size: 16px; line-height: 1.9; color: #444; }
.coffee-message { background: #f7f7f7; padding: 35px 20px; text-align: center; margin: 40px 0; }
.coffee-message p { font-size: 17px; line-height: 2; color: #444; letter-spacing: 0.05em; }

#drink #box-01 .area-01{padding:100px 200px 100px; display:inline-block; text-align:left;}
#drink #box-01 .area-01 h3{ color:#999; font-size:20px; margin-bottom:20px;}
#drink #box-01 .area-01 .tb-01{margin-bottom:40px;}
#drink #box-01 .area-01 ul{ display:inline-block; margin-top:50px;}
#drink #box-01 .area-01 ul:last-child{ float:right;}

#drink #box-02 .area-02{ text-align:center; margin-bottom:50px;}
#drink #box-02 .area-01{ overflow:hidden; margin-bottom:100px;}
#drink #box-02 .area-01 .left{ width:460px; float:left;}
#drink #box-02 .area-01 .right{ width:460px; float:right; display:table;}
#drink #box-02 .area-01:nth-child(2n) .left{float:right; margin-bottom:15px;}
#drink #box-02 .area-01:nth-child(2n) .right{float:left;}
#drink #box-02 .area-01 .textright{ text-align:right;}

#drink #box-02 .area-01 .left table{ margin-top:200px;}
#drink #box-02 .area-01 .left table .td-01{ width:70px;}

#drink #box-02 .area-01 .right .inner{ display:table-cell; vertical-align:middle;}
#drink #box-02 .area-01 .right .text{ display:inline-block; vertical-align: top;text-align:left;}
#drink #box-02 .area-01 .right .text-w1{ width:40%;}
#drink #box-02 .area-01 .right .text-w2{ width:50%;}
#drink #box-02 .area-01 .right .text-w3{ width:100%;}
#drink #box-02 .area-01 .right .text:last-child{ margin-right:0px;}
#drink #box-02 .area-01 .right .text .p-01{ font-size:16px; margin-bottom:15px;}
#drink #box-02 .area-01 .right .text .p-01 span{ font-size:13px; margin-left:10px;}
#drink #box-02 .area-01 .right .text .p-02{ font-size:13px; margin-left:15px;}
#drink #box-02 .area-01 .right .text .p-03{margin-right:20px;font-size:16px; }
#drink #box-02 .area-01 .right .text .p-03 span{ font-size:13px; margin-left:6px;}
#drink #box-02 .area-01 .right .text .p-05{ margin-top:10px; font-size:13px}
#drink #box-02 .area-01 .right .text ul{ margin-left:10px; margin-top:20px;}
#drink #box-02 .area-01 .right .text ul li{ text-indent:-1em; padding-left:1em; font-size:13px; letter-spacing:normal;}

@media (max-width:460px) {
    
#drink #box-02 .area-01 .right .inner{ display: flex;}
#drink #box-02 .area-01 .right .text{ display: inline-block;}
#drink #box-02 .area-01 .right .text-w1{ width:auto;}
#drink #box-02 .area-01 .right .text-w2{ width:auto;}
#drink #box-02 .area-01 .right .text-w3{ width:auto;}
    
}

@media (max-width:938px) {
#drink #box-02 { padding-bottom:150px;}
#drink #box-02 .area-01{ overflow:hidden; margin-bottom:80px;}
#drink #box-02 .area-01{padding:0px;}
#drink #box-02 .area-01 .left{ width:100%; float:none; margin-bottom:15px;}
#drink #box-02 .area-01 .right{ width:100%; float:none; display:table;}
#drink #box-02 .area-01:nth-child(2n) .left{float:none;}
#drink #box-02 .area-01:nth-child(2n) .right{float:none;}
#drink #box-02 .area-01 .textright{ text-align:left;}
#drink .box{ padding:0px 10px;}
}



/*▼sweets▼*/
#sewwts #box-02 .area-01{ overflow:hidden; margin-bottom:180px;}
#sewwts #box-02 .area-01 .left{ width:540px; float:left;}
#sewwts #box-02 .area-01 .right{ width:400px; float:right; display:table;}
#sewwts #box-02 .area-01:nth-child(2n) .left{float:right;}
#sewwts #box-02 .area-01:nth-child(2n) .right{float:left;}
#sewwts #box-02 .area-01 .textright{ text-align:right;}

#sewwts #box-02 .area-01 .right .inner{ display:table-cell; vertical-align:middle;}
#sewwts #box-02 .area-01 .right .text{ display:inline-block; vertical-align: top;text-align:left;}
#sewwts #box-02 .area-01 .right .text-w1{ width:40%;}
#sewwts #box-02 .area-01 .right .text-w2{ width:50%;}
#sewwts #box-02 .area-01 .right .text-w3{ width:100%;}
#sewwts #box-02 .area-01 .right .text:first-child{ margin-right:40px;}
#sewwts #box-02 .area-01 .right .text .p-01{ font-size:16px; margin-bottom:15px;}
#sewwts #box-02 .area-01 .right .text .p-01 span{ font-size:13px; margin-left:10px;}
#sewwts #box-02 .area-01 .right .text .p-02{ font-size:13px; margin-left:15px;}
#sewwts #box-02 .area-01 .right .text .p-03{margin-right:20px;font-size:16px; }
#sewwts #box-02 .area-01 .right .text .p-03 span{ font-size:13px; margin-left:6px;}
#sewwts #box-02 .area-01 .right .text .p-05{ margin-top:10px; font-size:13px}
#sewwts #box-02 .area-01 .right .text ul{ margin-left:10px; margin-top:20px;}
#sewwts #box-02 .area-01 .right .text ul li{ text-indent:-1em; padding-left:1em; font-size:13px; letter-spacing:normal;}

@media (max-width:938px) {
    #sewwts #box-02{ padding-bottom:150px;}
#sewwts #box-02 .area-01 .left{ width:100%; float:none;}
#sewwts #box-02 .area-01 .right{ width:100%; float:none; display:table;}
#sewwts #box-02 .area-01:nth-child(2n) .left{float:none;}
#sewwts #box-02 .area-01:nth-child(2n) .right{float:none;}
#sewwts #box-02 .area-01 .textright{ text-align:left;}
#sewwts .box{ padding:0px 10px;}

}
/*▼bread▼*/
#bread #box-01{ text-align:center;}
#bread #box-01 .area-01{display:inline-block; text-align:left;}
#bread #box-01 .area-01 h3{ color:#999; font-size:20px; margin-bottom:20px;}
#bread #box-01 .area-01 .tb-01{margin-bottom:40px;}

#bread #box-02 .area-02{ text-align:center; margin-bottom:50px;}
#bread #box-02 .area-01{ overflow:hidden; margin-bottom:180px;}
#bread #box-02 .area-01 .left{ width:460px; float:left;}
#bread #box-02 .area-01 .right{ width:460px; float:right; display:table;}
#bread #box-02 .area-01:nth-of-type(odd) .left{ width:460px; float:right;}
#bread #box-02 .area-01:nth-of-type(odd) .right{ width:460px; float:left;}
#bread #box-02 .area-01 .textright{ text-align:right;}

#bread #box-02 .area-01 .left table{ margin-top:200px;}
#bread #box-02 .area-01 .left table .td-01{ width:70px;}

#bread #box-02 .area-01 .right .inner{ display:table-cell; vertical-align:middle;}
#bread #box-02 .area-01 .right .text{ display:inline-block; vertical-align: top; text-align: left;}
#bread #box-02 .area-01 .right .text-w1{ width:40%;}
#bread #box-02 .area-01 .right .text-w2{ width:50%;}
#bread #box-02 .area-01 .right .text-w3{ width:100%;}
#bread #box-02 .area-01 .right .text:first-child{ margin-right:30px;}
#bread #box-02 .area-01 .right .text .p-01{ font-size:16px; margin-bottom:15px;}
#bread #box-02 .area-01 .right .text .p-01 span{ font-size:14px; margin-left:10px;}
#bread #box-02 .area-01 .right .text .p-02{ font-size:13px; margin-left:15px;}
#bread #box-02 .area-01 .right .text .p-03{margin-right:20px;font-size:16px; }
#bread #box-02 .area-01 .right .text .p-03 span{ font-size:14px; margin-left:6px;}
#bread #box-02 .area-01 .right .text .p-05{ margin-top:10px; font-size:13px}
#bread #box-02 .area-01 .right .text ul{ margin-left:10px; margin-top:20px;}
#bread #box-02 .area-01 .right .text ul li{ text-indent:-1em; padding-left:1em; font-size:13px; letter-spacing:normal;}



@media (max-width:938px) {
    
body #bread #box-02 .area-01{ overflow:hidden; margin-bottom:80px;}
#bread #box-02 .area-01 .left{ width:100%; float: none; text-align:center; margin-bottom:20px;}
#bread #box-02 .area-01 .right{ width:100%; float: none;}
#bread #box-02 .area-01:nth-of-type(odd) .left{ width:100%; float:none;}
#bread #box-02 .area-01:nth-of-type(odd) .right{ width:100%; float:none;}

#bread #box-02 .area-01 .textright{ text-align:left;}
body #bread .box{ padding:0px 10px;}
}


/*▼sarad▼*/
#sarad #box-02 .area-02{ text-align:center; margin-bottom:50px;}
#sarad #box-02 .area-01{ overflow:hidden; margin-bottom:180px;}
#sarad #box-02 .area-01 .left{ width:460px; float:left;}
#sarad #box-02 .area-01 .right{ width:460px; float:right; display:table;}
#sarad #box-02 .area-01:nth-of-type(odd) .left{ width:460px; float:right;}
#sarad #box-02 .area-01:nth-of-type(odd) .right{ width:460px; float:left;}
#sarad #box-02 .area-01 .textright{ text-align:right;}

#sarad #box-02 .area-01 .left table{ margin-top:200px;}
#sarad #box-02 .area-01 .left table .td-01{ width:70px;}

#sarad #box-02 .area-01 .right .inner{ display:table-cell; vertical-align:middle;}
#sarad #box-02 .area-01 .right .text{ display:inline-block; vertical-align: top; text-align: left;}
#sarad #box-02 .area-01 .right .text-w1{ width:40%;}
#sarad #box-02 .area-01 .right .text-w2{ width:50%;}
#sarad #box-02 .area-01 .right .text-w3{ width:100%;}
#sarad #box-02 .area-01 .right .text:first-child{ margin-right:30px;}
#sarad #box-02 .area-01 .right .text .p-01{ font-size:16px; margin-bottom:15px;}
#sarad #box-02 .area-01 .right .text .p-01 span{ font-size:14px; margin-left:10px;}
#sarad #box-02 .area-01 .right .text .p-02{ font-size:13px; margin-left:15px;}
#sarad #box-02 .area-01 .right .text .p-03{margin-right:20px;font-size:16px; }
#sarad #box-02 .area-01 .right .text .p-03 span{ font-size:14px; margin-left:6px;}
#sarad #box-02 .area-01 .right .text .p-05{ margin-top:10px; font-size:13px}
#sarad #box-02 .area-01 .right .text ul{ margin-left:10px; margin-top:20px;}
#sarad #box-02 .area-01 .right .text ul li{ text-indent:-1em; padding-left:1em; font-size:13px; letter-spacing:normal;}


@media (max-width:938px) {
    
#sarad #box-02 .area-01 .left{ width:100%; float: none; text-align:center; margin-bottom:20px;}
#sarad #box-02 .area-01 .right{ width:100%; float: none;}
#sarad #box-02 .area-01:nth-of-type(odd) .left{ width:100%; float:none;}
#sarad #box-02 .area-01:nth-of-type(odd) .right{ width:100%; float:none;}

#sarad #box-02 .area-01 .textright{ text-align:left;}
body #sarad .box{ padding:0px 10px;}
}
/*▼soup▼*/


#soup #box-02{padding-bottom:0; margin-bottom:100px;}
#soup #box-02 .area-02{ text-align:center; margin-bottom:50px;}
#soup #box-02 .area-01{ overflow:hidden; margin-bottom:180px;}
#soup #box-02 .area-01:last-child{ margin-bottom:0;}
#soup #box-02 .area-01 .left{ width:460px; float:left;}
#soup #box-02 .area-01 .right{ width:460px; float:right; display:table;}
#soup #box-02 .area-01 .right-01{ margin-top:30px;}
#soup #box-02 .area-01:nth-of-type(even) .left{float:right;}
#soup #box-02 .area-01:nth-of-type(even) .right{float:left;}
#soup #box-02 .area-01 .textright{ text-align:right;}

#soup #box-02 .area-01 .left table{ margin-top:200px;}
#soup #box-02 .area-01 .left table .td-01{ width:70px;}


#soup #box-02 .area-01 .right .inner{ display:table-cell; vertical-align:middle;}
#soup #box-02 .area-01 .right .text{ display:inline-block; vertical-align: top; text-align: left;}
#soup #box-02 .area-01 .right .text-w1{ width:40%;}
#soup #box-02 .area-01 .right .text-w2{ width:50%;}
#soup #box-02 .area-01 .right .text-w3{ width:100%;}
#soup #box-02 .area-01 .right .text:first-child{ margin-bottom:30px;}
#soup #box-02 .area-01 .right .text .p-01{ font-size:16px; margin-bottom:15px;}
#soup #box-02 .area-01 .right .text .p-01 span{ font-size:14px; margin-left:10px;}
#soup #box-02 .area-01 .right .text .p-02{ font-size:13px; margin-left:15px;}
#soup #box-02 .area-01 .right .text .p-03{margin-right:20px;font-size:16px; }
#soup #box-02 .area-01 .right .text .p-03 span{ font-size:14px; margin-left:6px;}
#soup #box-02 .area-01 .right .text .p-05{ margin-top:10px; font-size:13px}
#soup #box-02 .area-01 .right .text ul{ margin-left:10px; margin-top:20px;}
#soup #box-02 .area-01 .right .text ul li{ text-indent:-1em; padding-left:1em; font-size:13px; letter-spacing:normal;}

@media (max-width:938px) {
    
#soup #box-02{padding-bottom:0; margin-bottom:180px;}
}


#food-menu-hover { padding: 80px 20px; background: #f8f8f5; }
#food-menu-hover .menu-wrap { max-width: 1400px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; justify-content: space-between; }
#food-menu-hover .menu-col { width: calc((100% - 84px) / 4); min-width: 260px; }
#food-menu-hover .menu-col h3 { font-size: 28px; line-height: 1.2; margin: 0 0 22px; padding-bottom: 10px; border-bottom: 1px solid #222; font-family: "Cormorant Garamond", serif; letter-spacing: 0.05em; }
#food-menu-hover .menu-col ul { margin: 0; padding: 0; list-style: none; }
#food-menu-hover .menu-col ul li { margin-bottom: 14px; }
#food-menu-hover .menu-col ul li a { position: relative; display: block; text-decoration: none; color: #222; padding: 0 0 0 28px; transition: all .3s ease; }
/* hover前にも「矢印が出る」ことが分かるよう薄く表示 */
#food-menu-hover .menu-col ul li a::before { content: "▶"; position: absolute; left: 0; top: 2px; font-size: 12px; opacity: .25; transform: translateX(0); transition: all .3s ease; }
#food-menu-hover .menu-col ul li a .jp { display: block; font-size: 18px; line-height: 1.6; font-weight: 700; transition: all .3s ease; }
#food-menu-hover .menu-col ul li a .en { display: block; font-size: 13px; line-height: 1.5; color: #666; letter-spacing: 0.04em; transition: all .3s ease; }
#food-menu-hover .menu-col ul li a:hover { transform: translateX(6px); }
#food-menu-hover .menu-col ul li a:hover::before { opacity: 1; transform: translateX(4px); }
#food-menu-hover .menu-col ul li a:hover .jp { color: #000; }
#food-menu-hover .menu-col ul li a:hover .en { color: #333; }

/* タブレット */
@media screen and (max-width: 1100px) {
#food-menu-hover .menu-col { width: calc((100% - 28px) / 2); }
}

/* スマホは縦並び */
@media screen and (max-width: 767px) {
#food-menu-hover { padding: 50px 15px; }
#food-menu-hover .menu-wrap { display: block; }
#food-menu-hover .menu-col { width: 100%; min-width: auto; margin-bottom: 40px; }
#food-menu-hover .menu-col h3 { font-size: 24px; margin-bottom: 18px; }
#food-menu-hover .menu-col ul li a { padding-left: 24px; }
#food-menu-hover .menu-col ul li a .jp { font-size: 17px; }
#food-menu-hover .menu-col ul li a .en { font-size: 12px; }
}
/*▼curry▼*/


#curry #box-02{ padding-top:0px;}
#curry #box-02 .area-02{ text-align:center; margin-bottom:50px;}
#curry #box-02 .area-01{ overflow:hidden; margin-bottom:100px;}
#curry #box-02 .area-01 .left{ width:560px; float:left;}
#curry #box-02 .area-01 .right{ width:360px; float:right; display:table;}
#curry #box-02 .area-01:nth-of-type(odd) .left{float:right;}
#curry #box-02 .area-01:nth-of-type(odd) .right{float:left;}
#curry #box-02 .area-01 .textright{ text-align:right;}

#curry #box-02 .area-01 .left table{ margin-top:200px;}
#curry #box-02 .area-01 .left table .td-01{ width:70px;}


#curry #box-02 .area-01 .right .inner{ display:table-cell; vertical-align:middle;}
#curry #box-02 .area-01 .right .text{ display:inline-block; vertical-align: top; text-align: left;}
#curry #box-02 .area-01 .right .text-w1{ width:40%;}
#curry #box-02 .area-01 .right .text-w2{ width:50%;}
#curry #box-02 .area-01 .right .text-w3{ width:100%;}
#curry #box-02 .area-01 .right .text:first-child{ margin-right:30px;}
#curry #box-02 .area-01 .right .text .p-01{ font-size:16px; margin-bottom:15px;}
#curry #box-02 .area-01 .right .text .p-01 span{ font-size:14px; margin-left:10px;}
#curry #box-02 .area-01 .right .text .p-02{ font-size:13px; margin-left:15px;}
#curry #box-02 .area-01 .right .text .p-03{margin-right:20px;font-size:16px; }
#curry #box-02 .area-01 .right .text .p-03 span{ font-size:14px; margin-left:6px;}
#curry #box-02 .area-01 .right .text .p-05{ margin-top:10px; font-size:13px}
#curry #box-02 .area-01 .right .text ul{ margin-left:10px; margin-top:20px;}
#curry #box-02 .area-01 .right .text ul li{ text-indent:-1em; padding-left:1em; font-size:13px; letter-spacing:normal;}
.point-01{ clear:both; padding-top:10px; overflow:hidden;}
.point-01 .p-06{font-weight:bold;}
.point-01 .p-07{}

#curry #box-02 .area-03 li{ text-indent:-1em; padding-left:1em;}

/* ===============================
   CURRY ABOUT
=============================== */
.curry-about { padding: 80px 20px; background: #f8f8f5; margin-bottom:50px;}
.curry-about .inner { max-width: 900px; margin: auto; text-align: center; }
/* タイトル */
.curry-title { font-family: "Cormorant Garamond", serif; font-size: 34px; letter-spacing: 0.08em; margin-bottom: 30px; }
/* リード */
.curry-about .lead { font-size: 18px; line-height: 2; font-weight: 600; margin-bottom: 25px; }
/* 通常テキスト */
.curry-about p { font-size: 15px;margin-bottom: 20px; }
/* キャッチ */
.curry-about .catch { font-size: 20px; font-weight: bold; letter-spacing: 0.05em; margin: 40px 0; }
/* 下のボックス */
.curry-about .ex { border-top: 1px solid #ddd; padding-top: 25px; margin-top: 25px; }
.curry-about .ex h3 { font-size: 20px; margin-bottom: 10px; letter-spacing: 0.05em; }

/* SP */
@media screen and (max-width: 767px) {
.curry-about { padding: 50px 15px; }
.curry-title { font-size: 26px; }
.curry-about .lead { font-size: 16px; }
.curry-about .catch { font-size: 18px; }
}

/*▼hamburg▼*/

#hamburg #box-02{ padding-top:0px;}
#hamburg #box-02 .area-02{ text-align:center; margin-bottom:50px;}
#hamburg #box-02 .area-01{ overflow:hidden; margin-bottom:100px;}
#hamburg #box-02 .area-01 .left{ width:560px; float:left;}
#hamburg #box-02 .area-01 .right{ width:360px; float:right; display:table;}
#hamburg #box-02 .area-01:nth-of-type(odd) .left{float:right;}
#hamburg #box-02 .area-01:nth-of-type(odd) .right{float:left;}
#hamburg #box-02 .area-01 .textright{ text-align:right;}

#hamburg #box-02 .area-01 .left table{ margin-top:200px;}
#hamburg #box-02 .area-01 .left table .td-01{ width:70px;}


#hamburg #box-02 .area-01 .right .inner{ display:table-cell; vertical-align:middle;}
#hamburg #box-02 .area-01 .right .text{ display:inline-block; vertical-align: top; text-align: left;}
#hamburg #box-02 .area-01 .right .text-w1{ width:40%;}
#hamburg #box-02 .area-01 .right .text-w2{ width:50%;}
#hamburg #box-02 .area-01 .right .text-w3{ width:100%;}
#hamburg #box-02 .area-01 .right .text:first-child{ margin-right:30px;}
#hamburg #box-02 .area-01 .right .text .p-01{ font-size:16px; margin-bottom:15px;}
#hamburg #box-02 .area-01 .right .text .p-01 span{ font-size:14px; margin-left:10px;}
#hamburg #box-02 .area-01 .right .text .p-02{ font-size:13px; margin-left:15px;}
#hamburg #box-02 .area-01 .right .text .p-03{margin-right:20px;font-size:16px; }
#hamburg #box-02 .area-01 .right .text .p-03 span{ font-size:14px; margin-left:6px;}
#hamburg #box-02 .area-01 .right .text .p-05{ margin-top:10px; font-size:13px}
#hamburg #box-02 .area-01 .right .text ul{ margin-left:10px; margin-top:20px;}
#hamburg #box-02 .area-01 .right .text ul li{ text-indent:-1em; padding-left:1em; font-size:13px; letter-spacing:normal;}


/*▼pasta▼*/


#pasta #box-02 .area-02{ text-align:center; margin-bottom:50px;}
#pasta #box-02 .area-01{ overflow:hidden; margin-bottom:180px;}
#pasta #box-02 .area-01 .left{ width:560px; float:left;}
#pasta #box-02 .area-01 .right{ width:360px; float:right; display:table;}
#pasta #box-02 .area-01:nth-of-type(odd) .left{float:right;}
#pasta #box-02 .area-01:nth-of-type(odd) .right{float:left;}
#pasta #box-02 .area-01 .textright{ text-align:right;}

#pasta #box-02 .area-01 table{ margin-top:20px; text-align:left;}
#pasta #box-02 .area-01 table td{ font-size:13px;}
#pasta #box-02 .area-01 table .td-01{ width:70px;}

@media (max-width:938px) {
    
body#food #box-02 .area-01{ overflow:hidden; margin-bottom:80px;}
body#food #box-02 .area-01 .left{ width:100%; float: none; text-align:center; margin-bottom:20px;}
body#food #box-02 .area-01 .right{ width:100%; float: none;}
body#food #box-02 .area-01:nth-of-type(odd) .left{float:none;}
body#food #box-02 .area-01:nth-of-type(odd) .right{float:none;}

body#food #box-02 .area-01 .textright{ text-align:left;}
body#food .box{ padding:0px 10px;}
}


.soup_salad_set{margin-bottom:50px; overflow:hidden;}
.soup_salad_set .tb-01{ float:right;display:flex;align-items: center/* ←縦の中央揃え */;}
.soup_salad_set .tb-01 p{ margin-right:10px; font-weight:bold; font-size:18px;}
.soup_salad_set .tb-01 p span{font-weight: normal; font-size:16px;}
.soup_salad_set .tb-01 img{ height:100px;}

#pasta #box-02 .area-01 .right .inner{ display:table-cell; vertical-align:middle;}
#pasta #box-02 .area-01 .right .text{ display:inline-block; vertical-align: top; text-align: left;}
#pasta #box-02 .area-01 .right .text-w1{ width:40%;}
#pasta #box-02 .area-01 .right .text-w2{ width:50%;}
#pasta #box-02 .area-01 .right .text-w3{ width:100%;}
#pasta #box-02 .area-01 .right .text:first-child{ margin-right:30px;}
#pasta #box-02 .area-01 .right .text .p-01{ font-size:16px; margin-bottom:15px;}
#pasta #box-02 .area-01 .right .text .p-01 span{ font-size:14px; margin-left:10px;}
#pasta #box-02 .area-01 .right .text .p-02{ font-size:13px; margin-bottom:10px;}
#pasta #box-02 .area-01 .right .text .p-03{margin-right:20px;font-size:16px; }
#pasta #box-02 .area-01 .right .text .p-03 span{ font-size:14px;}
#pasta #box-02 .area-01 .right .text .p-05{ margin-top:10px; font-size:13px}
#pasta #box-02 .area-01 .right .text ul{ margin-left:10px; margin-top:20px;}
#pasta #box-02 .area-01 .right .text ul li{ text-indent:-1em; padding-left:1em; font-size:13px; letter-spacing:normal;}
#pasta #box-02 .area-03{}
#pasta #box-02 .area-03 img{ width:250px; margin-left:500px;}

/*▼risotto▼*/


#risotto #box-02 .area-01{ overflow:hidden; margin-bottom:180px;}
#risotto #box-02 .area-01 .left{ width:560px; float:left;}
#risotto #box-02 .area-01 .right{ width:360px; float:right; display:table;}
#risotto #box-02 .area-01:nth-of-type(odd) .left{float:right;}
#risotto #box-02 .area-01:nth-of-type(odd) .right{float:left;}
#risotto #box-02 .area-01 .textright{ text-align:right;}

#risotto #box-02 .area-01 table{ margin-top:20px;}
#risotto #box-02 .area-01 table td{ font-size:13px;}
#risotto #box-02 .area-01 table .td-01{ width:70px;}


#risotto #box-02 .area-01 .right .inner{ display:table-cell; vertical-align:middle;}
#risotto #box-02 .area-01 .right .text{ display:inline-block; vertical-align: top; text-align: left;}
#risotto #box-02 .area-01 .right .text-w1{ width:40%;}
#risotto #box-02 .area-01 .right .text-w2{ width:50%;}
#risotto #box-02 .area-01 .right .text-w3{ width:100%;}
#risotto #box-02 .area-01 .right .text:first-child{ margin-right:30px;}
#risotto #box-02 .area-01 .right .text .p-01{ font-size:16px; margin-bottom:15px;}
#risotto #box-02 .area-01 .right .text .p-01 span{ font-size:14px; margin-left:10px;}
#risotto #box-02 .area-01 .right .text .p-02{ font-size:13px; margin-bottom:10px;}
#risotto #box-02 .area-01 .right .text .p-03{margin-right:20px;font-size:16px; }
#risotto #box-02 .area-01 .right .text .p-03 span{ font-size:14px;}
#risotto #box-02 .area-01 .right .text .p-05{ margin-top:10px; font-size:13px}
#risotto #box-02 .area-01 .right .text ul{ margin-left:10px; margin-top:20px;}
#risotto #box-02 .area-01 .right .text ul li{ text-indent:-1em; padding-left:1em; font-size:13px; letter-spacing:normal;}


/*▼riceball▼*/


#riceball #box-02 .area-01{ overflow:hidden; margin-bottom:180px;}
#riceball #box-02 .area-01 .left{ width:560px; float:left;}
#riceball #box-02 .area-01 .right{ width:360px; float:right; display:table;}
#riceball #box-02 .area-01:nth-of-type(odd) .left{float:right;}
#riceball #box-02 .area-01:nth-of-type(odd) .right{float:left;}
#riceball #box-02 .area-01 .textright{ text-align:right;}

#riceball #box-02 .area-01 table{ margin-top:20px; margin-bottom:20px;}
#riceball #box-02 .area-01 table td{ font-size:13px;}
#riceball #box-02 .area-01 table .td-01{ width:70px;}


#riceball #box-02 .area-01 .right .inner{ display:table-cell; vertical-align:middle;}
#riceball #box-02 .area-01 .right .text{text-align: left;}
#riceball #box-02 .area-01 .right .text-w1{ width:40%;}
#riceball #box-02 .area-01 .right .text-w2{ width:50%;}
#riceball #box-02 .area-01 .right .text-w3{ width:100%;}
#riceball #box-02 .area-01 .right .text:first-child{ margin-right:30px;}
#riceball #box-02 .area-01 .right .text .p-01{ font-size:16px; margin-bottom:15px;}
#riceball #box-02 .area-01 .right .text .p-01 span{ font-size:14px; margin-left:10px;}
#riceball #box-02 .area-01 .right .text .p-02{ font-size:13px; margin-bottom:10px;}
#riceball #box-02 .area-01 .right .text .p-03{margin-right:20px;font-size:16px; }
#riceball #box-02 .area-01 .right .text .p-03 span{ font-size:14px;}
#riceball #box-02 .area-01 .right .text .p-05{ margin-top:10px; font-size:13px}
#riceball #box-02 .area-01 .right .text ul{ margin-left:10px; margin-top:20px;}
#riceball #box-02 .area-01 .right .text ul li{ text-indent:-1em; padding-left:1em; font-size:13px; letter-spacing:normal;}

/*▼gluten▼*/

#gluten #box-01{}


#gluten #box-01 .area-01{text-align:center; margin-bottom:30px;}
#gluten #box-01 .area-01 p{ font-size:20px; color: #666;}


#gluten #box-01 .area-02 table{ width:100%;}
#gluten #box-01 .area-02 table td{ padding:20px 0px;}
#gluten #box-01 .area-02 table td.td-01{ width:200px; font-weight:bold; font-size:16px;}
#gluten #box-01 .area-02 table td .p-01{font-weight:bold; margin-bottom:10px;}


@media (max-width:648px) {
 #gluten #box-01{ margin-bottom:100px;}   
    #gluten #box-01 .area-02 table td{ padding:0px; display:block;}
#gluten #box-01 .area-02 table td.td-01{ width: auto; font-weight:bold; font-size:16px; padding-top:50px;}
#gluten #box-01 .area-02 table td .p-01{font-weight:bold; margin-bottom:10px;}
    
}

/*▼shop▼*/

#shop #box-01 .area-01{ overflow:hidden; margin-bottom:180px; text-align:center;}
#shop #box-01 .area-01 table{ text-align:left; margin:auto;}
#shop #box-01 .area-01 table td{ padding:20px 0px;}
#shop #box-01 .area-01 table td.td-01{ width:150px;}



.googlemap{
  height: 100vh;
  filter: grayscale(100%);
}
.googlemap{height: 0;overflow: hidden;padding-bottom: 56.25%;position: relative;}
.googlemap iframe {position: absolute;left: 0;top: 0;height: 100%;width: 100%;}

@media (max-width:500px) {
    #shop #box-01 .area-01{margin-bottom:80px;}
#shop #box-01 .area-01 table td{ padding:0px; display:block;}
#shop #box-01 .area-01 table td.td-01{ width: auto; font-weight:bold; padding-top:20px;}


.googlemap{height: 0;overflow: hidden;padding-bottom: 86.25%;position: relative; margin-bottom:50px;}

}

/*▼about▼*/




#about #box-01{ text-align:center;}

#about #box-01 .p-01{ font-size:20px; color:#666; margin-bottom:70px;}
#about #box-01 .p-02{ display:flex;align-items: center/* ←縦の中央揃え */;justify-content: center/* 横も中央 */;flex-direction: column; font-size:30px; margin-bottom:30px;}
#about #box-01 .p-02 img{ height:100px; margin-bottom:10px;}
#about .commitment { padding: 50px 20px; background: #f8f6f1; }
#about .commitment .inner {}
#about .commitment-list { text-align:left;}
#about .commitment-item { background: #fff; border-radius: 18px; padding: 28px 24px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); border: 1px solid #eee7db; margin-bottom:30px;}
#about .commitment-item h3 { font-size: 22px; line-height: 1.5; color: #6d4c41; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #e8ddd0; font-weight: 700; }
#about .commitment-item h3 span { font-size: 15px; font-weight: 500; color: #8a7568; margin-left: 8px; }
#about .commitment-item p { font-size: 16px; line-height: 2; color: #444; margin-bottom: 12px; }
#about .commitment-item p:last-child { margin-bottom: 0; }
#about .sub-box { margin-top: 18px; padding: 18px; background: #faf7f2; border-radius: 12px; border: 1px solid #ece3d8; }
#about .sub-box h4 { font-size: 17px; color: #5d4037; margin-bottom: 10px; font-weight: 700; }
 @media screen and (max-width: 900px) {
#about .commitment-item { padding: 22px 18px; }
#about .commitment-item h3 { font-size: 20px; }
}




/* モーダル */

.modal { position: fixed; z-index: 9999; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }
/* 開いた状態 */

.modal.show { opacity: 1; visibility: visible; }
/* モーダル本体 */

.modal-content { background: #fff; padding: 40px; width: calc(100% - 40px); max-width: 900px; position: relative; box-sizing: border-box; max-height: 90vh; overflow: auto; transform: translateY(20px); opacity: 0; transition: all .35s ease; }
.modal.show .modal-content { transform: translateY(0); opacity: 1; }



.modal-close{
  position:absolute;
  right:20px;
  top:10px;
  font-size:28px;
  cursor:pointer;
}
/* ===== アレルギー ===== */

.p-allergy { font-weight: bold; font-size: 18px; margin-bottom: 15px; }
.allergy-box { display: flex; border: 1px solid #333; }
.allergy-box.bordernone { border-top: none; }
/* ←ここが重要 */

.allergy-title { flex: 0 0 200px;   /* 固定幅 */ padding: 20px; border-right: 1px solid #333; font-weight: bold; }
.allergy-list { flex: 1; display: flex; flex-wrap: wrap; gap: 25px; padding: 20px; min-width: 0;  /* ←これがはみ出し防止 */ }
.allergy-list ul { list-style: none; padding: 0; margin: 0; }
.allergy-list li { margin-bottom: 10px; position: relative; padding-left: 18px; font-size:14px;}
.allergy-list li::before { content: "▶"; position: absolute; left: 0; top: 0; }

/* ===== スマホ ===== */

@media screen and (max-width:768px) {
.modal { padding: 10px; }
.modal-content { padding: 25px; }
.allergy-box { flex-direction: column; }
.allergy-title { flex: none;border-right: none; border-bottom: 1px solid #333; }
.allergy-list { flex-direction: column; gap: 12px; padding: 15px; }
}