@charset "utf-8";

/*----------------------------------------------------------------------------------------------------

  Main visual
  
----------------------------------------------------------------------------------------------------*/

.mainVisual {
  width:100%;
  background:url(../image/mv_photo.jpg) no-repeat center center;
  background-size:cover;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
}

.mainVisual h2 {
  margin-top:1em;
  width:100%;
  background:url(../image/mv.svg) no-repeat center center;
  background-size:contain;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}

@media print,screen and (min-width:641px) {
  .mainVisual {
    height:-webkit-calc(100vh - 110px);
    height:calc(100vh - 110px);
  }
  
  .ua-pc .mainVisual {
    min-height:600px;
  }
  
  .mainVisual h2 {
    height:44vh;
    max-height:400px;
    min-height:320px;
  }
}

@media print,screen and (min-width:641px) and (orientation:landscape) {
  .ua-tab .mainVisual {
  }
}

@media print,screen and (min-width:641px) and (orientation:portrait) {
  .ua-tab .mainVisual {
    max-height:750px;
  }
}

@media screen and (max-width:640px) {
  .mainVisual {
    height:-webkit-calc(500 / 640 * 100vw);
    height:calc(500 / 640 * 100vw);
  }
  
  .mainVisual h2 {
    width:-webkit-calc(450 / 640 * 100vw);
    width:calc(450 / 640 * 100vw);
    height:-webkit-calc(32 / 640 * 100vw);
    height:calc(320 / 640 * 100vw);
  }
}


/*----------------------------------------------------------------------------------------------------

  About
  
----------------------------------------------------------------------------------------------------*/

.about__tenposu {
  text-align:center;
}

.tenposu-cont:before,
.tenposu-cont:after {
  content:"";
  width:60px;
  height:125px;
  display:inline-block;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:contain;
  position:absolute;
  bottom:0;
}

.tenposu-cont:before {
  background-image:url(../image/fork.svg);
  left:-80px;
}

.tenposu-cont:after {
  background-image:url(../image/spoon.svg);
  right:-80px;
}

.tenposu-cont {
  position:relative;
  width:220px;
  height:220px;
  padding:10px;
  margin-left:auto;
  margin-right:auto;
  border-radius:100%;
  border:2px solid #d72323;
  color:#d72323;
  font-weight:bold;
}

.tenposu-cont .inner {
  width:100%;
  height:100%;
  border-radius:100%;
  border:1px solid #d72323;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
}

.tenposu-cont .kazu {
  margin-top:0.25em;
}

@media print,screen and (min-width:641px) {
  .about {
    padding-top:100px;
    padding-bottom:100px;
  }
  
  .about__tenposu {
    padding-top:60px;
  }
}

@media screen and (max-width:640px) {
  .about {
    padding-top:2.5em;
    padding-bottom:3em;
  }
  
  .about__tenposu {
    padding-top:2.5em;
  }
  
  .tenposu-cont {
    width:200px;
    height:200px;
    font-size:1.11em;
  }
}

@media screen and (max-width:560px) {
  .tenposu-cont:before,
  .tenposu-cont:after {
    width:-webkit-calc(60 / 560 * 100vw);
    height:-webkit-calc(125 / 560 * 100vw);
    width:calc(60 / 560 * 100vw);
    height:calc(125 / 560 * 100vw);
  }

  .tenposu-cont:before {
    left:-webkit-calc(-1 * 80 / 560 * 100vw);
    left:calc(-1 * 80 / 560 * 100vw);
  }
  
  .tenposu-cont:after {
    right:-webkit-calc(-1 * 80 / 560 * 100vw);
    right:calc(-1 * 80 / 560 * 100vw);
  }

  .tenposu-cont {
    width:-webkit-calc(200 / 560 * 100vw);
    height:-webkit-calc(200 / 560 * 100vw);
    padding:-webkit-calc(10 / 560 * 100vw);
    width:calc(200 / 560 * 100vw);
    height:calc(200 / 560 * 100vw);
    padding:calc(10 / 560 * 100vw);
    font-size:3.3vw;
  }
}


/*----------------------------------------------------------------------------------------------------

  Shop map
  
----------------------------------------------------------------------------------------------------*/

@media screen and (max-width:640px) {  
  .shopmap {
    padding-left:0;
    padding-right:0;
  }
}


/*--------------------------------------------------------------------------------
  絞り込み
--------------------------------------------------------------------------------*/

.search {
  background-color:#f0f0f0;
  text-align:left;
}

.search__select {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
}

.search__select .checkList {
  list-style:none;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  margin-left:-8px;
}

.search__select .checkList li {
  padding-left:8px;
}

