/*============================
  sub-visual
============================*/
.main {
    position: relative;
  }
  .sub_mv {
    height: 250px;
    width: 100%;
    position: relative;
    padding-top:0px;
  }
  .sub_mv img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
  }
  
  .submain_ttl {
    font-size: 26px;
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff;
    display: inline-block;
    position: relative;
    border-bottom:1px solid #fff;
    padding:0 20px 10px 30px;
  }
  
  .submain_ttl:before{ 
    content:'';
    height: 40px;
    position: absolute;
    display: inline-block;
    border-left: solid 1px #fff;
    bottom:-25%;
    left: 8%;
  }
  
  .submain_box{
    position:absolute;
    top:60%;
    left:50%;
    transform: translate(-50%, -50%);
    display: block;
    width:100%;
    text-align: center;
  }
  
  @media screen and (min-width: 768px) {
  .sub_mv {height: 350px;}
  .submain_ttl {
    font-size: 36px;
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff;
    display: inline-block;
    position: relative;
    border-bottom:1px solid #fff;
    padding:0 70px 40px 70px;
  }
  .submain_ttl:before{ 
    content:'';
    height: 80px;
    position: absolute;
    display: inline-block;
    border-left: solid 1px #fff;
    bottom:-25%;
    left: 5%;
  }
  }
  
  @media screen and (min-width: 1024px) {
  .sub_mv{height: 500px;}
  .submain_ttl {font-size: 48px;}
  .submain_box{max-width: 1240px;}
  }

  @media screen and (min-width: 1025px) {
    .sub_mv {padding-top:120px;}
}
  
  @media screen and (min-width: 1280px) {
  .sub_mv{height: 550px;}
  .submain_ttl {font-size: 60px;}
  }
  
  /*----------------------------
   bread_crumb_list
  -----------------------------*/
  .breadcrumb{font-size: 12px; margin-bottom:0;}
  .breadcrumb a {color: #574538;}
  
  @media screen and (min-width:768px) {
  .breadcrumb{font-size: 14px;}
  }
  
  /*----------------------------
  anker link
  -----------------------------*/
  .anker__items{
  column-gap: 4%;
  row-gap: 20px;
  }
  
  .anker__item{
  width: 100%;
  height: 50px;
  position: relative;
  display: block;
  }
  
  .anker__item a:hover{opacity:.8;}
  .anker__item a {
    display: block;
    text-align: center;
    line-height: 50px;
    border-radius: 0;
    background: #705637;
    color:#fff;
  }
  
  .anker__item a:hover {
     border: 1px solid #705637;
     background: #fff;
     color:#705637;
  }
  
  .anker__item p {
      line-height: 50px;
  }
  
  @media screen and (min-width:299px) {
  .anker__items{column-gap: 1%;}
  .anker__item{width: 100%; height: 45px;}
  .anker__item a{line-height: 45px;}
  .anker__items{column-gap: 1%;}
  }
  @media screen and (min-width:525px) {
  .anker__items{row-gap: 25px;}
  .anker__item{width: 48%;}
  }
  @media screen and (min-width:1024px) {
  .anker__item{width: 28%;}
  }
  
  #item01,#item02,#item03,#item04,#item05,#item06,#item07{margin-top:-60px;padding-top:60px;}
  
  @media screen and (min-width: 768px) {
  #item01,#item02,#item03,#item04,#item05,#item06,#item07{margin-top:-120px;padding-top:120px;}
  }
  
 /*----------------------------
  anker link02
  -----------------------------*/
  
  .anker__item02{
  width: 100%;
  height: 50px;
  position: relative;
  display: block;
  }
  
  .anker__item02 a:hover{opacity:.8;}
  .anker__item02 a {
    display: block;
    text-align: center;
    line-height: 50px;
    border-radius: 0;
    background: #fbd901;
    color:#141414;
  }
  
  .anker__item02 a:hover {
     border: 1px solid #fbd901;
     background: #fff;
     color:#141414;
  }
  
  .anker__item02 p {
      line-height: 50px;
  }
  
  @media screen and (min-width:299px) {
  .anker__item02{width: 100%; height: 45px;}
  .anker__item02 a{line-height: 45px;}
  }
  @media screen and (min-width:525px) {
  .anker__item02{width: 48%;}
  }
  @media screen and (min-width:1024px) {
  .anker__item02{width: 28%;}
  }
  
  /*============================
  背景
  ============================*/
  .sub_bg {background: url(../images/sub_bg.jpg) repeat center center / contain ;}
  .sub_bg02 {background: url(../images/bg_pt.png) repeat top ;padding-top:40px;}
  .sub_bg02 .title_cmn h2 {color:#fff;border-bottom:1px solid #fff;}
  .sub_bg02 .title_cmn h2::before {  border-left: solid 1px #fff;}
  .sub_bg03 {background: url(../images/bg_pt.png) repeat top;padding-top:40px;}
  .sub_bg03 .title_cmn h2 {color:#fff;border-bottom:1px solid #fff;}
  .sub_bg03 .title_cmn h2::before {  border-left: solid 1px #fff;}
  .sub_bg04 {background: url(../images/sub_bg04.jpg) no-repeat top / cover ;padding-top:40px;}
  .sub_bg04 .title_cmn h2 {color:#fff;border-bottom:1px solid #fff;}
  .sub_bg04 .title_cmn h2::before {  border-left: solid 1px #fff;}
 
  .color_wh {color:#fff;}
  .color_br {color:#705637;}
  
  @media screen and (min-width: 768px) {
    
  .sub_bg02 {padding-top:40px;}
  .sub_bg03 {padding-top:50px;}
  
  }
  
  /*============================
  天ぷら酒房勘KICHI
  ============================*/
  
.tem-item {width:100%;position: relative;margin-bottom:10px;}
.tem-item .txt{position: absolute;display:block;background:rgba(112, 86, 55, 0.7);color:#fff;bottom:0;width:100%;text-align:center;}

  .tategaki {
      writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
      -webkit-writing-mode: vertical-rl;
    text-orientation: upright;
  }
  
  /* flexbox */
  .textBox{align-items: center;}
  .textBox .textarea {width: 100%; text-align: justify;}
  .tate_ttl{font-size:17px; font-weight:800; margin-inline: auto;} 
  .textBox .img {width: 100%; margin-bottom: 20px;}
  
  @media screen and (min-width:768px) {
  /* flexbox */
  .textBox{align-items: center; position: relative;  column-gap: 1%; margin-bottom:30px;}
  .tate_ttl{font-size:20px; font-weight:700;} 
  .textBox .img { width: 70%; margin-bottom: 0px;} 
  .sub-commitment .btn{column-gap: 1%;}
  .tem-item {width:32%;position: relative;}
.tem-item .txt{position: absolute;display:block;background:rgba(112, 86, 55, 0.7);color:#fff;bottom:0;width:100%;text-align:center;}

  }

  
  @media screen and (min-width:1024px) {
  .tate_ttl{
    font-size:34px;
  } 
  } 
  
  /*============================
   こだわり
  ============================*/
  
  .comm_textBox .img{width: 100%; margin-bottom: 20px; position:relative;} 
  .comm_textBox .textarea {width: 100%;} 
  .comm_textBox .ttl {font-size:16px;font-weight:700;} 
  .point{font-size:15px;font-weight:800;}
  .txt_right{text-align:left;}
  
  @media screen and (min-width:768px) {
    
  .comm_textBox .img{width: 45%;margin-bottom: 0px;position:relative;} 
  .comm_textBox .textarea {width: 50%;}
  .comm_textBox .ttl {font-size:15px;} 
  .point{font-size:18px;}
  .txt_right{text-align:right;}
    
  }
  
  @media screen and (min-width:1024px) {
    
  .comm_textBox .ttl {font-size:22px;} 
  
  }
  
  /*============================
  店舗紹介
  ============================*/
  
  .subguide_shop {width:100%;margin:0 auto;margin-bottom:20px;}
  .google_map  {width: 100%;}
  .img-box {width: 100%;}
  .img-box img {height: auto; margin-bottom: 15px;}
  
  @media screen and (min-width:768px) {
  .image-area {column-gap: 20px;}
  .img-box {width: 45%;}
  .img-box img {height: auto;}
  }
  
  
  /*============================
  コースメニュー
  ============================*/
  .sub_course .ttl {border-left: 5px solid #705637; border-bottom: 1px solid #705637; padding: 0 0 3px 10px; font-weight: 700; margin: 31px 0 20px 0; font-size:16px;}
  .sub_course_img {width:100%;padding:10px 40px 20px 40px;}
  .sub_course_txt {width:100%;padding:20px;}
  .sub_course_txt .ttl02 {font-size:16px;font-weight: 700;margin-bottom:10px;}
  .sub_course_txt .price {font-size:20px;font-weight: 700;}
  
  @media screen and (min-width:768px) {
  .sub_course .ttl {font-size:28px;}
  .sub_course_img {width:36%;padding:20px 40px 0 30px;}
  .sub_course_txt {width:60%;}
  .sub_course_txt .ttl02 {font-size:18px;font-weight: 700;margin-bottom:10px;}
  .sub_course_txt .price {font-size:25px;font-weight: 700;}
    
  }
  
  /*============================
  求人情報
  ============================*/
  .rec_textBox {width:100%;display:block;}
  .rec_textBox .img{width: 100%; margin-bottom: 0px; position:relative;display:block;} 
  .rec_textBox .textarea {width: 100%;} 
  .rec_textBox .ttl {font-size:16px;font-weight:700;} 
  .rec_point{font-size:35px;font-weight:900;color:#705637;top:-20%;left:5%;}
  .txt_right{text-align:left;}
  
  @media screen and (min-width:768px) {
  
  .rec_textBox {width:32%;}
  .rec_textBox .img{margin-bottom: 0px;position:relative;} 
  .rec_textBox .textarea {}
  .rec_textBox .ttl {font-size:17px;margin-bottom:10px;} 
  .rec_point{font-size:35px;font-weight:900;color:#705637;top:-20%;left:5%;}
  .txt_right{text-align:right;}
    
  }
  
  @media screen and (min-width:1024px) {
    
  .rec_textBox .ttl {font-size:26px;} 
  
  }

   .balloon {
    position: relative;
    display: inline-block;
    margin: 0 auto 20px;
    padding: 7px 15px;
    min-width: 120px;
    max-width: 100%;
    color: #fff;
    font-size: 18px;
    background: #705637;
    border-radius:5px;
  }
  
  .balloon:before {
    content: "";
    position: absolute;
    bottom: -22px;
    left: 50%;
    margin-left: -15px;
    border-top: 12px solid #705637;
    z-index: 2;
  }
  
  .balloon:after {
    content: "";
    position: absolute;
    bottom: -22px;
    left: 50%;
    margin-left: -17px;
    border: 14px solid transparent;
    border-top: 14px solid #705637;
    z-index: 1;
  }
  
  .table01 .th{
    width: 100%;
    padding:10px 0 10px 15px;
    border-bottom:none;
    font-weight: bold;
    background:#705637;
    color:#fff;
  }
  .table01 .td{
    width: 100%;
    padding: 5px 0 15px 15px;
    background:#fff;
  }
  
  @media screen and (min-width:300px) {
    .balloon {
    position: relative;
    display: inline-block;
    margin: 0 auto;
    padding: 7px 15px;
    min-width: 120px;
    max-width: 100%;
    color: #fff;
    font-size: 14px;
    background: #705637;
    border-radius:30px;
  }
  }
  
  @media screen and (min-width:350px) {
    .balloon {
    position: relative;
    display: inline-block;
    margin: 0 auto;
    padding: 7px 15px;
    min-width: 120px;
    max-width: 100%;
    color: #fff;
    font-size: 16px;
    background: #705637;
    border-radius:30px;
  }
  
  }
  
  @media screen and (min-width:817px) {
  
    /* -----Table----- */
  .table01 .tr{
  display: flex;
  justify-content: flex-start;
    border: 1px solid #eeeeee;
  }
  .table01 .th{
  width: 20%;
  padding: 20px;
  line-height: 1.6;   
  }
  .table01 .td{
  width: 80%;
  padding: 20px;
  line-height: 1.6;
  border-bottom:2px solid #fff;
  }
  
    .balloon {
    position: relative;
    display: inline-block;
    margin: 0 auto 20px;
    padding: 7px 15px;
    min-width: 120px;
    max-width: 100%;
    color: #fff;
    font-size: 28px;
    background: #705637;
    border-radius:30px;
  }
  
  .balloon:before {
    content: "";
    position: absolute;
    bottom: -22px;
    left: 50%;
    margin-left: -15px;
    border-top: 12px solid #705637;
    z-index: 2;
  }
  
  .balloon:after {
    content: "";
    position: absolute;
    bottom: -22px;
    left: 50%;
    margin-left: -17px;
    border: 14px solid transparent;
    border-top: 14px solid #705637;
    z-index: 1;
  }
  }
  
  /*============================
  メニュー
  ============================*/
  .osusume {display:inline-block; background:#705637; padding:5px 10px; color:#fff;margin:5px;}
  .title02 {border-left: 5px solid #705637; border-bottom: 1px solid #705637; padding: 0 0 3px 10px; font-weight: 700; margin: 31px 0 20px 0; font-size:24px;}
  .title03 {font-weight: 700; font-size:20px; margin-bottom:10px;}
  .title04 {padding: 0.25em 0.5em; border-left: solid 5px #333333; margin-bottom:20px;font-size:18px;}
  
  .menu__item{
    width: 100%;
    margin-bottom: 50px;  
  }
  .menu{
    border-bottom: 1px solid #523318;
    padding-bottom: 10px;
    margin-bottom:10px;
  }
.sub_bg03 .menu{border-bottom: 1px solid #fff;}
  .menu__name{
    display: inline-block;
    width: 100%;
    font-size: 17px;
    font-weight: bold; 
  }
  .menu__name03{
    display: inline-block;
    width: 100%;
    font-size: 15px;
    font-weight: bold; 
  }
  .menu__price{
    display: inline-block;
    width: 100%;
    text-align: right;
    font-size: 15px;
    font-weight: bold; 
  }
  .menu__items{
    width:100%;
  } 
  
  @media screen and (min-width:768px) {
    
  .title02 {font-size:32px;}
  .title03 {font-weight: 700; font-size:24px; margin-bottom:10px;}
    
  .menu__item{
    width: 100%;
    margin-bottom: 30px;
  }
  .menu__name{
    display: inline-block;
    width: calc(100% - 120px);
    font-size:15px;
  }
    .menu__name03{
    display: inline-block;
    width: calc(100% - 120px);
    font-size:15px;
  }
  .menu__price{
    display: inline-block;
    width: 120px;
    text-align: right;
    font-size:15px;
  }
  .menu__items .img{
    width:100%;
  }
    
  .menu__items .img02{
    width:30%;
  }
    
  .menu_img{
    max-width: 80%;
    margin-inline: auto;
    }
  }

  @media screen and (min-width:1024px) {
    .menu__name03{
    font-size:17px;
  }
  .menu__items .img{
    width:48%;
  }
   .menu__item{
    width: 48%;
    max-width: 480px;
    margin-bottom: 30px;
  }
}
  
  /*============================
  lemon
  ============================*/
.sublemon-obj {top:-10%;right:0;width:70px;}
.sublemon-obj02 {top:-10%;left:0;width:70px;}
.sublemon-obj03 {top:10%;right:0;width:70px;}

  @media screen and (min-width:768px) {
    
.sublemon-obj {top:0;right:0;width:150px;}
.sublemon-obj02 {top:20%;right:0;width:150px;}
.sublemon-obj03 {top:20%;right:0;width:200px;}
}



/*=infinite=*/
.mb200 {
  margin-bottom:200px;
}
.infinite {
    position:relative;
}
.infinite .ttl_inf{
	position: absolute;
	color:#fff;
    z-index:100;
    left:10px;
    bottom:-20px;
    mix-blend-mode: overlay;
}

.infinite .infiniteslide img{
	width:250px;
    height:auto;
    padding:0px 8px;
    object-fit:cover;
}
@media screen and (min-width: 768px) {
.infinite {
    position:relative;
}
.infinite .ttl_inf{
	position: absolute;
	color:#fff;
    z-index:100;
    left:150px;
    bottom:-70px;
    mix-blend-mode: overlay;
}

.infinite .infiniteslide img{
	width:500px;
}
}