@charset "utf-8";
/* ipad対策　タブレット 1024pxとそれ以下*/
@media screen and (max-width: 750px) {

body{
  position: relative;
  z-index: -1;
}

  #header,
  #wrapper,
  .inner {
    width: 100%;
  }

  #mainBanner{
    min-height: 350px;
  }

  .logo a p {
    font-size: 1.8rem;
  }

  .info .tel {
    font-size: 16px;
  }

  section {
    margin-top: 20px;
    width: 100%;
  }

  section.service {
    margin: 0 auto;
}

  .gridWrapper {
    padding: 0 10px;
  }

  .grid {
    width: 32%;
  }

  .section-speech-inner,
  .section-line-box,
  .section-company-story-inner,
  .service-list-item-box {
    width: 600px;
    margin: 0 auto;
  }

  .story-photo {
    margin-bottom: 20px;
  }

  .service-list-item h3,
  section.overview h3 {
    padding-left: 50px;
  }
  /* 会社概要ぺージ */
  .overview {
    margin-top: 0;
  }

  /* ipad対策　タブレット 750pxとそれ以下*/
  /* @media only screen and (max-width: 750px)  */
    .section-speech-inner,
    .section-line-box,
    .section-company-story-inner,
    .service-list-item-box {
      width: 100%;
      margin: 0 auto;
    }

    #header {
      height: unset;
    }

    #header h1 {
      text-align: center;
    }

    .logo {
      float: unset;
      text-align: center;
      margin-left: 0;
    }

    .logo a p{
font-size: 2.5rem;
    }

    .logo span {
      display: block;
      margin-bottom: -65px;
    }

#footer .logo span {
  display: block;
  margin-bottom: -5px;
}


    .logo a p br{
      display: block;
    }

    .panel-res a strong {
      font-size: 1rem;
    }

    .panel-res a span {
      margin-left: 10px;
    }

    #mainNav-res {
      display: block;
    }

    .panel-res ul {
      display: block;
      height: 0;
      transition: all 0.5s;
    }

    .active ul {
      /* display: block; */
      height: 230px;
      transition: all 1s;
    }

    #mainNav-res {
      color: rgba(249, 128, 114, 1);
      background: -webkit-linear-gradient(
        top,
        #f7f7f7 0%,
        #f0f0f0 50%,
        #f5f5f5 100%
      );
      border: 1px solid #e4e4e4;
      width: 100%;
      margin: 0 auto 0;
      font-weight: bold;
    }

    #mainNav-res {
      color: rgba(249, 128, 114, 1);
      background: -webkit-linear-gradient(
        top,
        #f7f7f7 0%,
        #f0f0f0 50%,
        #f5f5f5 100%
      );
      border: 1px solid #e4e4e4;
      width: 100%;
      margin: 0 auto 0;
      font-weight: bold;
    }

    #mainNav-res a {
      display: block;
      height: 40px;
      line-height: 40px;
      font-weight: bold;
      text-align: left;
      padding-left: 10px;
    }

    #mainNav-res.home-nav{
      margin-top: -25px;
    }

    .home-nav{
      margin-top: -25px;
    }

    #wrapper {
      margin: 0px auto;
  }

  #mainBanner img{
    width: 100%;
    object-fit: cover;
    min-height: 350px;
  }


  /* その他ぺージ */
  #serviceBanner img,
  #companyBanner img{
    object-fit: cover;
    height: 200px;
  }


    /* #mainNav-res a:before {
      content: "→ ";
    } */

    .gridWrapper,
    .section-speech-inner,
    .section-line-box {
      padding-top: 0px;
      flex-direction: column;
    }

    .gridWrapper {
      margin: 0px auto;
      padding-top: 0;
    }

    .grid {
      margin: 10px auto;
      width: 95%;
    }

    .grid:nth-child(1) {
      order: 1;
    }

    .grid:nth-child(2) {
      order: 0;
    }

    .grid:nth-child(3) {
      order: 2;
    }

    .section-speech-box,
    .section-line-guidance {
      width: 80%;
      margin: auto;
    }

    .section-line 
    .section-line-box 
    .section-line-guidance
    h2{
      line-height: 2.5rem;
    }

    .section-line-guidance p{
      margin-top: 0;
      line-height: 2rem;
    }

    .representative-illust,
    .care-mg-illust {
      width: 250px;
      margin: auto;
    }

    .section-line 
    .section-line-box 
    .care-mg-illust {
      margin-top:0px;
      margin-right: 60px;
      width: 25%;
    }


    .line-account-box {
      flex-direction: column;
    }

    .section-line div.contact {
      text-align: center;
      margin: 20px auto 30px;
    }

    section.overview h3,
    section.access h3 {
      padding-left: 10px;
    }

    .info {
      float: unset;
      padding-right: 0;
      text-align: center;
    }

    div.contact a, div.line-guidance a {
      font-size: .8rem;
    }
    
    #mainNav {
      display: none;
    }

    ul.overview-list {
      margin: 0 auto;
    }

    .section-line {
      height: 680px;
      margin-bottom: 0;
      padding: 40px 0 50px;
      display: block;
      position: sticky;
      position: -webkit-sticky;
      top:-30px;
      left: 0;
      z-index: -1;
    }

    
    
    .line-account-box {
      margin: unset;
      left: 10%;
      bottom: 130px;
      /* display: block; */
      position: absolute;
      /* z-index: ; */
      width: 90%;
    }

    .link-icon,
    .QRcord {
      margin-right: 10px;
      width: 50px;
    }

    .link-icon-box p {
      margin-top: 5px;
      font-size: 0.8rem;
    }

    section.company-story {
      /* margin-top: 30px; */
      /* display: block; */
      padding-top: 50px;
      padding-bottom: 50px;
      position: relative;
      top: 0;
      left: 0;
      z-index:99 ;
    }

    .story-sentence {
      width: 80%;
    }

    .company-story-photo-box {
      display: flex;
      flex-direction: column;
      width: 80%;
      margin: auto;
    }

    .photo02,
    .photo03 {
      margin-top: 0;
      margin-left: 0;
    }

    .contact-form {
      width: 100%;
      padding-bottom: 20px;
      top: 0;
      left:0;
      position: relative;
      z-index: 5;
    }

    form,
    .contact-form-guidance {
      width: 80%;
    }

    .contact-form div {
      flex-direction: column;
      margin-bottom: 10px;
    }

    div.submit {
      margin-top: 20px;
      padding-bottom: 20px;
    }

    .contact-form div p {
      width: unset;
      margin: 3px;
      padding: unset;
    }

    input {
      height: 30px;
    }

    input,
    textarea {
      padding: 0 0 0 5px;
    }

    textarea {
      height: unset;
      line-height: 1.5;
      height: 4.5em;
    }

    .select-image {
      font-size: 0.8rem;
    }

    #footer {
      padding-top: 20px;
      width: unset;
      top: 0;
      left: 0;
      position: relative;
      z-index: 5;
    }

    .introduce p{
      font-size: .9rem;
    }

    .introduce-box01 p,