.search__select .checkList li label {
  cursor:pointer;
  text-align:center;
  display:block;
  position:relative;
  background-color:#fff;
  border-radius:3px;
  padding:0.25em 1.5em 0.25em 1em;
  position:relative;
}

.search__select .checkList li label input[type="checkbox"] {
  margin-right:1em;
}

.search__select .checkList li label.is-checked {
  color:#d72323;
}

.search .checkList li label.is-checked:after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:block;
  border:2px solid #d72323;
  border-radius:3px;
}

.search__fword {
  padding-top:1.5em;
  padding-bottom:1em;
}

.search__fword input {
  width:100%;
  padding:0.4em;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  border:none;
  margin:0;
  outline:none;
  padding:0.4em 0.4em;
  text-decoration:none;
  line-height:inherit;
  font-size:inherit;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  -webkit-transition:border-color ease-in-out .05s, -webkit-box-shadow ease-in-out .05s;
  -o-transition:border-color ease-in-out .05s, box-shadow ease-in-out .05s;
  transition:border-color ease-in-out .05s, box-shadow ease-in-out .05s;
  margin-bottom:0.25em;
}

.search__fword input       { border:1px solid #c8c8c8; }
.search__fword input:focus { border-color:#3c3c3c; }


.search__btn {
  text-align:center;
}

@media print,screen and (min-width:641px) {
  .search {
    padding:2em;
  }
  
  .search__btn {
    padding-top:0.5em;
    padding-bottom:0.5em;
  }
  
  .search__btn .p-btn {
    padding:0.4em 3em;
  }
}

@media screen and (max-width:640px) {
  .search {
    padding:1em;
  }
  
  .search__select .checkList li {
    padding-top:8px;
    width:33.333333%;
  }
  
  .search__btn {
    padding-top:1.5em;
    padding-bottom:1em;
    width:100%;
    display:block;
    text-align:center;
  }
  
  .search__btn .p-btn {
    padding-left:3em;
    padding-right:3em;
    min-width:50%;
  }
}


/*--------------------------------------------------------------------------------
  表示件数
--------------------------------------------------------------------------------*/

.shopmap .count {
  text-align:left;
  padding:1em;
}

@media print,screen and (min-width:641px) {
  .shopmap .count p {
    display:inline-block;
    padding-left:1em;
  }
}


/*--------------------------------------------------------------------------------
  Map
--------------------------------------------------------------------------------*/

.shopmap #map {
  width:100%;
  height:80vh;
  min-height:400px;
}


/*----------------------------------------------------------------------------------------------------

  Pick up
  
----------------------------------------------------------------------------------------------------*/

.pickup__hd { color:#d72323; }

.pickup__btn .p-btn {
  padding-left:3em;
  padding-right:3em;
}

@media print,screen and (min-width:641px) {
  .pickup {
    padding-top:100px;
  }

  .pickup__btn {
    padding-top:80px;
  }
  
  .pickup__btn .p-btn {
    min-width:400px;
    font-size:1.1em;
  }
}

@media screen and (max-width:640px) {
  .pickup {
    padding-top:3em;
  }
  
  .pickup__btn {
    padding-top:3em;
  }
  
  .pickup__btn .p-btn {
    min-width:60%;
  }
}


/*----------------------------------------------------------------------------------------------------

  Guide
  
----------------------------------------------------------------------------------------------------*/

.guideBox {
  background:url(../image/pattern.svg) repeat left top;
  position:relative;
  text-align:left;
}

.guideBox:before {
  content:"";
  display:block;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background-color:#fff;
}

.guideBox * {
  position:relative;
}

.guideBox__hd {
  padding-bottom:0.5em;
}

@media print,screen and (min-width:641px) {
  .guide {
    padding-top:40px;
    padding-bottom:100px;
  }
  
  .guideBox {
    margin-top:60px;
    padding:60px;
  }
  
  .guideBox:before {
    width:calc(100% - 20px);
    height:calc(100% - 20px);
    width:-webkit-calc(100% - 20px);
    height:-webkit-calc(100% - 20px);
  }
}

@media screen and (max-width:640px) {
  .guide {
    padding-top:1em;
    padding-bottom:3em;
  }
  
  .guideBox {
    margin-top:2em;
    padding:2em;
  }
  
  .guideBox:before {
    width:calc(100% - (20 / 640 * 100vw));
    height:calc(100% - (20 / 640 * 100vw));
    width:-webkit-calc(100% - (20 / 640 * 100vw));
    height:-webkit-calc(100% - (20 / 640 * 100vw));
  }
}

@media screen and (max-width:400px) {
  .guideBox {
    padding:1.75em;
  }
}