@import url("https://www.wbf.co.jp/search/css/shohindetail.css");
@import url("https://use.fontawesome.com/releases/v5.12.0/css/all.css");

.margin10{
    margin: 10px;
}
.displayFlex{
    display: flex;
}
body{

}
.ShohinWrapper{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
@media screen and (max-width: 640px) {
    .ShohinWrapper{
        width: 100%;
        
        margin-right: auto;
    }
}
/*検索条件*/
.searchCondition {
    margin: 10px 0px 10px;
    padding: 0px;
    border: 1px solid #bfbfbf;
    text-align: center;
    background-color: #fff;

}
.AddSearchCondition {
    min-height: 50px;
    font-size: 16px;
    margin: 10px 0px 10px;
    padding: 0px;
    border: 1px solid #bfbfbf;
    text-align: center;
    background-color: #fff;   
    
}

.ShohinWrapper a:link{
    color: #222;
}
.searchCondition .searchcon_contents1{
    margin: 0px;
    padding: 5px;
    min-height: 50px;
    font-size: 16px;
    height:auto;/*リストが２行になる場合の為*/
    border-bottom: 1px solid #bfbfbf;
    display:flex;
    justify-content: center;
    align-items: center;
    
}
.searchCondition .searchcon_contents_3block{
    font-size: 16px;
    min-height: 50px;
    height:auto;
    display:flex;
    justify-content: center;
    align-items: center; 
}
.searchCondition .searchcon_contents2{
    margin: 0px;
    padding: 3px;
    min-height: 60px;
    height:auto;
    text-align: center;
    width:33%;
    border-right: 1px solid #bfbfbf;
    display: flex;
    justify-content: center;
    align-items: center;

}
.searchCondition .searchcon_contents3{
    margin: 0px;
    padding: 3px;
    min-height: 60px;
    height:auto;
    width:33%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.searchCondition .right{
    color: #3a77c7;
    width:10%;
}
.searchCondition{
    color: #222;
}
@media screen and (max-width: 767px) {
    .searchCondition{
        font-size: 18px;
    }
}
@media screen and (max-width: 1200px) {
    .searchCondition{
        font-size: 12px;
    }
}
.searchCondition .searchConditionBlueListAll{
    display: inline-block;
}
.searchConditionBlueList{
    margin: 5px;
    padding: 5px;
    border-radius: 5px;
    text-align: center;
    display: inline-block;
    background-color: #3a77c7;
    color: #fff;
    height: 30px;
    /*width: 100px*/
}
.searchConditionBlueList a:link{
    color: #fff;
}
@media screen and (max-width: 767px) {
    .searchConditionBlueList{
        font-size: 13px;
    }
}
@media screen and (max-width: 1200px) {
    .searchConditionBlueList{
        font-size: 10px;
    }
}
.searchConditionBlueList:hover{
    /*ふわっとさせる指定*/
    background-color: #84b0e9;
}
/*ソート順*/


.OptionList{
    padding: 10px;
    background-color: #fff;
    text-align: center;
}

.OptionList .Price{
    width: 45%;
    color: #f00;
    font-size: 20px;
    font-weight: bold;
    display: inline-block;
}

.OptionList .Btn{
    padding: 10px;
    width: 100%;
    background-color: #f90;
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.OptionList .Btn:hover{
    background-color: #ffd745;
    text-decoration: none;/* リンクに出てくる下線を無効にする*/
    transition : 1s;　/*ふわっとさせる指定*/
}
.OptionList .Title{
    color: #49b3ff;
    font-weight: bold;
    text-align: left;
}

.age_namse{
    color: #222;
    font-family: initial;
    font-weight: normal;
    font-size: 14px;
}

.OptionMeetingTable , td, th{
    background-color: #e6e6e6;
    border-style: solid ;
    border-width: 3px;
    border-color: #FFFFFF;
}

.OptionTitle{
    font-weight: bold;
    font-size: 20px;
    text-align: left;
    margin-top: 20px;
}

.AlignCenter {    
    display:flex;
    align-items:center;
}
.PlanBox1_SP {
    width: 100%;
}
.PlanBox1_PC {
    width: 30%;
}

.PlanBox2_SP {
    width: 100%;
}
.PlanBox2_PC {
    width: 60%;
    margin-left: 5%;
}

.horizontal-list {
    overflow-x: auto;
    white-space: nowrap;
    webkit-overflow-scrolling: touch;
}