@charset "utf-8";

@import url("../../style/variables.css");/*変数定義*/
	
:root{
}

#icon_setumei{
  inline-size: fit-content;
    margin-inline: auto;
    text-align: left;
}

span.shop{/*ショップアイコン*/
  font-weight: 600;
  color:white;
  padding:0 .3em .1em .3em;
  border-radius: 5px;
  margin:0 .3em 0 0;
  display:inline-block;
  font-size: 1rem;
  &:empty{
    background:white;
    width:1.6em;
  }
  @container (max-width: 620px) {
    &:empty{
      display:none;
    }
  }
}
span.s1{
  background:red;
}
span.s2{
  background:#0e63cb;
  padding:0 .5em .1em .5em;
}
span.s3{
  background:#22912d;
}


.item_list{
  > p{
    inline-size: fit-content;
    margin-inline: auto;
    text-align: left;
  }
  > ul{
    margin:20px auto 0 auto;
    border-bottom:1px dotted gray;
    li{
      border-top:1px dotted gray;
      display: flex;
      flex-wrap:wrap;
      font-size: 1.1rem;
      padding:10px;
      gap:.3em 1em;
      h4{
        span{
          font-size: 1rem;
        }
      }
      > div{
        text-align: left;
        p{
          font-size: .9rem;
        }
      }
      > h4{
      }
      p{
        &:nth-of-type(2){
          span{
            font-size: .9rem;
          }
        }
      }
      > :last-child { margin-left: auto }
    }
  }
  aside{
    margin:20px auto 0 auto;
    > ul{
      --_column: 2;
      --_gap: clamp(8px, 2cqi, 16px);

      display: block grid;
      grid-template-columns: repeat(auto-fit, calc((100% - var(--_gap) * (var(--_column) - 1)) / var(--_column)));
      gap: var(--_gap);
      justify-content: center;
      li{
        figure{
          img{
            border-radius: 10px;
          }
        }
      }

      @container (640px <= inline-size) {
        --_column: 3;
        gap:10px;
        li{
        figure{
          span{
            display:block;
            aspect-ratio: 3 / 2;
            border-radius: 10px;
            background:#f2f2f2;
            border-radius: 10px;
            overflow: hidden;
          }
          figcaption{
            margin:.5em auto 0 auto;
            font-weight: 500;
          }
        }
      }
    }
  }
  }
  @container (max-width: 620px) {
    > ul{
      li{
        > p{
          &:nth-of-type(1){
            width:100%;
            text-align: left;
          }
        }
      }
    }
  }
}