@charset "utf-8";

/* common ---------------- */
.pan{ display:none; }
.con-box{ padding:3em 0 3em; }
.wbox{ padding:2.5em 1em 2em; background:#e0e0e0; }
.wbox + .ttl-logo{ margin-top:3em; }
.bg-w .wbox{ background:#d9c8c0; }
.note{ text-align:right; }
.tax{ text-align:right; font-size:0.85em; }
.wrap-border{ padding: 1em; border:2px solid #bfa79c; }
.sub-ttl { position: relative; background: #985535; color: #e0e0e0; padding: 0.6em 1em; font-size: 1.4em; line-height: 1.3; overflow: hidden;}
.sub-ttl .sub-ttl-border { display: inline-block; margin-bottom: 0; position: absolute; font-size: 1.2em; color: #bc8266;right: 0;bottom: -7px; font-style: italic;}

.tl-group .sub{ margin-bottom: 0.6em; padding-bottom: 0.2em; border-bottom:1px solid #bfa79c; }
.tl-group .category{ display:inline-block; margin:0; padding:0.2em 1em; font-size:0.95em;
  background-color:rgba(158, 78, 39, 0.1); }
.tl-group .price{ margin-top:0; }

/* a-list */
.a-list li{ margin:0 0.5em 1em; }
.a-list li a{ display:block; height: 100%; padding:0.3em 1.2em; text-align:center;
  font-size:1.05em; background-color: rgba(158, 78, 39, 0.3); }
.a-list li a:hover{ color: #372014; background:#cfb277; }

/* menu-list */
.menu-list > li{ padding:0 0.5em 0.5em; }
.menu-list > li:not(:last-child){ margin-bottom:1.6em; border-bottom:1px solid #bfa79c; }
.menu-list > li .sub{ margin-bottom:0.5em; }
.menu-list > li .category{ display:inline-block; margin:0; padding:0.2em 1em; font-size:0.95em;
  background-color:rgba(158, 78, 39, 0.1); }
.menu-list .price{ width:100%; justify-content:flex-end; }
.menu-list .price li{ text-align:right; font-size:0.9em; }
.menu-list .price li:not(:last-child){ margin-right:1em; }
.menu-list .price span{ margin:0 0.2em 0 0.5em; font-size:1.05em; }
.menu-list .price .sepa{ display:inline; padding-left: 0.8em; }

/* mv */
#mv{ padding-top:300px; background:url(https://www.nanabankan.com/img/menu/pagettl.jpg) no-repeat 50% 0 / cover; }
#about #mv{ background-image:url(../img/about/pagettl.jpg); }
#drink #mv{ background-image:url(../img/drink/pagettl.jpg); }
#food #mv{ background-image:url(../img/food/pagettl.jpg); }
#party #mv{ background-image:url(../img/party/pagettl.jpg); }
#policy #mv{ background-image:url(../img/about/pagettl.jpg); }
#shopping #mv{ background-image:url(../img/shopping/pagettl.jpg); width: 100%; position: relative; padding-top: 25%;}
.header-box{ position:relative; z-index: 1; }
.pagettl{ display: -webkit-flex; display: flex;
  -webkit-justify-content: center; justify-content: center;
  -webkit-align-items: center; align-items: center;
  position:absolute; width:150px; height:150px; bottom:-75px; left: 0; right: 0;
  margin:0 auto; text-align:center; font-size:2.2em; line-height:1; letter-spacing:0.05em;
  color:#e0e0e0; background-color:rgba(88, 94, 23, 0.7); border-radius:50%; }

/* 2写真枠 */
.pic2group-list{ display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; text-align:center; }
.pic2group-list li{ width:50%; }
.pic2group img{ width:100%; }
.pic2group-list .caption{ margin:0.8em 0.5em; font-size:0.95em; line-height: 1.5; }

/* drink */
#drink .a-list{ margin-bottom:3em; }
#drink-wine .sub{ margin-bottom:1.5em; }

/* about */
.room1{ margin-top:2.5em; }
#introduction .pic2col{ margin-bottom:3em; }
.pic-ex .ttl{ font-size:1.4em; }
.pic-ex .ttl .room-num{ display: inline-block; width:36px; height:36px; margin-right:0.3em; padding:0.3em; text-align:center;
  line-height:1; color:#e0e0e0; background:#994126; border-radius:50%; }
.pic-ex .txt{ margin-bottom:2em; }
.pic-ex figcaption{ margin-top:0.3em; font-size:0.95em; }
.pic-ex + .pic-ex{ margin-top:4em; }
#information .ttl-logo{ margin-bottom:3em; }
#covid19 .pic2col:not(:last-child){ margin-bottom:3em; padding-bottom:1.5em; border-bottom:1px solid #bfa79c; }
#information .gmap-btn{ margin:0 auto; }
#information .gmap-btn a{ padding:0.3em 0; font-size:1.3em;  }
#information .gmap-btn .gf-jose{ padding-left:1.2em; }
.pic-ex .pic-l{ order:1; width:74%; }
.pic-ex .pic-m{ order:2; position:relative; /*z-index: 1;*/ width:35%; margin:-3em 0 0 auto; }
#owner .copy{ margin-bottom: 1.2em; }
#owner .txt p + .copy{ margin-top:1.8em; }
.tax + .wbox{ margin-top:2em; }
#policy {
  .ttl { margin-bottom: .8em; padding-bottom: .25em; font-size: 1.2em; border-bottom: 1px solid #bfa79c; }
  .bg-pnk { width: 80%; margin-inline: auto; padding: 1em 4em 2.5em; background: #d9c8c0; }
  .cancel-fee { display: grid; grid-template-columns: 1fr auto; gap: .5em 1em; }
  .cancel-fee:first-of-type { margin-bottom: 2em; }
  .cancel-fee dt,
  .cancel-fee dd { margin: 0; }
  .cancel-fee dd { text-align: right; font-weight: bold; }
}

/* food */
#food .a-list{ margin-bottom:3em; }
#food-intro .sub{ margin-bottom:1.5em; }
.pic1col{ width:90%; margin:2em auto 3em; text-align:center; }
.pic1col figcaption{ margin-top:0.8em; font-size:0.95em; line-height:1.4; }
.menu-list + .pic1col{ margin:2em auto 0; }
#starter.con-box, #salad.con-box, #fish.con-box, #meat.con-box{ padding-top:3em; }
#story .a-list{ margin-bottom:5em; }
#story .pic2col + .pic2col{ margin-top:5em; }
#takeout .pic1col{ margin:1em auto !important; }
#takeout .menu-list{ margin-top:2em; padding-top:1.5em; border-top:1px solid #bfa79c; }
#takeout .bnr_takeout{ width:100%; margin:0 auto 2em; }
.cource-list{ width:90%; margin:1.5em auto; padding:1.5em 1em; text-align:center; }
.cource-list li{ margin-bottom:1.2em; line-height: 1.6; }
.cource-list + .tl-group{ margin-top:3em; }
.cource-list .fr{ display:block; margin-top:1.8em; color:#927a6e; }
#course .note.price span{ margin-right:0.2em; font-size:1.1em; }
.wbox + .wbox{ margin-top:3em; }
.cource-list + .sub{ margin-top:3em; }
.list-dot.bg-warm{ padding:1.5em 1.5em; }
.list-dot.flex li{ margin-right:1.7em; white-space: nowrap; }
.wbox .ttl-bo{ margin-top:1.5em; }
#lunch .sub.catetitle{ margin-bottom:0.7em; }
/* #story + .con-box{ padding-bottom:1em; } */
.menu-list > .flex h3 { width: 80%;}
.menu-list > .flex ul { width: 20%;}
.list-dot.col li { width: 50%; margin-right: 0;}
.list-dot.col3 li { width: 33%;}
.list-dot.col { padding: 0;}
.list-dot.col.mb { margin-bottom: 1em;}
.menu-list .ttl-bo { margin-bottom: 1em;}
.menu-list > .flex .sub { margin-bottom: 0;}

/* Christmas */
#christmas .wbox{ position:relative; margin-top: 3em; }
#christmas .wbox::before{ position:absolute; content:""; width:70px; height:77px; top:0; left:50%;
  background:url(../img/party_christmas.png) no-repeat 50% 0 / 100%; transform:translate(-50%, -50%); }
.bnr-special.wbox{ padding:8px; border:3px solid #994126; }
.bnr-special .txt{ margin:0; }
.bnr-special .bnr_christmas{ display:block; width:50%; margin:0 auto; }
.wrap-special{ padding:1.5em 0 1.5em 1em; border:1px dashed #994126; }

/* Anniversary */
#anni.bnr-special .bnr_christmas{ width:60%; }

/* party */
#party .a-list{ margin-bottom:3em; }
#party-intro .a-list, #drink-wine .a-list, #food-intro .a-list{ margin-top:3em; }
#party .wbox{ position:relative; margin-top: 3em; }
#party .wbox::before{ position:absolute; content:""; width:70px; height:77px; top:0; left:50%;
  background:url(../img/party_glass.png) no-repeat 50% 0 / 100%;
  transform:translate(-50%, -50%); }
#birthday .wbox::before{ background-image:url(../img/party_cake.png); }
#alldrink .wbox::before{ background-image:url(../img/party_wine.png); }
#ladies .wbox::before{ background-image:url(../img/party_pasta.png); }
.ex{ font-size:1.1em; }

#party .bnr-special.wbox{ margin-bottom:3em; }
#party .bnr-special.wbox::before{ content:none; }

/* Policy */
#policy ol{ padding-left:1.5em; }
#policy ol > li{ margin-bottom:1.2em; }
#policy ol ol{ margin-top:1em; padding:0.5em 0 0 2em; border-left:4px solid #d9c8c0; }
#policy ol ol li{ margin-bottom:0.5em; }

/* shopping */
/*#tokutei #header, #tokutei #mv{ display:none; }*/
#shopping .pagettl{ background:#976f36; }
#shopping .ttl-col{ margin-top: 2em; background-color:rgba(198, 135, 117, 0.2); }
#shopping .wrap-pic-area { position: relative; }
#shopping .pic-area { display: block; }
#shopping .pic-area li { position: absolute; width: auto; }

.pan{ display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap;
  margin-bottom:1.5em; }
.pan li{ position:relative; padding:0 0.8em 0 1em; font-size:0.9em; }
.pan li::before{ position:absolute; content:"/"; left:0; top:0; }
.pan li:first-child::before{ content:none; }


/*----- 特定商取引法 -----*/
.tbl_dl > div + div { margin-top: 1em; }
.tbl_dl dt { padding: 0 .5em; background: #cdcfcf; }
.tbl_dl dd { line-height: 1.8; margin-top: .5em; }

.tbl2 { margin-top: 1em; }
.tbl2 tr { border: 1px solid #8d8d8d; }
.tbl2 tr th { background:rgba(198, 135, 117, 0.2); }
.tbl2 tr > td:nth-child(2) { border-left: 1px solid #8d8d8d; }
.tbl2 tr > td { width: 48%; padding: 0 1em; text-align: right; }

.tbl3 { width: 100%; margin: 0 auto; }
.tbl3 tr,.tbl3 th,.tbl3 td { border: 1px solid #8d8d8d; }
.tbl3 tr th { padding: 0.3em 1.7%; font-weight: normal; background:rgba(198, 135, 117, 0.2); }
.tbl3 tr > td { width: 20%; padding: 0.3em 1.5%; text-align: right; line-height: 1.5;}

/* ================================================================
  レスポンシブ
=================================================================== */
/* 600以上(PC・タブレット) */
@media screen and (min-width: 600px) {

  .wbox{ padding:2em 2.5em; }

  /* about */
  #introduction .pic2col{ margin-bottom:4em; }
  .pic-ex .ttl{ font-size:1.5em; }
  .pic-ex .ttl-bo{ font-size:1.3em; }
  #covid19 .pic2col .pic{ width:12%; }

  /* food */
  #story .pic2col + .pic2col .txt{ order:1; margin-right:7%; }
  #story .pic2col + .pic2col .pic{ order:2; margin-right:0; }
  #food .con-box{ padding-bottom:4em }

  /* christmas */
  .bnr-special.wbox{ width:80%; margin:0 auto; }
  .bnr-special .wrap-special{ display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; }
  .bnr-special .txt{ -webkit-box-flex:1; flex:1; }
  .bnr-special .bnr_christmas{ width:180px; margin:-6em -4em -4em 0; }
  #party .wbox.bnr-special{ margin-top:5em; }

  .anni.bnr-special{ margin-top:10em; }
  .anni.bnr-special .txt{ -webkit-box-flex: unset; flex: unset; width:100%; order:2; }
  .anni.bnr-special .bnr_christmas{ margin: -11em auto 0.5em; order:1; }
  .anni .wrap-special{ padding-right:1em; }

  /* party */
  .wbox .ttl-bo{ font-size:1.3em; }
  #party .wbox::before{ width:95px; height:105px; top: 0.5em; }

  /* Policy */
  #policy .wbox .ttl-bo{ font-size: 1.25em; }

  #shopping .pic-area li.shopping1{ left:5%; top:25%;}
  #shopping .pic-area li.doll_chef{ left: auto; right:10%; top:35%; }
}

/* 960px以上(PC) */
@media screen and (min-width: 960px) {
  .con-box{ padding:4em 0 6em; }
  .wbox{ width:80%; margin:0 auto; padding:4em 4em; }
  .tax{ width:80%; margin:1em auto; }

  /* menu-list */
  .menu-list > li .sub{ font-size:1.2em; }

  /* mv */
  #mv{ height:100%; padding-top:559px; }
  #shopping #mv{ /*margin-top: 80px;*/ padding-top: 240px; }
  #header .bnr-covid19, #header .coupon-web{ display:none; }
  #header .open .bnr-covid19, #header .open .coupon-web{ display:block; }

  /* food */
  #food .a-list{ width:800px; }
  #food-intro.con-box{ padding:7em 0 5em; }
  #story .pic2col .txt{ padding-top:3em; }
  #food-intro .a-list{ margin-top:8em; }

  /* christmas */
  .bnr-special.wbox{ width:50%; }
  .bnr-special .bnr_christmas{ width:225px; }

  /* drink */
  #drink-wine.con-box{ padding:7em 0 5em; }
  #drink-wine .btn-bottom{ margin-top:3.5em; }
  .drink1{ width: 280px; }
  .drink2{ width: 300px; }
  #drink-wine .a-list{ margin-top:5em; }

  /* about */
  #concept .con-box.wrap-pic-area{ padding:7em 0; }
  #concept .sub{ margin-bottom:1.5em; line-height:1.8; }
  .about1{ width: 360px; }
  .about2{ width: 360px; }
  #concept .cover-pic{ margin-bottom:2em; }
  #owner .pic2col .pic{ margin-top:-5em; }
  .pic-ex .txt{ width:70%; margin:0 auto 3em; }
  .pic-ex .pic{ width:95%; margin:0 auto; }
  .pic-ex img{ width:100%; }
  .pic-ex .pic-l{ width:60.2%; }
  /*.pic-ex .pic-m{ width:39.5%; }*/
  .pic-ex .pic-m{ margin-top:5em; }
  .pic-ex + .pic-ex{ margin-top:6em; }
  #covid19 .ttl-bo{ margin-bottom:3em; padding-bottom:0.8em; text-align:center; }
  #covid19 .pic2col{ width:80%; margin: 0 auto 3em; }
  #covid19 .pic2col:last-child{ margin-bottom:0; }

  /* party */
  #party-intro .con-box{ padding:7em 0 3em; }

  /* shopping */
  #shopping .menu-button{ display:block; position: fixed; z-index: 9999; right: 1em; top: 1em; }
  #shopping #gnav{ display:none; }
  #shopping #gnav.open{ display:block; }
  #shopping #header .sitename{ width: 150px; margin: 0 auto 0; padding-top:0; }

}

@media screen and (min-width: 1280px) {

  /* food */
  .food1{ left:3%; top:15%; }
  .food2{ left:75%; top:20%; }

  /* drink */
  .drink1{ left:10%; top:15%; }
  .drink2{ left:73%; top:20%; }

  /* abuot */
  .about1{ left:3%; top:15%; }
  .about2{ left:75%; top:20%; }
  .pic-area li.doll_chef{ left:22%; top:55%; }
  #introduction .pic2col .pic{ margin-right:9%; }
  .room1{ margin-top:3.5em; }

  /* party */
  .party-intro1{ left:10%; top:15%; }
  .party-intro2{ left:73%; top:20%; }

}

@media screen and (max-width: 1279px) {
  .pic-area{ padding: 0 5em; }

  /* food */
  .food2{ margin-top:50px; margin-left:5%; }

  /* drink */
  .drink2{ margin-top:200px; margin-left:5%; margin-bottom:2em; }

  /* abuot */
  .about2{ margin-top:50px; margin-left:5%; }
  .pic-area li.doll_chef{ margin:0 0 -5em -8em; }

  /* party */
  .party-intro2{ margin-top:50px; margin-left:5%; }

}

/* ================================================================
  タブレット
=================================================================== */
/* 1024以下 (タブレット横以下) */
@media screen and (max-width: 1024px) {

}

/* 959以下 (タブレット以下) */
@media screen and (max-width: 959px) {
  .sub.catch{ font-size:1.3em; }
  #food-intro.con-box, #drink-wine.con-box, #about #concept .con-box, #party-intro .con-box{ padding-top:5em; }

  /* Shopping */
/*  #shopping #header{ position: fixed; }*/
  #shopping #mv{ margin-top: 70px;}
  #shopping .wrap-pic-area { padding-bottom: 0; }
  #shopping .pic-area > li.shopping1{ top: 0; left: 0; margin: 5% 0 0; width: 22%;}
  #shopping .pic-area > li.doll_chef{ top: 0; right: 5%; margin: 10% 0 0; width:15% }
}

/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width: 599px){
  .header-box .pagettl{ width:120px; height:120px; bottom:-60px; /* left:calc(50% - 60px); */ }
  .pic-area{ padding:0; }
  .menu-list .price li{ width:100%; margin:0 0 0.1em 0; }
  .menu-list .price li:not(:last-child){ margin-right:0; }
  .menu-list > li .sub{ font-size: 1.1em; }
  .a-list li{ width:48%; margin:0 1% 1em; }
  .a-list li a{ padding:0.3em 0; }

  #story .pic2col + .pic2col { margin-top: 3em;}

  .sub-ttl { margin-bottom: 1em; font-size: 1.3em;}
  .sub-ttl .sub-ttl-border { font-size: 1em; bottom: -2px;}

  /* food */
  #food .con-box{ padding-bottom:1.5em }
  .menu-list .price .sepa{ display:none; }
  .cource-list{ width:100%; }

  /* Christmas */
  .wbox.bnr-special{ margin-bottom:4.5em; }
  .wbox.bnr-special .txt{ margin-bottom:1em; }
  .bnr-special .wrap-special{ padding-right:1em; }
  .bnr-special .bnr_christmas{ margin-bottom:-6em; }
  #party .wbox.bnr-special{ margin-bottom:5em; }

  /* drink */
  .drink2{ margin-top:120px; }
  .list-dot.col li { width: 100%;}
  .list-dot.col.col3 li { width: 50%;}

  /* about */
  .pic-area li.doll_chef{ width:80px; margin: -3em 0 0 -2em; }
  .pic-ex .pic-l{ width:90%; }
  .pic-ex .pic-m{ width:55%; }
  .pic-ex .ttl .room-num{ width:30px; height:30px; }
  #covid19 .pic2col .pic{ width:25%; }
  #covid19 .txt-2col .pic{ display:none; }
  #introduction .copy{ text-align:center; }
  #owner .copy{ text-align:center; }
  #policy {
    .bg-pnk { width: 100%; padding: 1em 2.3em 2.5em; }
  }

  /* shopping */
  .cat-info.curry { margin-top: -3em; }
  #shopping .pic-area > li.shopping1{ margin-top: 11%; }
  #shopping .pic-area > li.doll_chef{ margin-top: 15%; }

  /* 特定商取引法 */
  .tbl_dl { margin-top: .5em; }

	.tbl2 { width: 100%; }
	.tbl2 th,
	.tbl2 td { width: auto; display: table-cell; }
	.tbl2 tr > td { padding: 0 .5em 0 0; font-size: .9em; }
/*
  .tbl3 { width: 660px; }
  .tbl3 th,
  .tbl3 td { width: auto; display: table-cell; }*/
  .tbl3 tr > td {/* width: 9%;*/ padding: 0 .4em; font-size: .9em; }

}