.guide-whole{
    width:100%;

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

.guide-whole-title{
    width:95%;

    font-size: 1rem;
    font-weight: 700;
    text-align: left;
    margin-top: 5%;
    margin-bottom: 5%;
}


.guide-whole-title-bar{
    width:80%;
    color: #fff;
    background-color: #333;
    font-size: 0.9rem;
    font-weight: 700;
    text-align: left;
    padding-top: 2%;
    padding-bottom: 2%;
    padding-left: 2%;
    margin-top: 5%;
}
.guide-whole-title-gray-bar{
    width:80%;
    color: #333;
    background-color: #F5F5F5;
    font-size: 0.9rem;
    font-weight: 700;
    text-align: left;
    padding-top: 2%;
    padding-bottom: 2%;
    padding-left: 2%;
    margin-top: 5%;
}

.guide-whole-title-samll{
    width:80%;

    font-size: 0.9rem;
    font-weight: 700;
    text-align: left;
    padding-top: 4%;
    padding-bottom: 2%;
}
.guide-whole-words-top{
    width:80%;

    font-size: 0.9rem;
    text-align: left;
}
.guide-whole-words{
    width:80%;

    font-size: 0.9rem;
    text-align: left;
    padding-bottom: 2%;
    padding-left: 5%;
}
.guide-whole-words-only{
    width:80%;

    font-size: 0.9rem;
    text-align: left;
    padding-top: 2%;
    padding-bottom: 2%;
}

.guide-whole-spacer{
    width:80%;

    padding-top: 2%;
    margin-bottom: 2%;
    border-bottom: #CFCFCF 1px solid;
}

.guide-whole-faq{
    width:100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;

}
.guide-whole-title-faq{
    width:80%;

    font-size: 0.9rem;
    font-weight: 700;
    text-align: left;
    padding-top: 4%;
    padding-bottom: 2%;


    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
}
.guide-whole-title-faq-icon{
    flex-basis: 5%;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}
.guide-whole-title-faq-question{
    flex-basis: 95%;
}

.guide-whole-faq-words{
    width:80%;

    font-size: 0.9rem;
    text-align: left;
    padding-bottom: 2%;
}

.toiawase-whole{
    width:100%;
    max-width:700px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;

    margin-bottom:10%;
}


.toiawase-title{
    max-width:500px;
    width:95%; 
    margin-bottom:0.5%;
}


.contract-input-whole{
    max-width:500px;
    width:95%;                /* 横の幅を100% */
    text-align: center;        /* テキスト中央揃え */
    color:#555555;
    font-weight:bold;
    font-size: 1.0rem;   /*0.8倍の大きさに*/
    
    margin-bottom:5%;
    
    display: flex;             /* 段組 */
    flex-wrap: nowrap;         /* 折り返しなし */
    flex-direction: row;
    justify-content: flex-start;/*要素の均等配置それぞれの要素に余白あり */
    align-items:flex-start;
    align-content:center;
    
}

.contract-input {
    color:#555555;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-weight:500;
    font-size: 1.2rem;   /*0.8倍の大きさに*/
    
    border: solid 1px #CCCCCC;
    border-radius: 5px;
    
    background: #FFFFFF;
    transition: all 0.3s;
    padding: 2.5%;
    width:100%;
    box-sizing: border-box;
    outline:0;
}

.contract-input:focus { 
    /*border:6.5px solid #BF1E56; */
    /*border:6.5px solid #EDAD0B; */
    border:1px solid #333333;  
}


.textarea-mobile-toiawase{
    font-size: 1.5rem; 
    border-radius: 5px;
    width:100%;
    height:200px;
    border: solid 1px #CCCCCC;
}
.textarea-mobile-toiawase:focus { 
    border:1px solid #333333;  
}
@media only screen and (max-width: 780px) {
    .textarea-mobile-toiawase{
        font-size: 1.2rem;
        width:100%;
        height:300px;
    }
}

.toiawase-button{
    width:50%;                /* 横の幅を100% */
    /* color:#555555; */
    /* border: solid 3px #F8D94B;
    background-color: #F8D94B; */
    color:#ffffff;
    border: solid 1px #333333;
    background-color: #333333;

    border-radius: 5px;
    font-size: 1.0rem;   /*0.8倍の大きさに*/
    font-weight:normal;
    text-align: center;        /* テキスト中央揃え */
    
    
    padding-top:3.5%;
    padding-bottom:3.5%;
}

.toiawase-comp-message{
    width:80%;                /* 横の幅を100% */
    /* color:#555555; */
    /* border: solid 3px #F8D94B;
    background-color: #F8D94B; */

    font-size: 1.0rem;   /*0.8倍の大きさに*/
    font-weight:normal;
    text-align: center;        /* テキスト中央揃え */
    
    
    padding-top:3.5%;
    padding-bottom:3.5%;
}

.kaitori-img-whole{
    width:80%;     
    display: flex;             /* 段組 */
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;/*要素の均等配置それぞれの要素に余白あり */
    align-items:center;
    align-content:center;
}

.kaitori-img-whole-img {
    flex-basis: 24%;
    position: relative;
    margin-left: 0.5%;
    margin-right: 0.5%;
    border: 1px #CFCFCF solid;
    margin-bottom: 1%;
}
@media only screen and (max-width: 800px){
    .kaitori-img-whole-img{
        flex-basis:48%;
    }

}

.kaitori-img-whole-img  p {
    position: absolute;
    width:100%;
    text-align: center;
    bottom: 0;/*画像の左上に配置*/
    left: 0;
    margin: 0; /*余計な隙間を除く*/
    color: white;/*文字を白に*/
    background-image: linear-gradient(to bottom, #999 0%, #777 100%);
    font-size: xx-small;
    line-height: 1;/*行高は1に*/
    padding: 5px 10px;/*文字周りの余白*/
}
  

.kaitori-img-whole-img img{
    width: 100%;
    object-fit: cover;

}
.kaitori-kakaku-img-whole{
    width:80%;     
    display: flex;             /* 段組 */
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;/*要素の均等配置それぞれの要素に余白あり */
    align-items:center;
    align-content:center;

}
.kaitori-kakaku-img-whole-img{
    flex-basis:19%;

    margin-right:0.5%;
    margin-left:0.5%;

    position: relative;
    
}

@media only screen and (max-width: 800px){
    .kaitori-kakaku-img-whole-img{
        flex-basis:48%;
    }

}


.kaitori-kakaku-img-whole-img  p {
    position: absolute;
    width:100%;
    height: 5rem;
    text-align: left;
    bottom: 0;/*画像の左上に配置*/
    left: 0;
    margin: 0; /*余計な隙間を除く*/
    color: white;/*文字を白に*/
    background-color: rgba(46, 46, 46, 0.7);
    font-size: xx-small;
    line-height: 1.2;/*行高は1に*/
    letter-spacing:0.25em;
    padding: 5px 5px;/*文字周りの余白*/
}
  


.kaitori-kakaku-img-whole-img img{
    width: 100%;
    height:150px;
    object-fit: cover;

    margin-bottom:1%;

}

@media only screen and (max-width: 700px){
    .kaitori-kakaku-img-whole-img img{
        height:200px;
    }

}

.about-whole-words{
    width:80%;

    font-size: 0.9rem;
    text-align: left;
    padding-bottom: 2%;
}
.about-img-whole{
    width:80%;     
    display: flex;             /* 段組 */
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;/*要素の均等配置それぞれの要素に余白あり */
    align-items:center;
    align-content:center;
}

.about-img-whole-img{
    flex-basis:33%;
}


@media only screen and (max-width: 600px){
    .about-img-whole-img{
        flex-basis:50%;
    }

}

.about-img-whole-img img{
    width: 100%;
    object-fit: cover;
    height:170px;
}

.about-img-whole-head-img{
    flex-basis:100;
    width:100%;

}
.about-img-whole-head-img img{
    width: 100%;
    object-fit: cover;

    margin-bottom:1%;

}

.kaitori-parts-button{

    width: 50%;
    border: 1px solid #333; 
    background-color: #333;
    color: #fff;
    border-radius: 50px;
    text-align: center;
    padding-top:3%;
    padding-bottom:3%;
  
    font-weight: bold;
  
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
  
}
.kaitori-parts{
    width:100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    padding-top: 1%;
    padding-bottom: 4%;
}


.kaitori-easy-whole{
    width:80%;     
    display: flex;             /* 段組 */
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;/*要素の均等配置それぞれの要素に余白あり */
    align-items: stretch;
    align-content:center;
}

@media only screen and (max-width: 800px){

    .kaitori-easy-whole{
        flex-direction: column; 
    }
}
.kaitori-easy-whole-cell {
    flex-basis: 19%;
    position: relative;
    margin-left: 0.5%;
    margin-right: 0.5%;
    border: 1px #CFCFCF solid;
    margin-bottom: 1%;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
}
@media only screen and (max-width: 800px){
    .kaitori-easy-whole-cell{
        flex-basis: 100%;
        padding: 2%;
    }

}
.kaitori-easy-whole-title{

    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;

    padding-top: 1%;
    padding-bottom: 4%;


    margin-top: 4%;
    margin-bottom: 2%;
}

.kaitori-easy-whole-description{
    width:95%;
    font-size: 0.9rem;
    text-align: left;
    /* padding-left: 10%; */
    padding-right: 3%;
    margin-bottom: 3%;
}

.kaitori-easy-whole-parts{
    width:100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    padding-top: 3%;
    padding-bottom: 4%;
}

.kaitori-easy-whole-parts-button{

    width: 80%;
    border: 1px solid #333; 
    background-color: #333;
    color: #fff;
    border-radius: 50px;
    text-align: center;
    padding-top:3%;
    padding-bottom:3%;
  
    font-weight: bold;
  
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
  
}


.mochikomi-parts-img{

    width: 100%;

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

    margin-top:3%;
    margin-bottom:3%;
}
.mochikomi-img{
    flex-basis: 100%;
    width: 100%;
    object-fit: cover;
    border: 1px solid #CFCFCF; 

}


.mochikomi-parts-guide{

    width: 100%;

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


    margin-top:3%;
    margin-bottom:3%;
}

.mochikomi-parts-guide p{
    font-size: 0.9rem;

    width: 90%;
}
.mochikomi-parts-guide a{
    color:#fff;
    border: #333;
    background-color: #333;
    border-radius: 3px;
    padding:1%;
    text-decoration: none;

}

.mochikomi-parts-guide-img{
    flex-basis: 70%;
    width: 70%;
    object-fit: cover;
    border: 1px solid #CFCFCF;    
}
.mochikomi-parts-guide-img-cell{
    width: 100%;

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


    /* margin-top:1%; */
    margin-bottom:3%;
}
.mochikomi-parts-guide-word{
    width: 60%;
    text-align: left;

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

    margin-top:3%;


}

.kaitori-easy-whole-parts-img-row{

    width: 100%;

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

    margin-top:3%;
    margin-bottom:3%;
}
.row-img{
    flex-basis: 30%;
    width: 30%;
    object-fit: cover;
    border: 1px solid #CFCFCF; 

    margin-left:0.5%;
    margin-right:0.5%;
    margin-bottom: 1%;
}
.kaitori-easy-whole-parts-img{

    width: 80%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
}
.ig-img{
    width: 100%;
    object-fit: cover;
    border: 1px solid #CFCFCF; 

    margin-top:5%;
    margin-bottom:5%;
}
.line-img-1{
    width: 50%;
    object-fit: cover;
    
    margin-top:5%;
}
.line-img-2{
    width: 91px;
    height: 91px;

    margin-top:5%;
}

.sha-file-input-label{
    appearance: none;
    font-size: 1rem;
    height:1.2em;
    padding-top:1.2em;
    padding-bottom:1.2em;
    padding-left:1.2em;
    padding-right:1.2em;
    border-radius: 5px;
    color: #ffffff;
    background-color: #333;
    cursor: pointer;
    transition: .3s;
}

input[type="file"] {
    display: none;
}

.shamail-input-whole{
    max-width:500px;
    width:95%;                /* 横の幅を100% */
    text-align: left;        /* テキスト中央揃え */
    color:#555555;
    font-weight:bold;
    font-size: 1.0rem;   /*0.8倍の大きさに*/
    
    margin-top:5%;
    margin-bottom:5%;
    
    
}

.new-column{
    width:100%;
    
    display: flex;              /* 段組 */
    flex-wrap: nowrap;            /* 折り返しあり */
    flex-direction: column;
    align-content: left;/* 要素を均等に配置 */
    align-items: flex-start;       /*最も高い要素に高さを合わせる*/
    justify-content: left;
    
    margin-top:5%;
    margin-bottom:0.2%; 
}
.drag-list{
    width:100%;

    display: flex;             /* 段組 */
    flex-wrap: nowrap;         /* 折り返しなし */
    flex-direction: row;
    justify-content: flex-start;/*要素の均等配置それぞれの要素に余白あり */
    align-items:flex-start;
    align-content:center;

    padding-inline-start: 10px;

}

.drag-list li {
    width:100%;
	line-height:3em;
	/* border:1px solid #cccccc; */
	cursor:pointer;

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

     margin-right: 1%;
}

.delete-image{
    appearance: none;
    width:100%;
    /* font-size: 1.5rem; */
    height:3.4em;
    /* padding-top:1.2em;
    padding-bottom:1.2em; */
    padding-left:0.5em;
    padding-right:0.5em;
    color: #ffffff;
    background-color: #333;
    cursor: pointer;
    transition: .3s;

    margin-bottom: 1rem;

}

.shamail-footer-whole-title {
    width: 95%;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    margin-top: 5%;
    margin-bottom: 5%;
}

.shamail-easy-whole{
    width:80%;     
    display: flex;             /* 段組 */
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;/*要素の均等配置それぞれの要素に余白あり */
    align-items: stretch;
    align-content:center;
    margin-bottom: 3%;
}

@media only screen and (max-width: 700px){

    .shamail-easy-whole{
        flex-direction: column; 
    }
}
.shamail-easy-whole-cell {
    flex-basis: 29%;
    position: relative;
    margin-left: 0.5%;
    margin-right: 0.5%;
    border: 1px #CFCFCF solid;
    margin-bottom: 1%;
    padding: 2%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
}
@media only screen and (max-width: 700px){
    .shamail-easy-whole-cell{
        flex-basis: 100%;
    }

}