@charset "utf-8";

/* base ------------------------*/
#wrapper { position:relative; }
.inner { margin:0 15px; position:relative; }
.s_inner { max-width:1000px; margin:0 auto; }

.grayBox { padding: 20px; line-height: 1.5; letter-spacing: .05em; color: #ffffff; border: 4px double #ffffff; background: #666;}

/* header ------------------------*/
#header { position:fixed; top:0; left:0; right:0; z-index:1; }
#header .sitename { padding:45px 50px 0; }

#header .contact-button { position:absolute; top:0; right:0; margin:0; width:100px; height:90px; }
#header .contact-button > a { display:block; height:100%; font-size:.85em; line-height:1; position:relative; color:#fff; text-align:center; text-decoration:none; background:#c71432; }
#header .contact-button > a::before {
  content:""; display:block; width:32px; height:50px; margin:0 auto 8px;
  background:url(../img/common/ico-mail.svg) no-repeat 50% 100% / contain;
}

#header .onlineshop { position:absolute; top:0; right:100px; margin:0; width:100px; height:90px; }
#header .onlineshop > a { display:block; height:100%; font-size:.85em; line-height:1; position:relative; color: #fff; text-align:center; text-decoration:none; background:#C1C1C1}
#header .onlineshop > a::before {
  content:""; display:block; width:32px; height:50px; margin:0 auto 8px;
  background:url(../img/common/ico-cart.svg) no-repeat 50% 100% / contain;
}

#header .lang {
  position:absolute; top:0; right:330px; margin:0;
  line-height:90px; padding-left:30px; color:#fff;
  filter: drop-shadow(2px 2px 10px #4d4a45);
  }
#header .lang > a { color:#fff; }
#header .lang::before {
  position:absolute; top:50%; left:0; margin-top:-10px;
  content:""; display:inline-block; width:20px; height:20px;
  background:url(../img/common/ico-earth.svg) no-repeat center / contain;
}
/* gnav ------------------------*/
#gnav { position:absolute;
  display:none;
  top:0; right:0; /* z-index:999; */
  width:100%; height:100vh; overflow-y:auto;
  padding:80px 20px 60px; background:rgb(102 100 98 / 0.96);
  }
#gnav a:hover { text-decoration:none; }
#gnav.open { display:block; }

.gmenu { margin-bottom: 30px; }
.gmenu > li { position: relative; width: 47%; margin-top: 1.5em; }
.gmenu > li > a { position: relative; display: block; 
  padding: 0; text-decoration: none; color: #fff;
  }
.gmenu > li > a::after { content: ""; position: absolute; 
  bottom: -4px; left: 0;
  width: 100%; height: 2px;
  background: #fff;
  transform: scale(0,1);
  transform-origin: left top;
  transition: transform .3s;
  }
