/*theme name:*/

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

    .sp-br3{
        display: block;
    }
    .content3-asreet-img img{

        width: 100%;
        height: auto;
    }
    .content5_img img{

        width: 100%;
        height: auto;
    }
    

    nav ul li.child::before{
        top: 25px;
        left: 5px;
    }

    nav ul li a{
        padding: 20px 20px;
        font-size: 12px;
    }

    nav li.child ul{
        top: 60px;
        width: 100%;
    }

    .header-text h1 a{
        font-size: 20px;
    }

    .header-text p{
        font-size: 12px;
    }

    .content2 h2{
        font-size: 30px;
        width: auto;
    }

    .content2 h3,.content2 h3 span{
        font-size: 30px;
    }

    .content2 h3::after{
        bottom:-130px;
        border: 65px solid transparent;
        border-top-color: rgba(255, 187, 132, 1);
    }


    .content2-p p{
        font-size: 30px;
        width: 50%;
    }

    .content2-p span{
        font-size: 36px;
    }

    .container-p{
        max-width: 600px;
    }

    .title{
        font-size: 30px;
    }

    .content3{
        max-width: 700px;
    }

    .content3-1{
        width: 85%;
        padding-top: 55%;
    }

    .content3 h2{
        font-size: 26px;
        width: 450px;
    }

    .content3-title h4{
        font-size: 20px;
    }

    .content3-title p{
        font-size: 18px;
    }

    .content3-txt{
        width: 50%;
    }

    .content3-txt h3{
        font-size: 20px;
    }

    .right{
        right: 0;
    }

    .left{
        left: 0;
    }

    .content3-img-right{
        right: 24%;
    }

    .content4 h2{
        font-size: 30px;
    }

    .point-title h3{
        font-size: 26px;
    }

    .point-img{
        max-width: 650px;
        height: 100%;
    }

    .point p{
        font-size: 20px;
        width: 75%;
    }

    .content5 h2{
        font-size: 30px;
    }

    .content5-text{
        max-width: 600px;
    }

    .content5-text img{
        max-width: 300px;
        object-fit: cover;
    }

    .content5 h3,.content5 h3 span{
        font-size: 30px;
    }

    .hikaku{
        margin-bottom: 20%;
    }

    .hikaku img{
        border: none;

        object-fit: contain;
    }

    .hikaku p{
        margin: -8% 0;
    }

    .content6 h2,.content6 h3,.content6 h3 span{
        font-size: 30px;
    }

    .reason{
        width: 100%;
        max-width: 500px;
    }

    .reason img{
        width: 100%;
        max-width: 200px;
        max-height: 200px;
    }

    .reason-text h4{
        font-size: 45px;
        top: -50px;
     
    }

    .reason-text h5{
        font-size: 20px;
        top: -35px;
    }

    .reason-text p{
        font-size: 18px;
    }

    .content7 h2{
        font-size: 30px;
    }

    .content7-voice{
        max-width: 650px;
    }

    .voice{
        padding: 2%;
    }

    .voice p{
        font-size: 18px;
        padding: 0;
        width: 95%;
    }

    .content7-voice img{
        max-height: 200px;
        max-width: 200px;
    }

    .content8 h2,.content8 h2 span{
        font-size: 30px;
    }

    .content8-mes{
        margin-top: 5%;
        margin-bottom: 10%;
        max-width: 100%;
    }

    .content8-mes ul{
        width: 50%;
        max-width: 325px;
        min-width: auto;
    }

    .content8-mes ul li{
        font-size: 16px;
        padding: 10px 5px;
    }

    .content8-mes img{
        max-width: 300px;
        max-height: 300px;
        width: 45%;
    }

    .content8-merit{
        padding-top: 8%;
    }

    .content8-merit img{
        max-width: 250px;
        top: -25%;
    }

    .content8-merit h3{
        padding: 0px 10px 10px 15%;
    }

    .content8-merit h3 span{
        font-size: 36px;
    }

    .merit{
        max-width: 600px;
        margin-top: 5%;
    }

    .merit-1{
        font-size: 18px;
        width: 40%;
    }

    .merit-2{
        font-size: 18px;
        width: 40%;
    }

    .container{
        max-width: 650px;
    }

    .content9 h2,.content10 h2,.content11 h2{
        font-size: 30px;
    }

    .staff0{
        max-width: 650px;
        margin-bottom: 15%;
        width: 95%;
    }

    .staff0 img{
        max-width: 300px;
        height: auto;
    }

    .staff-text0{
        height: auto;
    }

    th span{
        font-size: 12px;
    }

    th, td{
        font-size: 18px;
    }

    .message{
        max-width: 600px;
        box-sizing: border-box;
        width: 95%;
    }

    .message p{
        font-size: 14px;
    }

    .message h3{
        top: -48px;
        font-size: 40px;
    }

    .staff-mult{
        max-width: 650px;
    }

    .staff img{
        max-width:250px;
        height: 240px;
    }

    .staff-table th,.staff-table td{
        font-size: 18px;
    }

    .staff-btn a{
        font-size: 20px;
    }

    .arrow::before{
        top: 20px;
        width: 10px;
        height: 10px;
    }

    .blog{
        max-width: 650px;
    }

    .content11{
        max-width: 600px;
    }

    .media li a{
        font-size: 18px;
    }

    .arrow-media::before{
        top: 28px;
        width: 10px;
        height: 10px;
    }

    .footer-left h2{
        font-size: 20px;
    }

    .footer-left p{
        font-size: 14px;
    }

    .footer-left h3{
        font-size: 30px;
    }

    .time th,.time td{
        font-size: 12px;
    }

    .access-btn,.inquiry-btn{
        padding: 10px;
    } 

    .access-btn a,.inquiry-btn a{
        font-size: 14px;
    }

    .arrow-time::before{
        top: 18px;
        width: 7px;
        height: 7px;

    }

    


}


