@media only screen and (width > 600px) {
  :root {
    --max-width: 600px;
    --header-height: 36px;
    --header-logo-width: 91px;
    --header-banner-height: 353px;
    --header-banner-image: url(/static/images/main_banner--tablet.webp)
      no-repeat center center;
    --header-banner-content-top: 40%;
    --header-banner-content-left: 40%;
    --header-banner-content-width: 342px;
    --header-banner-content-logo: 282px;
    --header-banner-content-intro-font-size: 35px;
    --header-banner-content-intro-margin-top: 17px;
    --header-banner-content-intro-line-height: 42px;
    --header-banner-content-subtext-font-size: 15px;
    --header-banner-content-subtext-line-height: 19px;
    --header-banner-content-subtext-margin-top: 30px;
    --header-slider-bullet-bottom: 42px;
    --common-section-padding: 40px 0;
    --common-section-h1-font-size: 25px;
    --contents-title-font-size: 17px;
    --contents-title-bottom: 3px;
    --contents-p-margin-top: 30px;
    --contents-p-font-size: 15px;
    --contents-li-margin: 20px;
    --contents-li-width: 650px;
    --contents-image-matching: url(/static/images/contents_image_matching--tablet.png)
      no-repeat center center;
    --contents-image-rewards: url(/static/images/contents_image_rewards--tablet.png)
      no-repeat center center;
    --contents-image-quiz: url(/static/images/contents_image_quiz--tablet.png)
      no-repeat center center;
    --contents-image-width: 600px;
    --contents-image-height: 360px;
    --contents-image-radius: 0px;
    --contents-slider-margin-top: 42px;
    --contents-slider-height: 420px;
    --contents-slider-arrow-width: 23px;
    --contents-slider-arrow-height: 47px;
    --contents-slider-arrow-location-correction: 8px;
    --contact-p-margin-top: 33px;
    --contact-p-font-size: 15px;
    --contact-p-line-height: 20px;
    --contact-map-height: 342px;
    --ci-image-margin: 35px;
    --ci-image-height: 314px;
    --ci-download-width: 234px;
    --ci-download-line-height: 69px;
    --ci-download-margin: 0 30px;
    --ci-download-font-size: 16px;
    --footer-height: 188px;
    --footer-company-font-size: 17px;
    --footer-select-font-size: 14px;
    --footer-select-width: 115px;
    --footer-select-height: 30px;
    --footer-select-padding: 0 7px;
    --footer-info-font-size: 14px;
  }
  header .size {
    max-width: var(--max-width);
  }
  header nav.mobile-nav {
    display: none;
  }
  header .pc-nav {
    display: flex;
  }
  #contents p {
    max-width: var(--max-width);
    width: unset;
    line-height: unset;
  }
  #contact .contact-info .address {
    width: unset;
  }
}

@media only screen and (width > 1024px) {
  :root {
    --max-width: 800px;
    --header-height: 50px;
    --header-logo-width: 127px;
    --header-banner-height: 600px;
    --header-banner-image: url(/static/images/main_banner--desktop.webp)
      no-repeat center center;
    --header-banner-content-top: 45%;
    --header-banner-content-left: 40%;
    --header-banner-content-width: 547px;
    --header-banner-content-logo: 345px;
    --header-banner-content-intro-font-size: 52px;
    --header-banner-content-intro-margin-top: 26px;
    --header-banner-content-intro-line-height: 59px;
    --header-banner-content-subtext-font-size: 22px;
    --header-banner-content-subtext-line-height: 26px;
    --header-banner-content-subtext-margin-top: 40px;
    --header-slider-bullet-bottom: 28px;
    --common-section-padding: 50px 0 30px 0;
    --common-section-h1-font-size: 34px;
    --contents-title-font-size: 19px;
    --contents-title-bottom: 20px;
    --contents-p-margin-top: 46px;
    --contents-p-font-size: 17px;
    --contents-li-margin: 40px;
    --contents-li-width: 848px;
    --contents-image-matching: url(/static/images/contents_image_matching--desktop.png)
      no-repeat center center;
    --contents-image-rewards: url(/static/images/contents_image_rewards--desktop.png)
      no-repeat center center;
    --contents-image-quiz: url(/static/images/contents_image_quiz--desktop.png)
      no-repeat center center;
    --contents-image-width: 798px;
    --contents-image-height: 499px;
    --contents-image-radius: 0px;
    --contents-slider-margin-top: 42px;
    --contents-slider-height: 600px;
    --contents-slider-arrow-width: 18px;
    --contents-slider-arrow-height: 40px;
    --contents-slider-arrow-location-correction: 13px;
    --contact-p-margin-top: 40px;
    --contact-p-font-size: 17px;
    --contact-p-line-height: 20px;
    --contact-map-height: 342px;
    --ci-image-margin: 40px;
    --ci-image-height: 418px;
    --ci-download-width: 234px;
    --ci-download-line-height: 69px;
    --ci-download-margin: 0 65px;
    --ci-download-font-size: 17px;
    --footer-height: 202px;
    --footer-company-font-size: 20px;
    --footer-select-font-size: 15px;
    --footer-select-width: 160px;
    --footer-select-height: 45px;
    --footer-select-padding: 0 13px;
    --footer-info-font-size: 17px;
  }
  header .size {
    max-width: var(--max-width);
  }
  header nav.mobile-nav {
    display: none;
  }
  header .pc-nav {
    display: flex;
  }
  #contents p {
    max-width: var(--max-width);
    width: unset;
    line-height: unset;
  }
  #contact .contact-info .address {
    width: unset;
  }
  /* #contact p { 
        max-width: var(--max-width);
        width: unset;
        line-height: unset;
    } */
}