@charset "utf-8";
section{
    background: #fff;
}

/*------------------------------検査詳細PC*/
#kit-detail{
    padding: 60px 50px 0;
}
#kit-detail .kit-detail_ph {
width: 600px;
  margin: 0 auto;
}
.main-img {
  width: 100%;
    height:600px;
    border-radius: 10px;
    border:1px solid #333;
}
.main-img img {
  width: 100%;
    border-radius: 10px;
}
.sub-img {
  display: flex;
    flex-wrap: wrap;
  margin: 40px 0 0;
}
.sub-img li {
  margin: 0 2% 2% 0;
  width: calc(92% / 5);
}
.sub-img li:nth-child(5n) {
  margin: 0 0 0 0;
}
.sub-img li img {
  border: 2px solid transparent;
  transition: border .5s;
}
.sub-img img {
  cursor: pointer;
  width: 100%;
}
/* アクティブな画像の枠線を変更 */
.sub-img li.current img {
  border: 2px solid #97CAFF;
  transition: border .5s;
}

#kit-detail .container .kit-detail_text h1{
    font-size: 2.2em;
    font-weight: 600;
    margin: 30px 0 0;
}
#kit-detail .container .kit-detail_text h1 p{
    font-size: .6em;
}
#kit-detail .container .kit-detail_text .price{
    font-size: 1.6em;
    font-weight: 900;
    margin: 0 0 20px;
}
#kit-detail .container .kit-detail_text .price span{
    font-size: .5em;
    font-weight: normal;
}

#kit-detail .container .kit-detail_text .shipping{
    margin: 50px auto 10px;
}
#kit-detail .container .kit-detail_text .shipping h3{
    width: 100%;
    font-size: 1.2em;
    font-weight: 600;
    border-bottom: 2px solid #481809;
    margin: 0 0 10px;
}
#kit-detail .container .kit-detail_text .shipping p{
    line-height: 1.7em;
}
#kit-detail .container .kit-detail_text .shipping img{
    width: 160px;
    margin: 0 50px 0 0;
    object-fit: contain;
}

#kit-detail .container .kit-detail_text .caution{
    color: red;
}

#kit-detail .detail-list{
    margin: 50px auto 0;
}
#kit-detail .detail-list li{
   border-top:1px solid #6d645a;
    padding: 30px 0;
}
#kit-detail .detail-list li:nth-last-child(1){
   border-bottom:1px solid #6d645a;
}

#kit-detail .detail-list li h2{
    font-weight: 600;
}
#kit-detail .detail-list li h3{
    font-weight: 600;
    margin: 10px 0;
}
#kit-detail .detail-list li .accordion_contents{
    margin: 30px 0 0;
}

#kit-detail .detail-list .accordion_title:after {
    font-size: 1.2em;
  position: absolute;
  top: calc(50% - 0.5em);
  right: 20px;
}


#kit-detail .guide-link{
    font-size: .8em;
    margin: 30px auto 0;
}
#kit-detail .guide-link img{
    width: 16px;
    vertical-align: middle;
    margin: 0 0 0 5px;
}
/*--------------*/


/*------------------------------検査詳細*/
/*------------------------------スマホ*/
@media (max-width: 640px) {
    html{
        background: #fff;
    }
#kit-detail{
    padding: 5vw 5vw 0;
}    

#kit-detail .kit-detail_ph {
width: 90vw;
  margin: 0 auto;
}
.main-img {
  width: 100%;
    height:90vw;
    border-radius: 3vw;
    border:.1vw solid #333;
}
.main-img img {
  width: 100%;
    border-radius: 3vw;
}
.sub-img {
  margin: 5vw 0 0;
}

.sub-img li img {
  border: .2vw solid transparent;
}
/* アクティブな画像の枠線を変更 */
.sub-img li.current img {
  border: .2vw solid #97CAFF;
}

