/*	.item
============================== */
@media all and (min-width: 768px) {
  .item {
    margin: 2em;
  }
}

@media all and (max-width: 767px) {
  .item {
    margin: 3vw;
  }
}

/*	.category
============================== */
.category {
  display: flex;
}

.category li {
  box-sizing: border-box;
  width: 24.5%;
  border-radius: 10px 10px 0 0;
  text-align: center;
  font-weight: bold;
}

.category li a {
  display: block;
  color: #fff;
}

.category li.ct_01 {
  background-color: #ef85aa;
}

.category li.ct_02 {
  background-color: #fab92d;
}

.category li.ct_03 {
  background-color: #94cd3b;
}

.category li.ct_04 {
  background-color: #b279d5;
}

@media all and (min-width: 768px) {
  .category li {
    font-size: 30px;
    height: 80px;
  }

  .category li:not(:last-child) {
    margin-right: 7px;
  }

  .category li a {
    padding: 29px;
  }
}

@media all and (max-width: 767px) {
  .category li {
    font-size: 3.5vw;
    letter-spacing: 0.05em;
    height: 12vw;
  }

  .category li:not(:last-child) {
    margin-right: 1.1vw;
  }

  .category li a {
    padding: 4.8vw 0.5em;
  }
}

/*	.description
============================== */
.description {
  background-size: cover;
  height: 0;
  z-index: 1;
  margin-bottom: 4vw;
}

.description span {
  top: 0;
  width: 100%;
}

@media all and (min-width: 768px) {
  .description {
    background-image: url(../img/description.png);
    padding-top: calc((345 / 1960)*100%);
    margin: 1em 0;
  }
}

@media all and (max-width: 767px) {
  .description {
    background-image: url(../img/description_s.png);
    padding-top: calc((200 / 900)*100%);
    margin: 2vw 0;
  }
}

/*	section
============================== */
section {
  background-color: #fef9e5;
}

@media all and (min-width: 768px) {
  section {
    background-color: #fef9e5;
    border-radius: 10px;
  }
}

@media all and (max-width: 767px) {
  section {
    background-color: #fef9e5;
    border-radius: 2vw;
    /* margin: 2vw; */
  }
}

/*	section h2
============================== */
section h2 {
  color: #fff ! important;
}

section#ct_01 h2 {
  background-color: #ef85aa;
  margin-bottom: 0;
}

section#ct_02 h2 {
  background-color: #fab92d;
}

section#ct_03 h2 {
  background-color: #94cd3b;
}

section#ct_04 h2 {
  background-color: #b279d5;
}

@media all and (min-width: 768px) {
  section h2 {
    font-size: 25px !important;
    padding: 0.7em 0 0.5em;
    border-radius: 10px 10px 0 0;
  }
}

@media all and (max-width: 767px) {
  section h2 {
    font-size: 3.5vw !important;
    padding: 0.8em;
    border-radius: 2vw 2vw 0 0;
  }
}

/*	.itembox_outer
============================== */
.itembox_outer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
}

@media all and (min-width: 768px) {
  .itembox_outer {
    padding: 1.5em;
    margin-bottom: 2em;
  }

  .itembox_outer::after {
    display: block;
    content: "";
    width: 31.7%;
    ;
  }
}

@media all and (max-width: 767px) {
  .itembox_outer {
    padding: 2vw 2vw 0;
    margin-bottom: 2vw;
  }

  .itembox_outer::after {
    display: block;
    content: "";
    width: 48.5%;
    ;
  }
}

/*	.item .itembox
============================== */
.itembox {
  box-sizing: border-box;
  background-color: #ffffff;
  box-shadow: 0px 10px 15px 0px rgba(115, 50, 33, 0.1);
  position: relative;
}

@media all and (min-width: 768px) {
  .itembox {
    width: 31.7%;
    margin-bottom: 1.5em;
  }
}

@media all and (max-width: 767px) {
  .itembox {
    width: 49%;
    margin-bottom: 2vw;
  }
}

/*	.item .pic
============================== */
.item .pic span {
  background-repeat: no-repeat;
  background-size: cover;
  height: 0;
  padding-top: calc((830 / 1100)*100%);
  z-index: 1;
}

.item .pic span>span {
  top: 0;
  width: 100%;
}

/*	.item .txt
============================== */
.item .txt {
  font-weight: bold;
  color: #264c58;
}

.item .txt .shop span {
  color: #66828c;
  font-weight: normal;
}

@media all and (min-width: 768px) {
  .item .txt {
    padding: 0.6em 0.8em 4em;
  }

  .item .txt .name {
    font-size: 25px;
  }

  .item .txt .shop {
    font-size: 15px;
  }
}

@media all and (max-width: 767px) {
  .item .txt {
    padding: 2vw 2vw 9vw;
  }

  .item .txt .name {
    font-size: 3.5vw;
  }

  .item .txt .shop {
    font-size: 2.5vw;
  }
}

/*	.item .icon
============================== */
.item .icon {
  display: flex;
  background-color: #fefbf4;
  justify-content: flex-start;
  align-items: center;
  position: absolute;
  width: 100%;
  box-sizing: border-box;
  bottom: 0;
}

.item .icon div span {
  display: block;
  overflow: hidden;
  text-indent: 110%;
  white-space: nowrap;
  background-repeat: no-repeat;
  background-size: cover;
  height: 0;
  padding-top: calc((1 / 1)*100%);
  z-index: 1;
}

.item .icon div.i01 span {
  display: block;
}

.item .icon div.i01 span {
  background-image: url(../img/i01.png);
}

.item .icon div.i02 span {
  background-image: url(../img/i02.png);
}

.item .icon div.i03 span {
  background-image: url(../img/i03.png);
}

.item .icon div span {
  top: 0;
  width: 100%;
}

@media all and (min-width: 768px) {
  .item .icon {
    padding: 0.6em;
    height: 52px;
  }

  .item .icon div {
    width: 8%;
    margin: 2px;
  }
}

@media all and (max-width: 767px) {
  .item .icon {
    padding: 1vw;
    height: 7.5vw;
  }

  .item .icon div {
    width: 12%;
    margin: 0.5vw;
  }
}

/*	date
============================== */
  .item .icon  .date {
color: #264c58;
line-height: 1.1;
padding: 4px;
}

@media all and (min-width: 768px) {
  .item .icon  .date {
    font-size: .6em;
  }
  .item .icon .date b {
    display: block;
    font-size: .5em;
  }
}

@media all and (max-width: 767px) {
  .item .icon  .date {
    font-size: 1.8vw;
  }
}