.header_area {
    max-width: 690px;
    width: 100%;
    margin: auto;
}
.header_area h2,
.header_area h3,
.header_area h4 {
    margin: 0;
}
.header_area p {
    margin: 0;
}
.header_area h2.rankingTitle {
    background-color: #3BAA95;
    color: #fff;
    border-bottom: solid 2px #222222;
    margin: 0 0 10px 0;
    padding: 5px 10px;
    font-size: 16px;
}
.ranking_hdr,
.ranking_area,
.sizePic,
.featurePic {
    margin: 0 0 50px 0;
}
.ranking_hdr p {
    font-size: 16px;
}
.header_area ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.header_area ul li a {
    text-decoration: none;
    color: #222222;
}
.header_area ul li a .rankTxt p:not(.price) {
    display: none;
}
.header_area ul li a:hover .rankTxt h3,
.header_area ul li a:hover .rankTxt p:not(.price) {
    color: #0091D9;
}
.header_area .ranking_area {
    padding: 50px 30px;
    background-color: #F8F8F8;
}
.header_area .ranking_area h2 {
    text-align: center;
    margin: 0 0 20px 0;
    font-size: 20px;
}
.header_area .ranking_area ul {
    display: flex;
    gap: 20px;
}
.header_area .ranking_area ul li {
    width: calc(calc(100% - 60px) / 4);
}
.rankImg p {
    text-align: center;
    width: 40px;
    height: 40px;
    color: #fff;
    margin: 0 auto 10px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 20px;
    line-height: 40px;
    box-sizing: border-box;
}
.header_area .ranking_area ul li:nth-child(1) .rankImg p {
    background-color: #C7AF48;
}
.header_area .ranking_area ul li:nth-child(2) .rankImg p {
    background-color: #D0D0D0;
}
.header_area .ranking_area ul li:nth-child(3) .rankImg p {
    background-color: #D1A981;
}
.header_area .ranking_area ul li:nth-child(4) .rankImg p {
    background-color: #99B2AD;
}
.header_area .ranking_under {
    display: none;
}
.rankImg img {
    border: solid 1px #707070;
    width: 100%;
}
.rankTxt {
    margin: 15px 0 0 0;
}
.rankTxt h3 {
    margin: 0 0 10px 0;
    font-size: 14px;
}
.rankTxt p:not(.price) {
    font-size: 14px;
    margin: 0 0 30px 0;
}
.rankTxt p.price {
    margin: 0;
    color: #FF0000;
    font-weight: bold;
    font-size: 14px;
    text-align: right;
}
.rankTxt p.price span {
    font-size: 12px;
}
.ranking_area .moreBtn {
    width: 340px;
    height: 60px;
    margin: 30px auto 0;
}
.ranking_area .moreBtn a {
    width: 100%;
    height: 100%;
    display: block;
    line-height: 60px;
    text-align: center;
    color: #fff;
    font-size: 20px;
    background-color: #3BAA95;
    border-radius: 30px;
    text-decoration: none;
    position: relative;
}
.ranking_area .moreBtn a::after {
    content: '';
    display: block;
    position: absolute;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background-color: #fff;
    height: calc(tan(40deg)* 60px / 2);
    width: 13px;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}
