﻿@charset "utf-8";

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

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

/*--------------------------------------------------------------------------------
  フラグ
--------------------------------------------------------------------------------*/

.p-shopFlg {
  list-style:none;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
}

.p-shopFlg li {
  line-height:1.4;
  background-color:#fcdede;
  border-radius:3px;
  color:#d72323;
  padding:0.5em 0.75em;
  margin-left:8px;
}

@media print,screen and (min-width:641px) {
  .p-shopFlg {
    margin-left:-8px;
    margin-top:-8px;
  }
  
  .p-shopFlg li {
    margin-left:8px;
    margin-top:8px;
  }
}

@media screen and (max-width:640px) {
  .p-shopFlg {
    margin-left:-6px;
    margin-top:-6px;
  }
  
  .p-shopFlg li {
    margin-left:6px;
    margin-top:6px;
  }
}


/*--------------------------------------------------------------------------------
  一覧
--------------------------------------------------------------------------------*/

.p-shoplist {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
}

.p-shoplist__box {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
}

@media print,screen and (min-width:641px) {
  .p-shoplist {
    margin-left:-20px;
    margin-right:-20px;
  }

  .p-shoplist__box {
    width:33.333333%;
    padding-left:20px;
    padding-right:20px;
    padding-top:80px;
  }
}

@media screen and (max-width:640px) {
  .p-shoplist {
    margin-left:-2.5%;
    margin-right:-2.5%;
  }

  .p-shoplist__box {
    width:50%;
    padding-left:2.5%;
    padding-right:2.5%;
    padding-top:3em;
  }
}

.p-shoplist__box a {
  display:block;
}

.p-shoplist__box .photo {
  width:100%;
  height:300px;
  position:relative;
  overflow:hidden;
}

.p-shoplist__box .photo[data-photo="none"] {
  border:1px solid #d2d2d2;
}

@media screen and (min-width:641px) and (max-width:1200px) {
  .p-shoplist__box .photo {
    height:-webkit-calc(300 / 1200 * 100vw);
    height:calc(300 / 1200 * 100vw);
    min-height:255px;
  }
}

@media screen and (max-width:640px) {
  .p-shoplist__box .photo {
    height:-webkit-calc(255 / 640 * 100vw);
    height:calc(255 / 640 * 100vw);
  }
}

.p-shoplist__box .photo img {
  max-width:400px;
  min-height:100%;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(1);
}

@media screen and (max-width:640px) {
  .p-shoplist__box .photo img {
    max-width:-webkit-calc(400 / 640 * 100vw);
    max-width:calc(400 / 640 * 100vw);
  }
}

.ua-pc .p-shoplist__box .photo img {
  -webkit-transition:transform 0.3s ease-out, opacity 0.2s ease-out;
  transition:transform 0.3s ease-out, opacity 0.2s ease-out;
}

.ua-pc .p-shoplist__box a:hover .photo img {
  transform:translate(-50%,-50%) scale(1.05);
}

.p-shoplist__box .shopname {
  position:relative;
  padding-left:1em;
  padding-right:1em;
  margin-top:1em;
  font-weight:bold;
}

@media screen and (max-width:640px) {
  .p-shoplist__box .shopname {
    font-size:1.11em;
  }
}

@media screen and (max-width:560px) {
  .p-shoplist__box .shopname {
    font-size:1em;
  }
}

.p-shoplist__box .shopname:before,
.p-shoplist__box .shopname:after {
  content:"";
  width:8px;
  height:100%;
  position:absolute;
  top:0;
}

.p-shoplist__box .shopname:before {
  border:1px solid #141414;
  border-right:0;
  left:0;
}

.p-shoplist__box .shopname:after {
  border:1px solid #141414;
  border-left:0;
  right:0;
}

.p-shoplist__box .shopdata {
  padding:1.25em 0.5em 0 0.5em;
  text-align:left;
}

.p-shoplist__box .flg {
  padding-top:1em;
  margin-top:auto;
}


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

  メール送信
  
----------------------------------------------------------------------------------------------------*/

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

