@charset "utf-8";

/*=====================
header
========================*/
@media screen and (min-width: 320px){
  .header {
    width: 100%;
    padding: 20px 0;
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
  }
  .head_inner {
    width: 95%;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    align-items: center;
  }
  .hd_left {width: 18rem; position: relative;}
  .hd__logo img{width: 66%;}
  .hd_right {width: 80%;}
  .hd_right_flex{display: flex; justify-content: flex-end; align-items: center;}
  .hd_right_nav{width: 50%;}
  .g_nav {
    text-align: center;
    width: 60%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }

  .g_nav_li {
    margin: 0 1.5px;
    flex-grow: 1;
    position: relative;
    z-index:1;
  }

  .g_nav_li > a {
    color: #101010;
    font-size: 15px;
    position: relative;
    display: block;
    width: 100%;
    transition: .3s ease-out;
    text-align: center;
    padding: 0 5px;
    white-space: nowrap;
  }

  .g_nav_li a {
    position: relative;
  }

  .g_nav_li a:hover {
    opacity: .8;
    color: #c2b08c;
  }

  .sub_nav {
    display: none;
    width: 100%;
    background-color: rgba(145,15,19,0.4);
    transition: all .3s;
    position: relative;
    position: absolute;
    top: 45px;
    left: 50%;
    transform: translateX(-50%);
  }

  .sub_nav {display: block;}
  .hd_tel {width: 17%;}
  .hd_tel img{cursor: pointer;}

  .hd_nav_sp {display: block; position: relative;}
  .hamburger_inner {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    padding: 10% 15%;
    width: 100%;
    height: 100%;
    background: rgb(225 225 225 / 90%);
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    font-size: 18px;
    font-weight: 400;
    z-index: 1002;
    display: grid;
    place-content: center;
    place-items: center;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
    transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
  }
  .nav_items_sp {width: 100%;}
  .nav_item_sp {
    margin: auto;
    width: 100%;
    height: auto;
    overflow: hidden;
    text-align: center;
    line-height: 1;
    font-weight: bold;
  }
  .nav_item_sp a {
    display: block;
    padding: 12px 0;
  }
  .nav_item_txt {margin-bottom: 30px;}
  .hd_hamburger {
    display: block;
    position: fixed;
    margin: auto;
    width: 25px;
    height: 25px;
    cursor: pointer;
    z-index: 9999;
    top: 1.5rem;
    right: 2rem;
  }
  .hd_hamburger .span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: #1a1a1a;
    left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
  }
  .hd_hamburger .span:nth-child(1) {top: 0;}
  .hd_hamburger .span:nth-child(2) {top: 10px;}
  .hd_hamburger .span:nth-child(3) {top: 20px;}

  /*__ open __*/
  .hd_nav_sp.open .hamburger_inner {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
    transition: transform 0.4s, opacity 0.4s;
  }
  .hd_nav_sp.open .hd_hamburger .span:nth-child(1) {top: 7px; -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); transform: rotate(315deg);}
  .hd_nav_sp.open  .hd_hamburger .span:nth-child(2) {width: 0; left: 50%;}
  .hd_nav_sp.open  .hd_hamburger .span:nth-child(3) {top: 7px; -webkit-transform: rotate(-315deg); -moz-transform: rotate(-315deg); transform: rotate(-315deg);}

  .hd_right{display: none;}

  /* sidebar
  ------------------------------*/
  .sidebar{display: none; position: fixed; right: 0; bottom: 20%; z-index: 10; transition: 0.5s;}
  .side_box_sp {display: flex; position: fixed; right: 0; bottom: 0; z-index: 999; transition: 0.5s; width: 100%;}
  .side_sp_li {width: 50%; padding: 10px; display: flex; flex-direction: column; align-items: center; line-height: 50px;}
  .side_sp_li:nth-child(1){background: #d2a45a;}
  .side_sp_li:nth-child(2){background: #a98141; }
  .box_icon{padding-right: 10px;}
  .box_txt{}
  .box_txt p{color: #fff; font-size: 3.5vw;}
}

@media screen and (min-width: 768px) {
  .side_box_sp {display: none;}
  .sidebar{display: block;}
}

@media screen and (min-width: 1440px) {
  .hd_right{display: block;}
  .hd_left {width: 15%;}
  .hd_nav_sp{display: none;}
  .hd__logo img {width: 100%;}
}



/*=====================
fotter
========================*/
@media screen and (min-width: 320px) {
    /* footer
  ------------------------------*/
  .footer {padding: 50px 0 20px; position: relative;}
  .footer .inner{width: 100%; margin: 0 auto; padding: 0 1%;}
  .ft__flex {justify-content: center;}
  .ft_left{width: 50%; margin: 0 auto; margin-bottom: 25px;}
  .ft_right{display: none;}
  .copyright {text-align: center;}
  .copyright p {font-size: 11px;}

  /* cv
  ------------------------------*/
  .cv{background: url(../images/top_entry_bg.jpg) no-repeat; background-size: cover; width: 100%; text-align: center; padding: 10% 1%; margin: 0 auto;}
  .cv h1 {font-size: 7vw; color: #fff;}
  .entry_btn{margin: 0 10px 10px;}
  

  /* top_shop
  ------------------------------*/
  .top_shop {margin: 0 auto 100px;}
  .top_shop p{color: #fff;}
  .top_shop_ul{display: flex; flex-wrap: wrap; justify-content: center; flex-direction: column;}
  .top_shop_li{width: 100%; ;padding: 21px; margin-bottom: 5px;}
  .top_shop_li:nth-child(1){background: url(../images/top_fameu_bg.jpg);}
  .top_shop_li:nth-child(2){background: url(../images/top_ink_bg.jpg);}
  .top_shop_li:nth-child(3){background: url(../images/top_will_bg.jpg);}
  .top_shop_li:nth-child(4){background: url(../images/top_fameu+_bg.jpg);}
  .top_shop_li:nth-child(5){background: url(../images/top_takasaki_bg.jpg);}
  .top_shop_ttl{display: flex; align-items: baseline;}
  .box01_ttl{color: #fff; font-size: 40px;}
  .box01{margin-right: 50px;}
  .box02{display: flex;}
  .box02 .img{margin: 0 10px;}
  .shop_tbl_tr{text-align: left; margin-bottom: 20px;}
  .shop_tbl_th{width: 30%; font-family: "Cormorant", serif;}
  .shop_tbl_td{width: 70%; padding-left: 20px;line-height:1.5;}
  .shop_tbl_th p{text-transform: uppercase;}
  .shop_btn_ul{display: flex; justify-content: space-between; flex-wrap: wrap;}
  .shop_btn_li{background-color: #7fbd8c94; margin: 0 1px 5px; width: 49%; text-align: center; color: #fff; text-transform: uppercase; line-height: 60px;}
  .shop_btn_li a {display: block; cursor: pointer;}
  .shop_btn_li a p{font-family: "Cormorant", serif; font-size: 20px;}
}

@media screen and (min-width: 768px) {
  .footer {padding: 100px 0 50px;}
  .ft_left{width: 20%;}
  .ft_right{display: block; width: 60%; text-align: right;line-height: 3;}
  .ft__flex {justify-content: normal;}
  .copyright{text-align: right;}

  .cv{background-size: cover; width: 90%; padding: 5% 0;}
  .cv h1{font-size: 41px;}
  
    /* top_shop
  ------------------------------*/
  .top_shop_ul{flex-direction: unset;}
  .top_shop_li {width: 49%; margin: 0 2px 5px; padding: 23px}
  .shop_btn_li{width: 30%;}
  .shop_btn_ul{flex-wrap: unset;}
  
}
@media screen and (min-width: 1024px) {
  .top_shop_li {padding: 70px}
}
@media screen and (min-width: 1400px) {
  .footer .inner{width: 1400px; padding: 0 3%;}
}
@media screen and (min-width: 1820px) {
  .cv{width: 1820px;}
  .top_shop {width: 1820px;}

}