@charset "utf-8";

img {
    width: 100%;
    height: auto;
}
:root {--gap-size: clamp(20px, 6vw, 60px);}

/* #########################
追加分
######################### */
div#goods{
  max-width: 1200px;
  background: #ffeef8;
  padding-bottom: 80px;
  margin-bottom: 40px;
}
.item::before {
  border-left: none;
  border-top: none;
}
.item::after {
  border-right: none;
  border-bottom: none;
}
.price{font-weight: bold;}

@media screen and (min-width: 737px) {
  .mt_pc80sp40 {margin-top: 80px !important;}
  .item-list {
    justify-content: flex-start;
    gap: var(--gap-size);
    margin-top: 80px !important;
  }
  .item-list .item:last-child:nth-child(odd) {
    margin-left: 25.5%;
  }
  div#goods h3.name {
    font-size: 1.3rem;
    margin: 0 0 10px;
  }
  .heading-text {
    font-weight: bold;
    display: inline;
    padding: 0.7rem 0.2rem;
    margin-bottom: 0.2rem;
    background-repeat: repeat-x;
    background-size: 8px 10px;
    background-position: left 0 bottom 10px;
    text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff;
  }
  .item {
    width: calc((97.5% - var(--gap-size)) / 2);
    background: #fff;
    border-radius: 40px;
    border: 4px solid#231815;
  }
  .item .item-icon {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 20%;
    height: auto;
    z-index: 5;
}
  .item .txtY {
    background: none;
    color: #424242;
    padding: 0 0 .8em;
  }
  .item-image img{
    transform: rotate(10deg);
    border-radius: 45%;
    padding-left: 3%;
  }
  .shake { animation: shake .5s; }
  @keyframes shake {
    0% { transform: translate(0, 0); }
    20% { transform: translate(-3px, 0); }
    40% { transform: translate(3px, 0); }
    60% { transform: translate(-3px, 0); }
    80% { transform: translate(3px, 0); }
    100% { transform: translate(0, 0); }
  }
}

@media screen and (max-width:736px) {
  .mt_pc80sp40 {margin-top: 40px !important;}
  .ly-wrp-sp-cts {margin: 0;}
  .sp-cts{margin: 0 15px;}
  div#goods{padding-bottom: 40px;}
  div#goods .tit {margin: 0 15px;}
  .item-list {margin: 0 20px;}
  .item {
    width: 95%;
    background: #fff;
    border-radius: 40px;
    border: 4px solid#231815;
  }
  div#goods h3.name {
    font-size: 1.1rem;
    margin: 0 0 10px;
    font-weight: bold;
  }
  .heading-text {
    font-weight: bold;
    display: inline;
    padding: 0.7rem 0;
    margin-bottom: 0.2rem;
    background-repeat: repeat-x;
    background-size: 8px 10px;
    background-position: left 0 bottom 10px;
    text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff;
  }
  .item .item-icon {
    position: absolute;
    top: 8%;
    left: 8%;
    width: 25%;
    height: auto;
    z-index: 5;
}
  .item .txtY {
    background: none;
    color: #424242;
    padding: 10px 0;
    margin: 0;
  }
  .item-image img{
    transform: rotate(10deg);
    border-radius: 45%;
    padding-left: 5%;
  }
}

#item1 {box-shadow: 20px 20px 0px rgb(228 0 127 / 80%);}
#item2 {box-shadow: 20px 20px 0px rgb(69 176 53 / 80%);}
#item3 {box-shadow: 20px 20px 0px rgb(237 195 0 / 80%);}
#item4 {box-shadow: 20px 20px 0px rgb(243 152 0 / 80%);}
#item5 {box-shadow: 20px 20px 0px rgb(195 13 35 / 80%);}
#item1 .heading-text {background-image: repeating-linear-gradient( 45deg, transparent 0 3px, rgb(228 0 127 / 50%) 3px 6px);}
#item2 .heading-text {background-image: repeating-linear-gradient( 45deg, transparent 0 3px, rgb(69 176 53 / 50%) 3px 6px);}
#item3 .heading-text {background-image: repeating-linear-gradient( 45deg, transparent 0 3px, rgb(237 195 0 / 50%) 3px 6px);}
#item4 .heading-text {background-image: repeating-linear-gradient( 45deg, transparent 0 3px, rgb(243 152 0 / 50%) 3px 6px);}
#item5 .heading-text {background-image: repeating-linear-gradient( 45deg, transparent 0 3px, rgb(195 13 35 / 50%) 3px 6px);}

/* 吹き出し */
div#goods .add-tit {
    position: relative;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid #0074B3;
    background-color: #ffeef8;
    color: #0074B3;
    font-size: 2.375rem;
    text-align: center;
    max-width: 1000px;
    padding-bottom: 20px;
    margin: 20px auto 0;
}
div#goods .add-tit:before {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) skew(-30deg);
    height: 30px;
    width: 30px;
    border-right: 3px solid #0074B3;
    background-color: #ffeef8;
    content: "";
}
@media screen and (max-width:736px) {
  div#goods .add-tit {
    margin: 0 15px;
    padding-bottom: 10px;
    font-size: 1.5rem;
  }
  div#goods .add-tit:before {
    height: 20px;
    width: 20px;
  }
}