@media screen and (max-width:650px){
    /* ハンバーガーメニューのCSS */
    nav{
       padding: 0;
       background-color: white;
   }
   
   nav ul{
       display: block;
   }
   
   nav li.child ul,
   nav li.child ul ul{
     position: relative;
   left:0;
   top:0;
   width:100%;
   visibility:visible;
   opacity:1;
   display: none;
   transition:none;
   padding: 0;
   background-color: white;
   }
       
   nav ul li a{
       border-bottom:1px solid #ccc;
   }

   /*矢印*/

   nav ul li.child::before{
       left:20px;
       top: 18px;
       border-color: #f9ae06;	
   }

   nav ul ul li.child::before{
       transform: rotate(135deg);
       left:20px;
       top: 18px;
       border-color: #f9ae06;	
   }
       
   nav ul li.child.active::before{
       transform: rotate(-45deg);
       border-color: #f9ae06;	
   }

   .menu-btn {
       position: fixed;
       top: 0; 
       right: 0; 
       display: flex; 
       height: 55px; 
       width: 55px; 
       justify-content: center;
       align-items: center; 
       z-index: 90; 
       background-color: #f9ae06; 
   }


   .menu-btn span{
       display: inline-block;
       transition: all .4s;
       position: absolute;
       left: 14px;
       height: 2px;
       border-radius: 5px;
       background: white;
       width: 45%;
   }

   .menu-btn span:nth-of-type(1) {
       top:13px;	
   }
   
   .menu-btn span:nth-of-type(2) {
       top:19px;
   }
   
   .menu-btn span:nth-of-type(3) {
       top:25px;
   }
   
   .menu-btn span:nth-of-type(3)::after {
       content:"Menu";
       position: absolute;
       top:5px;
       left:-2px;
       color: #fff;
       font-size: 0.6rem;
       text-transform: uppercase;
   }
   
   
   
   .menu-btn.active span:nth-of-type(1) {
       top: 14px;
       left: 18px;
       transform: translateY(6px) rotate(-45deg);
       width: 30%;

   }
   
   .menu-btn.active span:nth-of-type(2) {
       opacity: 0;
   }
   
   .menu-btn.active span:nth-of-type(3){
       top: 26px;
       left: 18px;
       transform: translateY(-6px) rotate(45deg);
       width: 30%;

   }
   
   .menu-btn.active span:nth-of-type(3)::after {
       content:"Close";
       transform: translateY(0) rotate(-45deg);
       top:5px;
       left:4px;
   }

   #menu-btn-check {
       display: none;
   }

   

   /*表示されるメニュー*/

   .menu-content {
       width: 100%; 
       height: 100%;
       position: fixed;
       top: 0;
       left: 100%;
       z-index: 80;
       background-color: white;
       transition: all .4s;
   }

   .menu-content ul {
       padding: 70px 10px 0; 
   }

   .menu-content ul li {
       list-style: none;
   }

   .menu-content ul li a { 
       display: block;
       width: 100%;
       font-size: 15px;
       box-sizing: border-box;
       color:#f9ae06;
       text-decoration: none;
       padding: 9px 15px 10px 0;
       position: relative;
   }

   .menu-content ul li a:hover{
       opacity: 0.7;
       color: white;
   }

   #menu-btn-check:checked ~ .menu-content {
       left: 0;
   }

   .bar{
       z-index: 80;
       height: 55px;
       position: fixed;
   }

   .header-text{
       width: 100%;
       display: flex;/*追加*/
       flex-direction: column-reverse;   /*追加*/ 
   }
   
   h1{
       margin-left: 2%;/*追加*/
   }

   .header-text p{
       margin-left: 2%;/*追加*/
   }

   .header-tell{/*追加*/
      display: none;
   }



   .header-top{
       padding-top: 13%;
   }

   .content8-merit h3{
    padding: 0px 10px 10px 20%;
    }


}