@media screen and (max-width:640px) {
  .p-mailsend {
    padding-left:0 !important;
    padding-right:0 !important;
    padding-top:3em;
  }
  
  .p-mailsend__cont {
    padding:2em 5% 2.5em 5%;
  }
}

.p-mailsend__cont {
  text-align:left;
  background-color:#f5f5f5;
}

.p-mailsend p {
  padding-bottom:1.5em;
}

.p-mailsend textarea {
  resize:vertical;
  width:100%;
  height:200px;
  padding:0.4em;
  border:1px solid #d2d2d2;
  background-color:#fff;
}

.p-mailsend .column {
  padding-top:1.5em;
}

.p-mailsend .send {
  padding-top:2em;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:justify;
  -ms-flex-pack:justify;
  justify-content:space-between;
  -webkit-box-align:end;
  -ms-flex-align:end;
  align-items:flex-end;
}

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

@media screen and (max-width:560px) {
  .p-mailsend .send {
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
  }
  
  .p-mailsend .send__btn {
    width:100%;
    display:block;
    text-align:center;
    padding-top:2em;
  }
  
  .p-mailsend .send__btn .p-btn {
    min-width:50%;
  }
}


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

  送信完了
  
----------------------------------------------------------------------------------------------------*/

.p-mailsendok p {
  display:inline-block;
  margin-left:auto;
  margin-right:auto;
  font-weight:bold;
  color:#d72323;
  padding:0.5em 1.25em;
  margin-top:1.5em;
  border-top:1px solid #d72323;
  border-bottom:1px solid #d72323;
}

@media print,screen and (min-width:641px) {
  .p-mailsendok {
    padding-top:100px;
    padding-bottom:100px;
  }
  
  .p-mailsendok .thankyou {
    width:260px;
  }
}

@media screen and (max-width:640px) {
  .p-mailsendok {
    padding-top:3em;
    padding-bottom:3em;
  }
  
  .p-mailsendok .thankyou {
    width:50%;
    max-width:200px;
  }
}


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

  Googlemap
  
----------------------------------------------------------------------------------------------------*/

.p-infobox {
  font-family:"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
  display:block;
  padding:5px;
}

.p-infobox__photo {
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
}

.p-infobox__cont {
  text-align:left;
  position:relative;
}

.p-infobox__cont .shopname {
  font-weight:bold;
  display:inline-block;
  font-size:1.22em;
  line-height:1.4;
}

.p-infobox__cont .btn {
  line-height:1;
}

.p-infobox__cont .p-btn {
  padding-top:0.6em;
  padding-bottom:0.6em;
}

@media print,screen and (min-width:641px) {
  .p-infobox {
    font-size:1.11em;
  }
  
  .p-infobox__cont .shopname {
    margin-top:0.5em;
    margin-bottom:0.5em;
  }
}

@media print,screen and (min-width:561px) {
  .p-infobox {
    width:400px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
  }
  
  .p-infobox__photo {
    width:150px;
    height:150px;
  }

  .p-infobox__cont {
    width:250px;
    margin-left:1.25em;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
  }

  .p-infobox__cont .btn {
    text-align:right;
    padding-top:1em;
  }
}

@media screen and (min-width:561px) and (max-width:640px) {
  .p-infobox {
    width:300px;
  }
  
  .p-infobox__photo {
    width:100px;
    height:100px;
  }

  .p-infobox__cont {
    width:200px;
  }
}

@media screen and (max-width:640px) {
  .p-infobox__cont .btn {
    margin-top:1em;
  }
  
  .p-infobox__cont .shopname {
    margin-bottom:0.25em;
  }
}

@media screen and (max-width:560px) {
  .p-infobox {
    max-width:200px;
    min-width:150px;
  }
  
  .p-infobox__photo {
    width:100%;
    height:100px;
    margin-bottom:0.75em;
  }
  
  .p-infobox__cont .btn {
    text-align:center;
  }
  
  .p-infobox__cont .p-btn {
    display:block;
  }
}

/* 写真なし */
.p-infobox[data-photo="none"] {
  width:inherit;
}
  
.p-infobox[data-photo="none"] .p-infobox__photo {
  display:none;
}
  
