@charset "UTF-8";

/* 支店電話問い合わせ用　追加2021 */
/*************************************/
/*PC（高解像度用）*/
/*************************************/
/*表示エリア*/
@media screen and (max-width:768px){
    .siten_contact_pc{
        display:none;
    }
}

.siten_contact_pc{
    /*margin-bottom:44px;*/
    margin-bottom:200px; /*ページ下部対応*/
}

.siten_select_wrapper{
    position:relative;
}

.siten_select{
   width:250px;
   /*width:100%;*/
   height:40px;
   border:1px solid #8f8f8f;
   text-align:center;
   margin-bottom:30px;
}
.siten_select:hover{
    cursor:pointer;
}
.siten_select span.text1{
   line-height:40px;
}
.siten_select span.text1::after{
    content:"";
    display:inline-block;
    vertical-align:middle;
    margin-left:16px;
    width:16px;
    height:16px;
    background-image:url("/images/contact/arrow1.png");
    background-size:cover;
}

.siten_select.on span.text1::after{
    content:"";
    display:inline-block;
    vertical-align:middle;
    margin-left:16px;
    width:16px;
    height:16px;
    background-image:url("/images/contact/arrow3.png");
    background-size:cover;
}

.area_select{
    position:absolute;
    top:41px;
    left:0x;
}
ul.ken_list{
    position:absolute;
    left:250px;
    top:-1px;
}

/*北海道東北*/
ul.ken_list.area1{
    top:-1px;/*頭ぞろえ*/
    /*top:-124px;真ん中*/
}
/*関東*/
ul.ken_list.area2{
    /*top:-41px;頭ぞろえ*/
    /*top:-124px;真ん中*/
    top:-42px;
}
/*中部*/
ul.ken_list.area3{
    /*top:-82px;頭ぞろえ*/
    top:-165px;/*真ん中;*/
}
/*近畿*/
ul.ken_list.area4{
    /*top:-124px;頭ぞろえ*/
    /*top:-247px;下ぞろえ*/
    top:-124px;/*大阪*/
}
/*中国*/
ul.ken_list.area5{
    /*top:-165px;　頭ぞろえ*/
    /*top:-165px;下ぞろえ*/
    top:-83px;/*岡山*/
}
/*四国*/
ul.ken_list.area6{
    /*top:-206px;頭ぞろえ*/
    /*top:-124px;下ぞろえ*/
    top:-83px;
}
/*九州*/
ul.ken_list.area7{
    /*top:-246px;頭ぞろえ*/
    top:-288px;/*下ぞろえ*/
}

.area_select .area_list,
.area_select .ken_list{
    display:none;
    border-bottom:1px solid #8f8f8f;
}

.area_select li:hover{
    cursor:pointer;
}

.area_select .area_list > li.lay1,
.area_select .ken_list > li.lay2{
    background-color:#FFF;
    border-left:1px solid #8f8f8f;
    border-right:1px solid #8f8f8f;
    border-top:1px solid #8f8f8f;
    border-bottom:none;
    width:250px;
    height:40px;
    text-align:center;
    position:relative;
}
.area_select .area_list li.lay1{
    font-weight:bold;
}


.area_select .area_list li.lay1:hover,
.area_select .ken_list li.lay2:hover,
.area_select .area_list li.lay1.current,
.area_select .ken_list li.lay2.current{
    background-color:#cfcfcf;
}

.area_select .area_list li.lay1.hi2,
.area_select .ken_list li.lay2.hi2{
    height:81px;
}

.area_select .area_list li.lay1 > span:after{
    content:"";
    display:block;
    width:16px;
    height:16px;
    background-image:url("/images/contact/arrow2.png");
    background-size:cover;
    position:absolute;
    top:0;
    right:20px;
}

.area_select .area_list li.lay1 span,
.area_select .ken_list li.lay2 span{
    position:absolute;
    /*
    left:50%;
    top:50%;
    transform:translate( -50% , -50% );
    */
    /*IE対策*/
    right:50%;
    bottom:50%;
    -webkit-transform: translate(50%, 50%);
    transform: translate(50%, 50%);
    
    width:100%;
    display:block;
}

.area_select li.lay1.last,
.area_select li.lay2.last{
    border-bottom:1px solid #8f8f8f;
}


.siten_contact_pc .pt10{
    margin-bottom:20px;
}


.siten_info_wrapper{
    background-color:#eeecec;
    padding:18px;
}

#town_yes{
    display:none;
    margin-bottom:15px;
}

/*県名*/
.siten_contact_pc #ken_name{
    font-size:25px;
    font-weight:bold;
    color:#000;
    margin-bottom:18px;
}

.siten_contact_pc #ken_name span.subtext{
    font-size:12px;
    font-weight:normal;
}

