@charset "utf-8";

/* ---------------------------------------
  mainimg
--------------------------------------- */
.page #mainimg {
  position: relative;
  margin: 0 auto;
  width: 1000px;
  height: 300px;
  background-repeat: no-repeat;
  background-position: top center;}
.zakka #mainimg { background-image: url(../zakka/img/main.jpg);}
.cafe #mainimg { background-image: url(../cafe/img/main.jpg);}

/* ---------------------------------------
  style
--------------------------------------- */
#main .style1 {
  padding: 2em 3em;
  background: #d0e3d8 url(../img/bg_txr_wht30.png) repeat;}
#main .style2 {
  padding: 1.2em 1.5em;
  background: #e8f0ec url(../img/bg_txr_wht60.png) repeat;}
#main .box { margin-top: 60px;}

/* imgs */
#main .imgs {
  margin: 0 20px;
  padding: 0;}
#main .imgs li {
  float: left;
  margin: 0;
  width: 215px;
  list-style: none;}
#main .imgs li+li { margin-left: 20px;}
#main .imgs li img {
  width: 100%;
  height: auto;}


/* =======================================

  about

======================================= */
.aboutbg {
  position: relative;
  margin: 0 auto;
  padding-top: 80px;
  width: 1000px;
  background: url(../img/about_bg.png) center 180px no-repeat;}
.about_ct .left {
  margin-top: 30px;
  width: 500px;}
.about_ct .right {
  margin-top: 70px;
  width: 400px;
  font-size: 14px;
  font-size: 1.4rem;}
.about_lg .left {
  margin-top: 40px;
  width: 300px;
  text-align: center;}
.about_lg .right { width: 600px;}
.about_lg .right h2 { text-align: left;}
#aboutlogo {
  margin: 0 auto;
  display: block;
  text-align: center;}
#aboutlogo img {
  width: 180px;
  height: 188px;}
.about table th { width: 180px;}


/* =======================================

  zakka

======================================= */
.zakka #main .left, .zakka #main .right,
.cafe #main .left, .cafe #main .right {
  position: relative;
  width: 460px;
  text-align: left;}
.zakka #main .box h3 { margin: 1em 10px 0 10px;}
.zakka #main .box1 p {
  margin-right: 10px;
  margin-left: 10px;
  font-size: 14px;
  font-size: 1.4rem;}
.zakka #main .right { margin: 40px 0 0 0;}
.zakka #main .left img, .zakka #main .right img {
  width: 460px;
  height: 306px;}


/* =======================================

  sitemap

======================================= */
.sitemap {
  margin: 0 0 0 0;
  padding: 0;
  list-style: none;
  text-align: center;}
.sitemap li a {
  display: inline-block;
  padding: 10px;}
.sitemap .sns { margin-top: 40px;}
.sitemap .small { margin-top: 40px;}
.sitemap .small a {
  font-size: 14px;
  font-size: 1.4rem;}


/* =======================================

  privacy

======================================= */
.privacy h2 {
  text-align: left;
  font-size: 18px;
  font-size: 1.8rem;}
.privacy h2:first-child { margin-top: 0;}


/* =======================================

  ltie10

======================================= */
#modal-overlay{
  z-index: 1001;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background: rgba(66,58,44,0.5);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6231815', endColorstr='#a6231815');}
#support {
  z-index: 1002;
  width: 80%;
  margin: 0;
  position: fixed;
  display: none ;
  padding: 25px 25px 20px 25px;
  border: 2px solid #292018;
  background: #f8f8ed;}
#support p { margin: 0 auto 10px auto;}
#support p .btn {
  margin-top: 15px;
  color: #292018;
  font-size: 18px;}
.button-link {
  float: right;
  color: #292018;
  text-decoration: underline;}
