@import url(media_q_sp.css);

@media only screen and (min-width: 820px) and (max-width: 1200px){
    html body header#header{    height:  100px;   }
    html body main#mainWrap{ margin-top:  100px;   }
}

@media (min-width: 1199px) {
    .tab-only,
    .pcHide{
        display: none !important;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape){
    header#header{    height:  100px;   }
    main#mainWrap{ margin-top:  100px;   }
}

/* タブレット（768px以上、1199px以下） */
@media (min-width: 768px) and (max-width: 1199px) {
    
    .tabHide,
    html body .pc-only{ display: none !important; }
    
    #main .tab-only{ display:  inherit; }
    
    main .def-inner{
        max-width: 100vw;
        overflow: hidden;
    }
    /*#headLogo{ width: 40%; }*/
    header #headerInner{
        padding-left: 1rem;
        padding-right: 1rem;
    }
        header #headerInner .main-btn-line, 
        header #headerInner .main-btn-line{
        gap: 0 5px;
        white-space: nowrap;
        }

    header#header{    height:  80px;   }
    main#mainWrap{ margin-top:  80px;   }

    
   .def-inner {
       /*border: 1px solid red;*/
    max-width: 100%;
    padding-left: 44px;
    padding-right: 44px;
  }
    .index-pc .frame-2{ flex-wrap: wrap; }
  #reasonWrap .frame-3{ display: block; }
  #reasonWrap .frame-4+.frame-4{ margin-top: 2rem; }
  
  .index-pc .main-cta-box{
        width: 100%;
        margin: auto ;
    
  }
  
    .index-pc .frame-4,
  .index-pc .frame-2{
        width: 90%;
        margin: auto 5%;
  }
  
    #topHero .hero-lower-img,
  #topHero,
  #topHero div.def-inner{ 
      min-height: 65vh;
  }
  
  #topHero div.def-inner{ overflow: visible; position: relative; overflow: hidden; }
  
    #topHero .copy-cont .area-box-blue{ margin-top: 3.5rem; }
    #topHero .copy-cont {
        position: relative;
        top: 6rem;
        left: 0rem;
        width: auto;
        padding-bottom: 6rem;
    }
    
    #main-cta-box  .def-inner,
    #main-cta-box{
        overflow: visible;
    }
    #main-cta-box .main-cta-box{
        height: fit-content;
        padding-left: 1rem;
        padding-right: 1rem;
        gap:  1.5rem;
    }
    #main-cta-box .main-cta-phone{
        width: fit-content;
        flex: 0 0 54%;
        text-align: center;
        margin: auto 23%;
        justify-content: center;

    }
    

    
    #topHero .hero-lower-img{
 
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
    } 
    
    #topHero img.yoshioka{