.ranking_area .moreBtn a:hover {
    opacity: 0.7;
}
/*----------------------------------------------
対応サイズで選ぶ・特徴で選ぶ
----------------------------------------------*/
.sizePic ul {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sizePic ul li {
    border-radius: 5px;
    width: calc(calc(100% - 50px) / 6);
    border: solid 1px #B0B0B0;
    background: linear-gradient(#fff 0%, #e6e6e6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
}
.sizePic ul li a:hover {
    opacity: 0.7;
}
.sizePic ul li h4 {
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    line-height: normal;
}
.sizePic ul li p {
    text-align: center;
    font-size: 12px;
}
.featurePic ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.featurePic ul li {
    width: calc(calc(100% - 30px) / 4);
}
.featurePic ul li a:hover {
    opacity: 0.7;
}
.featurePic ul li div {
    background: linear-gradient(#fff 0%, #e6e6e6 100%);
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
    border: solid 1px #B0B0B0;
    border-radius: 5px;
    box-sizing: border-box;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    height: 100px;
}
.featurePic ul li > p {
    font-size: 14px;
}
.featurePic ul li div span {
    font-size: 12px;
    display: block;
}
.featurePic ul li div h4 {
    font-size: 16px;
}
.featurePic ul li:nth-child(4) div h4 {
    font-size: 14px;
}
/*
対応サイズで選ぶ・特徴で選ぶ ここまで
----------------------------------------------*/
.contact {
    border: solid 3px #222222;
}
.contact h2 {
    background-color: #222222;
    color: #fff;
    text-align: center;
    padding: 10px 0;
}
.contact > p {
    text-align: center;
    margin: 20px 0 10px 0;
    font-size: 16px;
}
.contact .contactFlex {
    display: flex;
    margin: 0 0 20px 0;
    align-items: center;
    justify-content: center;
    gap: 50px;
}
.contactFlex .tel a {
    font-size: 34px;
    color: #3BAA95;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    font-family: 'Noto Sans JP', sans-serif;
}
.contactFlex .tel a::before {
    content: '';
    background-image: url(https://www.shop-add.jp/pic-labo/tel_icon.png);
    background-repeat: no-repeat;
    background-position: center;
    width: 22px;
    height: 30px;
    display: block;
}
.contactFlex .tel p {
    text-align: center;
}
.contactFlex .mail {
    width: 290px;
    height: 40px;
}
.contactFlex .mail a {
    color: #fff;
    background-color: #3BAA95;
    border-radius: 20px;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 40px;
    text-decoration: none;
    position: relative;
}
.contactFlex .mail a::after {
    content: '';
    display: block;
    position: absolute;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background-color: #fff;
    height: calc(tan(30deg)* 60px / 2);
    width: 9px;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}
.contactFlex .mail a:hover {
    opacity: 0.7;
}

@media screen and (max-width: 480px) {
    h2.catTitle {
        background-color: #3baa95;
        padding: 5px 10px;
        margin: 0 0 10px 0;
    }
    .sizePic ul {
        flex-wrap: wrap;
        padding: 0;
    }
    .sizePic ul li {
        width: calc(calc(100% - 10px) / 2);
        box-sizing: border-box;
    }
    .featurePic ul {
        padding: 0;
    }
    .featurePic ul li {
        width: calc(calc(100% - 10px) / 2);
    }
    .ranking_area h2 {
        background-color: #3baa95;
        padding: 5px 10px;
        margin: 0 0 10px 0;
    }
    .header_area .ranking_area ul li:nth-child(1) .rankImg p {
        background-color: #C7AF48;
    }
    .header_area .ranking_area ul li:nth-child(2) .rankImg p {
        background-color: #D0D0D0;
    }
    .header_area .ranking_area ul li:nth-child(3) .rankImg p {
        background-color: #D1A981;
    }
    .header_area .ranking_area ul li:nth-child(4) .rankImg p {
        background-color: #99B2AD;
    }
    .ranking_under table tr {
        display: flex;
        flex-direction: column;
    }
    .ranking_under table tr td a {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .contact > p {
        margin: 20px 10px 10px;
    }
    .contact .contactFlex {
        gap: 10px;
        flex-direction: column;
    }
}




.a-kanban__banner {
  position: relative;
  width: 100%;
  aspect-ratio: 680/240; /* 元の幅と高さの比率を維持 */
  max-width: 680px;
  background-image: url(https://www.shop-add.jp/pic-labo/category_bunner_back.jpg);
  background-size: cover;
  background-position: center;
}




.a-kanban__banner-text {
  position: absolute;
  top:20%;
  left: 3.4%;
  width: 100%;
  color: #fff;
  /* text-align: center; */
}

.a-kanban__banner-text h1 {
    font-size: clamp(16px, 2.5vw, 42px);
  font-weight: bold;
  margin: 0;
  color: #3baa95;
}

.a-kanban__banner-text h1 span{
    color: #fff;
    background-color: #222;
      display: inline-flex; 
            justify-content: center; 
            align-items: center; 
            width: 30px; 
            height: 30px; 
}


.a-kanban__banner-text p { 
    margin-top: 10px;
    font-size: clamp(12px, 1vw, 18px);
  color: #222222;
  font-weight: 500;
    -webkit-text-stroke: 2px #fff;
  text-stroke: 2px #fff;
  paint-order: stroke;
  text-indent: -1em;
    padding-left: 1em;

}



.a-kanban__banner-list{
    display: flex;
    align-items: center;
    gap: 10px;
     margin-top: 20px!important;
}

.a-kanban__banner-list__item{
   
    font-size: clamp(6px, 2vw, 14px); 
    color: #3baa95;
    background-color: #fff;
    border: 1px solid #222222;
    padding: 6px 12px;
    border-radius: 5px;
    font-weight: bold;
}


@media screen and (max-width:530px){
.a-kanban__banner-list{
    margin-top: 0;
    gap: 4px;
}
}
@media screen and (max-width:530px){
.a-kanban__banner-text p {
    margin-top: 0;
}
}
@media screen and (max-width:530px){
.category_banner__text{
 margin-top:10px!important;
}
.a-kanban__banner-list{
    padding: 0!important;
    margin-top: 0!important;
}
.a-kanban__banner-text {
  top:5%;
}
.a-kanban__banner-list__item{
    padding: 2px 12px!important;

}

}

@media screen and (max-width: 480px) {
    h2.catTitle {
color: #fff;
    }
}

@media screen and (max-width: 480px) {
    .ranking_area h2 {
        color: #fff;
    }
}