.button-link:hover {
  cursor: pointer;
  color: #292018;}


/* =======================================

  cmn

======================================= */
.clearfix:after,
#information:after, #servise:after, #instafeed:after,
#breadcrumb:after, .box:after, .imgs:after,
.ftop:after, .fbtm:after {
  content: " ";
  clear: both;
  display: block;}

.mt0 { margin-top: 0 !important;}
.mt5 { margin-top: 5px !important;}
.mt10 { margin-top: 10px !important;}
.mt12 { margin-top: 12px !important;}
.mt15 { margin-top: 15px !important;}
.mt20 { margin-top: 20px !important;}
.mt25 { margin-top: 25px !important;}
.mt30 { margin-top: 30px !important;}
.mt35 { margin-top: 35px !important;}
.mt40 { margin-top: 40px !important;}
.mt50 { margin-top: 50px !important;}
.mt60 { margin-top: 60px !important;}
.mt70 { margin-top: 70px !important;}
.mb0 { margin-bottom: 0px !important;}
.mb5 { margin-bottom: 5px !important;}
.mb10 { margin-bottom: 10px !important;}
.mb12 { margin-bottom: 12px !important;}
.mb20 { margin-bottom: 20px !important;}
.mb30 { margin-bottom: 30px !important;}
.mb40 { margin-bottom: 40px !important;}
.mb50 { margin-bottom: 50px !important;}
.ml5 { margin-left: 5px !important;}
.ml10 { margin-left: 10px !important;}
.ml12 { margin-left: 12px !important;}
.ml15 { margin-left: 15px !important;}
.ml16 { margin-left: 16px !important;}
.ml20 { margin-left: 20px !important;}
.ml30 { margin-left: 30px !important;}
.ml40 { margin-left: 40px !important;}
.mr10 { margin-right: 10px !important;}
.mr16 { margin-right: 16px !important;}
.mr20 { margin-right: 20px !important;}
.mr40 { margin-right: 40px !important;}
.pt10 { padding-top: 10px !important;}
.pt15 { padding-top: 15px !important;}
.pt20 { padding-top: 20px !important;}
.pt25 { padding-top: 25px !important;}
.pt40 { padding-top: 40px !important;}
.pr20 { padding-right: 20px !important;}
.pl20 { padding-left: 20px !important;}
.pb20 { padding-bottom: 20px !important;}
.pb30 { padding-bottom: 30px !important;}

.floatleft { float: left !important;}
.floatright { float: right !important;}
.clearleft { clear: left !important;}
.clearright { clear: right !important;}
.clearboth { clear: both !important;}
.txtleft { text-align: left !important;}
.txtright { text-align: right !important;}

.fs10 { font-size: 1.0rem !important;}
.fs11 { font-size: 1.1rem !important;}
.fs12 { font-size: 1.2rem !important;}
.fs13 { font-size: 1.3rem !important;}
.fs14 { font-size: 1.4rem !important;}
.fs15 { font-size: 1.5rem !important;}
.fs16 { font-size: 1.6rem !important;}
.fs18 { font-size: 1.8rem !important;}
.fs20 { font-size: 2.0rem !important;}
.fs22 { font-size: 2.2rem !important;}
.fs24 { font-size: 2.4rem !important;}
.fs26 { font-size: 2.6rem !important;}

.bold { font-weight: bold !important;}
.red {color: #e60012 !important;}
.yellow {color: #fff100 !important;}
.center, .centerLeft {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;}

/* ---------------------------------------
  width height
--------------------------------------- */
.w50p { width: 50% !important;}
.w40p { width: 40% !important;}
.w30p { width: 30% !important;}

.w80, input.w80, select.w80, textarea.w80, button.w80 { width: 80px !important; max-width: 80px !important;}
.w100, input.w100, select.w100, textarea.w100, button.w100 { width: 100px !important; max-width: 100px !important;}
.w140, input.w140, select.w140, textarea.w140, button.w140 { width: 140px !important; max-width: 140px !important;}
.w160, input.w160, select.w160, textarea.w160, button.w160 { width: 160px !important; max-width: 160px !important;}
.w170, input.w170, select.w170, textarea.w170, button.w170 { width: 170px !important; max-width: 170px !important;}
.w200, input.w200, select.w200, textarea.w200, button.w200 { width: 200px !important; max-width: 200px !important;}
.w260, input.w260, select.w260, textarea.w260, button.w260 { width: 260px !important; max-width: 260px !important;}
.w280, input.w280, select.w280, textarea.w280, button.w280 { width: 280px !important; max-width: 280px !important;}
.w320, input.w320, select.w320, textarea.w320, button.w320 { width: 320px !important; max-width: 320px !important;}
.w380, input.w380, select.w380, textarea.w380, button.w380 { width: 380px !important; max-width: 380px !important;}
.w400, input.w400, select.w400, textarea.w400, button.w400 { width: 400px !important; max-width: 400px !important;}
.w420, input.w420, select.w420, textarea.w420, button.w420 { width: 420px !important; max-width: 420px !important;}
.w450, input.w450, select.w450, textarea.w450, button.w450 { width: 450px !important; max-width: 450px !important;}
.w480, input.w480, select.w480, textarea.w480, button.w480 { width: 480px !important; max-width: 480px !important;}
.w570, input.w570, select.w570, textarea.w570, button.w570 { width: 570px !important; max-width: 570px !important;}
.w600, input.w600, select.w600, textarea.w600, button.w600 { width: 600px !important; max-width: 600px !important;}

textarea.h60 { min-height: 60px !important;}
textarea.h100 { min-height: 100px !important;}
textarea.h200 { min-height: 200px !important;}
textarea.h300 { min-height: 300px !important;}

.center button { display: inline-block;}