position: absolute;
width: 24rem;
        bottom: 1rem;
        left: unset;
        right: calc(-3rem + 6vw * 2);
    }
    
    #spContIcons .text-wrapper-63{ font-size: 1.2rem; line-height: 1.5;  }
    #spContIcons{
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        font-weight: bold;
        font-size: small;
    }
  
  .index-pc .copy-cont {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    position: absolute;
    top: 6rem;
    left: 3rem;
    z-index: 1;
  }
  #header-phone p{
      display: none;
  }
  
  .index-pc .main-cta-box{
      top:auto;
      left: auto;
      flex-wrap:  wrap;
  }
  #main-cta-box a{ 
      width: fit-content;
      flex: 0 0 45%;
      justify-content: center;

  }
  #main-cta-box div.main-cta-box{
      
      top: -8rem;
    position: relative;
  }
  #worries-add-cont{
      padding: 1rem 0;
  }
  #worriesWrap .worriesTx{
      font-size: 1rem;
  }
  #worriesWrap{
      background-image: none;
      background-color: var(--sub);
      padding-bottom: 4rem;
  }
  #worriesTitle{
      font-size: var(--tab-area-heading-font-size);
  }
  
  #ctaMiddleWrap,
  #caseWrap,
  #reasonWrap,
  #lawyerWrap, 
  #bengoshiWrap,
  #worriesWrap{
      padding-bottom: 4rem;
  }
  
  #reasonWrap{ background-size: contain; }
  .text-wrapper-19{ padding-top: 0.25rem; }
  
  section .sectionTitleWrap{ padding-top: 7rem; }
  #worriesWrap{ margin-top: -4rem; }
  #barsWrap{ gap: normal; padding: 2rem ; }
  
  #barsWrap .low{ width: 52%; }
  #barsWrap .middle{ width: 78%; }
  
  .index-pc .case,
  .index-pc .case-2  { 
      width: 100%;
      height: auto;
  }
  .index-pc .case-box-2{
      flex-wrap: wrap;
        width: 82%;
        height: auto;
        margin: auto 9%;
  }
  .index-pc .voice-cont{
      flex-wrap: wrap;      
  }
  .index-pc .voice-box{
      width: 100%;
      height: auto;
  }
  .index-pc .voice-flame{
    width: 62%;
        height: auto;
        margin: auto 19%;
  }
  .index-pc .flow-box,
  .index-pc .fukidashi{
      margin: auto 10%;
      width: 80%;
      text-align: center;
      
  }
  #lawyerAreaBox{ width: 100%; justify-content: center; }
  .index-pc .union{
      width: 100%;
  }
  #voiceWrap .text-wrapper-86{
      width: fit-content;
      font-size: 1.25rem;
      text-align: left;
      line-height: 1.35;
      margin-top: 0.5rem;
  }
  .index-pc .cta-title,
  .index-pc .cta-title-cont{
      width: 100%;
  }
  #footer, #ctaMiddle{
      padding-top: 4rem;
  }
  #footer h2.text-wrapper-70,
  section.ctaWrap h2.text-wrapper-70{
      font-size: 1.75rem;
  }
  .index-pc .cta-btn-set{
      width: 100%;
      flex-wrap: wrap;
      gap: 0;
  }
  #footer .cta-btn-tel,
    section.ctaWrap .cta-btn-tel{
        width: 52%;
      margin: auto 24% 2rem 24%;
      justify-content: center;
    }
    
    #footer div.ctaWrap a.main-btn-mail,
    #footer div.ctaWrap a.main-btn-line,
    section.ctaWrap a.main-btn-mail,
    section.ctaWrap a.main-btn-line{
       width: 44%;
        margin: auto 2%;
        justify-content: center;
    }
    section.ctaWrap  div.address-bg{
        padding: 1.25rem 1.5rem;    
    }
    
    div.address-detail .div-8{
        width: 46%;
        white-space: normal;
    }
    
    .index-pc .text-wrapper-72{
        font-size: 0.9rem;
    }
    .index-pc .address-detail{
        gap: 1rem;
    }
    section .sectionTitleWrap .smallTitle{
        font-size: 1.75rem;
    }
    
    .index-pc .flow-step-wrap,
    .index-pc .lawyer-lead-area{       flex-wrap: wrap;  }
    #lawyerExp{ order: 2; width: 100%; }
    #lawyerExp .lawyer-name { width: 100%; }
    #lawyerExp .lawyer-name *{
        text-align: center;
        
    }
    
    #lawyerPhoto{ 
        order: 1; width: 100%; 
        text-align: center;
        padding: 0 24% 10%;
    }
    #lawyerWrap{ 
        padding-top: 6rem;
        padding-bottom: 8rem;
    }
    .index-pc .flow-box{
        
    }
    .flow-box+.flow-box{
        margin-top: 2rem;
    }
    .index-pc .flow-step-wrap-2{ 
        width: 97%;
        flex-wrap: nowrap;
        flex-direction: row;
        margin-left: 3%;
    }
    .flow-step-wrap-2 .step-img{
        width: fit-content;
        min-width: 26%;
        height: auto;
        margin-bottom: 1rem;
    }
        .flow-step-wrap-2 .step-img img{ width: 100%; height: auto; }
    article.flow-box .div-9 *{ text-align: left; }
    article.flow-box .div-9{
        display: inline-block;
        width: 80%;
        text-align: left;
        margin-top: 1rem;
        flex:   none;
    }
    .text-wrapper-78{
            margin-right: 6rem;
        margin-bottom: 1rem;
    }
    
    #faqWrap .qa-cont{
        width: 96%;
        margin-left: 2%;
        margin-right: 2%;
    }
    
    #faqWrap  .text-wrapper-14{ width: 3rem; }
 
    #footer .text-wrapper-74{ text-align: center; line-height: 4rem; }
    .index-pc .cta-bg{ height: fit-content; }
    
    img.address-line{ margin-right: 2%; }
    

    
    article.case-2 .frame-wrapper,
    article.case .frame-wrapper{
        width: 33%;
    }
}