/**
 * Archive CSS: 店舗一覧
 *
 * @package noras theme
 * @author shirako
 * @link https://norasinc.jp
 */

/* ========================================
   店舗一覧アーカイブページ
   ======================================== */

.ly_archiveShop {
  padding: var(--section-padding-block) var(--section-padding-inline) var(--section-padding-bottom);
  background-color: var(--color-white);
}

.bl_archiveShop_inner {
  max-width: var(--max-width-content);
  margin-inline: auto;

}

.ly_archiveShop .bl_shopList_tabs {
  display: flex;
}

.bl_shopList_tab {
  width: 100%;
  background-color: var(--color-cream-dark);
}

.ly_archiveShop .bl_shopList_panelWrap {
  background-color: var(--color-gold);
  padding-inline: 16px;
  padding-block: 20px 48px;
  border-radius: 0 0 16px 16px;
}

.ly_archiveShop .bl_shopCard_actions {
  background-color: #fff;
  border-radius: 12px;
}

.bl_shopCard_btns {
  max-width: unset;
}
@media screen {
  .ly_archiveShop .bl_shopList_grid{
    gap: 40px;
  }
}

/* ========================================
   タブレット (768px以上)
   ======================================== */

@media screen and (min-width: 768px) {
  .ly_archiveShop {
    padding-inline: var(--space-2xl);
  }

  .bl_archiveShop_inner {
    padding-inline: 20px;
  }

  .ly_archiveShop .bl_shopList_panelWrap {
    padding-inline: 20px;
    padding-block: 48px 80px;
    border-radius: 0 0 40px 40px;
  }
}

/* ========================================
   PC (1024px以上)
   ======================================== */

@media screen and (min-width: 1024px) {
  .bl_archiveShop_inner {
    padding-inline: 40px;
  }

  .ly_archiveShop {
    padding-block: var(--section-padding-block) var(--section-padding-bottom);
    padding-inline: var(--space-3xl);
  }
}

/* ----------------------------------------
   QUICK TRIGGER
   ---------------------------------------- */
.ly_quickTrigger{
  padding-bottom: 120px;
}
.ly_quickTrigger .bl_quickTrigger_inner {
  max-width: var(--max-width-content);
  margin-inline: auto;
  padding-inline: var(--space-20);  
}
.ly_quickTrigger .bl_quickTrigger_item{
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 40px;
}
.ly_quickTrigger .bl_quickTrigger_item .bl_quickTrigger_img{
  position: relative;
  width: calc(50% - 20px);
}
.ly_quickTrigger .bl_quickTrigger_item .bl_quickTrigger_img img{
  width: 100%;
  height: auto;
}
.ly_quickTrigger .bl_quickTrigger_item .bl_quickTrigger_img .icon{
  position: absolute;
  top: -24px;
  left: -24px;
  z-index: 3;
  width: 120px;
  height: 120px;
}
@media (max-width: 767px) {
  .ly_quickTrigger .bl_quickTrigger_item .bl_quickTrigger_img .icon{
    width: 80px;
    height: 80px;
    left: -18px;
  }
}
.ly_quickTrigger .bl_quickTrigger_item .bl_quickTrigger_content{
  width: calc(50% - 20px);
}
.ly_quickTrigger .bl_quickTrigger_item .bl_quickTrigger_content .bl_quickTrigger_name{
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 26px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-primary);
}
.ly_quickTrigger .bl_quickTrigger_item .bl_quickTrigger_content .bl_quickTrigger_desc{
  font-size: var(--font-base);
  line-height: 1.8;
  margin-bottom: 26px;
}
.ly_quickTrigger .bl_quickTrigger_item .bl_quickTrigger_content .button_wrapper .el_btn{
  width: 100%;
  background: #fff;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.ly_quickTrigger .bl_quickTrigger_item .bl_quickTrigger_content .button_wrapper .el_btn::after{
  background: #001E3C0D;
  content: url('../img/icons/arrow_right.svg');

}

@media screen and (max-width: 768px){
  .ly_quickTrigger .bl_quickTrigger_item{
    flex-direction: column;
  }
  .ly_quickTrigger .bl_quickTrigger_item .bl_quickTrigger_img,
  .ly_quickTrigger .bl_quickTrigger_item .bl_quickTrigger_content{
    width: 100%;
  } 
  .ly_quickTrigger .bl_quickTrigger_item .bl_quickTrigger_content .bl_quickTrigger_desc{
    font-size: 14px;
  }
  .ly_quickTrigger .bl_quickTrigger_item .bl_quickTrigger_content .button_wrapper .el_btn{
    font-size: 16px;
  }
}