﻿/* --------------------------------------------- color */

.txt_color1{color: #30231f;} /* メインカラー */
.txt_color2{color:#716767;}
.txt_color3 {color: #5e4133;}


.bg_color2{background-color: #A79778;} /* サブカラー */
.bg_color3{background-color: #5e4133;} /* アクセントカラー1 */

.border_color1{border-color: #30231f}
.border_color2{border-color: #716767;}
.border_color3 {border-color: #5e4133;}

.bg_color1 {
    background-color: #965844;
}


/* ------------------------------------------------ common */
#fakeloader{

    background-color: #fff;
    background-repeat: no-repeat;
    background-size: cover;
}

#fakeloader:before {
    background-color: rgba(255,255,255,0.2);

}

.NotoSans{font-family: 'Noto Sans JP', sans-serif;}
.satisfy{font-family: 'Satisfy', cursive;}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}

.linkStyle{
    color: #793621;
}

.linkStyle:hover{
    text-decoration: underline;
}

body {
    font-family: 'Noto Sans JP',"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* --------------header-------------------- */

header.scr_header {
    background-color:rgba(94,65,51,0.9);
    background-color: rgba(255, 255, 255,0.6)!important;
}

header.scr_header li a{
 color: #30231f;
}

.button_container span {
    height: 4px;
    background: #30231f;
}

.button_container .menu {
    color: #30231f;
}

#logo {
    max-width: 150px;
}

header.scr_header #logo {
    max-width: 120px;
}

header.scr_header li a::after {
    background: rgba(0,0,0,0.3)!important;
}

/* ----------------nav--------------------- */
.overlay {
    background: rgba(94,65,51,0.9) !important;
}

.overlay-menu ul li a{
    color: #fff!important;
}

.overlay-menu .right h2{
    font-size:18px;
}

.nav_menu_more{
    text-transform: none;
}

.nav_menu_more a{
    background: #fff;
    color: #30231f;
    font-size: 20px;
}
.nav_menu_more a span{
    top: 3px;
}

.nav_menu_more a:hover{
    background-color: #947d73;
    color: #fff;
}

.nav_menu_more:last-of-type a .icon:before {
    left: -26px;
    top:-5px;
}

.nav_menu_more:first-of-type a .icon:before {
    content: "\f075";
    top: -5px;
}

/* --------------------------footer------- */

#footer{
    background-image: url("./Dup/img/paper-bg-07.jpg");
    background-repeat: repeat;
    background-size: 300px;
}

#copyright{
  background-color: #30231f;
}

#logo2 a{
    max-width: 200px;
}


/* ------------- top ---------------*/

.top #nav_menu .button_container .menu{
        color: #30231f;
    }
    .top #nav_menu .button_container .top,
    .top #nav_menu .button_container .middle,
    .top #nav_menu .button_container .bottom{
        background: #30231f;
    }

.line-l:before {
    height: 1px;
    top: 19px;
    background-color: #30231f!important;
}


video{
    display: block;
}

#main_img:before {
    max-height: 100%;
    min-height: 100%;
}

#main_img img{filter: drop-shadow(7px 0px 50px #fff);}

.back1:before, 
.back2:before {
    background-color: rgba(132, 93, 18, 0.1)!important;
    background-image: url("./Dup/img/paper-bg-07.jpg");
    background-repeat: repeat;
    background-size: 300px;
    opacity: 0.5;
    z-index: -2;
}

.line:before {
    background-color: #5e4133!important;
}

.top_cms_box .cms_title p{
    font-size: 20px;
}

/* --- more btn --- */
.more_btn {
    text-transform: none;
    font-size: 32px;
    background: #211000;
    color: #fff;
    transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
}

.more_btn:before {
    border: 0;
}

.more_btn:after {
    top: 0;
}

.more_btn:hover {
    transition-delay: .3s;
}

.more_btn:hover::after {
    background-color: rgba(255, 255, 255, 0.3)!important;
    transition-delay: .15s;
}


#info_contact_wrap .con_title span{
    font-size: 18px;
}

/* -----------------sub------------------------- */

#page_left, #page_right {
    height: 270px;
}


#page_title:before {
    background-image: url(./Dup/img/cork03-p.jpg);
    background-repeat: repeat;
    background-size: 290px;
    opacity: 0.8;
}

.page_title_box{
    background-color: #381105;
}

.page_title_box p{
    font-size:18px;
}

.cate_list li a:hover {
    background-color: rgba(94, 65, 51, 0.3)!important;
}

.cate_list li a:before {
    content: "\f0da";
    content: "\f054";
}

#page3 .cate_wrap .cate_title,
#page4 .cate_wrap .cate_title,
#page5 .cate_wrap .cate_title,
#page6 .cate_wrap .cate_title,
#page7 .cate_wrap .cate_title,
#page8 .cate_wrap .cate_title,
#page9 .cate_wrap .cate_title,
#page10 .cate_wrap .cate_title{
    background-color: #381105;
    color: #fff;
    padding: 0px 5%;
}

.page7 .back1:before,
.page8 .back1:before,
.page9 .back1:before,
.page10 .back1:before{
    width: 100%;
}

/* ---------------order link */
.order_tel,.order_line{
   color: #fff;
   padding: 20px 10px;
}
.order_tel{
    background: #fff;
    border: 5px solid #5e4133;
    color: #5e4133;
}
.order_line{
    background: #fff;
    border: 5px solid #00b900;
    color: #00b900;
    }
    
