@media screen and (max-width:768px){

  /* =========================
  common
  ========================= */

  section{
    padding:56px 0;
  }

  body{
    padding-bottom:60px;
  }
	
	p {
		font-size: 14px;
	}

  /* =========================
  header
  ========================= */

  .header-top-inner{
    min-height:auto;
    padding:16px 0 0;

    flex-direction:column;
    align-items:flex-start;
    gap:20px;
  }

  .header-top-left{
    width:100%;
  }

  .header-top-right{
    /*width:100%;

    flex-wrap:wrap;
    justify-content:space-between;
    gap:16px;*/
	  display: none;
  }

  .header-logo{
    width:calc(100% - 52px);
    height:64px;
  }
	.header-logo img {
	max-width: 100%;
        max-height: 64px;
        width: auto;
	}

  .header-title{
    font-size:24px;
  }

  .header-subtitle{
    font-size:12px;
  }

  .header-time{
    width:100%;
    font-size:12px;
  }

  .header-tel-number{
    font-size:24px;
  }

  .header-contact-btn{
    width:160px;
    min-width:auto;
    min-height:48px;

    font-size:14px;
  }

  .header-bottom{
    display:none;
  }

  .hamburger{
    display:block;
  }

  .global-nav{
    display:none;
  }
	
	.spbr {
		display: block;
	}

  /* =========================
  mv
  ========================= */

  .mv-inner{
    grid-template-columns:1fr;
  }

  .mv-copy h1{
    font-size:34px;
  }

  /* =========================
  grid
  ========================= */

  .service-grid,
  .voice-grid,
  .reason-grid,
  .area-grid,
  .service-layout,
  .service-detail-inner{
    grid-template-columns:1fr;
  }

  /* =========================
  reason
  ========================= */

  .reason-content{
    padding:24px;
  }

  .reason-content h3{
    font-size:22px;
  }

  /* =========================
  stats
  ========================= */

  .stats-grid{
    grid-template-columns:repeat(2,1fr);
    gap:32px 16px;
  }

  .stats-number{
    font-size:36px;
  }

  .stats-label{
    font-size:16px;
  }



  /* =========================
  footer
  ========================= */

  .footer-nav ul{
    flex-direction:column;
    align-items:center;
  }

  /* =========================
  company
  ========================= */

  .company-table th,
  .company-table td{
    display:block;
    width:100%;
  }

  /* =========================
  fixed cta
  ========================= */

  .fixed-cta{
    display:flex;
  }

}

/* =================================
service page responsive
================================= */

@media screen and (max-width:1024px){

  .service-page-grid{
    grid-template-columns:repeat(2,1fr);
    gap:24px;
  }

}

@media screen and (max-width:768px){

  .service-page-section{
    padding:56px 0;
  }

  .service-page-grid{
    grid-template-columns:1fr;
    gap:24px;
  }

  .service-page-image{
    /*min-height:220px;*/
  }

  .service-page-content{
    padding:24px;
  }

  .service-page-content h2{
    font-size:22px;
  }

  .service-page-content p{
    font-size:15px;
    line-height:1.8;
  }

  .service-page-btn{
    min-height:50px;
    font-size:14px;
  }

}

@media screen and (max-width:480px){

  .service-page-image{
   /* min-height:180px;*/
  }

  .service-page-content{
    padding:20px;
  }

  .service-page-content h2{
    font-size:20px;
  }

}

@media screen and (max-width:1024px){

  .price-pack-grid{
    grid-template-columns:repeat(2,1fr);
  }

}