.siten_info_wrapper h4{
    font-size:16px;
    color:#000;
    font-weight:bold;
    margin-bottom:18px;
}
.siten_info_wrapper .label_town{
    display:none;
    color:#d60101;
    font-size:14px;
    font-weight:bold;
}

.siten_info_wrapper .option_town{
    color:#d60101;
    font-size:13px;
    font-weight:bold;
    margin-bottom:18px;
    padding-left:16px;
}

.siten_info_wrapper .item,
.siten_info_wrapper .siten_name,
.siten_info_wrapper .siten_tel{
    display:inline-block;
    vertical-align:middle;
}
.siten_info_wrapper .item{
    margin-right:20px;
}
.siten_info_wrapper .siten_name,
.siten_info_wrapper .siten_tel{
    background-color:#FFF;
    text-align:center;
    height:38px;
    line-height:40px;
    /*border:1px solid #d8d8d8;*/
}

.siten_info_wrapper .siten_name{
    width:170px;
    margin-right:33px;
}

.siten_info_wrapper .siten_tel{
    width:304px;
    font-weight:normal;
}
.siten_info_wrapper .siten_tel.active{
    font-size:22px;
    font-weight:bold;
}
.siten_info_wrapper .siten_tel a:hover{
    color:#000 !important;
    text-decoration: none !important;
}


/*PC追加対応*/
h3.section_head{
    background-color: #707070;
    color:#FFF;
}

/*************************************/
/*SP用 常時表示要素*/
/*************************************/
.siten_contact_sp{
    padding-top:30px;
    display:none;
}
@media screen and (max-width:768px){
    .siten_contact_sp{
        display:block
    }
    
    /*modal open butto */
    .siten_contact_sp #openModal{
        display:block;
        /*width:250px;*/
        height:40px;
        border:1px solid #8f8f8f;
        text-align:center;
        /*margin:0 auto 30px;*/
        margin:0 15px;/*ページ最下部のため*/
        background-color:#FFF;
     }
     .siten_contact_sp #openModal > span.text1{
        line-height:40px !important;
     }
     .siten_contact_sp #openModal > span.text1::after{
         content:"";
         display:inline-block;
         vertical-align:middle;
         margin-left:16px;
         width:16px;
         height:16px;
         background-image:url("/images/contact/arrow6.png");
         background-size:cover;
     }

     .siten_contact_sp #openModal.on > span.text1::after{
         content:"";
         display:inline-block;
         vertical-align:middle;
         margin-left:16px;
         width:16px;
         height:16px;
         background-image:url("/images/contact/arrow3.png");
         background-size:cover;
     }
     
    
}

/*************************************/
/*SP用　モーダルウィンドウ*/
/*************************************/
/* モーダルCSS */
.modalArea{
  display: none;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height:100%;
  
}

.modalBg {
  width: 100%;
  height: 100%;
  background-color: rgba(80,80,80,0.95);/*#dfdfdf*/
}

.modalWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  width: 100%;
  height:100%;

  padding: 23px 30px 23px;
  background-color: rgba(80,80,80,0.95);/*#dfdfdf*/
  overflow-y:scroll;
}
.modalContents{
    /*background-color:#eeeced;*/
    /*background-color: rgba(223,223,223,0.8);#dfdfdf*/
    position:relative;
    width:100%;
    height:100%;
}

/*******************************/
/*モーダル初期表示*/
/*******************************/
.modalContents #info_text{
    text-align:center;
    margin-bottom:25px;
    color:#FFF;
}

/*機種によって下が隠れるための措置*/
.modalContents .area_select_sp{
    padding-bottom:80px;
}

.modalContents .area_list_sp{
    border-right:1px solid #cfcfcf;
    border-left:1px solid #cfcfcf;
    border-bottom:1px solid #cfcfcf;
}

.modalContents .area_list_sp,
.modalContents .ken_list_sp{
    background-color:#FFF;
}

.modalContents .area_list_sp li{
    border-top:1px solid #cfcfcf;
    /*padding:16px 20px 16px;*/
    position:relative;
}
.modalContents .area_list_sp > li.lay1_sp{
    
}


/*current用の色付け*/
.modalContents .area_list_sp > li.lay1_sp:before{
    display:none;
}
.modalContents .area_list_sp > li.lay1_sp.current:before{
    content:"";
    display:block !important;
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:53px;
    background-color:#f2f2f2;
}

.modalContents .area_list_sp li p.text2{
    padding:0;
    background-color:transparent;
    font-weight:bold;
    position:relative;
    height:53px;
    line-height:53px;
    padding-left:16px;
    padding-right:16px;
}

.modalContents .area_list_sp > li.current{
    padding-bottom:0 !important;
}

.modalContents .area_list_sp > li.current > p.text2{
    /*margin-bottom:16px;*/
}