.gmenu > li > a:hover { color: #fff; }
.gmenu > li > a:hover::after { transform: scale(1,1); }

.gmenu .en { display: block; font: .9rem / 1.8 "Rubik", sans-serif; letter-spacing: .1em; color: #acacac; }
.gmenu .en:first-letter { color: #c71432; }

.nav-shop { margin-bottom: 30px; }
.nav-shop > li { width: 100%; }
.nav-shop > li > a { position: relative;
  display: block; padding: 1em; text-align: center;
  min-height: 150px;
  background: no-repeat center /cover;
  }
.nav-shop > li > a::before { content: ""; position: absolute;
  top:10px; right: 10px; bottom: 10px; left: 10px;
  border: 1px solid #fff;
  }
.nav-shop > li.takamura > a { background-image: url("../img/top/bg_takamura.jpg"); }
.nav-shop > li.bamtera > a { background-image: url("../img/top/bg_bamtera.jpg"); }
.nav-shop .logo { position: absolute; top: 50%; left: 50%; margin: 0 auto; transform: translate(-50%,-50%); }

.h-chikubuen { margin-bottom: 2em; }

/* menuボタン */
.menu-button {
  position:absolute; top:0; right:200px; z-index:1000; cursor:pointer;
  width:100px; height:90px; padding-top:37px; background:#4d4a45; }
.menu-button,
.menu-button span { display:block; transition:all .5s; -webkit-transition:all .5s; box-sizing:border-box; }
.menu-button .h_menu { position:relative; width:40px; height:19px; margin:0 auto; }
.menu-button span { position:absolute; left:0; width:100%; height:2px; background-color:#dbdbda; }

.menu-button span:nth-of-type(1) { top:0; }
.menu-button span:nth-of-type(2) { top:8px; }
.menu-button span:nth-of-type(3) { bottom:0; }

.menu-button.open span:nth-of-type(1) {
  -webkit-transform:translateY(9px) rotate(-45deg);
  transform:translateY(9px) rotate(-45deg);
}
.menu-button.open span:nth-of-type(2) {
  opacity:0;
}
.menu-button.open span:nth-of-type(3) {
  -webkit-transform:translateY(-9px) rotate(45deg);
  transform:translateY(-9px) rotate(45deg);
}


.nav-sns > li:not(:last-child) { margin-right: 10px; }
.nav-sns > li:not(.h-policy) > a { display: block; width: 30px; height: 30px; text-align: center; border-radius: 100%; border: 1px solid #fff; }
.nav-sns > li:not(.h-policy) > a > img { width: 15px; vertical-align: baseline; }
.nav-sns > li:not(.h-policy) > a:hover { opacity: 1; }

.nav-sns > li.h-policy { margin-left: 20px; }
.nav-sns > li.h-policy a { padding-left: 1.5em; color: #fff; text-decoration: underline; position: relative; }
.nav-sns > li.h-policy a::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; left: 4px;
    width: 8px;
  height: 8px;
  margin: auto;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg); }


/* footer ------------------------*/

/* link ------------- */
#link { padding:6.8% 0; }
#link > .inner { margin: 0 auto; max-width:1000px; width: calc(100% - 30px); }
.link-list > li { width:49%; }

#footer { color:#fff; background:#807f79; }
#footer > .inner { padding:3.5em 0; }
#footer .flex { align-items: end;}
#footer a { color:#fff; }

.f_logo { font-size:1.5em; }
.f_logo > a > img { height:35px; margin-right:1rem; vertical-align:-7px; }
.f_addr { margin:1.2em 0 0; font-size: 0.9em;}
.f_tel  { margin:0; font-size: 0.9em;}
.f_tel > em { font-size:1.3em; letter-spacing:.05em; font-weight:normal; }
.f-note { margin-left: .6em; font-size: .76em; line-height: 1.4; }

.f_menu { font-size:.875em; }
.f_menu li + li::before { content:"/"; margin:0 .85em; }

.copyright { margin:0; padding:1em 0; font-size:.75em; text-align:right; }

/* バナーリスト */
.bnr-list { margin-top: 3em; }
.bnr-list2 { margin-top: 3em; }

/* common------------------------*/
/* tel */

/* title */
.secTitle { margin-bottom:.5em; font-size:2.375em; }


/* bg */
.bg-gray { background:#f6f6f6; }

/* button */
[class^="btn-"] {
  position:relative; display:inline-block; overflow:hidden;
  padding:15px 35px; line-height:1; border:1px solid #333;
  font-family:"Rubik", sans-serif;
  }
[class^="btn-"]:hover { text-decoration:none; }
.btn-0::before {
  content:''; position:absolute; top:0; right:0; bottom:0; left:0; z-index:-1;
  background-color:#333;
  -webkit-transform:translateX(-100%);
          transform:translateX(-100%);
  transition:all .5s ease;
  }
.btn-0:hover { color:#fff; }
.btn-0:hover::before {
  -webkit-transform:translateX(0);
          transform:translateX(0);
  }

.btn { position: relative; display: inline-block; padding: .8em 3em .8em 3.5em; border: solid 1px #a6a5a1; text-decoration: none !important;}
.btn::before { content: ""; position: absolute; top: 50%; left: 0; width: 10px; height: 2px; background: #a6a5a1;}
.btn:hover { background-color: #fff;}



/*instaリンク*/
.insta-link { position: relative; display: inline-block; background: #4d4a45; text-decoration: none; color: #fff; border-radius: 3px; padding: .5em 2em .5em 3.5em; border: 1px solid #4d4a45; }
.insta-link::before { content: ""; position: absolute; top: 50%; left: 1.5em;
  width: 20px; height: 20px;
  transform: translateY(-50%); 
  background: url("../img/common/sns_instagram.png") no-repeat center;
  background-size: 20px; }
.insta-link:hover { color: #4d4a45; text-decoration: none; background: #fff; }
.insta-link:hover::before { background-image: url("../img/common/sns_instagram_on.png"); }


/* more */
[class^="more-"] { font-family:"Rubik", sans-serif; line-height:1; position:relative; }
[class^="more-"]:hover { text-decoration:none; }
.more-link { display:inline-block; padding-left:28px; letter-spacing:.1em; }
.more-link::before {
  content:''; position:absolute; top:50%; left:0;
  background-color:#c71432;
  display:inline-block; height:2px;
  -webkit-animation:more_link 2s ease-in-out 0s infinite normal;
          animation:more_link 2s linear 0s infinite normal;
  }

/* animation */
@keyframes more_link {
  0%   { width:0; }
  50%  { width:13px; }
  100% { width:13px; }
  }

/* 縦書き */
.vertical-rl {
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  }

/*dl */
.c-dl { margin-bottom:20px; }
.c-dl>div { display:-webkit-flex; display:flex; margin-bottom: .5em; border-bottom: 1px solid #eee5cd; }
.c-dl>div > * { margin-bottom: .5em; padding: 0 1em; font-size: 0.9em; letter-spacing: .1em; }
.c-dl>div:last-child { margin-bottom:0; }
.c-dl>div>dt { position: relative; width: 26%; min-width: 5em; max-height: 25.45px; text-align: center; background: #eee5cd; }
.c-dl>div>dd { -webkit-box-flex: 1; -ms-flex: 1; flex: 1;}

/*フォーム*/
.c-form>div { display:-webkit-flex; display:flex; }
.c-form>div > * { padding:.4em 1em; }
.c-form>div:last-child { margin-bottom:0; }
.c-form>div>dt {position: relative;  width:26%; min-width:10em; font-weight:bold; border-bottom:1px solid #fff; }
.c-form>div>dd { border-bottom:1px solid #fff; -webkit-box-flex:1;-ms-flex:1; flex:1; }
.c-form>div>dt.required::before {
  content: "必須";
  position: absolute; top: 1.5em; right: 1.5em;
  display: inline-block; padding: 0 .5em;
  font-size: .75em; background: #c71432; color: #fff;
}
#contact .c-form>div>dt.required::before { right: 2.5em; }
.c-form>div>dt.any::before {
  content: "任意";
  position: absolute; top: 1.5em; right: 1.5em;
  display: inline-block; padding: 0 .5em;
  font-size: .75em; background: #fff; border: 1px solid #c71432; color: #c71432;
}

#contact .submit { margin: 30px auto 0; }
#contact .submit > input{ outline: none; display: inline-block; padding: .8em 3.5em .9em;
  background: #4d4a45; color: #fff; border: 1px solid #4d4a45;
  font-family: 'Noto Serif JP', serif; font-size: 1.2em; letter-spacing: .1em;
  transition: .3s;
  }
#contact .submit > input:hover { background: #fff; color: #4d4a45; }


/* ================================================================
  レスポンシブ
=================================================================== */
/* 600以上(PC・タブレット) */
@media screen and (min-width:600px) {
  
  /* gnav ------------------------*/
  #gnav { padding:6em; padding-bottom: 4em; }
  .gmenu { margin-bottom: 50px; }
  .gmenu > li { width: 33%; }
  .gmenu > li > a { margin-top: 2em; margin-right: 2em; font-size:1.2em; 
  }
  .nav-shop > li { width: 49%; }
  .nav-shop > li > a { min-height: 220px; }
  
  .nav-sns > li > a > img { vertical-align: baseline; }

  /* フォーム */
  .c-form>div > * { padding:1em 1.5em; }
  .c-form>div>dd { position: relative; padding-left: 4em; }
  .c-form>div>dd::before { content: ""; position:absolute; top: 50%; left: 0; width: 20px;
    height: 1px; background: #c71432; }
  
  #contact .c-form>div>dd { padding-left: 2em; }
  #contact .c-form>div>dd::before { content: "";
    position:absolute; top: 50%;  left: 0;
    width: 1px; height: 50%;
    background: #bbb;
    transform: translateY(-50%);}
  
  /* バナーリスト */
  .bnr-list li { width: 32%; }
  .bnr-list2 li { width: 36.5%; }
  .bnr-list2.col3 li { width: 32%; }
  .bnr-list li + li { margin-left: 2%; }
  .bnr-list2 li + li { margin-left: 2%; }

}

/* 960以上(PC) */
@media screen and (min-width:960px) {

}

/* 1200以上(PC) */
@media screen and (min-width:1200px) {
  .inner { max-width:1200px; margin:0 auto; }

}

@media screen and (max-width:999px) {
.s_inner { margin: 0 15px; }

}

/* ================================================================
  タブレット
=================================================================== */
@media screen and (max-width:959px) {
  body { font-size:15px; }

  /* header ------------------------ */
  #header .sitename { padding:20px; }

  /* footer ------------------------ */
  
  .c-form>div>dt { width: 35%; }

}


/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width:599px){
  body { font-size:14px; }

  /* header------------------------*/
  #header { }
  #header .sitename { padding:7px 10px 0; }
  #header .sitename > a > img { height:55px; }
  #header .contact-button { width:70px; height:60px; font-size:.9em; }
  #header .contact-button > a::before { width:24px; height:36px; margin-bottom:5px; }
  #header .onlineshop { right: 70px; width:70px; height:60px; font-size:.9em; }
  #header .onlineshop > a::before { width:24px; height:36px; margin-bottom:5px; }
  #header .lang { right:225px; padding-left:20px; line-height:65px; }
  #header .lang::before { width: 15px; height: 15px; }

  /* gnav------------------------*/
  .menu-button { right:140px; width:70px; height:60px; padding-top:20px; }
  .menu-button .h_menu { width:30px; }
  .gmenu { justify-content: space-between; -webkit-justify-content: space-between; }
  .gmenu > li > a { line-height: 1.5; }
  .nav-shop > li { margin-bottom: 10px; }
  .nav-shop > li.takamura > a img { height: 100px; }

  /* footer------------------------*/
  /* link ------------- */
  .link-list > li { width:100%; }
  .link-list > li + li { margin-top:1em; }
  
  .f-note { margin-left: 0; }

  .f_menu { margin:2em 0 0; }
  
  /* バナーリスト */
  .bnr-list li { width: 49%; padding-top: 0.5em; }
  .bnr-list li:nth-child(even) { margin-left: 2%; }
  .bnr-list2 li { width: 49%; padding-top: 0.5em; }
  .bnr-list2.col3 li:last-child { width: 70%;}
  .bnr-list2 li:nth-child(even) { margin-left: 2%; }
  .bnr-list2 { margin-top: 1em; }


  /* common ------------------------*/

  /* tel */

  /* title */

  /* button */
  
  /* フォーム */
  .c-form>div { display:block;}
  .c-form>div>dt { display:block; width:100%!important; border: none; background: #f6f6f6; border-left: 2px solid #c71432;}
  .c-form>div>dt.required::before,.c-form>div>dt.any::before { top: 50%; transform: translateY(-50%); }
  .c-form>div>dd { background: #fff; border: none; padding-bottom: 20px; }
  
  #contact .c-form input.m, #contact .c-form input.s { width: 100%; }
  


}