@charset "utf-8";

#siteMapArea div{
  padding: 10px 10px;
}
.frameBody{
    border:none;
}

#shopListArea .tableBody,#shopListArea .tableHeader {
  width: 100%;
}

.commodityListCol {
    display:inline-block;
}
input[type="button"]{
    border:none;
}
.view_list03 input{
    height:40px;
    width:150px;
}
.punctuation{
    display:inline-block;
}
#shopList ul{
    display:block;
    width:100%;
    border-bottom:1px solid #cccccc;
}

  .commodityListCol{
        margin-right:40px;
    }


    
/* 横並びにする（折り返し可） */
.linkList {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1rem; /* 行間と列間の間隔 */
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  /* 各リンクアイテム */
  .linkList .contentCol {
    display: inline-flex;
    align-items: center;
    white-space: nowrap; /* 1リンクをできるだけ1行に */
  }
  
/*SPで表示*/
@media screen and (max-width:767px) {
    h3{
        margin-bottom:0;
    }
    .frameBody ul{
        width:100%;
        display:block;
        border-bottom:1px solid #cccccc;
    }
    .frameBody li{
        padding:0;
        background-image: url(../../commonfiles/images/arrow_next.gif) ;
        background-repeat:no-repeat;
        background-position: 98% 50%;
    }
    .frameBody li a{
        padding:10px;
        display:block;
    }
    .punctuation{
        display:none;
    }
    .frameBody li .commodityListCol a{
        padding:3px;
        background-image: none;
    }
    .shopInfoCol{
        position:relative;
        padding:10px;
    }
    .commodityListCol{
        position: absolute;
        top: 6px;
        width: 80px;
        margin-left:10px;
    }
    .frameBody li a.shopListName{
        margin-left:100px;
        display:block;
    }


    .contentList {
        flex-direction: column;     /* ←縦並び */
        align-items: flex-start;    /* 左寄せ */
        gap: 0.5rem 0;              /* 上下だけ余白 */
      }
      ul.contentList li {
        display: block;             /* 行として扱う */
        white-space: normal;        /* タイトル長い場合は折り返し */
      }
      /* スマホでは「／」の区切りを消す（縦レイアウトに不要なら） */
      ul.contentList li .punctuation {
        display: none;
      }
    }    


    /* PCなど広い画面：横並び */
ul.linkList {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem; /* 行間・列間 */
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.linkList li.contentCol {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* スマホ（768px未満）：1行＝1段落（縦並び） */
@media (max-width: 767.98px) {
  ul.linkList {
    flex-direction: column;   /* 縦積み */
    align-items: stretch;     /* 幅いっぱいに */
    gap: 0.75rem 0;           /* 段落の上下余白 */
  }
  ul.linkList li.contentCol {
    display: block;           /* 1行扱い */
    white-space: normal;      /* 長いタイトルは折り返し */
  }
  /* スマホでは区切り「／」は非表示（縦レイアウトなので不要） */
  ul.linkList li.contentCol .punctuation {
    display: none;
  }
}