.p-infobox[data-photo="none"] .p-infobox__cont {
  width:100%;
  margin-left:0;
}

.p-infobox[data-photo="none"] .p-infobox__cont .shopname {
  margin-top:0;
}

.p-infobox[data-photo="none"] .p-infobox__cont .btn {
  text-align:left;
}

@media screen and (min-width:561px) and (max-width:640px) {
  .p-infobox[data-photo="none"] .p-infobox__cont .btn {
    margin-top:0;
  }
}


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

  Button
  
----------------------------------------------------------------------------------------------------*/

.p-btn {
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  display:inline-block;
  vertical-align:middle;
  box-sizing:border-box;
  border:none;
  margin:0;
  outline:none;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  line-height:1.4;
  position:relative;
  overflow:hidden;
  padding:0.6em 1.2em;
  border-radius:3px;
}

.ua-pc .p-btn {
  -webkit-transition:border 0.15s ease-out, background 0.15s ease-out, color 0.15s ease-out;
  transition:border 0.15s ease-out, background 0.15s ease-out, color 0.15s ease-out;
}

@media screen and (max-width:640px) {
  .p-btn {
    padding-top:0.8em;
    padding-bottom:0.8em;
  }
}

.p-btn,
.p-btn:visited,
.p-btn:hover,
.ua-pc .p-btn:hover,
.p-btn a,
.p-btn a:visited,
.p-btn a:hover,
.ua-pc .p-btn a:hover { color:inherit; text-decoration:none !important; }


/*--------------------------------------------------------------------------------
  Color
--------------------------------------------------------------------------------*/

/* 赤 */
.p-btn[btn-color="red"],
.p-btn[btn-color="red"]:visited
.p-btn[btn-color="red"]:hover,
.p-btn[btn-color="red"] a,
.p-btn[btn-color="red"] a:visited
.p-btn[btn-color="red"] a:hover {
  background-color:#d72323;
  border:1px solid #d72323;
  color:#fff !important;
}

.ua-pc .p-btn[btn-color="red"]:hover,
.ua-pc .p-btn[btn-color="red"] a:hover,
.ua-pc a:hover .p-btn[btn-color="red"] {
  color:#fff !important;
  background-color:#f72d2d;
  border-color:#f72d2d;
}


/* 黒 */
.p-btn[btn-color="black"],
.p-btn[btn-color="black"]:visited
.p-btn[btn-color="black"]:hover,
.p-btn[btn-color="black"] a,
.p-btn[btn-color="black"] a:visited
.p-btn[btn-color="black"] a:hover {
  background-color:#3c3c3c;
  border:1px solid #3c3c3c;
  color:#fff !important;
}

.ua-pc .p-btn[btn-color="black"]:hover,
.ua-pc .p-btn[btn-color="black"] a:hover,
.ua-pc a:hover .p-btn[btn-color="black"] {
  color:#fff !important;
  background-color:#646464;
  border-color:#646464;
}


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

  SNSボタン
  
----------------------------------------------------------------------------------------------------*/

.p-snsBtn {
  list-style:none;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
}

.p-snsBtn li {
  width:100%;
}

@media print,screen and (min-width:641px) {
  .p-snsBtn {
    max-width:800px;
    margin-left:auto;
    margin-right:auto;
  }
  
  .p-snsBtn[data-cols="1"],
  .p-snsBtn[data-cols="2"],
  .p-snsBtn[data-cols="3"] {
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
  }

  .p-snsBtn li:not(:first-child) {
    padding-left:8px;
  }
  
  .p-snsBtn[data-cols="1"],
  .p-snsBtn[data-cols="2"] li,
  .p-snsBtn[data-cols="3"] li { width:25%; }
}

