@charset "utf-8";

/* base ------------------------*/
#wrapper { position:relative; }
.inner { width:100%; max-width:1100px; margin-right:auto; margin-left:auto; }
section { margin-top:100px; margin-bottom:100px; }

[class^="bg-"] { padding-top:100px; padding-bottom:100px; }
.bg-beige { background-color:#f5f2f0; }


.tbl { width:100%; margin-bottom:10px; border-collapse:separate; border-spacing:0; }
.tbl th, .tbl td { padding:10px; border-top:10px solid #FFF; }
.tbl th { width:250px; font-weight:normal; text-align:center; color:#FFF; background-color:#6d6058; }
.tbl td { border-left:10px solid #FFF; background-color:#eeeeed; }


/* header ------------------------*/
#header { position:relative; padding:60px 0 30px; }
.sitename img { max-width:300px; }

/* gnav ------------------------*/
#gnav { position:absolute; top:85px; right:0; }
#gnav .nav_list > li + li { margin-left:40px; }
#gnav .nav_list a { position:relative; display:inline-block; padding:6px 0 6px 30px; font-size:17px; }
#gnav .nav_list a::before {
  content:""; position:absolute; width:12px; height:6px; top:15px; left:0; background:url(../img/arrow_icon_b.png)center / 100% no-repeat; -webkit-transition:all .3s; transition:all .3s;
}
#gnav .nav_list a:hover::before { left:5px; }
#gnav .nav_list .contact a { padding-right:25px; padding-left:39px; color:#FFF; font-size:16px; background-color:#1e1e1e; }
#gnav .nav_list .contact a::before { background-image:url(../img/arrow_icon_w.png); }

/* footer ------------------------*/
#footer { padding:80px 0; border-top:3px solid #f5f2f0; }
.logo-f { width:39%; padding:50px 0 0 30px; }
.logo-f img { max-width:230px; }

#footer .r_box { width:61%; }
.contact_btn > a { position:relative; height:162px; -webkit-box-align:center; -ms-flex-align:center; align-items:center; color:#FFF; background-color:#6d6058; }
.contact_btn > a::before { content:""; position:absolute; width:18px; height:9px; right:25px; bottom:25px; background:url(../img/arrow_icon_w.png)center / 100% no-repeat; }
.contact_btn .img { width:30%; }
.contact_btn .txt { order:2; width:30%; margin-left:5%; font-size:15px; }
.contact_btn .title { order:3; margin-left:auto; padding-right:62px; font-size:20px; }
.shop_info { margin-top:40px; }
.shop_info .title { margin-top:14px; margin-right:40px; font-size:18px; }
.shop_info .txt { font-size:15px; }

.copyright { margin:0; font-size:15px; color:#6a605a; }
.copyright > a { color:#6a605a; }

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

/* title */
.con_ttl { font-size:25px; }

/* button */
.button {
  position:relative; z-index:2; display:inline-block; overflow:hidden; min-width:260px;
  padding:.7em 3em .6em 3em; text-align:center;
}
.button.icon:before {
  content:""; display:inline-block; width:1.2em; height:1.2em; margin:.3em .5em 0 0; vertical-align:top; background:no-repeat center / 100%;
}
.btn a { position:relative; display:inline-block; padding:10px 100px 10px 30px; border-width:0 3px 3px 0; border-style:solid; border-color:#2e2e2e; background-color:#f5f2f0; }
.btn a::before { content:""; position:absolute; width:12px; height:6px; top:50%; right:21px; margin-top:-3px; background:url(../img/arrow_icon_b.png)center / 100% no-repeat; }

/* common */
.vertical_box .vertical_txt { width:20%; }
.vertical_box .txt_box { width:72%;  margin-left:8%; }
.vertical_txt { -webkit-writing-mode:vertical-rl; -ms-writing-mode:tb-rl; writing-mode:vertical-rl; }
.txt_box .txt { margin-top:30px; }
.txt_box .btn { margin-top:60px; }


.img figcaption { position:absolute; min-width:89px; }
.img span.vertical_txt { display:block; height:212px; padding:38px 23px; font-size:24px; background-color:#FFF; }


/* ================================================================
  レスポンシブ
=================================================================== */
/* 600以上(PC・タブレット) */
@media screen and (min-width: 600px) {

}

/* 960以上(PC) */
@media screen and (min-width: 960px) {
  .menu-button  { display:none; }

}


/* ================================================================
  タブレット
=================================================================== */
@media screen and (max-width: 959px) {
  body { font-size:15px; }
  .inner { padding-left:20px; padding-right:20px; }
  section { margin-top:70px; margin-bottom:70px; }
  [class^="bg-"] { padding-top:70px; padding-bottom:70px; }

  /* header ------------------------ */
  #header { padding:40px 0 20px; }
  header > .inner { display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; }
  .sitename img { max-width:200px; }

  /* gnav ------------------------ */
  #gnav { display:none; position:absolute; float:none; z-index:100; width:100%; height:100vh; top:0; left:0; padding:20px; background:rgba(255,255,255,.8); }
	#gnav .nav_list { margin-top:100px; }
	#gnav .nav_list li { float:none; width:100%; }
  #gnav .nav_list > li + li { margin-left:0; }
	#gnav .nav_list a { display:block; }
  #gnav .nav_list span { margin-left:15px; font-size:10px; color:#f5d825; }

  /* menuボタン */
  .menu-button { margin:20px 0 0 auto; }
  .menu-button, .menu-button span { display:inline-block;	transition:all .5s; -webkit-transition:all .5s; }
  .menu-button .menu { position:relative;	width:30px;	height:18px; z-index:996; }
  .menu-button span { position:absolute; left:0;	width:100%; height:2px; background-color:#111; }
  .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.active span:nth-of-type(1) {
    -webkit-transform:translateY(8px) rotate(-45deg);
    transform:translateY(8px) rotate(-45deg);
  }
  .menu-button.active span:nth-of-type(2) { opacity:0; }
  .menu-button.active span:nth-of-type(3) {
    -webkit-transform:translateY(-8px) rotate(45deg);
    transform:translateY(-8px) rotate(45deg);
  }
  .menu-button .label { margin:0 0 4px; color:#000; font-size:11px; text-align:center; line-height:1; }

  /* footer ------------------------ */
  #footer { padding:70px 0; }
  #footer .r_box { width:100%; }
  .logo-f { width:100%; padding:0; text-align:center; }
  .contact_btn { max-width:440px; margin:30px auto 0; }
  .contact_btn > a { display:block; height:auto; overflow:hidden; }
  .contact_btn .img { float:left; margin-top:28px; }
  .contact_btn .title { width:62%; margin-bottom:5px; }
  .contact_btn .txt { width:62%; margin-left:38%; margin-top:5px; margin-bottom:20px; }
  .shop_info { max-width:320px; margin:0 auto; }
  .shop_info .title { margin-bottom:3px; }
  .shop_info .txt { margin-top:3px; }
  .copyright { text-align:center; }

  /* common */
  .vertical_box .vertical_txt { width:15%; }
  .vertical_box .txt_box { width:77%; }
}


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


  .tbl th { display:block; width:100%; border-width:0; }
  .tbl td { display:block; border-width:0; }
  /* header------------------------*/
  #header { padding:25px 0 0; }
  .sitename img { max-width:160px; }

  /* gnav------------------------*/
  .menu-button { margin-top:10px; }

  /* footer------------------------*/
  #footer { padding:60px 0 70px; }

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

  /* tel */

  /* title */
  .con_ttl { font-size:22px; }

  /* button */

  .txt_box .txt { margin-bottom:0; }
  .img figcaption { min-width:89px; }
  .img span.vertical_txt { height:180px; padding:35px 20px; font-size:22px; }
}