.order_tel:hover{
    background:#f5e8e2;
    background: #f7f3f1;
}
.order_line:hover{
    background:#f0fff0;
    background: #f7f3f1;
}

.order_btn{
  margin: 10px;
  transition: .3s;
}

.order_btn:hover{
  opacity: 0.7;
}

.order_takeout p{
  font-size:20px;
  font-family: 'Noto Sans JP', sans-serif;
}

.order_link{
  /*border:6px double #a7918a;*/
  padding: 160px 0;
}

.order_takeout{
  margin-bottom:50px;
}

.fuwa {
    animation-name: fuwa;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
}
@keyframes fuwa {
    0% {
        transform: translate(0,0px);
    }

    100% {
        transform: translate(0,-9px)
    }
}

/* --------------------news */

.pager li a:hover,
.pager .prev a:hover,
.pager .next a:hover{
    background-color: rgba(94,65,51,0.1)!important;
    color: rgba(94,65,51,0.7)!important;
    
}

.pager li a:hover  .txt_white,
.pager .prev a:hover  .txt_white,
.pager .next a:hover .txt_white,
.pager .next a:hover span{
    color: rgba(94,65,51,0.7);
}

/* --------------------menu */
#cms_3-a .cate_box p{
    text-align: right;
}

/* --------------------- contact*/
#tel_txt{
    background: rgba(255,255,255,0.5);
    padding: 10%;
}

#tel_txt div:last-child{
    border-bottom: 0;
}

/* -----------------------site map */
#page10 .more_btn{
    font-size: 16px;
    background: #381105;
}
#page10 .sitemap_btn .en{
    font-size: 16px;
    color: rgba(255,255,255,0.6);
}

#page10 .more_btn .txt_color3{
    color: rgba(255,255,255,0.6);
}

.sitemap_btn{
  position: relative;
  cursor: pointer;
  user-select: none;
  padding-bottom: 8px!important;
  font-size: 16px;
  background: #381105;
  text-transform: none;
  color: #fff;
  transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
}
.sitemap_btn:before {
  border: 0;
  left: 0;
}
.sitemap_btn:before, .sitemap_btn:after {
  top: 0;
  width: 0;
  height: 100%;
  content: '';
  position: absolute;
  transition: inherit;
  z-index: 0;
}
.sitemap_btn:after {
  right: 0;
}
.sitemap_btn:hover {
  transition-delay: .3s;
}
.sitemap_btn:hover:before, 
.sitemap_btn:hover:after {
  width: 100%;
}
.sitemap_btn:hover:before {
  transition-delay: 0s;
}
.sitemap_btn:hover::after {
  background-color: rgba(255, 255, 255, 0.3)!important;
  transition-delay: .15s;
}


@media screen and (max-width: 1280px){
    #nav_menu .button_container .menu{
        color: #30231f;
        color: #fff;
    }
    #nav_menu .button_container .top,
    #nav_menu .button_container .middle,
    #nav_menu .button_container .bottom{
        background: #30231f;
        background: #fff;
    }
    
    
    
    header.scr_header #nav_menu .button_container .menu{
        color: #30231f;
    }
    
    header.scr_header #nav_menu .button_container .top,
    header.scr_header #nav_menu .button_container .middle,
    header.scr_header #nav_menu .button_container .bottom{
        background: #30231f;
        }
    
    header.scr_header #nav_menu .active .menu {
        color: #fff;
    }
    header.scr_header #nav_menu .active .top,
    header.scr_header #nav_menu .active .middle,
    header.scr_header #nav_menu .active .bottom{
        background: #fff;
    }
}


@media screen and (max-width: 890px){

  .order_btn{width:250px;}

}

@media screen and (max-width: 840px){
    #page10 .con_box{
        padding: 5% 2%;
    }
    #page10 .more_btn {
    font-size: 12px;
}
}

/* ----------------------------------------------------------------  
IE 
----------------------------------------------------------------*/
@media all and (-ms-high-contrast: none){
#cms_2-a .cate .cate_title{
    padding-top: 0px!important;
}
#cms_3-a .cate .cate_title,
#cms_4-a .cate .cate_title{
padding-bottom: 3px;
 }
 .cate_list li a{padding-bottom: 8px;}
 
 .page_title_box{padding-top: 10px;}
 
 #page9 .more{padding-bottom: 5px;}
}

.pager li a{padding-bottom: 9px;}

/* ----------　タブレット　---------- */
@media screen and (max-width: 768px){
 
.linkStyle{
    text-decoration: underline;
}
.order_takeout p{font-size:18px;}
 
}

/* ----------　スマホ　---------- */
@media screen and (max-width: 667px){
    
    #logo {
    max-width: 100px;
}
    
    .order_takeout h4 img,
  .order_delivery h4 img{
    width: 280px!important;
  }
  
  .order_link { padding: 80px 0 30px;}
	
	#tel_txt {
    margin-bottom: 50px;
}
	
	#tel_txt div:last-child{
    border-bottom: 1px solid #716767;
}
	
	#main_img:before {
    height: 97%;
}
/*
#footer_con .con_box h2{
    text-align: left;
}
*/

#page_title .page_title_box{margin-top: 20px;}

}