#kit-detail .container .kit-detail_text h1{
    line-height: 1.5em;
    font-size: 8vw;
    margin: 5vw 0 0;
}
#kit-detail .container .kit-detail_text h1 p{
    font-size: 4vw;
}
#kit-detail .container .kit-detail_text .price{
    font-size: 6vw;
    margin: 0 0 3vw;
} 
  
#kit-detail .container .kit-detail_text .shipping{
    margin: 8vw auto 4vw;
}
#kit-detail .container .kit-detail_text .shipping h3{
    font-size: 3.8vw;
    border-bottom: .1vw solid #481809;
    margin: 0 0 1vw;
}
#kit-detail .container .kit-detail_text .shipping p{
    line-height: 1.5em;
}
#kit-detail .container .kit-detail_text .shipping img{
    width: 25vw;
    margin: 0 5vw 0 0;
}
    
#kit-detail .container .kit-detail_text .caution{
    font-size: 3vw;
    border:.1vw solid red;
    padding: 3vw;
    margin: 3vw auto;
}    
    
#kit-detail .detail-list li{
   border-top:.1vw solid #6d645a;
    padding: 5vw 0;
}
#kit-detail .detail-list li:nth-last-child(1){
   border-bottom:.1vw solid #6d645a;
}

#kit-detail .detail-list li h2{
    font-size: 3.5vw;
}
    #kit-detail .detail-list li h3{
    font-size: 3.5vw;
}
#kit-detail .detail-list li .accordion_contents{
    margin: 5vw 0 0;
}

#kit-detail .detail-list .accordion_title:after {
    font-size: 4vw;
  right: 2vw;
}


#kit-detail .guide-link{
    font-size: 3.5vw;
    margin: 5vw auto 0;
}
#kit-detail .guide-link img{
    width: 4vw;
    margin: 0 0 0 2vw;
}

}
/*--------------*/

/*-----------------------------------------アレルギーについて*/
#about-allergy{
    padding: 80px 0;
}
#about-allergy h2{
    color: #89281A;
    font-size:1.6em;
    font-weight: 600;
    margin: 50px 80px 20px;
}
#about-allergy .graph{
    width: 540px;
    margin: 0 80px 0;
}
/*----------------*/

/*------------------------------アレルギーについて*/
/*------------------------------スマホ*/
@media (max-width: 640px) {
#about-allergy{
    padding: 15vw 0;
}
#about-allergy h2{
    font-size:5vw;
    margin: 5vw 10vw;
}
#about-allergy .graph{
    width: 80vw;
    margin: 0 10vw 0;
}
}
/*--------------*/


/*-----------------------------------------検査環境*/
#about-inspection{
    background:#D4D6CE;
    padding: 80px;
}
#about-inspection h2{
    color: #486433;
    font-size: 2em;
    font-weight: 600;
    text-align: center;
}
#about-inspection h2 span{
    display: block;
    font-size: .8em;
    font-weight: 300;
}
#about-inspection .flex{
    background: #fff;
    margin: 30px auto 0;
}
#about-inspection .flex p{
    margin: 30px;
}
#about-inspection .flex img{
    width: 280px;
    object-fit: contain;
}
/*----------------*/

/*------------------------------検査環境*/
/*------------------------------スマホ*/
@media (max-width: 640px) {
#about-inspection{
    padding: 10vw 10vw 15vw;
}
#about-inspection h2{
    line-height: 1.5em;
    font-size: 7vw;
    margin: 0 0 5vw;
}
#about-inspection h2 span{
    font-size: 4vw;
}
#about-inspection .flex{
    padding: 5vw;
    margin: 3vw auto 0;
}
#about-inspection .flex p{
    margin:0 5vw 0 0;
}
#about-inspection .flex img{
    width:35vw;
}
}
/*--------------*/

/*-----------------------------------------郵送のながれ*/
#flow{
    padding: 30px 0;
}
/*----------------*/

/*------------------------------郵送のながれ*/
/*------------------------------スマホ*/
@media (max-width: 640px) {
#flow{
    padding: 5vw 0;
}
}
/*----------------*/