@media screen and (max-width:550px){
    .content8-merit h3{
        padding: 0px 10px 10px 30%;
    }
}



@media screen and (max-width:480px){
    .grid {
        display: grid;

        grid-template-columns: 1fr;
        width:100%;

        margin-left: auto;
        margin-right: auto;
      }
    .sp-br{
        display: block;
    }

    .sp-br2{
        display: none;
    }

    .pc-main{
        display: none;
    }

    .sp-main{
        display: block;
        width: 100%;
        height: 100%;

    }

    

    .banner{
        display: flex;
        max-width: 480px;
        width: 100%;
        position: fixed;
        z-index: 1000;
        bottom: 0;
        right: 0;
        left: 0;
        background-color: white;
    }

    .banner img{
        display: block;
        width: 100%;
        height: auto;


    }

    .banner a:hover{
        opacity: 0.7;
    }


    /* ハンバーガーメニューのCSS */
    nav{
		padding: 0;
        background-color: white;
	}
	
	nav ul{
		display: block;
	}
	
	nav li.child ul,
	nav li.child ul ul{
  	position: relative;
	left:0;
	top:0;
	width:100%;
	visibility:visible;
	opacity:1;
	display: none;
	transition:none;
    padding: 0;
    background-color: white;
    }
        
    nav ul li a{
        border-bottom:1px solid #ccc;
    }

    /*矢印*/

    nav ul li.child::before{
        left:20px;
        top: 18px;
        border-color: #f9ae06;	
    }

    nav ul ul li.child::before{
        transform: rotate(135deg);
        left:20px;
        top: 18px;
        border-color: #f9ae06;	
    }
        
    nav ul li.child.active::before{
        transform: rotate(-45deg);
        border-color: #f9ae06;	
    }

    .menu-btn {
        position: fixed;
        top: 0; 
        right: 0; 
        display: flex; 
        height: 55px; 
        width: 55px; 
        justify-content: center;
        align-items: center; 
        z-index: 90; 
        background-color: #f9ae06; 
    }


    .menu-btn span{
        display: inline-block;
        transition: all .4s;
        position: absolute;
        left: 14px;
        height: 2px;
        border-radius: 5px;
        background: white;
        width: 45%;
    }

    .menu-btn span:nth-of-type(1) {
        top:13px;	
    }
    
    .menu-btn span:nth-of-type(2) {
        top:19px;
    }
    
    .menu-btn span:nth-of-type(3) {
        top:25px;
    }
    
    .menu-btn span:nth-of-type(3)::after {
        content:"Menu";
        position: absolute;
        top:5px;
        left:-2px;
        color: #fff;
        font-size: 0.6rem;
        text-transform: uppercase;
    }
    
    
    
    .menu-btn.active span:nth-of-type(1) {
        top: 14px;
        left: 18px;
        transform: translateY(6px) rotate(-45deg);
        width: 30%;

    }
    
    .menu-btn.active span:nth-of-type(2) {
        opacity: 0;
    }
    
    .menu-btn.active span:nth-of-type(3){
        top: 26px;
        left: 18px;
        transform: translateY(-6px) rotate(45deg);
        width: 30%;

    }
    
    .menu-btn.active span:nth-of-type(3)::after {
        content:"Close";
        transform: translateY(0) rotate(-45deg);
        top:5px;
        left:4px;
    }

    #menu-btn-check {
        display: none;
    }

    

    /*表示されるメニュー*/

    .menu-content {
        width: 100%; 
        height: 100%;
        position: fixed;
        top: 0;
        left: 100%;
        z-index: 80;
        background-color: white;
        transition: all .4s;
    }

    .menu-content ul {
        padding: 70px 10px 0; 
    }

    .menu-content ul li {
        list-style: none;
    }

    .menu-content ul li a { 
        display: block;
        width: 100%;
        font-size: 15px;
        box-sizing: border-box;
        color:#f9ae06;
        text-decoration: none;
        padding: 9px 15px 10px 0;
        position: relative;
    }

    .menu-content ul li a:hover{
        opacity: 0.7;
        color: white;
    }

    #menu-btn-check:checked ~ .menu-content {
        left: 0;
    }

    .bar{
        z-index: 80;
        height: 55px;
        position: fixed;
    }

    .bar p{
        margin-left: 5%;
    }

    .header-top{
        padding-top: 70px;
        flex-direction: column;
    }

    .header-text{
        width: 100%;
    }

    .content2{
        margin-top: 5%;
    }

    .content2 h2{
        font-size: 18px;
    }
    .customer{
        width:100%;
        height: auto;
    }
    .content2-img{
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
    }
    .content2-img img{
        border: 2px solid rgba(255, 210, 169, 1);
        max-width: 100%;
    }

    .content2 h3, .content2 h3 span {
        font-size: 18px;
    }

    .content2 h3::after{
        bottom: -60px;
        border: 30px solid transparent;
        border-top-color: rgba(255, 187, 132, 1);
    }

    .content2-p img{
        width: 50%;
        height: auto;
    }

    .content2-p span,.content2-p p{
        font-size: 18px;
    }

    .container-p{
        max-width: 300px;
        width: 100%;
        display: flex;
        align-items: center;
        padding-top: 7%;
    }

    .content3 h2{
        font-size: 18px;
        width: 100%;
        box-sizing: border-box;
    }

    .title{
        font-size: 18px;
    }

    .content3-1{
        width: 100%;
        padding-top: 145%;
    }


    .content3-img-right{
        right: 50%;
        width: 55%;
        padding-top: 63%;
        top: 13%;
    }

    .content3-img-left{
        width: 55%;
        padding-top: 63%;
        top: 13%;
        left: -5%;
    }

    .content3-txt{
        width: 100%;
    }

    .left{
        left: 0;
    }

    .right{
        right: 0;
    }

    .content3-txt h3{
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .content3-title{
        top: 0;
        left: 0;
        right: 0;
        width: 80%;
        position: unset;
        margin-top: 80%;
    }

    .content3-title h4{
        font-size: 18px;
        padding: 2%;
    }

    .content3-title p{
        font-size: 16px;
        padding: 2%;
    }

    .content4 h2{
        font-size: 18px;
    }

    .point-title{
        flex-direction: column;
    }

    .point-title img{
        width: 100%;
        max-width: 100px;
        max-height: 60px;
        height: auto;
        margin-left: 1%;
        margin-right: auto;
    }

    .point-title h3{
        font-size: 18px;
        width: 95%;
        margin-left: 0;
        margin-right: 0;
    }

    .point{
        margin-top: 20%;
    }

    .point p{
        font-size: 16px;
        width: 95%;
    }


    .content5{
        margin-top: 20%;
    }

    .content5 h2{
        font-size: 18px;
    }

    .content5-text{
        max-width: 350px;
        border: 4px solid rgba(223, 216, 152, 1);
        flex-direction: column;
        box-sizing: border-box;
        width: 95%;
    }

    .content5-text img{
        max-width: 350px;
        margin: auto 0;
        object-fit: cover;
    }

    .content5-text p{
        border: unset;
        line-height: 30px;
        margin-top: 3%;
    }

    .content5 h3, .content5 h3 span {
        font-size: 18px;
    }

    @keyframes arrowmove{
        0%{bottom:1%;}
        50%{bottom:10%;}
       100%{bottom:1%;}
   }

   .hikaku{
       margin-top: -10%;
       width: 90%;
       margin-bottom: 40%;
   }
   


   .hikaku p{
       font-size: 18px;
       width: 100%;
       text-align: left;
       margin: -45% 0;
   }


   .content6 h2, .content6 h3, .content6 h3 span {
        font-size: 18px;
        padding:2%;
    }


    .reason{
        flex-direction: column-reverse;
        background-color: rgba(255, 221, 170, 1);
        position: relative;
        margin-top: 10%;
        max-width: 300px;
        width: 100%;
        box-sizing: border-box;
    }

    .reason:nth-child(even){
        flex-direction: column;
    }

    .reason img{
        width: 100%;
        max-width: 250px;
        max-height: 200px;
        margin: 25% auto 10% auto;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
    }

    .reason-text{
        background-color: unset;
    }

    .reason-text p{
        font-size: 16px;
        width: 85%;
        padding-top: 100%;
        padding-bottom: 5%;
        padding-left: 0;
        padding-right: 0;

    }


    .right-text{
        z-index: 1;
        top: 0;
        right: 0;
        left: 0;
        max-height: 500px;
    }


    .left-text{
        z-index: 1;
        top: 0;
        right: 0;
        left: 0;
        max-height: 500px;
    }


    .reason-text h4{
        font-size: 50px;
        top: -11%;
        left: 0;
    }
    

    .reason-text h5{
        font-size: 20px;
        top: 5%;
        left: 0;
        right: 0;
    }

    .content7{
        width: 100%;
        padding-bottom: 5%;
    }

    .content7 h2{
        font-size: 18px;
    }

    .content7-voice{
        max-width: 300px;
        flex-direction: column;
        align-items: center;
        margin-top: 5%;
        padding: 2%;
        background-color: white;
        width: 90%;
    }


    .content7-voice img{
        max-width: 250px;
        width: 100%;
        height: 100%;
    }

    .content7-voice:nth-child(odd){
        flex-direction: column;
    }

    .voice{
        width: 90%;
    }

    .voice p{
        font-size: 16px;
        width: 100%;
    }


    .content8 h2, .content8 h2 span{
        font-size: 20px;
    }


    .content8-mes{
        margin-top: 5%;
        position: relative;
        margin-bottom: 50%;
        flex-direction: column;
        align-items: center;
    }

    .content8-mes img{
        position: absolute;
        top: 80%;
        right: 0;
        margin: auto 0;
        width: 75%;
        max-height: 200px;
    }

    .content8-mes ul{
        width: 80%;
        max-width: 300px;
    }

    .content8-mes ul li{
        font-size: 14px;
    }


    .content8-merit img{
        max-width: 200px;
        max-height: 200px;
        top: -20%;
        left: -10%;
    }


    .content8-merit h3{
        font-size: 18px;
        padding-left: 35%;
    }

    .content8-merit h3 span{
        font-size: 20px;
    }

    .merit-1,.merit-2{
        font-size: 14px;
        padding: 5px;
        width: 40%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .container{
        max-width: 300px;
    }


    .content9 h2, .content10 h2, .content11 h2 {
        font-size: 20px;
    }

    .staff0{
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 350px;
        width: 95%;
    }


    .staff0 img{
        width: 100%;
        max-width: 350px;
    }

    .staff-text0{
        width: 100%;
        padding-bottom: 5%;
    }


    .message{
        max-width: 350px;
        width: 95%;
    }

    .message p{
        font-size: 12px;
    }

    .message h3{
        top: -36px;
        font-size: 30px;
    }

    .staff-mult{
        width: 100%;
    }

    .staff{
        width: 95%;
    }

    .staff-table{
        width: 90%;
    }

    .staff img{
        max-width: 350px;
        object-position: top;
    }

    .staff-text{
        max-width: 350px;
    }


    .staff-btn{
        width: 95%;
        max-width: 350px;
    }

    .staff-btn a{
        font-size: 16px;
    }

    .arrow::before{
        width: 5px;
        height: 5px;
    }

    .blog-content{
        width: 100%;
    }

    .blog{
        max-width: 350px;
        width: 95%;
    }

    .content10{
        margin-top: 20%;
    }

    .blog-content p, .blog-content h3, .blog-content h4{
        font-size: 16px;
    }


    .content11{
        max-width: 350px;
    }

    .media li{
        flex-direction: column;
        text-align: left;
        width: 95%;
    }

    .media li a{
        width: 90%;
        font-size: 16px;
    }

    .arrow-media::before{
        top: 41px;
        right: 5%;
    }


    .content12 a{
        width: 100%;
    }

    .content12{
        width: 95%;
        max-width: 350px;
    }

    .content12 img{
        width: 100%;
    }

    .content13{
        width: 95%;
        max-width: 350px;

    }

    .content13 img{
        width: 49%;
        margin: 0 0 1% 0;
    }


    .footer-main{
        flex-direction: column;
    }

    .footer-left{
        width: 100%;
    }

    .map-right{
        width: 100%;
    }

    .map{
        padding-top: 73.25%;
    }

    .footer-end p{
        padding: 6% 0;
    }

    .footer-end{
        margin-bottom: 22%;
    }

.kaunsering{
    left: 0 !important;
    text-align:center !important;
    top: 10px !important;
}
    

    


}