@media screen and (max-width:768px){

  .price-pack-grid{
    grid-template-columns:1fr;
	  flex-direction: column;
  }
	
  .price-pack-grid-3col{
    grid-template-columns:1fr;
    gap:24px;
  }
	
	.price-pack-subplan p {
		text-align: left;
	}
	
	.price-pack-card {
		width: 100%;
	}
	.price-pack-image {
		min-height: initial;
	}



  .compare-table th,
  .compare-table td{
    padding:16px;
    font-size:14px;
  }



  .price-table th,
  .price-table td{
    padding:16px;
    font-size:14px;
  }



  .faq-question {
    font-size: 15px;
    padding: 20px 50px 20px 60px;
  }

  .faq-question::before,
  .faq-answer p::before {
    width: 28px;
    height: 28px;
    font-size: 14px;
    left: 15px;
  }

  .faq-question::before {
    top: 18px;
  }

  .faq-answer p {
    padding: 0 20px 20px 60px;
    font-size: 14px;
    line-height: 1.8;
  }

  .faq-question::after {
    right: 15px;
    font-size: 28px;
  }




  /* =========================
  cta
  ========================= */


  .cta-box{
    padding:20px 16px;

    border-radius:20px;
  }

  /* 上テキスト非表示 */

  .cta-content{
    display:none;
  }

  /* 下段 */

  .cta-bottom{
    gap:12px;
  }

  /* キャラ */

  .cta-chara{
    width:110px;

    flex-shrink:0;
  }

  /* ボタン */

  .cta-actions{
    width:calc(100% - 122px);
  }

  /* 電話 */

  .cta-phone{
    min-height:75px;

    margin-bottom:12px;

    border-radius:18px;
  }

  .cta-phone-small{
    margin-bottom:0;

    font-size:12px;
  }

  .cta-number{
    margin-bottom:4px;

    font-size:25px;
    line-height:1.2;
	  display:block;

  white-space:nowrap;
  }

  .cta-hour{
    font-size:11px;
  }

  /* メール */

  .cta-contact{
    min-height:60px;

    border-radius:18px;

    font-size:14px;
  }


	.cta-mailtxt {
    font-size: 18px;
}
	
	.area-section .container img {
		width: 100%;
		height: auto;
		margin: 0 auto;
	}
}


