/* RESPONSIVE ######################################## */

@media (max-width: 1200px){

  /* global */
  .container { max-width: 100%; padding: 0px 20px; }
  h6 { font-size: 1.4rem !important; }

  /* feat */
  #feat section { left: 0px; width: 100%; margin-left: 0px; }
  #feat section h1 { font-size: 40px; }
  #feat section p { font-size: 18px; }
  #feat figure.logo img { width: 80px; }
  #feat section .bts span a { min-width: 180px; padding: 14px 30px; }

  /* txt */
  #txt1 section h2,
  #txt2 section h2 { font-size: 30px; }
  #txt2 sup img { width: 400px; }

  /* bar */
  #bar section .item.price strong { font-size: 24px; }
  #bar section strong, #bar section small { font-size: 14px; }

  /* grid */
  #grid section article h3 { font-size: 18px; }

  /* form */
  #form aside figure h4 { font-size: 48px; }

  /* chat */
  #chat { width: 200px; }
  #chat a { padding: 16px; }
  #chat p { font-size: 14px; }

}

@media (max-width: 800px){

  /* global */
  html, body { overflow-x: hidden; }

  /* feat */
  #feat section { padding: 0px 40px; }

  /* txt */
  #txt2 section { padding-right: 0px; }
  #txt2 section h2 { width: 100%; }
  #txt2 sup { display: none; }

  /* bar */
  #bar section { flex-direction: column; }

  /* grid */
  #grid section { grid-template-columns: 1fr; padding: 0px; }
  #grid section article { padding-left: 80px; }
  #grid section article img { width: 40px; }
  #grid::before,
  #grid::after { display: none; }

  /* form */
  #form .container { flex-direction: column; }
  #form aside { width: 100%; height: 350px; border-radius: 30px; }
  #form aside figure { height: 350px; }
  #form aside figure h4 { left: 0px; width: 100%; text-align: center; padding: 0px 20px; font-size: 36px; }
  #form section { width: 100%; height: auto; padding: 20px; border-radius: 30px; }

  /* price */
  #price .table .tr.head { display: none; }
  #price .table .tr { display: block; }
  #price .table .tr span,
  #price .table .tr strong { border: none; }
  #price .table .tr.body { padding: 20px 0px; border-bottom: 1px solid #ccc; }
  #price .table .tr span:first-of-type { color: var(--red); }
  #price .table .tr.body span,
  #price .table .tr.body strong { display: block; padding: 10px 0px; text-align: center; }
  #price .table .tr.body b { display: inline-block; font-weight: bold; }

  /* map */
  #map address { font-size: 16px; }

  /* faq */
  #faq section { width: 100%; }
  #faq summary { font-size: 16px; }

}

@media (max-width: 650px){

  /* txt */
  #txt1 .container,
  #txt2 .container { flex-direction: column; }
  #txt1 section,
  #txt2 section { width: 100%; padding: 0px; }
  #txt1 aside { width: 100%; margin-top: 40px; }
  #txt2 aside { display: none; }

  /* cta */
  span#cta a { padding: 10px 60px; }

}

@media (max-width: 500px){

  /* feat */
  #feat { width: calc(100% - 40px); height: calc(100vh - 40px); margin: 20px; }
  #feat section p { font-size: 16px; }
  #feat section .bts span a { min-width: auto; padding: 14px; }

  /* txt */
  #txt1 { margin: 50px 0px; }
  #txt1 section h2, #txt2 section h2 { font-size: 24px; }

}