@charset "UTF-8";

/* ----------------------------------------------------------------------
CSSのカスタマイズはこのファイルを使用してください。
これ以外のCSSファイルは改変不可！
---------------------------------------------------------------------- */
/* ----------------------------------------------------------------------
ここから　全サイト共通　変更不可　※変更の場合は後述で上書き※　*/
html,
body {
  width: 100%;
  font-family: "ヒラギノ明朝 ProN W3", "游明朝", YuMincho, "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
}

body {
  color: #FFFFFF;
  font-size: 1.1vw;
  line-height: 1.6;
  margin: 0;
  background-color: #1d0900;
}

ul,
li {
  list-style: ivory;
  /*    float: left;*/
}

.clearfix:after {
  content: " ";
  display: block;
  clear: both;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

@media (max-width: 767px) {
  body {
    font-size: 16px !important;
    text-align: justify;
  }
}

/* ----------------------------------------------------------------------
Font
---------------------------------------------------------------------- */
.fontMin {
  font-family: "ヒラギノ明朝 ProN W3", "游明朝", YuMincho, "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
}

.fontGoth {
  font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック", YuGothic, "メイリオ", "Meiryo", sans-serif;
}

/* ----------------------------------------------------------------------
Text
---------------------------------------------------------------------- */
.bold {
  font-weight: bold;
}

.fontL {
  font-size: 160%;
}

.fontM {
  font-size: 120%;
}

.fontS {
  font-size: 85%;
}

.justify {
  text-align: justify;
  text-justify: inter-ideograph;
}

.textV {
  -ms-writing-mode: tb-rl;
  /* IE用　*/
  -webkit-writing-mode: vertical-rl;
  /* chrome用　*/
  -o-writing-mode: vertical-rl;
  /* opera用　*/
  writing-mode: vertical-rl;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.tcy {
  text-orientation: upright
}

@media (max-width: 767px) {
  .textV {
    -ms-writing-mode: initial;
    /* IE用　*/
    -webkit-writing-mode: initial;
    /* chrome用　*/
    -o-writing-mode: initial;
    /* opera用　*/
    writing-mode: initial;
  }
}

/* ----------------------------------------------------------------------
p
---------------------------------------------------------------------- */
p.white {
  color: #ffffff;
}

p.black {
  color: #000000;
}

/* ----------------------------------------------------------------------
img
---------------------------------------------------------------------- */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

a img:hover {
  opacity: 0.85;
  filter: alpha(opacity=85);
  -ms-filter: "alpha(opacity=85)";
}

/* ----------------------------------------------------------------------
Parts
---------------------------------------------------------------------- */
.t_center {
  text-align: center;
}

.t_right {
  text-align: right;
}

.t_left {
  text-align: left;
}

.f_left {
  float: left;
}

.f_right {
  float: right;
}

/* 表示 */
.pc_none {
  display: none;
}

.mb_none {
  display: initial;
}

@media (max-width: 767px) {
  .pc_none {
    display: initial;
  }

  .mb_none {
    display: none;
  }
}

/* ----------------------------------------------------------------------
Flex
---------------------------------------------------------------------- */
.flex,
.flexbox {
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flex-nowrap {
  -webkit-flex-wrap: nowrap;
  /* Safari */
  flex-wrap: nowrap;
}

.flex-center {
  -webkit-justify-content: center;
  /* Safari用 */
  justify-content: center;
  -webkit-align-items: center;
  /* Safari用 */
  align-items: center;
}

.flex-between {
  -webkit-justify-content: space-between;
  /* Safari */
  justify-content: space-between;
}

.flex-start {
  -webkit-justify-content: flex-start;
  /* Safari */
  justify-content: flex-start;
}

/*
ここまで　全サイト共通　変更不可　※変更の場合は後述で上書き※
---------------------------------------------------------------------- */
/* ----------------------------------------------------------------------
以下、　サイトごとのCSS
/* ----------------------------------------------------------------------*/
/*  共通


*****20181208*************************************/
body {
  background-color: #1d0900;
  color: #FFF;
  max-width: 100vw;
  font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック", YuGothic, "メイリオ", "Meiryo", sans-serif;
}
p {
  font-size: 1.7vw;
  max-height: 999999px;
}
img {
  margin: 0 auto;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.section02 .section04 .section06 {
  color: #1d0900;
}
/*縦書きの数字を傾ける*/
.tilt {
  display: inline-block;
  transform: rotate(-90deg);
}
dt, dd {
  font-size: 1.5vw;
}
a {
  color: #fff;
}
/* header
********************************************/
.header {
  position: relative;
}
.slideshow {
  width: 100%;
  height: 100%;
}
.slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
  opacity: 0.0;
  width: 100%;
  height: 100%;
}
.slideshow img.active {
  z-index: 10;
  opacity: 1.0;
}
.slideshow img.last-active {
  z-index: 9;
}
.header .flont {
  margin: 0 auto;
  position: absolute;
  z-index: 99;
  top: 29%;
  width: 100%;
}
h1 img {
  width: 40.6%;
  margin: 0 auto 0 29%;
}
.header ul {
  display: flex;
  width: 60.6%;
  margin: 0 auto;
  position: absolute;
  bottom: -96%;
  bottom: -80%;
  right: 19.6%;
}
.eyeimg{
  background-color: #1d0900;
}

.h1txt{
  position: absolute;
  top: 5%;
  left: 9.5%;
  font-size: 1.7vw;
  font-weight: lighter;
  z-index: 2;
}

@media (max-width: 767px) {
  .h1txt{
    width: 100%;
    left: 0;
    text-align: center;
    font-size: 2vw;
  }
}

@media screen and (min-width:900px) and (max-width:1024px) {
  .ipad .header ul {
    bottom: -76%;
  }
}

.header li {
  list-style: none;
  flex-direction: row;
  padding: 0 2.8%;
  width: calc(100% / 3);
}
/*slick スライダー*/
.slick-dotted.slick-slider {
  margin: 0 !important;
}
.slick-prev, .slick-next {
  display: none !important;
}
/* 表示 */
.regular.slider.pc_none {
  display: none;
}
.regular.slider.mb_none {
  display: initial;
}
@media (max-width: 767px) {
  .regular.slider.pc_none {
    display: initial;
  }
  .regular.slider.mb_none {
    display: none;
  }
}
/* 01 北新地で過ごす特別な日に串揚げを
********************************************/
.sec01 {
  background-image: url(../images/img_section01_back-min.png);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100%;
  margin: 0 auto;
  padding: 12% 0 15%;
}
.sec01 .timg01 {
  width: 66%;
  margin: 0 auto 6%;
}
.sec01 .text{
  text-align: center;
  margin: 0;
  text-shadow: 0px 0px 5px #000, 0px 0px 5px #000,0px 0px 5px #000,0px 0px 5px #000,0px 0px 5px #000;
}

@media (max-width: 767px) {
  .sec01 {
    background-size: 125%;
    padding: 10% 0 25%;
  }
  .sec01 .timg01 {
    width: 82%;
  }
  .sec01 .text{
  }
}
/* 02 ひと串ずつ、丁寧に。
********************************************/
.sec02 {
  /* color: #1d0900; */
  background-image: url(../images/img_teinei_001-min.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  position: relative;
  z-index: 2;
  width: 100%;
}
.sec02 .sInner {
  width: 82%;
  margin: 0 auto;
  padding: 9% 0 13% 1%;
}

.sec02 .sInner .timg01{
  width: 51%;
  margin: 0 0 2% 2%;
}

.sec02 .sInner .text{
  margin: 0;
}

/*PC・タブレット用*/
@media (min-width: 768px) {
  .text_box p {
    line-height: 2.8vw;
  }
}
/* IE10〜11 */
@media (min-width: 768px) {
  _:-ms-input-placeholder, :root .text_box p {
    padding: 6%;
    width: 88%;
  }

  /* Edge */
  @supports (-ms-ime-align: auto) {
    .text_box p {
      padding: 6%;
      width: 88%;
    }
  }
}

@media (max-width: 767px) {
  .sec02 {
    background-image: url(../images/mb-img_teinei_001-min.jpg);
  }
  .sec02 .sInner {
    padding: 4% 0 45% 1%;
  }

  .sec02 .sInner .timg01{
    width: 64%;
    margin: 0 0 2% 0;
  }
  .sec02 .sInner .text{
        padding: 0 0 0 1.5%;
  }
}


/* 03 食べ方が素材を彩る
********************************************/
.sec03 {
}
.sec03 .sInner{
  /* padding: 7% 0 4%; */
  padding: 7% 0;
  position: relative;
}
.sec03 .sInner .box01{
  width: 37.5%;
  margin: 0 9.5% 0 auto;
  position: relative;
  z-index: 2;
}
.sec03 .sInner .box01 .timg01{
  margin: 0 0 7%;
}
.sec03 .sInner .box01 .text{
  width: 86%;
  margin: 0 0 0 8.5%;
}
.sec03 .sInner .fimg01{
  position: absolute;
  width: 63%;
  top: -15%;
  left: -2%;
}
.sec03 .sInner .btn{
  display: block;
  width: 56%;
  margin: 7% auto 0;
}


/*PC・タブレット用*/
@media (min-width: 768px) {
  .section03 {
    position: relative;
    /* margin: -6% 0 0; */
    background-color: #1d0900;
  }
  .left .button {
    margin: 0 auto 0 20%;
  }
}

@media (max-width: 767px) {
  .sec03 {
  }
  .sec03 .sInner{
    padding: 7% 0 10%;
  }
  .sec03 .sInner .box01{
    width: 50%;
    margin: 0 9% 0 auto;
    position: relative;
    z-index: 2;
  }
  .sec03 .sInner .box01 .timg01{
    margin: 0 0 7% auto;
    width: 93%;
  }
  .sec03 .sInner .box01 .text{
  }
  .sec03 .sInner .fimg01{
    width: 65%;
    top: 17%;
    left: -15%;
  }
  .sec03 .sInner .btn{
    width: 86%;
    margin: 12% 0 0 11.5%;
  }
}


/* 04 個室と空間を愉しむ　白
********************************************/
.section04 {
  color: #1d0900;
  background-image: url(../images/img_back_section-min.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: row-reverse;
  padding: 4% 8% 8% 8%;
  margin: 0 auto;
  width: auto;
  height: 100%;
}
.section04 .right {
  display: flex;
  flex-direction: row;
  width: 64%;
}
.section04 .right img {
  align-self: flex-start;
}
.section04 .right h2 {
  width: 10.4%;
}
.right .img_section04_04 {
  width: 80%;
  margin: 0 5% 0 auto;
}
.section04 .left {
  display: flex;
  flex-direction: row-reverse;
  margin: 8% 2% 0 0;
  width: 30%;
}
.section04 .left p {
  padding: 8% 8% 0 8%;
  margin: 0;
  writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  word-break: break-all;
}
/*PC・タブレット用*/
@media (min-width: 768px) {
  .section04 .left {
    position: relative;
    display: block;
  }
  .section04 .right .head {
    width: 10%;
  }
  .section04 .left .head_01 {
    width: 19%;
    margin: 0 0 0 auto;
  }
  .section04 .left p {
    padding: 0;
    height: 90%;
    position: absolute;
    right: 28%;
    top: 12%;
    line-height: 2.8vw;
  }
}
/* 05 ワインと串揚げのマリアージュ
********************************************/
.section05 {
  background-image:
  url(../images/img_wine_top-min.png),
  url(../images/img_wine_under-min.png), url(../images/img_bg_section05-min.jpg);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 30vw, 30vw, 100% 100%;
  background-position: top left, bottom right, top;
  padding: 0 20%;
  padding-bottom: 10%;
}
.img_section05_01 {
  padding: 18% 0 10% 0;
}
.section05 p {
  width: 65%;
  text-align: center;
  margin: 0 auto;
  text-shadow: 0 0 10px #000, 0 0 8px #000, 0 0 8px #000, 0 0 8px #000;
}
.img_button {
  width: 40%;
  padding: 15% 0;
}
/*PC・タブレット用*/
@media (min-width: 768px) {
  .img_button {
    width: 35%;
    padding: 13% 0 18%;
  }
}
/* 06 大切な方へのお祝いにも
********************************************/
.section06 {
  color: #1d0900;
  background-image:url(../images/img_party_001-min.png),url(../images/sp_img_back_section06-min.jpg);
  background-repeat:no-repeat,no-repeat;
  background-size: 42vw, 100% 100%;
  background-position:top right,top;
}
.section06 .left {
  padding: 5% 8%;
  width: 45%;
}
.section06 p {
  text-shadow: 5px 5px 5px #fff, -1px 1px 1px #fff, 1px -1px 1px #fff, -1px -1px 1px #fff, -1px -1px 1px #fff, -1px -1px 1px #fff, -1px -1px 1px #fff;
}
.img_section06_button {
  width: 50%;
}
/*PC・タブレット用*/
@media (min-width: 768px) {
  .section06 .head_01 {
    width: 76%;
    margin: -3% 0 0;
  }
  .section06 p {
    margin: 6% 0 8%;
    width: 94%;
  }
  .section06 .left {
    padding: 8% 8% 7%;
  }
  .img_section06_button {
    width: 46.4%;
  }
}
/* 07 google_map
********************************************/
.google_map {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 40%;
}
.google_map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60%;
  min-height: 100%;
}
/* footer
********************************************/
.footer {
}
.footer .fInner{
  padding: 3% 0 0;
}
.footer .fInner .logo{
  width: 18%;
  margin: 0 auto 5%;
}
.footer .fInner .flex{
  display: flex;
  width: 82%;
  margin: 0 auto;
  padding: 0 0 5%;
}
.footer .fInner .flex .shopli{
  width: 50%;
}
.footer .fInner .flex .shopli .addbox{
  height: 22em;
}
.footer .fInner .flex .shopli:nth-child(1) .addbox .timg02{
  width: 27.5%;
  margin: 0 0 0 26%;
}
.footer .fInner .flex .shopli:nth-child(2)  .addbox .timg02{
  width: 20%;
  margin: 0 0 0 42%;
}
.footer .fInner .flex .shopli .addbox dl{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 5% 0 0;
}
.footer .fInner .flex .shopli .addbox dl dt,
.footer .fInner .flex .shopli .addbox dl dd{
  font-size: 1.7vw;
  margin: 0;
}
.footer .fInner .flex .shopli .addbox dl dt{
  width: 17.5%;
  -moz-text-align-last: justify;
  text-align-last: justify;
}
.footer .fInner .flex .shopli .addbox dl dd{
  width: 77.5%;
  padding: 0 0 0 1em;
  font-feature-settings: "palt";
}

.footer .fInner .flex .shopli:nth-child(odd) .telbox{
  margin: 0 0 0 -10%;
  width: 100%;
}
.footer .fInner .flex .shopli:nth-child(even) .telbox{
  margin: 0 0 0 7%;
  width: 100%;
}

.footer .fInner .flex .shopli .telbox .text{
  text-align: center;
  margin: 0;
}
.footer .fInner .flex .shopli .telbox .timg01{
  width: 68%;
  margin: 3% auto;
}
.footer .fInner .flex .shopli .telbox .t2{
  width: 78%;
  margin: 0 auto;
}

.copyright {
  margin: 1% 0;
  text-align: center;
  font-size: 1.8vw;
}

@media (max-width: 767px) {
  .footer {
  }
  .footer .fInner{
    padding: 6% 0 0;
    padding: 12% 0 0;
  }
  .footer .fInner .logo{
    width: 40%;
    margin: 0 auto 5%;
  }
  .footer .fInner .flex{
    flex-wrap: wrap;
    padding: 0;
  }
  .footer .fInner .flex .shopli{
    width: 100%;
  }
  .footer .fInner .flex .shopli .addbox{
    height: inherit;
    margin: 0 0 6%;
  }
  .footer .fInner .flex .shopli:nth-child(1) .addbox .timg02,
  .footer .fInner .flex .shopli:nth-child(2)  .addbox .timg02{
    margin: 0 auto;
  }
  .footer .fInner .flex .shopli .addbox dl{
  }
  .footer .fInner .flex .shopli .addbox dl dt,
  .footer .fInner .flex .shopli .addbox dl dd{
    font-size: 2.7vw;
  }
  .footer .fInner .flex .shopli .addbox dl dt{
    width: 19%;
  }
  .footer .fInner .flex .shopli .addbox dl dd{
  }

  .footer .fInner .flex .shopli .sp_link{
    display: flex;
    width: 77%;
    padding: 0;
    margin: 0 0 18% 12%;
  }
  .footer .fInner .flex .shopli .sp_link li{
    list-style: none;
    width: 48%;
  }
  .footer .fInner .flex .shopli .sp_link li:first-child{
    width: 48%;
    margin: 0 4% 0 0;
  }

  .footer .fInner .flex .shopli:nth-child(odd) .telbox,
  .footer .fInner .flex .shopli:nth-child(even) .telbox{
    margin: 0 auto;
    display: none;
  }

  .footer .fInner .flex .shopli .telbox .text{
  }
  .footer .fInner .flex .shopli .telbox .timg01{
  }
  .footer .fInner .flex .shopli .telbox .t2{
    width: 65%;
  }
  .footer .fInner .flex .shopli .telbox .btn{
    display: block;
    width: 65%;
    margin: 6% auto 18%;
  }

  .copyright {
    /* margin: 1% 0 14%; */
    margin: 1% 0 25%;
    text-align: center;
    font-size: 2.5vw;
  }

  .footer-btn {
    display: block;
    width: 98%;
    height: auto;
    background: rgba(29, 9, 0, 0.8);
    position: fixed;
    right: 0;
    bottom: 0;
    padding: 10px 1%;
    z-index: 100;
  }
  .footer-btn ul {
    padding: 0;
    margin: 0;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .footer-btn li {
    width: 44%;
    max-height: 50px;
    margin: 0 2%;
    border: 1px solid #cecece;
    border-radius: 0px;
    list-style: none;
  }
  .footer-btn li a {
    color: #fff;
    font-size: 16px;
    text-align: center;
    display: block;
    padding: 10px 0;
    text-decoration: none;
  }
  .footer-btn li a:hover {
    background: #cd0a0a;
    border-radius: 5px;
  }
  .open_right .footer-btn {
    right: -85%;
  }
  #footer_bottom {
    height: 190px!important;
  }
}








@media (max-width: 767px) {
  /* body {} */
  p {
    font-size: 2.75vw;
  }
  .header .flont h1 img {
    width: 68%;
    margin: 0 auto 0 16%;
  }
  .img_button {
    padding: 0;
    width: 45%;
  }
  .header .flont {
    top: 54%;
    margin: auto;
    transform: translateY(-50%) translateX(0%);
    -webkit- transform: translateY(-50%) translateX(0%);
  }
  /* SP section 02
    ******************/
  #section_02 {
    padding: 0;
  }
  .section02 {
    background-image: url(../images/mb-img_teinei_001-min.jpg);
    display: block;
    position: relative;
    background-size: 100%;
  }
  .section02 h2 {
    width: 44%;
    align-self: flex-start;
    padding: 5% 0 0 0;
    margin: 0 8% 0 auto;
  }
  .section02 .right {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
  }
  .img_section02_01 {
    width: 17%;
    margin-right: 0;
    height: auto;
  }
  .section02 .text_box {
    width: 84%;
    height: auto;
    padding: 6% 8% 8%;
    margin: 0;
  }
  .text_box p {
    writing-mode: horizontal-tb;
    background-image: none;
    padding: 0;
    width: 100%;
  }
  .section02 .left {
    width: 85%;
    position: absolute;
    top: 0;
  }
  .img_section02_02 {
    width: 100%;
    position: unset;
  }
  /* SP section 03
    ******************/
  .section03 {
    background-image:
      url(../images/sp_img_sozai_001-min.png);
    background-repeat:
      no-repeat;
    background-size: 50vw;
    padding: 2% 8% 0;
  }
  .section03 .left {
    padding: 5% 0;
    width: 100%;
  }
  .left .img_sectiom03_01 {
    margin: 0;
    width: 60%;
  }
  .section03 .left p {
    padding: 4% 0 0% 0%;
    width: 75%;
    position: relative;
    z-index: 10;
    text-shadow: 1px 1px 2px #000;
  }
  .left .button {
    width: 50%;
    margin-right: 0;
  }
  /* SP section 04 個室と空間
    ******************/
  .section04 {
    display: block;
    padding: 5%;
    background-image: url(../images/sp_img_back_section04-min.jpg);
  }
  .section04 .right {
    width: 100%;
  }
  .right .img_section04_04 {
    width: 85%;
    height: 100%;
    margin: 0;
  }
  .right .img_section04_01 {
    width: 70%;
    padding: 0%;
    margin: 36% auto 0 27%;
  }
  .section04 .left {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
  }
  .left .sp_img_section04_02 {
    padding: 3% 3% 0;
    width: 60%;
  }
  .section04 .left p {
    padding: 0 4%;
    writing-mode: horizontal-tb;
  }
  /* SP section 05 ワインと串揚げ　完了
    ******************/
  .section05 {
    padding: 0 10%;
    padding-bottom: 10%;
  }
  .img_section05_01 {
    width: 90%;
    padding: 11% 0 6% 0;
  }
  .section05 p {
    text-align: left;
    width: 100%;
    margin: 0 auto;
  }
  .img_button {
    padding: 5% 0 11% 0;
    width: 50%;
  }
  /* SP section 06
    ******************/
  .section06 {
    width: 100%;
    background-size: 47vw, 100% 100%;
  }
  .section06 .left {
    width: 84%;
    padding: 8% 8% 8%;
  }
  .section06 .img_section06_01 {
    margin: 0;
    width: 56%;
  }
  .section06 p {
    text-shadow: 0px 0px 10px #fff, -1px 1px 1px #fff, 1px -1px 1px #fff, -1px -1px 1px #fff;
    padding: 5% 0;
    margin: 0;
    width: 100%;
  }
  .section06 .img_button {
    width: 50%;
    padding: 0;
  }
  /* SP section 07
    ******************/
}

.attxt{
  border: solid 1px #fff;
  padding: 2%;
  display: block;
  width: 53%;
  text-align: center;
  margin: 5% auto;
}
@media (max-width: 767px) {
  .attxt{
    width: 65%;
  }
}