.html-whole{

    width:100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}




@media only screen and (max-width: 480px){
    .thumbnail-figure-img{
        flex-basis: 20%;
        width:40%;
        height:calc(100vh/10);
        padding-right: 2%;
        object-fit: cover;
    }
}

@media only screen and (min-width: 481px) and (max-width: 768px){
    .thumbnail-figure-img{
        flex-basis: 20%;
        width:40%;
        height:calc(100vh/7);
        padding-right: 2%;
        object-fit: cover;
    }
}

@media only screen and (min-width: 769px){
    .thumbnail-figure-img{
        flex-basis: 20%;
        width:40%;
        /* height:calc(100vh/10); */
        height:110px;
        padding-right: 2%;
        object-fit: cover;
    }
}



.md-10 { font-size: 1.2em; }
.md-20 { font-size: 2.0em; }

@media only screen and (max-width: 399px){
}
.md-20 { font-size: 1.5em; }
.md-40 { font-size: 3.0em; }

.md-list-fav { font-size: 1.7rem; }
@media only screen and (max-width: 780px){
    .md-list-fav { font-size: 1.3rem; }
}

.navi-count{
    position: absolute;/*絶対配置*/

    bottom: 0%;
    right: 0%;
    margin:0;
    padding:0;

    margin-bottom: 10%;
    margin-right: 4%;
    color: #777777;
    font-size: 1.5em;
    
    background-color: rgba(255, 255, 255, 0.5);
    line-height: 1;/*行高は1に*/
    padding: 3% 3%;/*文字周りの余白*/

}

.body-err-cart{
    width:100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #F6D4D8;
    border: solid 1px #D04255;
    border-radius: 3px;
    margin-top: 5%;
    padding-top: 3%;
    padding-bottom: 3%;
    padding-left:3%;
    padding-right:3%;
   

}


