/* CSS Document */
img{
  vertical-align: top;
}
/* PC画面での背景設定 -------------------- */
@media screen and (min-width: 768px) {
  article.popup-store{
    display: flex;
  }
  article.popup-store > span{
    background-color: #F7F7F7;
    flex: 1;
  }
  article.popup-store > .article_main_contents{
    flex: 0 0 390px;
  }
}
/* END --------------------------------- */
/* その他共通のデザイン ------------------ */
/* フォント（見出し１） */
.ft_heading-1{
  font-family: A P-OTF A1Gothic Std;
  font-weight: 300;
  font-size: 24px;
  line-height: 40px;
  letter-spacing: 0.1em;
}

/* フォント（見出し２） */
.ft_heading-2{
  font-family: A P-OTF A1Gothic Std;
  font-weight: 300;
  font-size: 14px;
  line-height: 28px;
  letter-spacing: 0.1em;
}

/* フォント（見出し３） */
.ft_heading-3{
  font-family: A P-OTF A1Gothic Std;
  font-weight: 400;
  font-size: 12px;
  line-height: 22px;
}

/* フォント（本文） */
.ft_main-txt{
  font-family: A P-OTF A1Gothic Std;
  font-weight: 300;
  font-size: 12px;
  line-height: 22px;
}
/* フォント（詳細の見出し） */
.ft_detail-title{
  font-family: A P-OTF A1Gothic Std;
  font-weight: 400;
  font-size: 10px;
  line-height: 16px;
}

/* フォント（詳細の本文） */
.ft_detail-txt{
  font-family: A P-OTF A1Gothic Std;
  font-weight: 300;
  font-size: 10px;
  line-height: 16px;
}

/* END --------------------------------- */
/* トップエリア ------------------------------------ */
.img_top img{
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.area_title{
  position: relative;
}
.area_title > .area_title_block{
  margin-top: 60px;
}

.area_title_phrase{
  position: absolute;
  transform: translate(-50%, -50%);
  bottom: 100%;
  left: 50%;
  z-index: 5;
  width: 262.75px;
  height: 26.59px;
  font-family: 'Yu Gothic Pr6N M';
  font-weight: 400;
  font-size: 28px;
  color: #2D2D2D;
  letter-spacing: 0.3em;
  text-align: center;
}
/* トップエリア END -------------------------------- */
/* アンカーリンク ------------------------------------ */
.button_popup-area{
  padding-left: 6.66%;
  padding-right: 6.66%;
  padding-bottom: 80px;
}
.button_popup-area > ul{
  display: grid;
  grid-template-columns: repeat(3, 106px);
  gap: 12px;
}
.button_popup-area li{
  width: 106px;
  height: 40px;
  border: 1px solid #2D2D2D;
  background-color: #F5FAFD;
}
.button_popup-area li > a{
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  color: #2D2D2D;
}

/* アンカーリンク END -------------------------------- */
/* 出張先エリア ------------------------------------ */
.area_popup-store{
  padding-left: 6.66%;
  padding-right: 6.66%;
}
.area_popup-store > ul{
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.area_popup-store > ul > li > h2{
  color: #2D2D2D;
  text-align: left;
  padding-bottom: 12px;
}
.area_popup-store > ul > li > hr{
  border: none;
  border-bottom: 1px solid #2D2D2D;
}
.area_popup-store .block_store{
  padding-top: 20px;
}
.block_store > h3{
  color: #2D2D2D;
  padding-bottom: 20px;
}
.block_store > h4{
  padding: 2px 4px;
  background-color: #EAEAEA;
  color: #2D2D2D;
}
.block_store > p{
  padding: 2px 4px;
  background-color: #FFFFFF;
  color: #000000;
}
/* 出張先エリア END -------------------------------- */
/* 出張先エリア（詳細） ------------------------------------ */
.detail_location{
  padding-top: 20px;
}
.detail_location > ul{
  display: flex;
  gap: 10px;
  padding: 4px;
}
.detail_location li{
  color: #000000;
  text-align: left;
}
.detail_location .item_detail{
  width: 42px;
  height: 16px;
  color: #2D2D2D;
}
.detail_location li a{
  color: #000000;
  text-decoration: underline
}
.gmap_shop-location{
  padding-top: 20px;
}
.gmap_shop-location iframe{
  width: 100%;
  height: 200px;
}
/* 出張先エリア（詳細） END -------------------------------- */
/* バナーリンク ------------------------------------ */
.field_banner-link{
  padding-bottom: 80px;
}

/* バナーリンク END -------------------------------- */