@charset "utf-8";

.imgauto{
	height: auto;
	width: 100%;
	box-sizing: unset;
	line-height: 1rem;
	display: block;
}
.shop-place__name{
  font-size: clamp(16px, 2vw, 20px);
  font-weight: bold !important;
  font-family: "游ゴシック","Yu Gothic","YuGothic","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","游ゴシック体","メイリオ","Meiryo",sans-serif !important;
  border-top: none !important;
  padding: 10px 0 8px 0 !important;
}
.subPcontent h4:after{
  display: none;
}
.shop-place__text{
  font-size: clamp(13px, 1.5vw, 15px);
  margin-bottom: 30px;
}
@media screen and (min-width: 768px){
  .gallery{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: clamp(20px, 2.5vw, 40px);
  }
  .shop-place__btnArea--pc{
    text-align: center;
    max-width: 200px;
    margin: 80px auto clamp(20px, 2.5vw, 40px);
    border: 1px solid #231814;
  }
  .shop-place__btn--pc{
    display: block;
    background-color: #231814;
    color: #fff;
    padding: 10px 0;
    font-weight: bold;
    font-size: clamp(15px, 1.5vw, 16px);
    letter-spacing: .1em;
    transition: 0.3s;
  }
  .shop-place__btnArea--sp{
    display: none;
  }
}
@media screen and (max-width: 767px){
  .shop-place__name{
    margin-block: 20px !important;
  }
  .gallery {
    display: flex;
    flex-wrap: wrap; /* 複数列を可能にする */
    gap: clamp(12px, 1.4vw, 20px) clamp(20px, 2.5vw, 40px);       /* アイテム間のスペースを設定 */
  }
  .gallery div {
    flex: 1 1 calc(50% - 10px); /* 各アイテムを2列分のスペースに均等配置 */
    box-sizing: border-box;
  }
  .gallery div:last-child{
    max-width: calc(50% - 10px);
  }
  .gallery .wide{
    flex: 1 1 calc(100% - 10px);
    padding-bottom: 10px;
  }
  .shop-place__btnArea--sp{
    text-align: center;
    max-width: 180px;
    margin: clamp(40px, 6vw, 60px) auto clamp(40px, 6vw, 60px);
  }
  .shop-place__btn--sp{
    display: block;
    background-color: #231814;
    color: #fff;
    padding: 10px 0;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: .1em;
  }
  .shop-place__btn--sp:hover{
    color: #fff;
  }
  .shop-place__btnArea--pc{
    display: none;
  }
}
@media (hover: hover){
  .shop-place__btn--pc:hover{
    color: #231814 ;
    background-color: #fff;
  }
}