.introduce-box02 p{
  text-align: center;
    width: 100%;
}

.introduce-box01 p:first-child, 
.introduce-box02 p:first-child {
  text-align: center;
}

.introduce-box01 p:nth-child(2),
.introduce-box02 p:nth-child(2){
  margin-top: 0;
  text-align: center;
}

    .introduce-box01,
     .introduce-box02 {
      flex-direction: column;
  }

    /* address{
      top: 0;
      left: 0;
      position: relative;
      z-index: 99;
    } */

    /* サービス概要、よくある質問 */
    .service-list-item h3,
    section.overview h3 {
      padding-left: 10px;
    }

    ul.service-list li:nth-child(even) .service-list-item-box {
      flex-direction: column-reverse;
    }
    .service-list-item-box {
      flex-direction: column-reverse;
    }
    /* 会社概要 */
    ul.overview-list {
      width: 100%;
    }

    section.overview {
      margin-top: 0px;
  }

    section.access {
      margin-top: 20px;
    }

    iframe {
      margin: 10px auto;
      height: 200px;
      width: 80%;
      display: block;
    }

    .line-box {
      margin-left: 0;
      justify-content: center;
    }

    .foot-nav {
      margin-top: 0px;
      float: none;
        width: 100%;
        text-align: center;
  }

    .footer-panel {
      margin-top: 20px;
    }

    .footer-panel ul {
      display: unset;
      width: unset;
    }

    .panel-res ul li:not(:last-child),
    .footer-panel ul li:not(:last-child) {
      margin-bottom: 5px;
      /* border-bottom: rgba(235, 235, 235, 1) dashed 1px; */
    }

    .footer-panel ul li{
      display: inline-block;
      margin-bottom: 10px;
    padding: 0 7px 0 8px;
    border-right: 1px solid #b6b6b6;
    }

    #footer .logo a p {
      font-size: 1.5rem;
  }

  #footer .logo a p span{
    font-size: .8rem;
}

#footer .info ,
#footer .info span,

#footer .tel,
#footer .tel span
 {
  font-size: .8rem;
}

    .footer-panel li a {
      font-size: .7rem;
  }

  }