@media screen and (max-width:640px) {
  .p-snsBtn {
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    margin-left:-6px;
  }
  
  .p-snsBtn[data-cols="1"] {
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
  }
  
  .p-snsBtn li { padding-left:6px; }
  
  .p-snsBtn[data-cols="1"] li,
  .p-snsBtn[data-cols="2"] li { width:50%; }
  .p-snsBtn[data-cols="3"] li { width:33.333333%; }
  .p-snsBtn[data-cols="4"] li,
  .p-snsBtn[data-cols="5"] li,
  .p-snsBtn[data-cols="6"] li { width:25%; }
  
  .p-snsBtn[data-cols="4"] li:nth-child(n+5),
  .p-snsBtn[data-cols="5"] li:nth-child(n+5),
  .p-snsBtn[data-cols="6"] li:nth-child(n+5) { padding-top:6px; }
}

.p-snsBtn .btn {
  width:100%;
  line-height:1;
  padding:0.75em 0.5em;
  display:block;
  position:relative;
  color:#fff !important;
  text-decoration:none;
  border-radius:3px;
}

.ua-pc .p-snsBtn .btn {
  -webkit-transition:background 0.15s ease-out, color 0.15s ease-out;
  transition:background 0.15s ease-out, color 0.15s ease-out;
}

.p-snsBtn .btn i {
  display:block;
  position:relative;
  z-index:3;
  width:100%;
  height:1.2em;
  margin-top:0.25em;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:contain;
}

.p-snsBtn .btn span {
  position:relative;
  z-index:2;
  display:inline-block;
  margin-top:0.75em;
  margin-bottom:0.25em;
}

@media print,screen and (min-width:641px) {
  .p-snsBtn .btn span {
    font-size:0.77em;
  }
}

@media screen and (max-width:640px) {
  .p-snsBtn .btn span {
    font-size:0.66em;
  }
}

@media screen and (max-width:400px) {
  .p-snsBtn .btn span {
    font-size:2.6vw;
  }
}

/* Facebook */
.p-snsBtn .sns-fb { background:#3b5998; }
.ua-pc .p-snsBtn .sns-fb:hover { background-color:#466ec3; }
.p-snsBtn .sns-fb i { background-image:url(../image/icon/fb.svg); }

/* Twitter */
.p-snsBtn .sns-tw { background:#55acee; }
.ua-pc .p-snsBtn .sns-tw:hover { background:#5ebfff; }
.p-snsBtn .sns-tw i { background-image:url(../image/icon/tw.svg); }

/* Instagram */
.p-snsBtn .sns-insta {
  background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  overflow:hidden;
}
.ua-pc .p-snsBtn .sns-insta:after {
  content:"";
  width:100%;
  height:100%;
  display:block;
  position:absolute;
  left:0;
  top:0;
  z-index:1;
  background:-webkit-linear-gradient(135deg, #4eb5ff 0%, #ff62ab 70%) no-repeat;
  background:linear-gradient(135deg, #4eb5ff 0%, #ff62ab 70%) no-repeat;
  opacity:0;
  -webkit-transition:opacity 0.15s ease-out;
  transition:opacity 0.15s ease-out;
}
.ua-pc .p-snsBtn .sns-insta:hover:after {
  opacity:1;
}
.p-snsBtn .sns-insta i { background-image:url(../image/icon/insta.svg); }

/* LINE */
.p-snsBtn .sns-line { background:#00c300; }
.ua-pc .p-snsBtn .sns-line:hover { background-color:#34d934; }
.p-snsBtn .sns-line i { background-image:url(../image/icon/line.svg); }

/* HP */
.p-snsBtn .sns-hp { background-color:#d72323; }
.ua-pc .p-snsBtn .sns-hp:hover { background-color:#f72d2d; }
.p-snsBtn .sns-hp i { background-image:url(../image/icon/pc.svg); }

/* Blog */
.p-snsBtn .sns-blog { background-color:#faa01e; }
.ua-pc .p-snsBtn .sns-blog:hover { background-color:#ffb523; }
.p-snsBtn .sns-blog i { background-image:url(../image/icon/pen.svg); }


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

  文字装飾
  
----------------------------------------------------------------------------------------------------*/


/* マーカー
----------------------------------------------------------------------*/

.p-mkr {
  display:inline;
  line-height:1.5;
  background:-webkit-linear-gradient(transparent 70%, #faeb5f 70%);
  background:linear-gradient(transparent 70%, #faeb5f 70%);
}