/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝メインビジュアル変更＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
@media screen and (min-width: 768px){
  #shopcafemain.arashiyama{
    background: url(/images/shopcafe/arashiyama-main.jpg) center center no-repeat;
    background-size: cover;
  }
  #shopcafemain.kyoto{
    background: url(/images/shopcafe/kyoto-main.jpg) center center no-repeat;
    background-size: cover;
  }
  #shopcafemain.ecochocolat{
    background: url(/images/shopcafe/ecochocolat-main.jpg) center center no-repeat;
    background-size: cover;
  }
  #shopcafemain.sendai-fujisaki{
    background: url(/images/shopcafe/fujisaki-sendai-main.jpg) center center no-repeat;
    background-size: cover;
  }
  #shopcafemain.ginza{
    background: url(/images/shopcafe/ginza-main.jpg) center center no-repeat;
    background-size: cover;
  }
  #shopcafemain.hankyu{
    background: url(/images/shopcafe/hankyu-main.jpg) center center no-repeat;
    background-size: cover;
  }
  #shopcafemain.yamagataya{
    background: url(/images/shopcafe/kagoshima-main.jpg) center center no-repeat;
    background-size: cover;
  }
  #shopcafemain.kitahama{
    background: url(/images/shopcafe/kiathama-main.jpg) center center no-repeat;
    background-size: cover;
  }
  #shopcafemain.kyoto-isetan{
    background: url(/images/shopcafe/kyotoisetan-main.jpg) center center no-repeat;
    background-size: cover;
  }
  #shopcafemain.morioka-fesan{
    background: url(/images/shopcafe/morioka-main.jpg) center center no-repeat;
    background-size: cover;
  }
  #shopcafemain.rikuzen{
    background: url(/images/shopcafe/rikuzen-main.jpg) center center no-repeat;
    background-size: cover;
  }
  #shopcafemain.espal-sendai{
    background: url(/images/shopcafe/sendai-espal-main.jpg) center center no-repeat;
    background-size: cover;
  }
  #shopcafemain.tsuruya{
    background: url(/images/shopcafe/tsuruya-main.jpg) center center no-repeat;
    background-size: cover;
  }
  #shopcafemain.yokohama{
    background: url(/images/shopcafe/yokohama-main.jpg) center center no-repeat;
    background-size: cover;
  }
}
@media screen and (max-width: 767px){
  #shopcafemain.arashiyama{
    background: url(/images/shopcafe/arashiyama-main-sp.jpg) center center no-repeat;
    background-size: cover;
  }
  #shopcafemain.kyoto{
    background: url(/images/shopcafe/kyoto-main-sp.jpg) center center no-repeat;
    background-size: cover;
  }
  #shopcafemain.ecochocolat{
    background: url(/images/shopcafe/ecochocolat-main-sp.jpg) center center no-repeat;
    background-size: cover;
  }
  #shopcafemain.sendai-fujisaki{
    background: url(/images/shopcafe/fujisaki-sendai-main-sp.jpg) center center no-repeat;
    background-size: cover;
  }
  #shopcafemain.ginza{
    background: url(/images/shopcafe/ginza-main-sp.jpg) center center no-repeat;
    background-size: cover;
  }
  #shopcafemain.hankyu{
    background: url(/images/shopcafe/hankyu-main-sp.jpg) center center no-repeat;
    background-size: cover;
  }
  #shopcafemain.yamagataya{
    background: url(/images/shopcafe/kagoshima-main-sp.jpg) center center no-repeat;
    background-size: cover;
  }
  #shopcafemain.kitahama{
    background: url(/images/shopcafe/kiathama-main-sp.jpg) center center no-repeat;
    background-size: cover;
  }
  #shopcafemain.kyoto-isetan{
    background: url(/images/shopcafe/kyotoisetan-main-sp.jpg) center center no-repeat;
    background-size: cover;
  }
  #shopcafemain.morioka-fesan{
    background: url(/images/shopcafe/morioka-main-sp.jpg) center center no-repeat;
    background-size: cover;
  }
  #shopcafemain.rikuzen{
    background: url(/images/shopcafe/rikuzen-main-sp.jpg) center center no-repeat;
    background-size: cover;
  }
  #shopcafemain.espal-sendai{
    background: url(/images/shopcafe/sendai-espal-main-sp.jpg) center center no-repeat;
    background-size: cover;
  }
  #shopcafemain.tsuruya{
    background: url(/images/shopcafe/tsuruya-main-sp.jpg) center center no-repeat;
    background-size: cover;
  }
  #shopcafemain.yokohama{
    background: url(/images/shopcafe/yokohama-main-sp.jpg) center center no-repeat;
    background-size: cover;
  }
}

.shop-place__videoWrap{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: clamp(40px, 6vw, 60px);
}
.shop-place__video{
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
}

#footer{
  margin-top: 0;
}