@media only screen and (min-width: 781px){

body{
    background-color: #FCFCFC;

}
.product-shosai-whole{
    width:100%;
    height: 100vh;
  
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    background-color: #FCFCFC;

    padding-top: 1%;

    /* max-width:1400px */


}



.body-back-whole{
    width:80%;
  
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    background-color: #FCFCFC;

    margin-top: 1%;
    margin-bottom: 1%;


}

.body-whole{
    width:80%;
  
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;

    background-color: #FCFCFC;

    /* margin-top: 3%; */


}

.body-img{

    flex-basis: 40%;
    width:100%;
    height:100%;/* 画像の大きさを指定 */
  
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;


}

.img-whole{
    flex-basis: 60%;
    width: 100%;
    /* height: 80vw;
  
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; */

    position: relative;

}


.slide-img{
    
    /* position: absolute; */

    width: 100%;
    /* height:100%;  */
    height:450px;
    overflow: hidden;
    background-color: #c6c6c6;
    object-fit: cover;

    top:0;
    left:0;
}

.img-thumbnail{
    /* height: 30%; */
    width:100%;

    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    /* 横スクロールさせる */
    overflow-x: scroll;
    margin-top:3%;
}


.body-info{
    flex-basis: 60%;
    width:100%;
  
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 7%;

}

.body-info-title{
    width:100%;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.3;
    color: #333;
    margin-bottom:1%;
}

.body-header-price {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.3;
    color: #333;
    margin-top: 1%;
    margin-bottom: 2%;
    width:100%;
  }
.body-info-description{
    font-size: 1.0rem;
    line-height: 1.75;
    margin-bottom:15%;
}

.body-info-price{
    width:100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-bottom:20px;

    padding-bottom:20px;
    border-bottom: solid 2px #CCCCCC;

}
.body-info-price-title{
    flex-basis: 50%;
    font-size: 1.5em;
    font-weight: bold;

    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;




}

.body-info-price-price{
    flex-basis: 50%;
    text-align: right;
    font-size: 1.5em;
    font-weight: bold;


}

.tax{
    font-size: 0.8em;
    font-weight: normal;
}


.body-info-zaiko{
    width:100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-bottom:20px;
    padding-bottom:10px;
    border-bottom: solid 2px #CCCCCC;
}

.body-info-zaiko-title{
    flex-basis: 50%;
    font-size: 1.0em;
}

.body-info-zaiko-status{
    flex-basis: 50%;
    font-size: 1.0em;
    text-align: right;

}

.body-info-cart{
    width:100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top:20px;
    margin-bottom:10px;

    
    /* border: solid 2px #f1f1f1;
    background-color: #f1f1f1; */
   

}


.body-info-cart-button{
    width:70%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;


    margin-top:20px;
    margin-bottom:20px;

    padding-top:20px;
    padding-bottom:20px;
    border: solid 2px #333333;
    background-color: #333333;
    color:#ffffff;

    font-size: 1.5em;
    text-align: center;

}


.body-info-back{
    width:100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top:10px;
    margin-bottom:10px;
   

}


.body-add-cart-button{
    width:70%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    margin-top:20px;
    margin-bottom:20px;

    padding-top:30px;
    padding-bottom:30px;
    border: solid 2px #CFCFCF;
    background-color: #ffffff;
    color:#777777;

    font-size: 1.5em;
    text-align: center;

}

.body-info-back-button{
    width:70%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;


    margin-top:20px;
    margin-bottom:20px;

    padding-top:20px;
    padding-bottom:20px;
    border: solid 2px #CFCFCF;
    background-color: #ffffff;
    color:#777777;

    font-size: 1.5em;
    text-align: center;

}

.cart-add-button{
    width:15%;
    max-width:80px;

    margin:0;
    padding:0;

    color: #CFCFCF;
    font-size: 1.5rem;
    
    line-height: 1;/*行高は1に*/
    padding: 3% 3%;/*文字周りの余白*/


    z-index: 9999;
}
.cart-button-img{
    width:18%;
    max-width:80px;
    position: absolute;

    top: 80%;
    right: 5%;
    margin:0;
    padding:0;

    color: #CFCFCF;
    font-size: 1.5rem;
    
    line-height: 1;
    padding: 3% 3%;

    z-index: 9999;
}

.cart-button-img.rotate {
    -webkit-animation: spin 1.5s linear infinite;
    -moz-animation: spin 1.5s linear infinite;
    -ms-animation: spin 1.5s linear infinite;
    -o-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
    0% {-moz-transform: rotate(0deg);}
    100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes spin {
    0% {-ms-transform: rotate(0deg);}
    100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes spin {
    0% {-o-transform: rotate(0deg);}
    100% {-o-transform: rotate(360deg);}
}
@keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

.fav-button{
    width:18%;
    max-width:80px;
    position: absolute;/*絶対配置*/

    top: 80%;
    left: 5%;
    margin:0;
    padding:0;

    color: #CFCFCF;
    font-size: 1.5rem;
    
    line-height: 1;/*行高は1に*/
    padding: 3% 3%;/*文字周りの余白*/


    z-index: 9999;
}

.fav-button-select{
    width:18%;
    max-width:80px;
    position: absolute;/*絶対配置*/

    top: 80%;
    left: 5%;
    margin:0;
    padding:0;

    color: #FCFCFC;
    font-size: 1.5rem;
    
    line-height: 1;/*行高は1に*/
    padding: 3% 3%;/*文字周りの余白*/


    z-index: 9999;
}


.fav-button-select-for-list{
    position: absolute;/*絶対配置*/

    top: 3%;
    left: 5%;
    margin:0;
    padding:0;

    color: #FCFCFC;
    font-size: 1.5rem;
    
    line-height: 1;/*行高は1に*/
    padding: 3% 3%;/*文字周りの余白*/


    z-index: 9999;
}


.right-navi{
    position: absolute;/*絶対配置*/

    top: 50%;
    right: 0%;
    margin:0;
    padding:0;

    color: #777777;
    font-size: 2em;
    
    background-color: rgba(255, 255, 255, 0.5);
    line-height: 1;/*行高は1に*/
    padding: 3% 3%;/*文字周りの余白*/


    z-index: 9999;
}


.left-navi{
    position: absolute;/*絶対配置*/

    top: 50%;
    left: 0%;
    margin:0;
    padding:0;

    color: #777777;
    font-size: 2em;
    
    background-color: rgba(255, 255, 255, 0.5);
    line-height: 1;/*行高は1に*/
    padding: 3% 3%;/*文字周りの余白*/


    z-index: 9999;
}

}

@media only screen and (min-width: 751px){
    .slide-img{
        
        /* position: absolute; */

        width: 100%;
        /* height:100%;  */
        height:450px;
        overflow: hidden;
        background-color: #c6c6c6;
        object-fit: cover;

        top:0;
        left:0;
    }
}

@media only screen and (min-width: 501px) and (max-width: 750px){ 
    .slide-img {
        /* position: absolute; */
        width: 100%;
        height: 650px;
        overflow: hidden;
        background-color: #c6c6c6;
        object-fit: cover;
        /* top: 0; */
        /* left: 0; */
    }
}
@media only screen and (max-width: 500px){
    .slide-img {
        /* position: absolute; */
        width: 100%;
        height: 450px;
        overflow: hidden;
        background-color: #c6c6c6;
        object-fit: cover;
        /* top: 0; */
        /* left: 0; */
      }
}
@media only screen and (max-width: 780px){
    .product-shosai-whole {
      width: 100%;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      background-color: #FCFCFC;
      padding-top: 1%;
    }
    .body-back-whole {
      width: 90%;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      background-color: #FCFCFC;
      margin-top: 3%;
      margin-bottom: 2%;
    }
    .body-whole {
      width: 90%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      background-color: #FCFCFC;
      /* margin-top: 3%; */
    }
    .body-img {
      /* flex-basis: 60%; */
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }
    .img-whole {
      /* flex-basis: 60%; */
      width: 100%;
      position: relative;
    }

    .cart-add-button {
        width:15%;
        font-size: 1.5rem;
        padding: 3% 3%;
        z-index: 9999;
    }
    .cart-button-img {
        width:18%;
        position: absolute;
        top: 80%;
        right: 5%;
        margin: 0;
        padding: 0;
        /* color: #CFCFCF; */
        font-size: 1.5rem;
        line-height: 1;
        padding: 3% 3%;
        z-index: 9999;
    }

    .cart-button-img.rotate {
        -webkit-animation: spin 1.5s linear infinite;
        -moz-animation: spin 1.5s linear infinite;
        -ms-animation: spin 1.5s linear infinite;
        -o-animation: spin 1.5s linear infinite;
        animation: spin 1.5s linear infinite;
    }
    
    @-webkit-keyframes spin {
        0% {-webkit-transform: rotate(0deg);}
        100% {-webkit-transform: rotate(360deg);}
    }
    @-moz-keyframes spin {
        0% {-moz-transform: rotate(0deg);}
        100% {-moz-transform: rotate(360deg);}
    }
    @-ms-keyframes spin {
        0% {-ms-transform: rotate(0deg);}
        100% {-ms-transform: rotate(360deg);}
    }
    @-o-keyframes spin {
        0% {-o-transform: rotate(0deg);}
        100% {-o-transform: rotate(360deg);}
    }
    @keyframes spin {
        0% {transform: rotate(0deg);}
        100% {transform: rotate(360deg);}
    }


    .fav-button {
        width:18%;
      position: absolute;
      top: 80%;
      left: 5%;
      margin: 0;
      padding: 0;
      /* color: #CFCFCF; */
      font-size: 1.5rem;
      line-height: 1;
      padding: 3% 3%;
      z-index: 9999;
    }
    .fav-button-select{
        width:18%;
        position: absolute;
        top: 80%;
        left: 5%;
        margin: 0;
        padding: 0;
        color: #FCFCFC;
        font-size: 1.5rem;
        line-height: 1;
        padding: 3% 3%;
        z-index: 9999;
    }
    
    .fav-button-select-for-list{
        position: absolute;
      top: 3%;
      left: 5%;
      margin: 0;
      padding: 0;
      color: #FCFCFC;
      font-size: 1.5rem;
      line-height: 1;
      padding: 3% 3%;
      z-index: 9999;
    }


    .right-navi {
        position: absolute;
        top: 50%;
        right: 0;
        margin: 0;
        padding: 0;
        color: #777777;
        font-size: 1em;
        background-color: rgba(255, 255, 255, 0.5);
        line-height: 1;
        padding: 3% 3%;
        z-index: 9999;
      }
    .left-navi {
      position: absolute;
      top: 50%;
      left: 0;
      margin: 0;
      padding: 0;
      color: #777777;
      font-size: 1em;
      background-color: rgba(255, 255, 255, 0.5);
      line-height: 1;
      padding: 3% 3%;
      z-index: 9999;
    }
    .img-thumbnail {
        height: 150px;
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-start;
      overflow-x: scroll;
      margin-top: 2%;
    }
    .thumbnail-figure-img {
      /* flex-basis: 20%; */
      width: 40%;
      /* height: calc(100vh/7); */
      height: 110px;
      padding-right: 2%;
      object-fit: cover;
    }
    .body-info {
      /* flex-basis: 40%; */
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      /* margin-left: 7%; */
      margin-top: 5%;
    }
    .body-info-title {
      font-size: 1.5rem;
      font-weight: bold;
      line-height: 1.3;
      color: #333;
      margin-top: 1%;
      width:100%;
    }

    .body-header-price {
        font-size: 1.5rem;
        font-weight: bold;
        line-height: 1.3;
        color: #333;
        margin-top: 1%;
        margin-bottom: 5%;
        width:100%;
      }
    .body-info-description {
      font-size: 0.8rem;
      line-height: 1.75;
      margin-bottom: 15%;
      width:100%;
    }


    /* .body-info-title{
        font-size: 2em;
        font-weight: bold;
        line-height: 1.3;
        color: #333;
        margin-bottom:5%;
    } */

    /* .body-info-description{
        font-size: 1.5em;
        line-height: 1.75;
        margin-bottom:15%;
    } */

    .body-info-price{
        width:100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        margin-bottom:20px;

        padding-bottom:20px;
        border-bottom: solid 2px #CCCCCC;

    }
    .body-info-price-title{
        flex-basis: 50%;
        font-size: 1.5em;
        font-weight: bold;

        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;




    }

    .body-info-price-price{
        flex-basis: 50%;
        text-align: right;
        font-size: 1.5em;
        font-weight: bold;


    }

    .tax{
        font-size: 0.8em;
        font-weight: normal;
    }


    .body-info-zaiko{
        width:100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        margin-bottom:20px;
        padding-bottom:10px;
        border-bottom: solid 2px #CCCCCC;
    }

    .body-info-zaiko-title{
        flex-basis: 50%;
        font-size: 1.0em;
    }

    .body-info-zaiko-status{
        flex-basis: 50%;
        font-size: 1.0em;
        text-align: right;

    }

    .body-info-cart{
        width:100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        /* margin-top:20px;
        margin-bottom:10px; */

        
        /* border: solid 2px #CCCCCC;
        background-color: #CCCCCC; */
    

    }

    .body-info-cart-button{
        width:70%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;


        margin-top:10px;
        /* margin-bottom:20px; */

        padding-top:20px;
        padding-bottom:20px;
        border: solid 2px #333333;
        background-color: #333333;
        color:#ffffff;

        font-size: 1.5em;
        text-align: center;

    }


    .body-info-back{
        width:100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-top:10px;
        margin-bottom:10px;
    

    }

    .body-add-cart-button{
        width:70%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;


        margin-top:10px;
        /* margin-bottom:20px; */

        padding-top:30px;
        padding-bottom:30px;
        border: solid 2px #CFCFCF;
        background-color: #ffffff;
        color:#777777;

        font-size: 1.5em;
        text-align: center;

    }

    .body-info-back-button{
        width:70%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;


        margin-top:20px;
        margin-bottom:20px;

        padding-top:20px;
        padding-bottom:20px;
        border: solid 2px #CFCFCF;
        background-color: #ffffff;
        color:#777777;

        font-size: 1.5em;
        text-align: center;

    }

    .body-view-cart-button{
        width:70%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;


        margin-top:20px;
        margin-bottom:20px;

        /* padding-top:20px; */
        padding-bottom:20px;
        border: solid 2px #CFCFCF;
        background-color: #ffffff;
        color:#777777;

        font-size: 1.5em;
        text-align: center;

    }



}

.kanren-area-whole{

    width:100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center

}


.kanren-area-list{

    width:90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center

}
.kanren-title{
    text-align: left;
    width:100%;   
}
.kanren-boder{
    width:100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-bottom:20px;

    padding-bottom:20px;
    border-bottom: solid 2px #CCCCCC;

}
.back-button-whole{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}
.back-button-word{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

}

.small-font{
    font-size: 0.7rem;
    font-weight: bold;
    text-align: left;
    line-height: 1.2;
    padding-top: 3%;
    padding-left: 7%;
    padding-right: 7%;
}


.item-zaiko-green{
    color:#23AC0E;
}
.item-zaiko-red{
    color:#C7243A;
}