.modalContents .area_list_sp > li > p.text2::after{
    content:"";
    display:block;
    width:10px;
    height:10px;
    background-image:url("/images/contact/arrow4.png");
    background-size:10px 10px;
    position:absolute;
    right:16px;
    top:50%;
    transform:translate(0 , -50% );
}
.modalContents .area_list_sp > li.current > p.text2::after{
    background-image:url("/images/contact/arrow5.png");
}

.modalContents .ken_list_sp{
    display:none;
}
.modalContents .ken_list_sp li{
    padding:16px 0;
    
}

.modalContents .ken_list_sp li p.text_ken{
    padding:0 10px 0 20px;
    background-color:#FFF;
}




/***************/
 /*結果表示*/
 /**************/
/*結果表示エリア*/
/*条件1：支店数1のみ*/
.modalContents #siten_display_sp{
    display:none;
}

/*条件：支店1+通常*/
.modalContents #siten_display_sp.siten_count1{    
    position:absolute;
    width:100%;
    left:50%;
    top:50%;
    transform:translate(-50% , -50% );
    padding-top:50px;
    padding-bottom:50px;
}

/*条件：支店1+横持ち*/
@media screen and (orientation:landscape) {
    .modalContents #siten_display_sp.siten_count1{
        left:50%;
        top:0;
        transform:translate(-50% , 0 );
    }
}


/*条件1：支店数2　*/
.modalContents #siten_display_sp.siten_count2{
    position:static;
    width:100%;
    padding-top:50px;
    padding-bottom:50px;
}

 #siten_display_sp #ken_name_sp span.ken_name_sp{
     text-align:center;
     display:block;
     margin-bottom:22px;
     font-size:26px;
     font-weight:bold;
     color:#FFF;
 }
 #siten_display_sp #ken_name_sp span.subtext{
     text-align:center;
     display:block;
     margin-bottom:22px;
     font-size:13px;
     color:#FFF;
 }

 #siten_display_sp .siten_info_wrapper_sp{
     background-color:#FFF;
     border:1px solid #d8d8d8;
     padding:20px 33px; 
 }

 #siten_display_sp #town_yes_sp{
     margin-bottom:20px;
 }

 /*ラベル担当支店*/
 #siten_display_sp h4#label_tanto1_sp,
 #siten_display_sp h4#label_tanto2_sp{
     text-align:center;
     font-weight:bold;
     font-size:18px;
     margin-bottom:12px;
 }

 /*ラベル【対象エリア】*/
 #siten_display_sp .label_town_sp{
    color:#d60101;
    display:none;
    text-align:center;
    margin-bottom:13px;
 }
 #siten_display_sp .option_town_sp{
     margin:0 auto;
     max-width:600px;
     color:#d60101;
 }
 #siten_display_sp table.siten_info_tbl{
     width:100%;
     table-layout:fixed;
 }

 #siten_display_sp table.siten_info_tbl th,
 #siten_display_sp table.siten_info_tbl td{
     vertical-align:middle;
     padding:12px 0;
 }
 #siten_display_sp table.siten_info_tbl th{
     width:67px;
 }

 /*支店名*/
 #siten_display_sp table.siten_info_tbl td.siten_name_sp{
     font-size:18px;
 }
 
 /*テーブル一番下の空間を消す*/
 #siten_display_sp table.siten_info_tbl th.dan2,
 #siten_display_sp table.siten_info_tbl td.dan2{
     padding-bottom:0 !important;
 }

 #siten_display_sp table.siten_info_tbl td.siten_tel_sp > a{
     font-size:19px;
     font-weight:bold;
 }

 
 #siten_display_sp #town_no_sp{
     margin-bottom:34px;
 }

 #siten_display_sp .bottom_text{
     text-align:center;
     padding-bottom:20px;
     color:#FFF;
 }

/*********************************/
/*Closemodal style*/
/*********************************/
    .closeModal {
            z-index: 9999;
            position: fixed;
            top: 0;
            right: 0;
            padding: 26px 16px 14px 24px;
    }
    .modal_toggle_icon {
            position: relative;
            display: block;
            height: 3px;
            width: 25px;
            background: #FFF;
            -webkit-transition: ease .5s;
            transition: ease .5s;
    }
    .modal_toggle_icon:nth-child(1) {
            /*top: 0;*/
    }
    .modal_toggle_icon:nth-child(2) {
            margin: 5px 0;
    }
    .modal_toggle_icon:nth-child(3) {
            /*top: 0;*/
    }
    .modal_toggle_icon:nth-child(1) {
            top: 7px;
            right:1px;
            -webkit-transform: rotate(-225deg);
            transform: rotate(-225deg);
    }
    .modal_toggle_icon:nth-child(2) {
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            opacity: 0;
    }
    .modal_toggle_icon:nth-child(3) {
            top: -9px;
            right:1px;
            -webkit-transform: rotate(225deg);
            transform: rotate(225deg);
    }