html{
  scroll-behavior: smooth;
}
.shop-anchor{
  border-bottom: 3px solid #8A603C;
}
.shop-anchor__heading{
  display: flex;
  align-items: center;
  border-bottom: 3px solid #8A603C;
}
.shop-anchor__heading::before{
  content: "";
  display: inline-block;
  --MASK: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI3LjkuNiwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDkuMDMgQnVpbGQgNTQ5ODYpICAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSLjg6zjgqTjg6Tjg7xfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IgoJIHk9IjBweCIgdmlld0JveD0iMCAwIDMwMCAzMDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMwMCAzMDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBhdGggZD0iTTE2My44LDI5Mi4zQzE5My44LDI1NC44LDI2MiwxNjQsMjYyLDExM0MyNjIsNTEuMiwyMTEuOSwxLDE1MCwxUzM4LDUxLjIsMzgsMTEzYzAsNTEsNjguMywxNDEuOCw5OC4yLDE3OS4zCglDMTQzLjMsMzAxLjIsMTU2LjcsMzAxLjIsMTYzLjgsMjkyLjNMMTYzLjgsMjkyLjN6IE0xNTAsNzUuN2MyMC42LDAsMzcuMywxNi43LDM3LjMsMzcuM3MtMTYuNywzNy4zLTM3LjMsMzcuMwoJcy0zNy4zLTE2LjctMzcuMy0zNy4zUzEyOS40LDc1LjcsMTUwLDc1Ljd6Ii8+Cjwvc3ZnPgo=) no-repeat center center / 100%;
  mask: var(--MASK);
  -webkit-mask: var(--MASK);
  background-color: #8A603C;
  aspect-ratio: 1/1;
}
.shop-anchor__list li a{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.shop-anchor__img img{
  aspect-ratio: 3/2;
  object-fit: cover;
  height: auto;
  width: 100%;
  box-sizing: unset;
  line-height: 1rem;
  display: block;
}
.shop-anchor__name{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  line-height: 1.5;
  letter-spacing: -1px;
}
.shop-anchor__name::after{
  content: "";
  display: inline-block;
  --MASK: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI3LjkuNiwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDkuMDMgQnVpbGQgNTQ5ODYpICAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSLjg6zjgqTjg6Tjg7xfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IgoJIHk9IjBweCIgdmlld0JveD0iMCAwIDMwMCAzMDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMwMCAzMDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBhdGggZD0iTTE0MC4xLDIzMi42TDUuMSw5NS41Yy01LjUtNS41LTUuNS0xNC4zLDAtMTkuOGw4LjMtOC4zYzUuNS01LjUsMTQuMy01LjUsMTkuOCwwTDE1MCwxODYuNUwyNjYuOCw2Ny41CgljNS41LTUuNSwxNC4zLTUuNSwxOS44LDBsOC4zLDguM2M1LjUsNS41LDUuNSwxNC4zLDAsMTkuOGwtMTM1LDEzNy4xQzE1NC40LDIzOCwxNDUuNiwyMzgsMTQwLjEsMjMyLjZ6Ii8+Cjwvc3ZnPgo=) no-repeat center center / 100%;
  mask: var(--MASK);
  -webkit-mask: var(--MASK);
  aspect-ratio: 1/1;
  background-color: #8A603C;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}
@media screen and (min-width: 768px){
  .shop-anchor{
    width: 950px;
    padding-bottom: 60px;
    margin: 80px auto;
  }
  .shop-anchor__heading{
    font-size: 25px;
    padding-block: 10px;
    margin-bottom: 30px;
    gap: 5px;
  }
  .shop-anchor__heading::before{
    width: 25px;
  }
  .shop-anchor__list{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 50px 20px;
  }
  .shop-anchor__name{
    font-size: 16px;
    padding: 10px 15px 10px 0;
  }
  .shop-anchor__name::after{
    width: 10px;
  }
}
@media screen and (max-width: 767px){
  .shop-anchor{
    margin: 50px auto;
    padding-bottom: 30px;
  }
  .shop-anchor__heading{
    font-size: 15px;
    padding-block: 5px;
    margin-bottom: 20px;
    gap: 5px;
  }
  .shop-anchor__heading::before{
    width: 18px;
  }
  .shop-anchor__list{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 30px 10px;
  }
  .shop-anchor__name{
    font-size: 13px;
    padding: 5px 10px 5px 0;
  }
  .shop-anchor__name::after{
    width: 5px;
  }
}