@media screen and (max-width:1024px){
	.header-title {
		font-size: 2.8vw;
	}
	.header-tel-number {
		font-size: 3vw;
	}
	.header-contact-text {
		font-size: 2.1vw;
	}
	.header-tel-box {
		min-width: initial;
		padding: 0 10px;
	}
	.header-contact-btn{
		min-width: initial;
		padding: 0 10px;
	}
}
@media screen and (max-width:768px){
	.header-title {
		font-size: 24px;
	}


  .area-grid{
    grid-template-columns:1fr;
    gap:24px;
  }

  .area-block{
    padding:24px;
  }

  .area-block dt{
    font-size:20px;
  }
	
	
	.section-faq-title{
	  font-size:24px;
	}



  .page-top{
    width:36px;
    height:36px;

    right:8px;
    bottom:80px;

    font-size:20px;
  }



  .sodaigomi-list{
    gap:16px;
	  width: 80%;
    margin: 0 auto;
  }

  .sodaigomi-list li{
    width:calc((100% - 16px) / 2);

    font-size:16px;
  }



  .service-detail-cleaninglist li{
    flex-direction:column;

    gap:24px;

    padding:24px;
  }

  .service-detail-cleaninglist li > div:first-child{
    width:100%;
  }

  .service-detail-cleaninglist h3{
    font-size:22px;
  }

  .service-detail-cleaninglist span{
    font-size:16px;
  }
	
	
	.page-title h1 {
		font-size: 26px;
	}
	
	.page-title {
		padding: 24px 0;
	}
	.section-title {
		font-size: 26px;
		line-height: 1.2;
	}
	.price-pack-content h3 {
		font-size: 16px;
	}
	
	.caution-section p {
		font-size: 14px;
	}
	
	.voice-content h3 {
		margin-bottom: 8px;
		font-size: 18px;
	}




  .contact-confirm{
    padding:24px;
  }

  .contact-confirm dl{
    flex-direction:column;
  }

  .contact-confirm dt{
    width:100%;

    padding:16px;
  }

  .contact-confirm dd{
    padding:16px;
  }

  .contact-confirm-buttons{
    flex-direction:column;
  }

  .contact-back-btn,
  .contact-submit-btn{
    width:100%;
  }

  .contact-thanks h2{
    font-size:28px;
  }



  .mv-pc{
    display:none;
  }

  .mv-sp{
    display:block;
  }

  /* ボタン共通 */

  .mv-sp .mv-btn{
    left:50%;

    transform:translateX(-50%);

    width:86%;
  }

  .mv-sp .mv-btn:hover{
    transform:
      translateX(-50%)
      translateY(-4px);
  }

  /* 電話 */

  .mv-sp .mv-btn-tel{
    top:42.6%;
	  padding-left: 15.6%;
	  bottom: initial;
  }

  /* メール */

  .mv-sp .mv-btn-mail{
    top:53.1%;
	  bottom: initial;
	  padding-left: 14.4%;
  }

  /* SPテキスト */

  .mv-sp .mv-btn-sub{
    font-size:3.2vw;
  }

  .mv-sp .mv-btn-main{
    font-size:5.6vw;
  }



  .trouble-box{
    padding:28px 24px;
  }

  .trouble-box > p{
    font-size:24px;
	  line-height: 1.4;
  }

  .trouble-box ul{
    gap:16px;
  }

  .trouble-box li{
    width:100%;

    font-size:16px;
  }

  .solution-message{
    margin-bottom:40px;

    font-size:26px;
  }

  .service-point-section h3{
    font-size:22px;
  }



  /* =========================
  footer
  ========================= */

  .site-footer{
    text-align:center;
  }

  /* ロゴ */

  .footer-logo{
    margin-bottom:32px;

    font-size:28px;
  }

  /* =========================
  nav
  ========================= */

  .footer-nav ul{
    display:flex;
    flex-direction:column;

    gap:0;

    margin:0 0 40px;
  }

  .footer-nav ul li{
    border-bottom:
      1px solid rgba(255,255,255,.12);
	  width: 100%;
  }

  .footer-nav ul li:first-child{
    border-top:
      1px solid rgba(255,255,255,.12);
  }

  /* リンク */

  .footer-nav ul li a{
    position:relative;

    display:block;

    padding:
      18px 20px
      18px 40px;

    text-align:left;

    font-size:16px;
    font-weight:700;
  }

  /* ＞ */

  .footer-nav ul li a::before{
    content:"・";

    position:absolute;

    left:16px;
    top:50%;

    transform:translateY(-50%);

    color:#a9d39e;

    font-size:14px;
    font-weight:bold;
  }

  /* =========================
  service
  ========================= */

  .footer-service-nav{
    margin-bottom:40px;

    text-align:left;
  }

  .footer-service-nav dt{
    margin-bottom:16px;
  }

  .footer-service-nav dt a{
    display:block;

    padding-bottom:12px;

    border-bottom:
      1px solid rgba(255,255,255,.15);

    text-align:center;

    font-size:18px;
    font-weight:bold;
  }

  /* サービス一覧 */

  .footer-service-links{
    display:flex;
    flex-direction:column;

    gap:0;
  }

  .footer-service-links dd{
    margin:0;

    border-bottom:
      1px solid rgba(255,255,255,.08);
  }

  .footer-service-links dd a{
    position:relative;

    display:block;

    padding:
      16px 16px
      16px 40px;

    font-size:15px;

    line-height:1.6;
  }

  /* ＞ */

  .footer-service-links dd a::before{
    content:"・";

    position:absolute;

    left:16px;
    top:50%;

    transform:translateY(-50%);

    color:#73e1d8;

    font-size:13px;
  }

  /* =========================
  contact
  ========================= */

  .footer-contact{
    margin-bottom:24px;

    line-height:2;
  }

  .footer-contact p{
    font-size:15px;
  }

  /* コピー */

  .copyright{
    font-size:13px;

    opacity:.7;
  }
	
	
	
	
	.price-pack-tel{
    min-height:56px;
  }

  .price-pack-tel-number{
    font-size:22px;
  }

  .price-pack-mail{
    min-height:56px;
  }

  .price-pack-mail-main{
    font-size:16px;
  }
	
	.service-detail-content h2{
	  font-size:24px;
	}
	
	.collection-item dd {
		padding: 16px;
		line-height: 1.7;
		font-size: 14px;
	}
	
	.collection-item dt {
		padding: 12px 15px;
		font-size: 20px;
	}
	
	
	.hamburger.active {
        position: fixed;
    }
}